Cette fonctionnalité permet de définir au départ l'interface utilisateur du gadget dans le Concepteur. Il suffit de cliquer avec la souris sur l'un de ces huit éléments de l'interface utilisateur et de le faire glisser-déplacer au niveau de l'emplacement, dans la zone d'affichage blanche, où vous voulez qu'il apparaisse dans votre gadget. Relâchez le bouton de la souris. Cet élément de l'interface utilisateur est à présent dans le gadget et il correspond à l'élément d'interface utilisateur qui est actuellement sélectionné. À l'instar de l'élément d'interface utilisateur, ses propriétés, ainsi que les valeurs de ces dernières apparaissent dans le volet Propriétés sur le côté droit. Il suffit de cliquer sur un objet de l'interface utilisateur dans la zone d'affichage pour qu'il devienne l'objet d'interface utilisateur sélectionné à l'écran.

Les objets de l'interface utilisateur incluent tous les événements, propriétés et méthodes décrits dans la section relative à l'API. Notez que les objets qui s'affichent dans cette section proviennent tous de l'objet basicElement. Par conséquent, c'est ici que vous trouverez la description d'une propriété ou d'un événement qui n'est pas spécifié pour les objets individuels. L'interface utilisateur se compose des huit éléments suivants :

• Div : cet élément permet de définir la couleur d'arrière-plan d'un élément de l'interface utilisateur ou du gadget. Il offre également un point d'accueil pour insérer ou supprimer de manière automatique les éléments de l'interface utilisateur du bloc le contenant.
• Image : indique l'image à afficher dans la vue.
• Button : objet "bouton de commande".
• Edit : indique une zone où l'utilisateur du gadget peut modifier le contenu du texte.
• Check : objet "case à cocher".
• Link : définit un lien HTML.
• Text Label : objet "libellé de texte défini".
• Content : objet de contenance contentArea. Consultez la section relative à l'API pour plus d'informations sur son utilisation.

Il est impossible de glisser-déposer les éléments de l'interface utilisateur progressbar et object, en tant qu'éléments du Concepteur. Toutefois, ils peuvent être définis dans le code XML. Remarque : le Concepteur ne vous permet pas de modifier directement le fichier XML de votre gadget. Vous devez utiliser un éditeur de texte externe.

Lorsque le volet Visualisation affiche un ou plusieurs éléments de l'interface utilisateur, sélectionnez celui de votre choix en :

• cliquant une fois dessus dans le volet Visualisation, ou
• cliquant sur son nom dans le volet Éléments.

Lorsqu'un objet est d'abord inséré dans le volet Visualisation, il apparaît sous la forme d'un enfant de l'élément view dans le volet Éléments. Il ne peut alors utiliser que son type comme identifiant. Par conséquent, si vous sélectionnez deux fois l'élément Button dans le volet Visualisation, le volet Éléments affiche deux éléments, qui sont désignés par button. Si vous dotez un élément d'un nom, par exemple Bouton1 il s'affichera dans le volet Éléments sous la forme de button (Bouton1).

Notez que la seule manière d'accéder aux événements et aux propriétés de l'objet view dans le Concepteur est de cliquer sur l'entrée view dans le volet Éléments.

Le volet Propriétés affiche les propriétés (ainsi que les valeurs dont elles sont dotées) de l'objet de l'interface utilisateur actuellement sélectionné. C'est le seul endroit où vous pouvez modifier la valeur des propriétés d'un objet et les fonctions associées à leurs événements.

Pour modifier la valeur d'une propriété, cliquez sur son nom ou sa valeur. Les options en entrée dépendent du type de la propriété.

• S'il s'agit d'une propriété booléenne, la valeur est modifiée et présente un petit menu déroulant avec les valeurs true et false. Cliquez sur la valeur que vous voulez conférer à cette propriété.
• S'il s'agit d'une propriété comportant une valeur texte ou une valeur numérique, il suffit de saisir la nouvelle valeur dans le champ de la valeur et d'appuyer sur la touche Entrée.
Certaines valeurs de propriétés, telles que mask ou la valeur background de div, peuvent correspondre à une chaîne de caractères ou à un fichier. Pour ce type de propriété, un petit cadre doté de 3 points apparaît. Si vous cliquez sur ce cadre, une fenêtre de navigation Ouvrir un fichier s'affiche. Si vous préférez utiliser à la place une valeur de chaîne, il suffit de la saisir dans le champ de valeur et d'appuyer sur la touche Entrée.

