GRATUIT

Vos offres d'emploi informatique

Développeurs, chefs de projets, ingénieurs, informaticiens
Postez gratuitement vos offres d'emploi ici visibles par 4 000 000 de visiteurs uniques par mois

emploi.developpez.com

JavaFX Composer Designer pour NetBeans 6.8
Un assistant pour la création d'interfaces graphiques JavaFX

Le , par galien, Membre averti
15/12/2009 :

Citation Envoyé par Marcos Ickx  Voir le message
JavaFX Composer Designer est disponible et vous permet de créer des interfaces JavaFX en mode design en glissant vos composants de la palette de contrôles vers votre fenêtre, et en gérant les évènements et autres propriétés.

http://wiki.netbeans.org/JavaFXComposerGettingStarted

23/10/2009 :

Le nouveau netbeans est arrivé avec déja pleins de trucs sympa, comme le debugger qui nous donne les info pour l'EDT, et toutes les autres choses que l'on ne voyait qu'avec le "profiler".
C'est amusant de mettre en pause le "D3D screen updater"...


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


 Poster une réponse

Avatar de bouye bouye - Rédacteur/Modérateur https://www.developpez.com
le 11/12/2009 à 5:59
NetBeans 6.8 est desormais dispo... toujours package avec JavaFX 1.2.1 et... toujours sans editeur graphique pour JavaFX.

Le formattage du code JavaFX est desormais fonctionnel mais est un poil bugge nottament il a du mal lorsque le mot-cle fonction est utilise comme type de retour genre :

Code : Sélectionner tout
1
2
3
4
5
 
 function getActionForOption(option: WizardOption):function(): Void { 
     var result: function(): Void= null; 
     [...] 
}
Essayez de formatter un truc comme ca et c'est le festival au lignes blanches.
Il a egalement tendance a mettre bien trop d'espace lorsquon a une arborescence d'instanciantion imbriquees ce qui peut etre assez genant pour la lecture.

Par exemple on passe de :

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
def greet: GreetingScreen = GreetingScreen { 
  onOpen: function () {} 
  onCreate: function () { 
    def slide: NewWizard_01 = NewWizard_01 { 
      onBack: function (): Void { 
        previousSlide(slide, greet); 
      } 
    }; 
    nextSlide(greet, slide); 
  } 
  onReview: function () {} 
};
a :
Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
def greet: GreetingScreen = GreetingScreen { 
            onOpen: function () { 
 
            } 
            onCreate: function () { 
                def slide: NewWizard_01 = NewWizard_01 { 
                            onBack: function (): Void { 
                                previousSlide(slide, greet); 
                            } 
                        }; 
                nextSlide(greet, slide); 
            } 
            onReview: function () { 
 
            } 
        };
Et encore la il n'y a que 3~4 niveaux d'imbrication.

Il a egalement toujours du mal a ordonner les imports correctement et ne peut pas s'empecher de laisser des sauts de lignes inutiles entre.

Bref c'est un bon pas en avant mais c'est pas encore ca ; a utiliser avec precaution.

Autre nouveaute dans l'editeur de code FX, le surlignage des variables inutilisees.

Pour le reste a part une nouvelle icone plus visible pour les projets FX je n'ai pas encore vu si desormais le deboggage du Java a travers JavaFX etait fontionnel.

Un poil decut pour le moment, je misais pas mal sur l'editeur graphique vu que je suis a nouveau en periode ou je me prend la tete avec des HBox et VBox mal alignee des qu'on met des Label ou Text dedans...
Avatar de bouye bouye - Rédacteur/Modérateur https://www.developpez.com
le 13/12/2009 à 23:41
Ah ! Une version pre-release de l'editeur de GUI JavaFX pour NetBeans devrait etre dispo cette semaine : http://www.developer.com/java/other/...to-Get-RAD.htm
Avatar de bouye bouye - Rédacteur/Modérateur https://www.developpez.com
le 15/12/2009 à 0:43
Apparement le refactoring fonctionne desormais, il est possible de renommer des classes.
Avatar de Marcos Ickx Marcos Ickx - Expert éminent https://www.developpez.com
le 15/12/2009 à 16:32
Citation Envoyé par bouye  Voir le message
Ah ! Une version pre-release de l'editeur de GUI JavaFX pour NetBeans devrait etre dispo cette semaine : http://www.developer.com/java/other/...to-Get-RAD.htm

Elle est disponible.

http://wiki.netbeans.org/JavaFXComposerGettingStarted
Avatar de bouye bouye - Rédacteur/Modérateur https://www.developpez.com
le 15/12/2009 à 22:00
Interressant... on peut assez rapidement mettre en place une petite application de type assistant/wizard simple avec.

