How to use widgets - gd-99/symbiogd GitHub Wiki

This page will teach you to use Symbiose Widgets. These use the jQuery UI widget factory, so if you use this tool you will have much less trouble familiarizing yourself with the Symbiose Widgets.

Constructing a Widget

To construct a Widget you call a function that starts with $.Webos. (or $.w.). For example, to build the main window of an application:

var mainWindow = $.w.window.main();

Each of these functions can receive arguments depending on the widget in question. These functions return a jQuery object representing the widget. So you can use jQuery functions directly on the returned value:

var mainWindow = $.w.window.main(); //Create a widget "window"
mainWindow.find('p').hide(); //Hide all the paragraphs in "window"

You can also use X-Tags to create widgets.

Methods

Each widget has methods to perform operations on it. For example, a "window" widget has open, close, etc...

Once a widget is created, it is possible to call its methods through the main function of the widget:

var mainWindow = $.w.window.main(); //Create a widget "window"

mainWindow.window('open'); //Call the "open" method of the widget : opens the window

Additional arguments can be provided to the method following the method name. For example:

var mainWindow = $.w.window.main(); //Create a widget "window"

mainWindow.window('open'); //Open the window

var isOpened = mainWindow.window('is', 'opened'); //Call the 'is' method of the widget with the argument 'opened': we want to know if the window is open.

if (isOpened) { //Yes the window is open
   alert('The window is opened, General!'); //We exclaim
}

Options

The options in widgets are values specific to the individual widget. For example, a window title or icon. You can change options with the widget method 'option':

var mainWindow = $.w.window.main();

mainWindow.window('option', 'title', 'My Window Title');

Events

Events can be triggered by widgets, for example, when opening or closing a window.

To listen for an event, we use the 'on' method from jQuery directly on the widget:

var mainWindow = $.w.window.main();

mainWindow.on('windowclose', function() { //When the window is closed ("close" event)
   alert('But why did you close the window?!? :('); //It is sad
});

mainWindow.window('open'); //Open the window

...and then?

Think about using X-Tags for your interfaces!