Le cas échéant, l'affichage change afin de refléter la nouvelle valeur de la propriété de l'objet de l'interface utilisateur.

Notez que certaines propriétés, comme cursor, disposent d'un ensemble défini et limité de valeurs autorisées. Le Concepteur ne vérifie pas si la valeur que vous avez entrée fait partie de l'ensemble des valeurs autorisées pour la propriété visée. Toutefois, lorsque vous essayez d'afficher votre vue, une erreur se produit.

Notez également que l'objet général view, auquel on accède en le sélectionnant dans le volet Éléments, dispose de son propre ensemble de propriétés et d'événements. Si, par exemple, vous voulez modifier la taille de la vue, cliquez sur view dans le volet Éléments. Ensuite, modifiez les valeurs height et/ou width dans le volet Propriétés.

Pour les événements, il suffit de saisir dans leur champ de valeur, le nom d'une fonction définie dans un fichier de script inclus dans le gadget. Par exemple, pour l'événement onOpen de l'objet view, entrez view_onOpen(), qui est une valeur définie dans la fonction main.js , dans son champ de valeur.

Ce volet affiche les fichiers de script utilisés par le gadget dans le fichier XML actuellement à l'écran. Ces fichiers seront compressés avec les fichiers image et XML de l'interface utilisateur une fois la conception de votre gadget terminée. Par défaut, il contient d'abord uniquement un fichier main.js. Mais vous pouvez ajouter d'autres fichiers de script et/ou supprimer le fichier main.js.

Pour ajouter un fichier de script au volet Scripts, cliquez sur l'icône représentant une feuille de papier (la plus à gauche des trois icônes). Elle ouvre un navigateur de fichiers défini pour afficher uniquement les fichiers de script, à partir du dossier de votre gadget. Recherchez le fichier de script à ajouter et cliquez sur Ouvrir. Notez que le fichier de script doit déjà exister avant de pouvoir l'ajouter ici. De la même manière que lorsque vous cliquez sur Fichier -> commandes, le fichier de script est copié dans le dossier du projet et le Concepteur l'affiche dans le volet Fichier. Il permet aussi d'ajouter une ligne <script src="filename" /> dans n'importe quel fichier XML du gadget actuellement actif au sein du volet Visualisation. Par conséquent, si par exemple, le fichier main.xml est actif, la ligne <script src="filename"/> est ajoutée uniquement au fichier main.xml, et non au fichier options.xml.

Dans le volet Scripts, une fois que vous avez sélectionné l'un des fichiers de script en cliquant dessus, vous pouvez :

• ouvrir le fichier pour le modifier en cliquant sur l'icône du milieu permettant d'ouvrir un fichier. Un nouvel onglet qui arbore le nom du fichier apparaît ainsi en haut du volet. Cliquez sur ce nouvel onglet pour transformer le volet Visualisation en un volet de modification pour le contenu du fichier.
• supprimer le fichier dans le volet Scripts en cliquant sur la croix (X), à droite. Notez que le script est supprimé immédiatement sans qu'aucune boîte de dialogue de confirmation ne s'affiche à l'écran. Par ailleurs, le fichier du script est toujours présent dans le volet Fichier et il sera compressé comme un élément du gadget à moins que vous ne le supprimiez du dossier du gadget à l'aide d'un outil de navigation externe de fichiers.

Il est important de comprendre que le volet Scripts n'affiche pas les fichiers de script stockés dans le dossier du projet, mais bien les scripts utilisés dans le fichier XML permettant de définir la vue, actuellement à l'écran.

Si vous observez le fichier main.xml juste après sa création, en cliquant sur Fichier ->Nouveau projet, vous remarquerez qu'il comporte une ligne <script src="main.js" /> dans son élément <view>. Le fichier main.js est aussi bien répertorié dans le volet Scripts, que dans le volet Fichier.

Si vous supprimez le fichier main.js du volet Script, la ligne <script src="main.js" /> disparaît de l'élément <view>. La vue de votre gadget ne disposera alors plus d'aucune information sur les fonctions définies dans le fichier. Le fichier lui-même est toujours présent dans le dossier du projet. Si vous voulez le supprimer, faites appel à un outil de navigation de fichiers externe, sinon il sera compressé dans le fichier .gg avec les autres fichiers du projet.

