octobre
2012
Un article de bouye
Gerrit Grunwald (Canoo)
Jonathan Giles est dans la salle.
> Créer des nouveaux contrôle
Changer l’apparence de contrôles existants
Combinaison de contrôles existant
Dérivation de controle existant
Dérivation des conteneurs
> Contrôle, skin, behavior + CSS
Contrôle = étend Control. définition du style + propriétés + recherche du CSS par défaut.
CSS = définition de la string + apparence par défaut.
Skin = étend SkinBase (publique dans JavaFX 8). Définition du behavior.
Surcharger dispose() et les méthodes de calcul des tailles prefs, min et max.
Le contenu est fait dans layoutChildren(). C’est une bonne idée de définir un flag dirty pour éviter des relayout inutiles.
Behavior = étend BehaviorBase (API privée , à voir si c’t encore nécessaire dans JavaFX 8).
Initialisation = control -> CSS -> skin -> behavior
> visualisation (LED = plusieurs cercles concentriques)
– pure CSS : on peut définir plusieurs background pour définir toutes les couleurs. Définir les formes par du texte au format SCG
Une couleur non définie est noire par défaut ; utiliser « transparent » pour les couleurs transparentes.
!!! Dans le CSS actuellement on ne peut définir q’un effet.
Dans la skin, chaque partie de la LED a le style approprié pour que le CSS s’y applique.
– pure code : le CSS se contente de définir la skin et rien d’autre. Tout est hardcodé au niveau de la skin, c’est assez peu configurable (couleur n’utilise pas CSS) mais on peut chainer plusieurs effets entre eux.
– mélange des deux : offre plus de flexibilité.
> Workflow
Créer le prototype dans Adobe Fireworks ou Adobe Illustrator -> fichier FXG
Convertir le design FXG vers JavaFX via le convertisseur créé par Jasper Potts et étendu par Gerrit -> Cela créer toutes les classes Java et fichier CSS nécessaires.
> Swing vs. FX
> Tips & tricks
1) utiliser le cache quand cela est nécessaire (animation si pas de changement de couleur ou de taille). Bien définir le cache hint aussi.
2) bien connaitre les effets et leur composition et faire attention aux transformations (ex : ombre d’un aiguille qui tourne = ombre sur le groupe parent et non pas l’aiguille elle-même sinon elle sera mal orientée).
3) StackPane + CSS = controle simple et facile.
Pour contrôle plus facile = group + pane + canvas + FX API
Pour contrôle texturés complexes = canvas + ImageView
4) utiliser des propriétés read-only si on ne donne pas de setter (ça évite qu’on puisse la setter quand on accède directement à la propriété)
5) utiliser ScenicView (outil de Jonathan Giles) pour debogger.
6) utiliser le FX Expérience Tool (outil de Jasper Potts) pour tester le CSS.
7) lire les sources des controles sur l’openJFX !!!!
8) participer à JFXTras pour publier des nouveaux trucs qui peuvent intéresser autrui.
Commentaires récents
- dans Back from the future…
- dans Back from the future…
- dans Static linking = does not Compute
- dans Paquetage x 2
- dans Why you little…