Mise à disposition de JavaFX Composer Designer pour NetBeans 6.8

Version imprimable

23/10/2009, 23h32
galien

Mise à disposition de JavaFX Composer Designer pour NetBeans 6.8

15/12/2009 :

Citation:

Envoyé par Marcos Ickx

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"...:mrgreen:
26/10/2009, 00h34
bouye

Ah tant mieux tant mieux. Juste dommage que je ne sois pas en mode JFX actuellemement avec tous mes devs en pause (c'est l'une des periodes maintenance, C++, R & Linux de l'annee).

Qu'en est-il du debug des classes et libs Java dans un projet JFX ? Est-ce que cela fonctionne enfin ?

A ton avis, peux-t'on esperer la 1.3 avec la version finale de NetBeans 6.8 ?
13/11/2009, 16h38
galien

Pour la 1.3 c'est ce qui est prévu, JIRA nous dit d'ailleurs que le plugin de NB pour SOMA est finalisation.
Ce qui est plus inquiétant en ce moment c'est plutôt le blocage de la fusion par l'Europe qui aura certainement des répercussions sur tous les produits de Sun.
M'est avis que BIG BLUE doit avoir plein de potes à la commission....
14/11/2009, 00h34
bouye

Après un court test, j'ai laissé tombé l'utilisation de la 6.8 beta car l'éditeur Java décon** bien trop. J'attendrais la version finale.
A ce rythme vont nous la sortir pour fêter les 1 an de JavaFX.
30/11/2009, 00h46
bouye

Qq screen du futur GUI editor pour NetBeans 6.8 (qui n'est pas la meme chose que l'outil d'authoring presente lors de la derniere JavaOne).

http://blogs.sun.com/lukas/entry/cre...in_javafx_with
http://blogs.sun.com/lukas/entry/sca...are_uneditable
http://blogs.sun.com/lukas/entry/how_to_name_the_new

Les rumeurs quant a la sortie imminente de JavaFX 1.3 semblent se faire de plus en plus insistantes...
01/12/2009, 05h37
galien

Merci Bouye pour être allé à la chasse aux infos.
Cela m'a l'air bien sympa ce qu'ils ont fait, javafx va enfin rentrer dans la cour des grands(si ce n'était pas encore le cas), je vois déjà les esprits chagrins rabaisser leur caquet:mrgreen:.
Enfin juste une chose pour nous, les warriors de javafx qui bossons dessus depuis la version interprétée, espérons que le code généré nous conviendra et qu'on aura la possibilité d'y inclure nos composants visuels sans tout réécrire.
Pour la 1.3 je prends les paris pour le tout début janvier, au vue de JIRA, merci du cadeau de noël Sun.
Je dirais une seule chose, putain deux ans!:ccool:

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:

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:

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:

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...

13/12/2009, 23h41
bouye

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
15/12/2009, 00h43
bouye

Apparement le refactoring fonctionne desormais, il est possible de renommer des classes.
15/12/2009, 16h32
Marcos Ickx

Citation:

Envoyé par bouye

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

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:

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.

16/12/2009, 00h18
Traroth2

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.
16/12/2009, 12h56
Marcos Ickx

Citation:

Envoyé par Traroth2

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.

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:

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...

18/02/2010, 03h47
bouye

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.
18/02/2010, 14h43
galien

@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.

2 pièce(s) jointe(s)

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.

Pièce jointe 58739 Pièce jointe 58740

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:

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:

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);
        }
    }