JavaFX Scene Builder devient open source
Dans le cadre du projet OpenJFX

Les rubriques (actu, forums, tutos) de Développez
Tags
Réseaux sociaux


 Discussion forum

Sur le même sujet
Le , par la.lune, Membre Expert
JavaFX Scene Builder devient open source, dans le cadre du projet OpenJFX
Pour Android et iOS les kits de développement sont également déjà publiés en open source

Sur la liste de diffusion du projet OpenJFX, Simon Vienot, directeur technique chez Oracle, vient d’annoncer le passage de JavaFX Scene Builder à l'open source. Il se sent satisfait de cette phase, en annonçant que l'ensemble des fonctionnalités de Scene Builder sont disponibles, y compris le Kit de l'API de Scene Builder (qui permet son intégration aux IDE) et l'application standalone Scene Builder.

À noter que la dernière version en date de JavaFX Scene Builder est la version 2.0, mais il s'agit une version bêta. La version stable actuelle est la version 1.1 .

Pour rappel, JavaFX est une technologie composée d'un ensemble de bibliothèques Java (depuis la version 2.0 de JavaFX), permettant la création d'application « client riche » (RIA). JavaFX est multiplateforme, fonctionnant sous Windows, Linux et Mac OS. Il se veut le successeur de Swing pour les applications standalone bureau, mais fonctionne aussi sur le web sous forme d'Applet, sur mobile et sur l'embarqué, notamment sur Raspberry Pi. Oracle a déjà rendu open source les kits de développement en JavaFX pour Android et iOS .

En effet, sur iOS, il est possible de développer des applications JavaFX avec OpenJFX via la machine virtuelle RoboVM, qui permet de créer des applications Java natives pour iOS. Retrouvez un bon tutoriel pour la création avec Eclipse et apprenez comment packager avec ce tutoriel utilisant iPack. À noter que RoboVM n'est pas la seule alternative.

De plus, pour Android, Oracle a aussi publié en open source les runtime pour le développement d'applications Android en JavaFX sous Linux et Mac OS, et la communauté a commencé à y travailler pour améliorer la stabilité et la maturité de la plateforme. Vous pouvez également commencer à développer et retrouver une démo publiée sur ce billet d'une application JavaFX tournant sous Android et manipulant le multipoint et les gestures.



JavaFX Scene Builder est, quant à lui, un outil de création et de design d'interface graphique JavaFX, en glissant et déposant, modifiant les propriétés et personnalisant les feuilles de style CSS.

Simon Vienot annonce également que la seule partie qui reste encore fermée est le code source pour le paquetage natif et l'installeur.

Nous soulignons de même que la version bêta de JavaFX 8 est déjà disponible et est une partie intégrante de JavaSE 8. Il apporte avec lui toutes les fonctionnalités de Java 8 notamment les expressions lambda et autres, et il ajoute le support 3D et plusieurs autres fonctionnalités.

Le code source du JavaFX Scene Builder 2.0
Si vous voulez contribuer, inscrivez-vous au mailing-list du projet

Et vous ?

Que pensez-vous de cette évolution de JavaFX ?

Avez-vous déjà commencé à développer avec JavaFX ?

Que pensez-vous de l'avenir de JavaFX ?


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


 Poster une réponse

Avatar de Grom61736 Grom61736
http://www.developpez.com
Membre Expert
le 05/12/2013 11:06
Avez vous déjà commencé à développer avec JavaFX ?

Ouaip, je suis en train de le faire pour un client.
C'est pas mal, pratique d'utilisation car ca ne dépayse pas de Swing en terme d'utilisation.

Par contre, si on cherche sur Google, c'est pas toujours évident car on va tomber sur des topics parlant de JScrollPane et non pas le ScrollPane de JavaFX.

Quelque chose d'embétant quand même : certaines possibilités de Swing qu'on ne retrouve pas en JavaFX (du moins dans la version actuelle) :
- le setAlwaysOnTop
- les Dialog en tant que tel.

Pour SceneBuilder, c'est vraiment pratique mais pour des fenêtres de taille constante. ;-)

Mais le principal avantage de JavaFX c'est cette combinaison de FXML + CSS. Franchement pratique pour le développement des écrans.
Avatar de la.lune la.lune
http://www.developpez.com
Membre Expert
le 05/12/2013 13:11
Citation Envoyé par Grom61736  Voir le message
Par contre, si on cherche sur Google, c'est pas toujours évident car on va tomber sur des topics parlant de JScrollPane et non pas le ScrollPane de JavaFX.

