Widget Box

From eyeOS Wiki

Contents 1 Introduction 2 Widget Use 2.1 Available Generic Keys 2.2 Specific Keys 2.3 Methods 2.4 Serialization

Introduction

Box is a container consisting of a descriptive title about its content and blank space below used normally to place the actions of an application.

This widget is a key part of an application UI, so it is not uncommon to see some applications listing their options or contents using boxes.

Widget Use

Available Generic Keys

• horiz: specifies whether its horizontal coordinate must be taken from the left (0) or the right (1) border of its father element. Default value is 0 (left positioning).

• vert: specifies whether its vertical coordinate must be taken from the upper (0) or from the bottom (1) border of its father element. Default value is 0 (upper positioning).

• x: specifies the horizontal displacement inside its father element, in pixels. Default value is 10 pixels.

• y: specifies the vertical displacement inside its father element, in pixels. Default value is 10 pixels.

• cent: specifies how the widget should be centered. Possible values are:
  • 0: no centering. This is the default value.
  • 1: center both horizontal and vertically.
  • 2: center horizontally.
  • 3: center vertically.
  • 4: place the widget at the horizontal and vertical center of its container element.
  • 5: place the widget at the horizontal center of its container element.
  • 6: place the widget at the vertical center of its container element.

Please note the difference between options 1-3 and options 4-6. Options 1-3 calculate the size of the widget to ensure that the center of the widget is placed at the central point of its container, while options 4-6 set the central point coordinates as the widget's position, thus making the widget displaced from the central point.

• visible: toggles the widget visibility. Possible values are 0 (hidden) or 1 (visible). Default value is 1.

• width: sets the width of the widget, in pixels. Default width is 200 pixels.

• height: sets the height of the widget, in pixels. Default height is 200 pixels.

Specific Keys

• title: string that sets the title of the Box.
• titleCSS: specifies the name of the CSS class applied to the title of the Box. The default class applied is 'eyeBoxText'.

Methods

 addEvent(string $eventName, string $eventFunc, string $args = '')

• Description: makes the system execute a given JavaScript code every time certain event of this widget is triggered.

• Arguments:
  • eventName: the name of the JS event. Examples: onchange, onmouseup.
  • eventFunc: JavaScript code inside the function of the event.
  • args: arguments passed to the function of the event.

 hide()

• Description: makes the widget invisible.

• Arguments: none.

 remove()

• Description: removes this widget, along with its child widgets.

• Arguments: none.

 setCss(array $params)

• Description: sets CSS atributes to a widget.

• Arguments:
  • params: specifies, in the form of an associative array, the CSS attributes to be applied. Remember that both the key and value of each element must be valid CSS properties and values respectively.

 setHeight(int $height)

• Description: changes the height of the widget.

• Arguments:
  • height: new height, in pixels.

 setWidth(int $width)

• Description: changes the width of the widget.

• Arguments:
  • width: new width, in pixels.

 setX(int $x)

• Description: changes the horizontal position of the widget.

• Arguments:
  • x: new X coordinate.

 setY(int $y)

• Description: changes the vertical position of the widget.

• Arguments:
  • y: new Y coordinate.

 show()

• Description: draws the widget in the screen with the specified parameters.

• Arguments: none.

 unhide()

• Description: makes the widget visible.

• Arguments: none.

Serialization

This widget can't be serialized with the show method.