On aura attendu le déluge que SUN nous ponde un TabbedPane Natif en vain… Qu’à cela ne tienne ! Ça occupe…

Comment prendre les choses en main

Cette version est pour le coup un peu plus esthétique que les précédentes.

• Mais il est toujours possible de faire des truc moche en jouant avec le CSS.
• On peut avoir ou pas plusieurs boutons pour fermer les tabulations (comme celà était possible avant) Mais maintenant ils sont en faite issus du composant ComboButtons.
• Ces derniers s’affichent uniquement lorsque la Tabulation est sélectionné. Ce qui évite les erreurs malencontreuses…
• Les titres des tabulations se voient automatiquement raccourcis avec des “…” lorsque le nom est trop long par rapport à la place disponible dans la tabulation.
• Les tabulations peuvent être coloriés ou non.
• Il est possible de configurer le comportement des sélections lors d’ajout ou suppressions de tabulations.
• Le TabbedPane hérite des Resizable et se comporte en tant que tel – c.a.d que le nombre des tabulations visible est en fonction de la taille de ce dernier. Il est possible de faire défiler les tabulations avec des fonctions adéquates ou la mollette.
• Il est possible de définir un contenu persistant pour le TabbedPane par soucis d’optimisation (cas de figure : tout les onglets sont associés à un élément qui est en faite le même… Par exemple une liste.) Le démonstrateur que je propose en aurait fait le très bon exemple. [étant donné que dans toutes les Tabulation on retrouve à chaque fois un composant, dont seul le nom et la couleur change - mais pour la demo j'ai préférer faire simple]
• On dispose de trois fonctions Callback pour chacune des tabulations ( onClosedCallback / onSelectedCallback / onUnSelectedCallback ).
• On dispose de quatre autres fonctions Callback mais depuis le TabbedPane ( onAddedTabCallback / onClosedTabCallback / onSelectedTabCallback / onUnSelectedTabCallback ) qui sont en faite utilisé dans cet exemple pour sonoriser les actions du TabbedPane
• On peut utiliser la touche “Espace” pour passer à une autre tabulation et les touches “X, C, D” pour fermer celle qui est sélectionné. “N ou INSERT” pour créer une nouvelle tabulation (sans boutons de contrôle ! – car depuis le TabbedPane.fx et non test.fx…). “Touches fléchés Gauche/Droite” pour faire défiler les tabulations quand il y en à trop.

• Pour une petite explication des packages qui gravitent autour de TabbedPane c’est juste en dessous là :

Les packages décortiqués

• L’essayer

• Le récupérer

Le LevelIndicator permet de visualiser un niveau. On lui donne en paramètre une valeur “variable” et une valeur “maximale” de référence.

• Sa représentation est customisable (dans une certaine limite) grâce à une feuille de style
• Il dispose de trois Skins ( BAR_VIEW / PERCENT_VIEW / VALUE_VIEW ) commutable en cliquant dessus

.

Le LevelIndicator dans tout ses états

• pour l’utiliser :

Ça ce passe comme ça

• La variable “debugMode”

sert uniquement à afficher une délimitation visuelle de l’espace qu’occupe le LevelIndicator

debugMode : true

• La variable “selected”

est utile dans le cas où le LevelIndicator est utilisé dans un élément graphique qui est selectionable. C’est juste au cas ou… En gros ça lui confère une vue plus simplette.

selected : true

• La variable “viewMode”

permet de changer l’affichage du LevelIndicator en 2 autres déclinaisons au niveau des Skins

1) Le Skin “LevelIndicatorPercentSkin” :

qui permet d’avoir un affichage du niveau en pourcentage.

(celui-ci change de couleur en fonction du niveau)

ViewMode.PERCENT_VIEW

2) Le Skin “LevelIndicatorValueSkin” :

affiche directement la valeur du niveau

ViewMode.VALUE_VIEW

• Le CSS

permet de s’affranchir d’images et donc de pouvoir re-dimensionner sans pour autant se prendre du gros PIXEL dans les yeux.

transforms: Scale { x : 2.0, y : 2.0 }

• See

• Get

En regardant mon logiciel de messagerie je me suis fait la réflexion que je lui trouvais des petits aspects sympathiques comme au niveau design : les boutons unis ou une fusion de boutons, c’est sympa ! :

• ressemble à ça :