A noter que le code produit repose sur une class NetBeans org.netbeans.javafx.design.DesignState qui contient une Timeline dont chaque KeyFrame represente etat (un ecran) de l'assistant. Bien que non listee dans les dependances du projet, cette classe est automatiquement incluse dans le JAR qui est genere dans le repertoire dist (ouf).

Voici un exemple de code genere :

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
 
public class Main { 
 
//LE CODE GENERE COMMENCE ICI. 
    public-read var button2: javafx.scene.control.Button; 
    public-read var textbox: javafx.scene.control.TextBox; 
    public-read var label: javafx.scene.control.Label; 
    public-read var label2: javafx.scene.control.Label; 
    public-read var textbox2: javafx.scene.control.TextBox; 
    public-read var button: javafx.scene.control.Button; 
    public-read var scene: javafx.scene.Scene; 
     
    public-read var currentState: org.netbeans.javafx.design.DesignState; 
     
    // <editor-fold defaultstate="collapsed" desc="Generated Init Block"> 
    init { 
        button2 = javafx.scene.control.Button { 
            layoutX: 419.0 
            layoutY: 290.0 
            text: "Button" 
        }; 
        textbox = javafx.scene.control.TextBox { 
            visible: false 
            layoutX: 248.0 
            layoutY: 131.0 
        }; 
        label = javafx.scene.control.Label { 
            visible: false 
            layoutX: 175.0 
            layoutY: 144.0 
            text: "Label" 
        }; 
        label2 = javafx.scene.control.Label { 
            visible: false 
            layoutX: 152.0 
            layoutY: 181.0 
            text: "Label" 
        }; 
        textbox2 = javafx.scene.control.TextBox { 
            visible: false 
            layoutX: 213.0 
            layoutY: 166.0 
        }; 
        button = javafx.scene.control.Button { 
            visible: false 
            layoutX: 355.0 
            layoutY: 300.0 
            text: "Button" 
        }; 
        scene = javafx.scene.Scene { 
            width: 480.0 
            height: 320.0 
            content: javafx.scene.layout.Panel { 
                content: getDesignRootNodes () 
            } 
        }; 
         
        currentState = org.netbeans.javafx.design.DesignState { 
            names: [ "New State 1", "New State 2", ] 
            stateChangeType: org.netbeans.javafx.design.DesignStateChangeType.PAUSE_AND_PLAY_FROM_START 
            actual: 0 
            timelines: [ 
                javafx.animation.Timeline { 
                    keyFrames: [ 
                        javafx.animation.KeyFrame { 
                            time: 0.001ms 
                            action: function() { 
                                button2.layoutX = 419.0; 
                                button2.layoutY = 290.0; 
                                button2.text = "Next >"; 
                                button2.action = button2ActionAtNewState1; 
                                textbox.visible = false; 
                                textbox.layoutX = 248.0; 
                                textbox.layoutY = 131.0; 
                                label.visible = false; 
                                label.layoutX = 175.0; 
                                label.layoutY = 144.0; 
                                label.text = "Label"; 
                                label2.visible = false; 
                                label2.layoutX = 152.0; 
                                label2.layoutY = 181.0; 
                                label2.text = "Label"; 
                                textbox2.visible = false; 
                                textbox2.layoutX = 213.0; 
                                textbox2.layoutY = 166.0; 
                                button.visible = false; 
                                button.layoutX = 355.0; 
                                button.layoutY = 300.0; 
                                button.text = "Button"; 
                            } 
                        } 
                    ] 
                } 
                javafx.animation.Timeline { 
                    keyFrames: [ 
                        javafx.animation.KeyFrame { 
                            time: 0.001ms 
                            action: function() { 
                                button2.layoutX = 408.0; 
                                button2.layoutY = 290.0; 
                                button2.text = "Connect"; 
                                button2.action = button2ActionAtNewState2; 
                                textbox.visible = true; 
                                textbox.layoutX = 191.0; 
                                textbox.layoutY = 125.0; 
                                label.visible = true; 
                                label.layoutX = 152.0; 
                                label.layoutY = 131.0; 
                                label.text = "Login"; 
                                label2.visible = true; 
                                label2.layoutX = 127.0; 
                                label2.layoutY = 159.0; 
                                label2.text = "Password"; 
                                textbox2.visible = true; 
                                textbox2.layoutX = 191.0; 
                                textbox2.layoutY = 155.0; 
                                button.visible = true; 
                                button.layoutX = 324.0; 
                                button.layoutY = 290.0; 
                                button.text = "< Previous"; 
                                button.action = buttonActionAtNewState2; 
                            } 
                        } 
                    ] 
                } 
            ] 
        } 
    }// </editor-fold> 
     
