J’ai réalisé une infime partie de l’interface, puisque je me suis principalement attelé au positionnement des différents cadres que cette interface devra contenir (voir message précédent). J’ai d’ailleurs réutilisé le test que j’ai fait l’autre jour et l’ai intégré dans la partie layout. Il s’agit d’un tableau qui est mis en forme par une feuille de style CSS séparée. Le but serait ensuite de pouvoir changer à volonté l’apparence du formulaire à créer en chargeant l’une ou l’autre des feuilles de styles prédéfinies.

Concernant la conception de l’interface, j’ai décidé d’utiliser un outil que je n’ai jamais encore eu l’occasion de tester : Macromedia Dreamweaver 8. J’ai donc passé un moment à comprendre comment l’utiliser…bien que je n’ai pas exploré les 3/4 de ses possibilités!

J’ai dans un premier temps réalisé un croquis sur papier représentant l’interface principale du futur éditeur.
Cette interface devra contenir les parties suivante :

• une liste des différents composants XForms représentée sous forme d’icones
• une partie représentant le layout sur lequel les composants prendront place
• une partie contenant les options du composant sélectionné (nom, label, id, bind, etc)
• une partie contenant le contenu de l’instance XML que le formulaire manipulera (il faut au préalable avoir désigné le fichier XML contenant cette instance)
• une partie contenant les différents types simples contus dans un schéma XML, fichier qui doit également avoir été chargé au préalable

L’interface comme elle a été pensée ne reste pas statique et il se peut très bien que d’autres parties viennent s’ajouter au fur et à mesure.
Le but étant d’avoir une interface le plus simple possible, à priori tout sera directement accessible par l’interface principale. Il se peut toutefois que certaines actions nécessitent l’affichage du boîte de dialogue demandant une saisie ou une confirmation.

Dans un deuxième temps, j’ai réalisé une petite page de test représentant un tableau HTML créé dynamiquement à partir d’un script et ayant une apparence décrite dans une feuille de style séparée. Ce tableau représentera à terme le layout de l’interface. Mon but était de pouvoir ajouter des composants XForms dynamiquement dans les cellules du tableau une fois cliquées. Pour l’instant, seul une sorte de composant XForms est ajouté mais par la suite le composant à ajouter sera défini par l’icone sur laquelle l’utilisateur a cliqué dans l’interface.
J’ai passé énormément de temps pour réaliser ce petit test, j’ai perdu un temps fou à comprendre certains problèmes. Ceux-ci viennent surtout du fait que je ne suis pas encore tout à fait au point avec toutes les technologies, particuliérement le DOM. J’ai également perdu beaucoup de temps à essayer de comprendre pourquoi mes composants XForms ne s’affichaient pas pour finalement me rendre compte que l’extension de mon fichier était .html et non pas .xhtml!

Il reste sinon encore quelques points sur lesquels je ne veux pas trop m’attarder, principalement en ce qui concerne l’apparence via les feuilles de style. J’ai par exemple réussi à forcer une taille fixe pour les cellules du tableau (en mettant à chaque fois une balise div dans un td) mais par contre si le label d’un bouton (par exemple) est plus grand que la taille de la cellule, ce label ainsi que le composant sortent des bords de la cellule…ceci devra encore être corrigé mais j’estime que ce n’est pas une priorité à l’heure qu’il est.