Enfin, notez que lors de la création d'un projet, le fichier main.xml contient automatiquement, par défaut, la ligne <script src="main.js" /> et le fichier main.js contient une définition pour la fonction view_onOpen() que le fichier main.xml utilise. Si vous supprimez le fichier main.js du volet Scripts sans fournir aucune définition d'une fonction de substitution ou sans réécrire le fichier main.xml, avec pour conséquence que la ligne view_onOpen() ne puisse plus être utilisée, un message d'erreur apparaît.

Le haut de la fenêtre du Concepteur comprend cinq commandes. Chacune d'elle propose un menu déroulant : Fichier, Édition, Affichage, Projet et Aide. Nous allons étudier ces commandes de manière détaillée.

Le menu Fichier dispose de sept commandes :

• Nouveau projet : ouvre une boîte de dialogue Enregistrer sous qui permet d'indiquer l'emplacement du dossier du nouveau projet et son nom. Cliquez sur OK, le nouveau projet apparaît dans la fenêtre Concepteur. Remarque : Si un projet est déjà affiché dans la fenêtre Concepteur, aucune invite n'apparaît à l'écran pour vous demander de l'enregistrer avant d'ouvrir un nouveau projet. Cette commande dispose d'un raccourci clavier : Ctrl-Maj-N.
• Ouvrir un projet : ouvre une boîte de dialogue Ouvrir le dossier. Vous êtes invité à rechercher le dossier d'un projet existant. Cliquez sur OK une fois que vous avez sélectionné celui de votre choix. Si le dossier sélectionné ne contient pas de fichier main.xml, un message d'erreur s'affiche dans une fenêtre popup et l'opération est abandonnée. Dans le cas contraire, le projet sélectionné s'ouvre dans la fenêtre du Concepteur. Cette commande dispose d'un raccourci clavier : Ctrl-Maj-O.
• Fermer le projet : permet de fermer le projet en cours. La fenêtre du Concepteur est alors vide (seules les commandes du menu en haut de la fenêtre restent affichées). Notez qu'aucune invite n'apparaît à l'écran pour vous demander d'enregistrer le projet qui est ouvert. Cette commande ne dispose d'aucun raccourci clavier.
• Ouvrir : permet d'ouvrir un navigateur de fichiers défini pour afficher les fichiers XML. Si vous sélectionnez et ouvrez l'un de ces fichiers, un nouvel onglet arborant le nom de ce fichier apparaît en haut de la fenêtre. En outre, si vous sélectionnez le nouvel onglet, le contenu du fichier s'affiche dans le volet Visualisation. Notez que ce nouveau fichier n'est pas ajouté au dossier de votre gadget tel qu'il apparaît dans le volet Fichier, puisque ce fichier ne se trouve pas dans le dossier du projet. Pour ajouter un fichier dans le dossier de projet, utilisez un outil de navigation externe de fichiers, par exemple l'Explorateur Windows. Cette commande dispose d'un raccourci clavier : Ctrl+O.
• Enregistrer : permet d'enregistrer n'importe quel fichier de gadget ouvert. Vous devez effectuer cette opération chaque fois que vous modifier un fichier ou les propriétés d'un objet de l'interface utilisateur. Cette commande dispose d'un raccourci clavier : Ctrl+S.
• Fermer : permet de fermer immédiatement le fichier actuellement à l'écran, dans le volet Visualisation et de supprimer l'onglet du fichier. Le fichier est, lui, toujours présent dans le volet Fichier. Cette commande dispose d'un raccourci clavier : Ctrl+F4.
• Quitter : une fenêtre popup s'affiche afin de vous demander si vous voulez enregistrer les modifications apportées au fichier main.xml. Une fois que vous avez cliqué sur Oui ou sur Non, la fenêtre du Concepteur de gadget se ferme. Cette commande dispose d'un raccourci clavier : Alt+F4.

Il convient aussi de signaler que les projets récents apparaissent dans une section du menu juste au-dessus de la commande Quitter. Si vous cliquez sur un projet récent, il s'ouvre dans la fenêtre du Concepteur.

Le menu Édition dispose de six commandes :