La documentation de JavaFX est riche, mais en anglais,bon il suffit de bien spécifier, javafx après, il faut pas mêtre java, ou ajouter un J avant.
Un exemple de résultat qui tombe exactement sur ce qu'on veut sur google ScrollPane JavaFx,

Et pour éviter les topic sur JavaFX 1.x, il suffit d'ajouter d'écrire JavaFX 2.

Citation Envoyé par Grom61736  Voir le message
Certaines possibilités de Swing qu'on ne retrouve pas en JavaFX (du moins dans la version actuelle) :
- le setAlwaysOnTop
-les Dialog en tant que tel.

Pour le setAwaysOnTo tu peux jouer en utilisant toFront(), qui s'appliquent pour les Stage et existe pour tous les noeud sur la scene, son contraire c'est toBack().

Les dialogues oui, à la limite de la version stable utilisé actuellement, mais la version bêta de JavaFX 8 contient énormément de contrôles.

Citation Envoyé par Grom61736  Voir le message
Pour SceneBuilder, c'est vraiment pratique mais pour des fenêtres de taille constante.

Non, tu peux tout modifier, certes quand tu va concevoir, tu aura une fenêtre devant toi, mais ne croit pas que la taille doit rester constante , toute chose a ses propriétés, on peut modifier. Et à l’intérieur de la scène il faut choisir le bon panneau, qui viennent directement avec leur layout, qui va s'adapter à ton besoin. Tu peux faire ce que tu veux au goût de ta sauce.
Avatar de Mr_Exal Mr_Exal
http://www.developpez.com
Expert Confirmé
le 05/12/2013 13:31
Avez vous déjà commencé à développer avec JavaFX ?

Ouaip, un ERP/CRM complet pour plusieurs clients.

Que pensez vous de l'avenir de JavaFX ?

Niveau développement c'est vraiment le pied, le mvc y'a rien de tel.
Avatar de la.lune la.lune
http://www.developpez.com
Membre Expert
le 05/12/2013 13:39
Citation Envoyé par Mr_Exal  Voir le message
Ouaip, un ERP/CRM le mvc y'a rien de tel.

Mais JavaFX n'est pas un frameworke, mais un ensemble de bibliothèque Java pour les UI client riche.

Mais tout reste qu'avec FXML et les contrôleurs, on arrive a faire du MVC. Il faut que vous concevez votre application à la pure MVC, c'est totalement faisable, et il y a même un exemple fourni lors du téléchargement de JavaFX, qui démontre comment faire du MVC avec facilement.

Et déjà avec les propriétés on voit bien l'aspect dynamique de l'UI.
Avatar de Mr_Exal Mr_Exal
http://www.developpez.com
Expert Confirmé
le 05/12/2013 15:49
Citation Envoyé par la.lune  Voir le message
Mais JavaFX n'est pas un frameworke, mais un ensemble de bibliothèque Java pour les UI client riche.

Mais tout reste qu'avec FXML et les contrôleurs, on arrive a faire du MVC. Il faut que vous concevez votre application à la pure MVC, c'est totalement faisable, et il y a même un exemple fourni lors du téléchargement de JavaFX, qui démontre comment faire du MVC avec facilement.

Et déjà avec les propriétés on voit bien l'aspect dynamique de l'UI.

C'est bien ce qu'on fait
Avatar de cwidmer cwidmer
http://www.developpez.com
Invité de passage
le 05/12/2013 16:40
pour ceux qui cherchent des exemples sur cette techno, un site utile : fxexperience.com
Avatar de Grom61736 Grom61736
http://www.developpez.com
Membre Expert
le 05/12/2013 17:38
Citation Envoyé par la.lune  Voir le message
La documentation de JavaFX est riche, mais en anglais,bon il suffit de bien spécifier, javafx après, il faut pas mêtre java, ou ajouter un J avant.
Un exemple de résultat qui tombe exactement sur ce qu'on veut sur google ScrollPane JavaFx,

Et pour éviter les topic sur JavaFX 1.x, il suffit d'ajouter d'écrire JavaFX 2.

Merci pour le cours ... Cependant, si tu cherches quelque chose de plus spécifique, tu tombes vite dans des résultats pur Java.
Indépendamment de la doc de JFX, c'est juste que JFX est jeune par rapport à Java.

Non, tu peux tout modifier, certes quand tu va concevoir, tu aura une fenêtre devant toi, mais ne croit pas que la taille doit rester constante , toute chose a ses propriétés, on peut modifier. Et à l’intérieur de la scène il faut choisir le bon panneau, qui viennent directement avec leur layout, qui va s'adapter à ton besoin. Tu peux faire ce que tu veux au goût de ta sauce.

