Dans ce troisième tutoriel, nous allons essayer de simplifier notre code JAXX en utilisant une feuille de style. Nous allons, pour cela, nous baser sur le code du précédent tutoriel : helloworld2.
Dans JAXX, les feuilles de style permettent de sortir du fichier JAXX toutes les instructions ayant trait au style de l'application. Cela permet aussi de mutualiser les déclarations d'éléments graphiques (comme pour les feuilles de style en HTML). Pour approfondir le sujet, vous pouvez consulter la documentation
Nous allons enlever toutes les informations de style de notre fichier JAXX et ajouter un tag id à chaque élément afin de l'identifier dans notre feuille de style. On obtient le code suivant:
<Application id='tuto'>
<JLabel id='hello'
constraints='BorderLayout.NORTH'/>
<JButton id='button'
constraints='BorderLayout.SOUTH'
onActionPerformed='dispose()'/>
</Application>
Cela simplifie grandement notre code.
Nous allons créer une feuille de style, située au même niveau de l'arborescence que notre fichier JAXX. Nous allons référencer la feuille de style dans notre fichier JAXX en rajoutant le code suivant en fils de notre tag Application:
<style source='Css.css'/>
Dans la feuille de style, il faut retrouver le même niveau que lors du premier tutoriel. Nous allons donc commencer par notre Application et lui donner un titre.
Pour l'identifiant tuto, on veux rajouter l'attribut title et lui donner une valeur. On écrira donc dans la feuille de style:
#tuto {
title:"CSS Tutorial";
}
Pour notre JLabel, on va décider que le même style et le même texte seront appliqués à tous les JLabel. On mettra le texte à Hello World, la couleur à rouge et la taille à 20. On écrira donc:
JLabel {
font-size:20;
foreground:red;
text:"Hello World";
}
Nous allons aussi mettre le texte de notre JButton:
#button {
text:"Close"
}
Nous allons maintenant ajouter du style dynamique. Nous allons faire changer la couleur de notre JLabel lorsqu'il est survolé. Nous utiliserons pour cela le modifieur mouseover:
#hello:mouseover {
foreground:green;
}
Dans ce tutoriel vous avez vu comment mettre du style sur vos composants depuis un fichier CSS externe. Cela vous permet de créer un style pour votre application et de le changer au besoin en changeant juste la feuille de style. Pas besoin de multiplier les fichiers à impacter.
Les sources de ce tutoriel sont disponibles au telechargement ici
Pour lancer ce tutoriel via Java Web Start suivez ce lien
Pour plus de détail sur webstart