En allant mirer ce qui se faisait dans la fenêtre de cliping graphique de NetBeans 6.7.1 et la DT de SUN sur les composants JFX :

j’ai pu noter l’absence de cette chose qui fait de l’économie de place en définitif Pour SUN (Ahah) et pour la GUI

Moi c’est plutôt le deuxième aspect qui m’intéresse

• voici le resultat de ma petite tambouille :

Non je rigole !

(à noter que ce qui se passe avec le chargement des stylesheets CSS en JavaFX 1.2.1 est mal car quand on instance des Nœuds après avoir chargé une feuille de style il se produit que ces derniers ne sont pas affecté par cette dernière)

• [ Donc en gros moi pour l'astuce, j'ai forké les composant et j'ai modifié sur chacun les entête CSS ]
• Ce qui est un peu la Looze-D faut bien l’avouer. Vivement que ça soit fixé.

• Mais dans la théorie ça ce passe comme ça… :

"theme0.css" -> SmallButton

"theme0.css" -> ComboButtons

• au niveau de l’implémentation du Composant (c’est comme les poupés russes) on commence toujours par la plus petite

Joke

• on a l’entité SmallButton qui est en faite ça :

Dans laquelle on retrouve une illustration, qui est en faite un Group avec des Shapes dedans, qu'on met en paramètre de SmallButton

j’ai pu noter l’absence de cette chose qui fait de l’économie de place en définitif Pour SUN (Ahah) et pour la GUI

ce qui nous permet d’avoir une illustration vectoriel

• l’avantage des illustrations à base de Shapes pour les SmallButtons c’est qu’on peut agrandir notre Composant sans perte de qualité :

• d’ailleurs…

j’ai trouvé une bonne source pour alimenter votre d’inspiration à cet endroit : http://www.eddit.com/shop/iphone_ui_icon_set/

et je pense qu’avec les class

• javafx.scene.shape.SVGPath
• javafx.scene.shape.ShapeSubtract

Il y a de quoi s’amuser

• et on viens “travailler” les différents états graphique de l’illustration du SmallButton, en utilisant une fonction qui décortique ce group :

(Rien ne nous empêcherais d’y mettre des images d’ailleurs mais ça c’est pour les améliorations futures… )

• on vient encastrer le tout dans le ComboButtons :

• on peut le faire varier la hauteur de la forme qu’on a mis en illustration du Separator pour produire ça :

OU 

Pour les fantaisies ^^ on peut utilisé l’affichage avec le nom du SmallButton ( c’est en faite un Skin =/= dans le trio Skin/Behavior/Control) qu’on a renseigné pour les SmallButton dans la variable “name:”

SmallButtonTextSkin

mais rien nous empeche de mettre par défaut les SmallButtons en “mode” illustration et d’en punir un pour le mettre en Skin Text :

"Text Mode" Forcé sur le 3eme SmallButton

Pour les plus feignant ou ceux qui y arrivent pas à faire d’illustration pour leurs SmallButtons on peut utiliser l’identifiant (caractère) :

Ici les illustration sont en faite des "<", ">" et "+"

• bon sinon le principal c’était quand meme de mettre des actions dans nos SmallButtons :

et en regardant le post ( http://learnjavafx.typepad.com/weblog/2009/12/javafx-13-leakage-at-devoxx-and-øredev.html ) du blog “learnjavafx.typepad.com” datant du 3/12/09 qui annonce les new composant dans JFX 1.3

Je n’en vois toujours pas dans les tablettes

Pourtant le ScreenShot trouvé ici ( http://fxexperience.com/2009/11/enterprising-javafx-devoxx/ ) montre peut être le contraire

Allons savoir… la vérité est ailleurs…

Mais le composant est là :

Le projet NetBeans du ComboButtons

Mettre des Composants Resizable dans une HBox Resizable (les JavaFixeurs(marrant le nom !) comprendront peut être )

Mettre des Composants Resizable dans une VBox Resizable (les JavaFiXeurs(marrant le nom !) comprendront peut être )

• comme celui ci :

• ce qui donne :

Le moment venu de tester : Une Scene… Une VBox… Des Dimmensions…

• le Code :

• le Résultat :

• à première vue ça peut donner comme une envie de pleurer…

Mais cela doit être normal, en effet, car si on lit bien là JavaDoc de SUN sur la VBox, il est dit que :

Donc en gros si on décode bien HBox will only resize Resizable to THEIR PREFERED SIZE (suffit de lire éh oui) donc pas de resizing dynamique comme je l’entendais en faite… bloups… :-l

• en conclusion, je suis quand même arrivé à trouver une solution

Faire sa propre Resizable VBox que j’ai nomé Homebrew Resizable VBox en plus rapide HRVBox sur la base d’un Panel

• ca s’implemente comme ça :

• pour donner ça :

1

• Ce qui est pratique du coup c’est qu’on peut même implementer là gestion de minWidth, maxWidth, minHeight… conféré aux Control/Resizable :

• Produit ce genre de comportement graphique intéressant :

• au tour des Sources de s’exprimer :

Le projet NetBeans du Composant

Le projet NetBeans de la HRVBox

More

Petit rafraichissement du code du composant MyTabbedPane pour le support de JavaFX 1.2

Il aura fallu du temps mais le voilà lui (le gros bleu :X)

• Visuellement bien plus moche , mais le CSS est là pour ça !
• Excroissance de boutons vert à droite (beurk!) permettant de rajouter des pti onglets

( i ) toujours !!! pas implementé : le re-dimentionnement des tabs en fonction de leur nombre Ranlaalaa il est fou lui… qu’est ce qu’il fout

MyTabbedPane

Instructions


// SIMPLE CONTENT FOR TAB 1
var myRectangle1 = Rectangle {
width: 512, height: 384
fill: Color.AQUA
}
// THE TABBED PANE
var tabbedPane = TabbedPane{};
tabbedPane.addTab(
// THE TAB
Tab{
name: "Demo Tab 1"
content: myRectangle1
}
);


Google Code

Du faite que SUN, depuis la version 1.0 de JavaFX, ait enlevé (provisoirement ou pas) le composant TabbedPane (javafx.ui)…

…Je me suis dit qu’il serait de bon ton de faire le mien

Que je partage avec vous

• Les onglets peuvent avoir un bouton “close”
• Une feuille de styles CSS est implementé pour changer facilement les couleurs

( i ) pas implementé : le re-dimentionnement des tabs en fonction de leur nombre

MyTabbedPane

Instructions

var myRectangle = Rectangle{};

var myTabbedPane = TabbedPane{};

var myTab = Tab{

    title: "myTab",

    tabbedPaneParent: myTabbedPane,

    hasTools: true,

    content: myRectangle

};

myTabbedPane.add(myTab);

Webstart version

Applet version
http://www.saturny.com/fichiers/tutoriels/MyTabbedPane/

Google Code

Un des avantages certains de JavaFX est le Data Binding. Il permet de lier une variable ou une expression à une autre (voir meme plusieurs). Le changement de la variable liée (avec bind), entraine le changement automatique de la variable cible. Vous verez grace à l’exemple ci-dessous que celà est très utile pour synchroniser des composants graphiques avec des données.

Et je dirais meme plus : pour avoir une meilleure idée de ce en quoi cela peut simplifier là vie, je pense qu’il faudrait avoir un peu goûté au succulent concept MVC par la pratique ( humm… )

MVC (Modèle-Vue-Contrôleur) est un design pattern qui permet comme son nom l’explicite de séparer les données (model), de l’interface (vue) et de la logique de contrôle (contrôleur)

Pour ceux que celà tente, voici le lien vers un excellent tutoriel :

http://baptiste-wicht.developpez.com/tutoriel/conception/mvc/

plus de sources concernant le Data Binding :

http://java.sun.com/javafx/1/tutorials/core/dataBinding/index.html

http://java-javafx-iipt.blogspot.com/2009/03/data-binding-de-javafx-des-liens.html

Exemple théorique

Il y a deux types de liens (bind)

• unidirectionnel avec le mot bind

var titi = 5;

var toto = bind titi;

println(“{titi}\t{toto}”);

titi = 7;

println(“{titi}\t{toto}”);

• bidirectionnel (bind … with inverse).

var titi = 5;

var toto = bind titi with inverse;

println(“{titi}\t{toto}”);

toto = 9;

println(“{titi}\t{toto}”);

Exemple pratique

ThePowerOfDataBinding

Webstart version

Projet NetBeans

http://www.saturny.com/fichiers/tutoriels/ThePowerOfDataBinding/sources.zip