Non, tu vas demander à mettre le pane machin sur ton stackPane, tu lui demandes de prendre toute la place de ta fenêtre et il va le traduire par "prefSize = X et Y".
Donc tu resize, tu l'as un peu dans les fesses, tu dois changer le code pour spécifier les lignes qui manquent.
Pas que cela soit compliqué mais à ce titre, j'utilise Scene Builder principalement pour visualiser si ce que je pense donne pas trop mal.
Avatar de la.lune la.lune
http://www.developpez.com
Membre Expert
le 05/12/2013 21:06
Il faut savoir que pour la fenêtre principale, par défaut le root est un Anchor Pane, alors quelque soit la chose que tu va faire, pour forcer au contenu de prendre toute l'espace restante en fonction de la tailles, il ne va pas le faire.

Et si tu insère un Stake Pane dessus, si tu insère un autre pane il prendra toute l'espace en fonction de la taille, mais le tout va se jouer sur le Stake Pane, mais le Stake Pane lui même ne va pas prendre toute l'espace restante du Anchor Pane root s'il change de taille.

Alors la solution?
C'est simple il suffit de créer avec Scene Builder une nouvelle scène avec comme root, non pas avec Anchor Pane mais un Stake Pane.

Pour le faire avec Scene Builder:
File->New with Root Container->Stake Pane

Il y a trois possibilité: Anchor Pane, Border Pane et Stake Pane.

Tout Pane, tout élément de la catégorie Containers sauf Tool Bar et tous les contrôles à caractère de conteneur, ou Charts que tu va inséré dessus, tu n'aura même pas besoin de jouer sur la taille, il va prendre toute l'espace du Stake Pane, ainsi si tu redimensionne la fenêtre, le contenu va se redimensionner aussi, il va prendre toute l'espace, le reste des noeds si tu insère directement, ils seront obligatoirement rangé au centre.
Avatar de bouye bouye
http://www.developpez.com
Rédacteur/Modérateur
le 05/12/2013 23:51
Je pense que ces soucis viennent du fait que la doc n'est pas encore suffisamment claire sur la manière de créer des composants customisés. Ainsi, de mon expérience personnelle, qu'on étende Region, Pane ou un autre layout, on ne sait pas trop quelle méthode des min, pref, max size est appelées de quelle manière dans quel layout et suivant si managed a ete mis a true ou false... les choses sont encore différentes si on étend Group.

De plus, comparé a d'autres frameworks sur d'autres plateformes (ex: mobiles), certains des layouts de base ne sont pas encore capable d'avoir des redimensionnements corrects avec des animation par défaut lors de redimensionnements ou de changement du contenu (contenu d'une liste ou d'un flow). Donc, il faut savoir coder a mano quand on détecte un redimensionnement et qu'on doit changer l'apparence de ce qui est affiché.

Mais bon, on s'y fait.

Enfin, bon si on utilise AnchorPane un peut partout pour ses sous-panneaux, avec les bonnes valeur d'ancres (ex: 0, 0, 0, 0 et laisser le CSS gérer le padding), ce que les gens oublient souvent de faire, y a pas de soucis, n'importe quelle UI créée avec SceneBuilder peut être redimensionnée correctement.
Avatar de la.lune la.lune
http://www.developpez.com
Membre Expert
le 07/12/2013 4:30


En espérant avoir bien saisis le fond de la problématique, je tiens à souligner encore, cette fois-ci avec un vrai exemple de démonstration à l'appuie, que pour ces cas de mise en page dont le dimensionnement et redimensionnement doivent être en harmonie avec tous les composants, de la scène, alors on peut facilement régler cela avec Scene Builder sans avoir besoin à personnaliser des styles CSS, ou même modifier les propretés de dimensions et autres.

La sourie toute seul peut suffit à un très grand niveau, pour la mise en page et positionnement des éléments, les liant entre elles, mais juste avec quelques astuces à prendre en considération.