    // <editor-fold defaultstate="collapsed" desc="Generated Design Functions"> 
    public function getDesignRootNodes () : javafx.scene.Node[] { 
        [ button2, textbox, label, label2, textbox2, button, ] 
    } 
     
    public function getDesignScene (): javafx.scene.Scene { 
        scene 
    }// </editor-fold> 
 
//LE CODE GENERE SE TERMINE ICI. 
 
    function button2ActionAtNewState2 (): Void { 
        var design = NewDesktopDesign {} 
        scene.stage.scene = design.getDesignScene (); 
    } 
 
    function buttonActionAtNewState2 (): Void { 
        currentState.previous(); 
    } 
 
    function button2ActionAtNewState1 (): Void { 
        currentState.next(); 
    } 
 
}
Donc ici on a deux ecran, lors du changement de frame, certains controles sont caches et d'autres affiches. Les boutons permettent de passer d'un etat a l'autre :
  • bouton 2 (Next >) dans l'etat 1 : va a l'etat 2
  • bouton 1 (< Previous) dans l'etat 2 : va a l'etat 1
  • bouton 2 (Next >) dans l'etat 2 : remplace la scene par un autre assistant. Oui car comme tout est dans la meme classe et que chaque etat n'est pas dans une classe separee c'est un peu le bordel et la soupe aux variables si on se met a tout coder dans une seule classe.


Au niveau du composer, il est fonctionnel bien que d'un niveau inferieur a celui de Matisse

Hum au final ce n'est pas trop ce que j'imaginais. Ca va certes m'aider pour me permettre de designer qq trucs car au moins je vais maintenant pouvoir voir les placements absolus (pour les placement dynamiques c'est un peu foutu tant qu'ils nous pondent pas la 1.3 je sens ca) et en recopiant le code produit ailleurs.
Avatar de Traroth2 Traroth2 - Expert éminent sénior https://www.developpez.com
le 16/12/2009 à 0:18
Un outil de design open-source (puisque faisant partie de Netbeans) ? Excellente nouvelle ! Au moins, Sun poursuit les efforts autour de JavaFX, c'est déjà une bonne nouvelle.
Avatar de Marcos Ickx Marcos Ickx - Expert éminent https://www.developpez.com
le 16/12/2009 à 12:56
Citation Envoyé par Traroth2  Voir le message
Un outil de design open-source (puisque faisant partie de Netbeans) ? Excellente nouvelle ! Au moins, Sun poursuit les efforts autour de JavaFX, c'est déjà une bonne nouvelle.

Il n'est actuellement pas open-source. C'est un plugin développé par Sun mais qui n'est pas intégré out of the box à NetBeans et tant que la fusion Sun/Oracle ne sera pas finie, on ne saura pas s'il sera rendu open source ou pas. C'est ce qu'avait dit le développeur qui était venu montré cet outil de design à Devoxx. C'était d'ailleurs la première fois qu'il était montré au public.
Avatar de bouye bouye - Rédacteur/Modérateur https://www.developpez.com
le 18/12/2009 à 4:27
Alors ce qui est pas mal c'est qu'on peut assez aisement reutiliser les composants ainsi crees dans un composant custom.

Par contre il faut penser a les retirer de leur noeud parent (le code genere par defaut les met dans un Panel lui-meme inclus dans une Scene).

Ici WizardPane_01 est une classe creee avec le designer.

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
 
        def pane:WizardPane_01 = WizardPane_01{}; 
        def nodes:Node[] = pane.getDesignRootNodes(); 
        for (node in nodes) { 
            delete node from (node.parent as Group).content; 
        } 
        def panel:Panel = Panel { 
            content: nodes 
        } 
        Group { 
            content: panel; 
        }
A ce propos si on cree une classe designer dans un projet javaFX standard, il (NetBeans) cree automatiquement la classe _run associee et rajoute automatiquement aux sources du projet la classe NetBeans necessaire au fonctionnement du designer (ouf-bis).

Par contre je n'ai pas encore trouve comment utiliser des composants persos ou des des composant Swing dedans donc faudra attendre la 1.3 ou une update du designer pour afficher veaux, vaches, cochons... euh JComboBox, JList, JTree et JTable...
Avatar de bouye bouye - Rédacteur/Modérateur https://www.developpez.com
le 18/02/2010 à 3:47
Le plugin est passe en version 1.1 et supporte desormais bien plus de noeuds de l'API y compris des formes mais aussi des graphes (en mode experimental pour ces derniers). Les composants Swing*, y compris les instances de SwingComponent ne sont toujours pas supportes. Il peut y avoir besoin de mettre a jour la classe du package org.netbeans.javafx.design (dans mon cas NetBeans l'a mise a jour quand j'ai edite un design existant).

