X-Tags permet de séparer l'interface de votre application de sa logique.

Création d'une interface utilisateur

Pour créer une interface, il suffit de créer un fichier HTML /usr/share/templates/votreApplication/main.html.

Vous pourrez alors utiliser tous les éléments HTML, mais aussi les widgets de Symbiose.

<x-window-main width="300"> <!-- Une fenêtre -->
   <h1>Ma super fenêtre !</h1> <!-- Titre de la fenêtre -->
   <p>Hello World !</p>
</x-window-main>

Utilisation de widgets

Pour insérer un widget, il vous faut créer une balise ayant pour nom celui du widget précédé de x-. Par exemple, pour créer le widget switchButton, vous insérerez une balise <x-switchButton></x-switchButton>.

Vous pouvez spécifier les options des widgets en tant qu'attributs des balises. Par exemple :

<x-window-main width="300" title="Ma super fenêtre !" resizable maximizable="0"></x-window-main>

Ce code créera une fenêtre avec une largeur de 300px, avec comme titre Ma super fenêtre !, redimentionnable mais pas maximisable.

Exemple complet

Un bon exemple de l'utilisation de X-Tags est l'application The Widget Factory. Jetez un coup d'oeil au fichier /usr/share/templates/twf/main.html !

Affichage de l'interface utilisateur

Pour afficher l'interface, il faudra :

• charger votre fichier d'interface (fichier HTML décrit plus haut),
• ouvrir la fenêtre de votre application.

W.xtag.loadUI('/chemin/vers/le/fichier/html', function(myWindow) { //Chargement du fichier HTML
	$(myWindow).window('open'); //Ouverture de la fenêtre
});

Et ensuite ?

Vous pouvez consulter des exemples d'applications simples. ;-)