Cette page va vous apprendre a utiliser les widgets de Symbiose. Ceux-ci utilisent le widget factory de jQuery UI, si vous utilisez déjà cet outil vous aurez beaucoup moins de mal a vous familiariser avec les widgets.

Construction d'un widget

Pour construire un widget, vous devez appeler une fonction commençant pas $.webos. (ou son raccourci $.w.). Par exemple, pour construire la fenêtre principale d'une application :

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

Chacune de ces fonctions peut recevoir des arguments, ceux-ci dépendent du widget en question. Ces fonctions retournent un objet jQuery, c'est-a-dire une variable représentant le widget. Vous pouvez donc utiliser les fonction de jQuery directement sur cette variable :

var mainWindow = $.w.window.main(); //Création d'un widget "window"
mainWindow.find('p').hide(); //Cache tous les paragraphes d'une fenêtre

Vous pouvez également utiliser X-Tags pour créer des widgets.

Méthodes

Chaque widget possède des méthodes, c'est-a-dire des fonctions qui permettent d'effectuer des opérations sur ce dernier. Par exemple, pour une fenêtre : l'ouvrir, la fermer, etc...

Une fois le widget créé, il est possible d'appeler une méthode par le biais de la fonction principale du widget :

var mainWindow = $.w.window.main(); //Création d'un widget "window"

mainWindow.window('open'); //Appel de la méthode "open" du widget : ouverture de la fenêtre

Des arguments peuvent être fournis a la méthode, ceux-ci doivent suivre le nom de la méthode. Par exemple :

var mainWindow = $.w.window.main(); //Création d'un widget "window"

mainWindow.window('open'); //Ouverture de la fenêtre

var isOpened = mainWindow.window('is', 'opened'); //Appel de la fonction "is" du widget avec comme argument "opened" : on veut savoir si la fenêtre est ouverte

if (isOpened) { //Si la fenêtre est ouverte
   alert('La fenêtre est ouverte, général !'); //On le crie haut et fort
}

Options

Les options d'un widgets sont des paramètres propres a ce widget. Par exemple, pour une fenêtre : son titre ou son icône.

Vous pouvez modifier ses options avec la méthode option :

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

mainWindow.window('option', 'title', 'Mon titre de fenêtre');

Événements

Des événements peuvent être déclenchés par les widgets, par exemple lors de l'ouverture/fermeture d'une fenêtre.

Pour écouter un événement, il faut faire précéder le nom de l’événement par le nom du widget :

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

mainWindow.on('windowclose', function() { //Lors de la fermeture de la fenêtre (événement "close")
   alert('Mais pourquoi avez-vous fermé cette fenêtre ?!? :('); //On est triste
});

mainWindow.window('open'); //Ouverture de la fenêtre

Et ensuite ?

Pensez a utiliser X-Tags pour vos interfaces !