• Annuler : permet d'annuler l'action que vous avez effectuée dans le Concepteur, par exemple, modifier la valeur d'une propriété, déplacer un objet de l'interface utilisateur, créer un objet, etc. Lorsque vous annulez une action, vous pouvez aussi annuler toutes celles qui la précèdent. Cette commande dispose d'un raccourci clavier : Ctrl+Z.
• Rétablir : cette option apparaît grisée sauf si vous venez juste d'annuler une action. Si vous décidez finalement de ne pas annuler votre dernière action, cliquez sur cette option. Si vous avez annulé plusieurs actions, vous pouvez cliquer plusieurs fois sur l'option Rétablir afin de rétablir l'état du Concepteur. Cette commande dispose d'un raccourci clavier : Ctrl+Y.
• Couper : permet d'effectuer les opérations de découpe standard, dans le cadre des éléments de l'interface utilisateur au sein du volet Visualisation. Cette commande dispose d'un raccourci clavier : Ctrl+x.
• Copier : permet d'effectuer les opérations de copie standard, dans le cadre des éléments de l'interface utilisateur au sein du volet Visualisation. Notez que lorsque vous copiez un objet de l'interface utilisateur, le système effectue une copie exacte, en incluant notamment toutes les valeurs de propriété. Si vous copiez, par exemple, un bouton intitulé Bouton2, la copie inclura aussi la valeur Bouton2) pour la propriété de son nom. Ces deux boutons apparaîtront de manière identique dans le volet Éléments. Cette commande dispose d'un raccourci clavier : Ctrl+c.
• Coller : permet d'effectuer les opérations de collage standard, dans le cadre des éléments de l'interface utilisateur au sein du volet Visualisation. Cette commande dispose d'un raccourci clavier : Ctrl+v.
• Supprimer : permet d'effectuer les opérations de suppression standard, dans le cadre des éléments de l'interface utilisateur au sein du volet Visualisation. Cette commande dispose d'un raccourci clavier : Suppr.

Le menu Affichage dispose de cinq commandes :

• Actualiser : permet d'actualiser les différents objets et volets dans la fenêtre du Concepteur. Plus important encore, cette option permet de réinitialiser la valeur des propriétés et des variables générales du gadget, de sorte que n'importe quel code "scope" général puisse être exécuté depuis le début. Cette option permet en fait de réinitialiser le gadget, ce qui peut se révéler très utile lorsque vous le testez. Cette commande dispose d'un raccourci clavier : F5.
• Onglet suivant : permet de passer à l'onglet qui se trouve à droite de l'onglet actuellement sélectionné (haut de la fenêtre). Si c'est le dernier onglet qui est actuellement sélectionné, le système repasse alors au premier onglet. Cette commande dispose d'un raccourci clavier : Ctrl+TAB.
• Onglet précédent : permet de passer à l'onglet qui se trouve à gauche de l'onglet actuellement sélectionné. Si c'est le premier onglet qui est actuellement sélectionné, le système repasse alors au dernier onglet. Cette commande dispose d'un raccourci clavier : Ctrl+Maj+TAB.
• Console de débogage : permet d'ouvrir une console de débogage au bas de la fenêtre du Concepteur. Celle-ci occupe alors l'espace précédemment utilisé par le contenu habituel de la fenêtre. Vous pouvez redimensionner la fenêtre afin de restaurer le format des autres informations. En fonction de la case à cocher qui est activée, un message de débogage, d'information, d'avertissement et/ou d'erreur dans le cadre de l'aperçu/exécution de votre gadget, s'affiche dans cette zone. Vous pouvez également décider si les messages doivent inclure ou non le moment où ils doivent se produire. Pour masquer la Console de débogage, cliquez une nouvelle fois sur l'élément du menu Console de débogage.
• Fenêtre d'aperçu : permet de modifier le volet Visualisation de sorte qu'il affiche votre gadget en mode exécution, afin que vous puissiez tester l'interface utilisateur et la voir fonctionner. Vous pouvez aussi cliquer sur l'onglet en haut de la fenêtre Aperçu.

Le menu Projet dispose de trois commandes :

• Paramètres : permet d'afficher la boîte de dialogue Paramètres du projet. Cette commande dispose d'un raccourci clavier : F3.
• Ajouter des options d'affichage : permet d'ajouter un fichier options.xml au projet et un onglet options.xml en haut de la fenêtre. La commande Ajouter des options d'affichage est alors grisée car vous ne pouvez définir qu'un seul fichier options.xml par projet. Une fois que vous avez cliqué sur cette commande, vous devez créer et tester la vue "options", ainsi que son interface utilisateur, de la même manière que pour la vue principale.
• Compiler l'ensemble : permet de compresser les fichiers de votre gadget et de les insérer dans un fichier Project_Name.gg afin de pouvoir le distribuer. Cette commande dispose d'un raccourci clavier : F7.

Le menu Aide dispose de deux commandes :

• Guide utilisateur : permet d'ouvrir ce document dans une fenêtre de navigateur.
• À propos/font> : affiche une fenêtre popup présentant des informations limitées sur le Concepteur.