CSS et JavaFx : un développeur affirme pouvoir reproduire l'UI de tous les OS
Un défi pour montrer le potentiel de ces technologies

Le , par la.lune, Membre chevronné
Des gens demandaient à Jasper Potts (Architecte Développeur pour JavaFX) s'il était possible de recréer le look de tel ou tel OS avec JavaFX 2.x. Certains, persuadés qu'il ne pourrait pas, lui ont même lancé un défi.

Il a donc décidé de le relever.

La clef de sa méthode repose sur les feuilles de styles (CSS) qui permettent de personnaliser les boutons de JavaFX.

Résultat, des UI d'iPad, d'iPhone, de Windows 7, ou d'Android sans utiliser la moindre image (un design faisable également sans CSS et rien qu'en code Java avec les API JavaFX 2.x).

La meilleure méthode reste cependant les feuilles de style qui séparent le contenu et le rendu graphique. Et qui sont plus simple à coder qu'avec du Java.



Dans le détail, Jasper Potts explique qu'il utilise les gradients du CSS. Un bouton d'UI aura un air de Windows 7 si on lui applique par exemple la feuille de style suivante :

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
#windows7-default { 
    -fx-background-color: 
        #3c7fb1, 
        linear-gradient(#fafdfe, #e8f5fc), 
        linear-gradient(#eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%); 
    -fx-background-insets: 0,1,2; 
    -fx-background-radius: 3,2,1; 
    -fx-padding: 3 30 3 30; 
    -fx-text-fill: black; 
    -fx-font-size: 14px; 
}
Défi réussi ?

Le projet Netbeans "ButtonStyles.zip" est disponible en téléchargement libre

Source : Billet de Jasper Potts


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de mvvvv mvvvv - Membre averti https://www.developpez.com
le 22/12/2011 à 12:51
... comment cette toute jeune et inutile techno ne veut pas disparaître dans le néant
Avatar de tchize_ tchize_ - Expert éminent sénior https://www.developpez.com
le 22/12/2011 à 13:31
Autant java fx 1.0 était imbuvable, autant le faite que javafx2 interagisse avec du code java sauve un peu le miche. Et il faut le reconnaitre. aujourd'hui, c'est la seul api "officielle" de oracle foutue de fournir des interfaces graphique présentables

Bon après, pour le moment coté interface graphique, je préfère encore apache pivot, mais qui sait, avec java 8, ....
Avatar de huit_six huit_six - Membre actif https://www.developpez.com
le 22/12/2011 à 13:44
Du coup, je comprend pas trop quel est le lien avec JavaFX, si c'est du CSS ?
C'est pas un troll hein ! c'est une vrai question vu que je connais pas javafx !
Avatar de sinok sinok - Modérateur https://www.developpez.com
le 22/12/2011 à 13:52
Citation Envoyé par huit_six  Voir le message
Du coup, je comprend pas trop quel est le lien avec JavaFX, si c'est du CSS ?
C'est pas un troll hein ! c'est une vrai question vu que je connais pas javafx !

JavaFX permet le theming de ses composants via des feuilles de style CSS, comme d'autres API le permettent (genre Qt & cie).
Avatar de la.lune la.lune - Membre chevronné https://www.developpez.com
le 22/12/2011 à 15:10
Citation Envoyé par huit_six  Voir le message
C'est pas un troll hein !

Et bien ce n'est pas un troll dans le moment où on t'a donné le code source, la source de l'info et un lien pour télécharger le projet Netbeans .Donc si tu télécharges La 2e mise à jour du JDK 7: JDK 7u2. Le SDK de JavaFX 2.0.2 est inclut et s’installe automatiquement après installation du JDK.Tu pourra voir toi même le résultat.

A présent une version de la version 2.1 est disponible pour Windows et Mac Os
Téléchargez JavaFX 2.1 b06
Avatar de la.lune la.lune - Membre chevronné https://www.developpez.com
le 24/12/2011 à 20:01
Citation Envoyé par tchize_  Voir le message
Et il faut le reconnaitre. aujourd'hui, c'est la seul api "officielle" de oracle foutue de fournir des interfaces graphique présentables

Mais on peut faire du présentable avec Swing non? Et oui regarde un peu ça!





C'est du Swing mon ami, et bien tu peux trouver ce thème agréable sans le site java.net par ici
Avatar de tchize_ tchize_ - Expert éminent sénior https://www.developpez.com
le 24/12/2011 à 20:55
Je parlais surtout du niveau binding entre les éléments, l'aspect dynamique des interfaces etc. Swing, même avec un beau toolkit, ça reste swing avec sa complexité et ses limitations.
Avatar de la.lune la.lune - Membre chevronné https://www.developpez.com
le 24/12/2011 à 21:46
Citation Envoyé par tchize_  Voir le message
Je parlais surtout du niveau binding entre les éléments, l'aspect dynamique des interfaces etc. Swing, même avec un beau toolkit, ça reste swing avec sa complexité et ses limitations.

Je confirme! Tout reste que JavaFX gère bien tout ce que tu viens de mentionner et plus!
Avatar de bouye bouye - Rédacteur/Modérateur https://www.developpez.com
le 01/01/2012 à 0:10
Sort la tête de ses vacances sans programmation...

Ah donc ils a continué sur ce sujet. Qqun lui avait posé la question lors de la session "Meet the Java & JavaFX Experience Team" car il était dans l'audience en tant que guest spectator (même si au final plus de 50% des questions lui ont été posée à lui au lieu des speakers) et il indiquait effectivement que le CSS était une bonne voie pour avoir un LnF natif. Ce à quoi on avait rétorqué que ça serait bien qu'Oracle fournisse ces CSS de la même manière qu'ils fournissent déjà des LnF natifs pour Swing.

Une question similaire avait été postée lors de la première présentation de Jim Weaver et aussi lors d'une autre session ; il semblait qu'un frein majeur pour la pénétration de FX en entreprise fusse le fait que Caspian est trop différent du LnF système.

L'ennuie avec le CSS est que de nos jours la plupart des LnF sont animés (boutons qui pulsent etc.), hors les CSS de FX ne supportent pas les animations (pour le moment).

Concernant Swing, oui on peut faire des jolis truc mais par défaut il faut presque recoder tous les composants (ou du moins toutes leurs UI). Ou utiliser Substance, chose que Kiril a mis des années et des années à developper. Là, en JavaFX ,c'est beaucoup plus rapide, faut juste modifier le CSS et relancer le programme.

Retourne profiter de ses derniers jours de vacances.
Ah oui et bonne année au fait !
Avatar de la.lune la.lune - Membre chevronné https://www.developpez.com
le 07/01/2012 à 18:53
Je suis un peu désolé car cette syntaxe que j'ai donné est une erreur,j'avais vu ça dans un tuto dans le site d'oracle mais en passage et non pas dans du code bien fait:

Code : Sélectionner tout
buton0.setStylClass(String)
.

La vraie syntaxe est la suivante :
Code : Sélectionner tout
1
2
 
buton0.getStyleClass().add("claas1");
Elle est mentionnée dans ce tuto dédié proprement au styles CSS publié dans le site d'oracle, on peut ajouter plusieurs à la fois avec la syntaxe
Code : Sélectionner tout
1
2
 
buton0.getStyleClass().addAll("class1","class2","class3");
Avatar de bouye bouye - Rédacteur/Modérateur https://www.developpez.com
le 09/01/2012 à 4:25
Oui généralement (pas toujours) il vaut mieux conserver le style par défaut des composants de base (ex: "button") et rajouter ses styles persos après pour modifier l'apparence de base.
Mais bon, il y a des bugs qui font que, parfois, ces styles par défaut sont perdus de toute manière...
Offres d'emploi IT
Ingénieur développement fpga (traitement vidéo) H/F
Safran - Ile de France - 100 rue de Paris 91300 MASSY
Architecte et intégrateur scade/simulink H/F
Safran - Ile de France - Vélizy-Villacoublay (78140)
Architecte systèmes études & scientifiques H/F
Safran - Ile de France - Vélizy-Villacoublay (78140)

Voir plus d'offres Voir la carte des offres IT
Contacter le responsable de la rubrique Accueil