Example XUL

Cette section expliquera pas à pas comment décrire une calculatrice en XUL à l'aide de scripts Javascript et styles CSS . La calculatrice sera rendu dans un premier temps en SWT puis en Swing . La dernière partie de cette example expliquera comment sélectionner le renderer (SWT/Swing) a utiliser à l'aide d'un style CSS .

Cette section n'est pas un tutorial XUL, si vous n'etes pas familiariser avec XUL, veuillez vous reportez sur le site XUL .

Voici une copie d'écran de la calculatrice décrite en XUL et interpreté en SWT :

Cet exemple est découpé en plusieurs sections :

  • XUL et SWT : cette section décrira une interface basique XUL qui affiche une textbox. Ce fichier XUL sera ensuite chargé é l'aide de l'API Tk-UI pour étre interprété en SWT .
  • XUL et Calculatrice : cette section décrira l'interface XUL de la calculatrice pour afficher la textbox qui permet d'afficher l'opération à calculer et les boutons qui permettent de sélectionner un chiffre et/ou un opérateur.
  • XUL et Scripts : cette section utilisera un script qui permet de gérer la logique de la calculatrice :
    • calculer l'opération contenu dans la textbox aprés un clic sur le bouton "=".
    • mettre à jour la textbox avec la valeur du bouton cliqué (chiffres 1...9 et opérateurs +,-,*-/)
  • XUL et Styles : cette section utilisera des styles CSS pour enjoliver la calculatrice comme mettre en jaune la textbox, aligner à droite les valeus saisies dans la textbox.
  • XUL Scripts et Styles : Il est possible de gérer les styles CSS à l'aide d'un script. Cette section permettra de gérer la bordure de la textbox en fonction de la position de la souris (rouge si la souris est sur la textbox et noire dans le cas contraire).
  • XUL et Swing : cette section permettra de charger le fichier XUL calculatrice à l'aide de l'API Tk-UI pour étre interprété en Swing .
  • SWT Swing et Styles : cette section expliquera comment sélectionner le renderer (SWT, Swing...) à l'aide d'un style CSS.