Note: en mode design, il est possible de selectionner plusieurs noeuds en meme temps en maintenant CRTL enfonce.

*Pour ma part je met des TextBox (que je vais commencer a remplacer par des Rectangle) dans le design que je remplace par des JComboBox wrapppees par SwingComponent en utilisant une variante du code poste dans le message precedent.
Avatar de galien galien - Membre averti https://www.developpez.com
le 18/02/2010 à 14:43
@Bouye
Ca se précise ce plugin, la fonctionnalité qui me manque le plus c'est d'avoir ses propres templates, pour réutiliser ses CustomNode.
Avatar de bouye bouye - Rédacteur/Modérateur https://www.developpez.com
le 18/02/2010 à 23:47
En effet et meme si ca peut paraitre un peu archaique pour ceux habitues aux languages dont les IDE disposent de ce genre de choses depuis des annees et que c'est pas encore tout a fait au point niveau ergonomie, ca permet quand meme de commencer a s'amuser sans se prendre le choux grave sur des questions de placement et de layout.

[ATTACH]58739d1/a/a/a" /> [ATTACH]58740d1/a/a/a" />

Note : a la place du rectangle noir, j'afficherai plus tard un composant Swing (voir soyons fous FX) de type directory chooser.

Perso bien que je trouve le fait de pouvoir creer des asistants avec une scene et tout et tout soit sympatique, ce qui me manque surtout c'est de pouvoir designer de simples panels. Ca et le fait de pouvoir redimensionner en live et appliquer des transformations affines via l'IDE sur les formes geometriques et les designs.

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
/** 
 * This <code>mixin</code> contains base functions for node that whish to import JavaFX Composer-created nodes. 
 * @author Fabrice Bouyé (fabriceb@spc.int) 
 */ 
public mixin class ComposerHelper { 
 
    /** 
     * This function allows to prepare nodes created using the JavaFX NetBeans Composer so they may be re-used. 
     * Each node will be removed from its parent. 
     * Then the function calls <code>prepareComposerNode()</code> so the user may customize the node. 
     * Then it is inserted into a new sequence which is returned. 
     * @param nodes The sources nodes (AKA the nodes created by the JavaFX NetBeans Composer). 
     * @return A <code>Sequence</code> of <code>Node</code>. 
     */ 
    protected function importFromComposer(nodes: Node[]): Node[] { 
        for (node in nodes) { 
            delete node from (node.parent as Group).content; 
            def preparedNode: Node = prepareComposerNode(node); 
            preparedNode; 
        } 
    } 
 
    /** 
     * Prepare a node create from the JavaFX Composer to be imported. 
     * <br/>The default implementation just returns the source node AS IS. 
     * @param node The source node (AKA the node created by the JavaFX NetBeans Composer). 
     * @return A <code>Node</code>, never <code>null</code>. 
     */ 
    protected function prepareComposerNode(node: Node): Node { 
        return node; 
    } 
 
}
Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
/** 
     * {@inheritDoc} 
     */ 
    protected override function prepareComposerNode(node: Node): Node { 
        if (node.id == "speciesField") { 
            speciesCombo.setPreferredSize(new Dimension(node.layoutBounds.width, node.layoutBounds.height)); 
            speciesNode.layoutX = node.layoutX; 
            speciesNode.layoutY = node.layoutY; 
            speciesNode; 
        } else if (node.id == "modelRunField") { 
            modelRunCombo.setPreferredSize(new Dimension(node.layoutBounds.width, node.layoutBounds.height)); 
            modelRunNode.layoutX = node.layoutX; 
            modelRunNode.layoutY = node.layoutY; 
            modelRunNode; 
        } else { 
            super.prepareComposerNode(node); 
        } 
    }
Offres d'emploi IT
Ingénieur développement fpga (traitement vidéo) H/F
Safran - Ile de France - 100 rue de Paris 91300 MASSY
Spécialiste systèmes informatiques qualité et référent procédure H/F
Safran - Ile de France - Colombes (92700)
Responsable transverse - engagement métiers H/F
Safran - Ile de France - Corbeil-Essonnes (91100)

Voir plus d'offres Voir la carte des offres IT
Responsables bénévoles de la rubrique Java : Mickael Baron - Robin56 -