Avant tout, il y a un principe à ne pas toujours oublié (qu'on travail avec en html par exemple), c'est que tout composant qui est sensé changer de dimension ou position si on redimensionne le reste ou la fenêtre, alors il doit être en position absolue dans son conteneur et son conteneur doit l'être, et ainsi de suite jusqu’à la fenêtre principale.

Alors, en FXML ce n'est pas qu'on besoin de préciser position:ablsolute sur les fichiers CSS. Non et Non.

La bonne pratique est d'exploiter la puissance du binding qui se manifeste sur les Panes à Layout, ceci en choisissant le bon Pane.

Sans modification de CSS (sauf pour spécifier une couleur d'un seul composant), ni modification du code FXML , ni du Java, Voci un exemple qui a permis en créant une fenêtre d'avoir en bref le résultat qui suit en moins de 10 minutes:

  • un Menu Bar placé en haut, dont la largeur se redimensionne avec la fenêtre, par ce qu'il est bindé avec.
  • un Tool Bar, en haut aussi, qui se colle au Menu Bar avec hauteur personnalisé à la sourie, mais avec le même comportement que le Menu Bar en largeur
  • un Scroll Bar placé à droit, juste dans le coin, dont la hauteur peut se redimensionner avec celle de la fenêtre
  • un Tabed Pane qui prend le reste de l'espace de la fenêtre, après ce qui est cité en haut, et se peut redimensionner aussi avec la fenêtre
  • à l'intérieur Tabed Pane , le premier Tab(c'est à dire le panneau container ), contient un Anchor Pan avec une hauteur personnalisé avec la sourie, mais la largeur est lié à celle du panneau contenu du premier Tab, du coup il peut se redimensionner avec si on agrandi la fenêtre. J'ai modifié juste la couleur a vert avec CSS pour pouvoir le voir, et le connaitre en cas de changement de dimension. On a ajouté un Label et un TextField à l'Anchor Pane, qui vont gardé leurs distance de gauche, au cas où la fenêtre s'agrandit
  • on a placé un Table View qui prend le reste de l'espace d'en bas à l'intérieur du du panneau container du premier Tab, c'est à dire en bas du Anchor Pane


Avant d'expliquer techniquement ce que j'ai fais, voyons le résultat en image, d'abord avant le changement de dimension de la fenêtre:



Et voici le résultat après agrandissement de la fenêtre:



Je vais expliquer comment j'ai fais et le code source est disponible.
Pour arriver de cette fin on a en joué avec les différents Panes à Layout, et la bonne pratique selon moi pour une scène pareil, c'est d'avoir une scène dont la racine(root) est un Border Pane. On a commencé avec : File->New with Root Container->Broder Pane

Pour rappel un Border Pane laisse bien les éléments containers s'adapter aux dimensions du Border Pane, mais en lui précisant si on veut l’élément d'en haut , bas, gauche, droite et centre.

Je veut dire par container un noeud qui est censé en général contenir d'autres noeds même s'ils sont des contrôles, dont par défaut le contexte de largeur et de hauteur sont dynamiques comme les Pane et les Chart, Table View, Web View... ou dont par défaut le contexte de largeur seulement est dynamique comme les Tool Bar, Menu Bar, Scroll Bar horizontales, ou dont par défaut le contexte de hauteur seulement est dynamique comme les Scroll Bar vertical, Séparator vertical... Je désigne un élément à contexte de dimension fixe, les éléments qui sont censés par défaut avoir des dimensions fixes comme les boutons...

Sur un Border Pane tout éléments va se comporter selon son contexte, mais selon le contexte de la place choisit (haut bas,centre..).

Les éléments placés à gauche et à droite, se collent respectivement au coins gauche et droit , seul le contexte de hauteur dynamique est prise en compte ici, les éléments prennent toute la hauteur du Border Pane excepté les espaces occupés par des éléments de haut et bas. La largeur dépendra de nous, ou celle par défaut.

Par contre les éléments d'en haut et d'en bas prennent toute la largeur en laissant aucune espace, c'est le contexte de largeur qui est prise en compte ici, la hauteur des éléments reste par défaut ou on le personnalise. Le contexte de largeur reste dynamique bindé avec celui de la largeur du Border Pane.

L’élément du centre du Border Pane, prend le reste de l'espace en hauteur et en largeur, si l’élément possède à la fois un contexte de largeur et de hauteur dynamiques. Si on insère un seul élément au centre du Border Pane, alors ce dernier va se comporter comme un Stake Pane, il va bindé ses dimensions au dimensions du container, en fonction du contexte. Un élément à contexte de dimension fixe serait rangé au centre.

Revenons à présent à notre exemple, le root est un Border Pane, pour pouvoir placer les deux élément Menu Bar et Tool Bar en haut, je ne peux pas les déposer tous les deux directement en haut du Border Pane, car c'est une place pour un élément, alors il me faut un panneau à contexte de largeur dynamique qui sera bindé automatiquement avec la largeur du Border Pane. Alors le candidat c'est le VBox(son contraire c'est HBox), c'est ça sont travail. On le glisse on le dépose en haut du Border Pane.

On glisse et on dépose les deux Bar sur le Vbox, ils prendrons automatiquement toute la largeur du VBox, si on veut, on peut modifier la hauteur du Tool Bar, au cas où on veut mettre de grands boutons ou icones dessus et puis avec la sourie on agence la hauteur du VBox, pour correspondre exactement à la hauteur des deux Bar, sauf si on veut laisser de l'espace entre le Tool Bar et l’élément du centre du Border Pane. La hauteur du VBox restera tel qu'on l'a laissé même si on redimensionne la fenêtre.

A droite, on a seulement un Scroll Bar à placer, alors on peut le déposer directement à droite du Border Pane, il ira au coin droit, prendre toute la hauteur du Border Pane en soustrant celle du Vbox.

Bon, on a pas mis quelque chose à gauche dans notre exemple, mais on pourrait le faire, en mettant un Tree View ou List View..qui prendrait toute la hauteur, mais la largeur c'est à nous de fixer.

Pour l'espace restant après insertions de nos éléments on glisse et on dépose un Tabed Pane au Centre du Border Pane, c'est un élément à contexte de hauteur et largeur dynamique alors, il va prendre toute l'espace, même l'espace de l’élément gauche et en bas, vides.

Alors on veut à présent insérer un panneau Anchor Pane et un Table View sur le contenu du premier Tab de notre Tabed Pane, mais attention, on veut que les deux aussi suivent le redimensionnement du Tabed Pane, qui lui suit le Border Pane. Mais comment faire ?!!

Astuce
On supprime d'abord l'Anchor Pane qui vient par défaut, qui représente le container du premier Tab
L'Anchor Pane ne va pas binder ses dimensions à celles du Table View et du Anchor Pane qu'on veut insérer, certes l'Anchor Pane est bindé au Tabed Pane, mais il ne peut pas automatiquement binder ses enfants

Que ce qu'on insère? Et bien on ne peut pas utiliser un Vbox, car au dimensionnement il y aura de la place restante en bas, un HBox, c'est le côté droit qui restera vide. Alors ?

Et bien, on revient sur notre ami Border Pane, on le glisse et on le dépose sur le premier Tab du Tabed Pane, Après on insère l'Anchor Pane en haut du Border Pane, on fixe la hauteur qu'on veut avec la sourie, si on veut.

Mais attention, il va falloir décider sur l'avenir du Table View, car si vous l'insérez en bas, au dimensionnement, sa hauteur restera intacte, c'est le Anchor Pane qui sera le maître à prendre toute l'espace disponible, mais par contre si vous déposez votre Table View au Centre, la hauteur du Anchor Pane restera fixe, au dimensionnement de la fenêtre, le Table View prendra l'espace disponible et c'est le cas de notre exemple.

J'ai juste modifié la couleur de l'Anchor Pane pour pouvoir l'observer en précisant sur son style : -fx-background-color:green;
J'ai après ajouté un Label a couleur blanche et un Text Field vous savez tous ça. Voici la fin de notre travail.

Une question se pose, mais quand on redimensionne la fenêtre le Table View n'organise pas ses colonnes pour suivre sa largeur qui a augmenté. Comment faire ? On l'a pas fait sur le code de notre exemple. Mais Là à présent il faudra jouer avec CSS ou du Code Java.

Astuce
En java on définit la largeur de chaque colonne, quand vous allez définir les contenus de vos colonnes n'oubliez pas de préciser pour chaque colonne le pourcentage devant les autre comme ça:
Code :
1
2
 
col1.setPercentWidth(25);
Télécharger le code source du fichier FXML

Est ce ça répond au problème posé ou pas? J'attend vos feedbacks et je vous remercie!
Offres d'emploi IT
Analyste d’intégration / recetteur bi
CDI
UTIGroup. Rhône-Alpes - Rhône Alpes - Lyon (69000)
Parue le 03/12/2014
ANALYSE DEVELOPPEUR DECISIONNEL / BO
CDI
Kobaltt - Suisse - INGWILLER
Parue le 18/12/2014
Développeur informatique vba
CDI
ProRH - Ile de France - Mantes-la-Jolie (78200)
Parue le 02/12/2014

Voir plus d'offres Voir la carte des offres IT
 
 
 
 
Partenaires

PlanetHoster
Ikoula