Exemple complet JavaFX

Version imprimable

09/12/2014, 21h32
frbos

Exemple complet JavaFX

Bonjour à tous.

Je galère un peu pour me mettre à javaFX, que je souhaite utiliser pour des applications desktop. Ca a l'air très intéressant mais tous les tutoriels que je trouve me laissent sur ma faim...

Dans un premier temps, pour comprendre, je voudrais juste un petit exemple comprenant :
- une scene principale "root" (avec une barre menu et une toolbar avec 2 boutons) comprenant
- soit une "sous scene" A
- soit une "sous scene" B
Les 2 boutons de la scene root servant à appeler soit A soit B.

Je voudrais aussi pouvoir appeler A à partir d'un bouton de B (et inversement...).
Je me sers de SceneBuilder et donc de FXML.
Un tel exemple me servirait sans doute à mieux comprendre les mécanismes de bases de JavaFX et de constituer un squelette d'application.
Je suis sur que beaucoup se posent des questions...

Quelqu'un saurait-il m'indiquer comment faire ?

Merci d'avance pour votre aide.
10/12/2014, 00h30
bouye
Pourquoi des sous-scènes ? Tu comptes faire de la 3D ?

Sinon on vient de publier la nouvelle FAQ JavaFX, c'est une bonne idée que d'aller jeter un coup d’œil.

Ensuite, puisque tu as lu des cours et didacticiels, qu'est ce qui te bloque pour implémenter ce que tu demandes ??? Tu n'arrives pas à conceptualiser la chose ?
1. Une classe application.
2. Une VBox (le root de la scène) contenant :
  1. Une MenuBar avec le Menu appropriés.
  2. Un BorderPane :
    
    Dans la partie north, une Toolbar contenant :
    
    Un Button A
    Un Button B
    Dans la partie center, un StackPane contenant :
    
    Un AnchorPane qui va être la racine de la partie A, visible uniquement quand on appuie sur A.
    Un AnchorPane qui va être la racine de la partie B, visible uniquement quand on appuie sur B.
Tu veux faire ça avec SceneBuilder ? Pas de soucis, il suffit de créer le contenu que je viens d'indiquer, de le charger au démarrage et de l’inclure dans la scène (voir FAQ)... le code pour manipuler le contenu ira dans la classe contrôleur...
10/12/2014, 07h27
frbos

Bonjour, merci pour ta réponse.
J'ai jeté un œil à la faq sans trouver de réponse à mes questions.
Je me suis peut être mal exprimé en parlant de "sous-scènes". Je veux simplement changer "l’intérieur" de ma fenêtre en y plaçant A ou B.
J'ai pensé au stackPane, mais cela m'oblige à y charger tous les contenus ? Pour une appli un peu importante, cela va faire du monde, j'ai peur que ce soit lourd.
Concernant la structure que tu propose, j'ai essayé une mise en oeuvre. Je n'y suis pas arrivé. Je pense que j'ai du mal à voir comment tout ca s'articule.
C'est en ca qu'un petit exemple m'aiderai surement.

Francois
10/12/2014, 08h20
Anthony BIGET

Bonjour,
Il y a un très bon exemple à l'adresse suivante : https://github.com/acaicedo/JFX-MultiScreen
Il suffit de télécharger les fichiers sources et de comprendre comment cela fonctionne et comment tout cela interagit. C'est plus complexe que ce que tu recherches, mais cela fonctionne bien. Il te suffira de l'adapter à tes besoins.
Comme expliqué par bouye, il faut une classe principale qui permet de charger la fenêtre principale qui est constituée d'un fichier fxml et de son contrôleur associé. Dans ce contrôleur, il faut y placer un bouton qui permet de remplacer la scene par un autre fichier fxml.
Il y a pas mal de sources sur le net qui permettent de comprendre comment switcher d'une scene à l'autre en passant par la commande FXMLLoader.
Le plus simple est que tu nous expliques ce qui bloque dans ton programme ...
Pour cela il faut que tu nous en dise plus.
10/12/2014, 18h59
frbos

Exemple complet JavaFX

Merci pour cet exemple vraiment intéressant (https://github.com/acaicedo/JFX-MultiScreen explication ici https://blogs.oracle.com/acaicedo/en...ens_in_javafx1).
Cela répond presque à ce que je veux faire.
Dans cet exemple, on a screen1, screen2 et screen3. Chaque screen à les boutons pour accéder à un des 2 autres. Parfait.
Il faudrait juste ques ces 3 screens se mettent dans un "mainScreen" contenant un menu et une barre d'outil et que ce menu ou cette barre d'outil permettent de la même façon de switcher entre les screens.
Et c'est là que je coince...
Je ne vois pas du tout comment faire

Je ne suis pas persuadé que ce soit la meilleure solution, mais tu peux simplement modifier les controllers et les fichiers fxml des différentes fenêtre screen1, screen2 et screen3 pour qu'elle fassent appel à un même menu défini dans un autre controller.

Bien entendu, il faut définir dans "screen1.fxml" un conteneur de type AnchorPane qui te permette d'inclure la barre de menu au dessus du contenu de la fenêtre.
Voici un exemple des modifs que j'ai apporté à screen1Controller.java :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
    @FXML
    private AnchorPane menuAnchorPanePane;
 
    /**
     * Initializes the controller class.
     */
    public void initialize(URL url, ResourceBundle rb) { 	
        // Ajout de la barre de menu
    	FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("MenuBar.fxml"));
    	Pane cmdPane;
		try {
			cmdPane = (Pane) fxmlLoader.load();
			menuAnchorPanePane.getChildren().add(cmdPane);
		} catch (IOException e1) {
			e1.printStackTrace();
		}
 
    }

Code de screen1.fxml

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
 
<AnchorPane id="AnchorPane" minHeight="122.0" prefHeight="220.0" prefWidth="198.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="screensframework.Screen1Controller">
  <children>
      <BorderPane layoutX="1.0" prefHeight="200.0" prefWidth="200.0">
         <center>
          <VBox alignment="CENTER" prefHeight="225.0" prefWidth="200.0" spacing="20.0" BorderPane.alignment="CENTER">
            <children>
              <Label text="Home Screen">
                <font>
                  <Font size="18.0" />
                </font>
              </Label>
              <HBox alignment="CENTER" prefHeight="57.0" prefWidth="281.0" spacing="20.0">
                <children>
                  <Button mnemonicParsing="false" onAction="#goToScreen2" text="Screen2" />
                  <Button mnemonicParsing="false" onAction="#goToScreen3" text="Screen3" />
                </children>
              </HBox>
            </children>
            <padding>
              <Insets />
            </padding>
          </VBox>
         </center>
         <top>
            <AnchorPane fx:id="menuAnchorPanePane" prefHeight="25.0" BorderPane.alignment="CENTER" />
         </top>
      </BorderPane>
  </children>
</AnchorPane>

Voici un exemple de code pour le fichier MenuBar.fxml

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
 
<?xml version="1.0" encoding="UTF-8"?>
 
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
 
<AnchorPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <MenuBar prefHeight="25.0" prefWidth="128.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <menus>
          <Menu mnemonicParsing="false" text="File">
            <items>
              <MenuItem mnemonicParsing="false" text="Close" />
            </items>
          </Menu>
          <Menu mnemonicParsing="false" text="Edit">
            <items>
              <MenuItem mnemonicParsing="false" text="Delete" />
            </items>
          </Menu>
          <Menu mnemonicParsing="false" text="Help">
            <items>
              <MenuItem mnemonicParsing="false" text="About" />
            </items>
          </Menu>
        </menus>
      </MenuBar>
   </children>
</AnchorPane>

le problème que je rencontre avec cette config c'est que je n'arrive pas à étendre la barre de menu sur toute la largeur de la fenêtre...
En tous cas, je pense que c'est une piste qui peut t'intéresser.

Merci Anthony
J'ai testé et mise à part la largeur du menu, les changements de screnns se font sans probleme. La ou ca coince, c'est que de la barre de menu ou toolbar commune, je voudrais pouvoir faire mes changements d'ecrans...
Donc, j'ai ajouté toolbar et boutons au menu

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
<AnchorPane prefHeight="67.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.MenuBarController">
   <children>
      <VBox prefHeight="200.0" prefWidth="149.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <MenuBar>
              <menus>
                <Menu mnemonicParsing="false" text="File">
                  <items>
                    <MenuItem mnemonicParsing="false" text="Close" />
                  </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Edit">
                  <items>
                    <MenuItem mnemonicParsing="false" text="Delete" />
                  </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Help">
                  <items>
                    <MenuItem mnemonicParsing="false" text="About" />
                  </items>
                </Menu>
              </menus>
            </MenuBar>
            <ToolBar prefHeight="40.0" prefWidth="200.0">
              <items>
                <Button mnemonicParsing="false" onAction="#goToScreen1" text="Screen1" />
                  <Button mnemonicParsing="false" onAction="#goToScreen2" text="Screen2" />
                  <Button mnemonicParsing="false" onAction="#goToScreen3" text="Screen3" />
              </items>
            </ToolBar>
         </children>
      </VBox>
   </children>
</AnchorPane>

J'ajouté un controleur

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
package application;
 
import java.net.URL;
import java.util.ResourceBundle;
 
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
 
public class MenuBarController implements Initializable , ControlledScreen{
	ScreensController myController;
	public void setScreenParent(ScreensController screenParent){
        myController = screenParent;
    }
    @FXML
    private void goToScreen1(ActionEvent event){
       myController.setScreen(ScreensFramework.screen1ID);
    }
 
    @FXML
    private void goToScreen2(ActionEvent event){
       myController.setScreen(ScreensFramework.screen2ID);
    }
 
    @FXML
    private void goToScreen3(ActionEvent event){
       myController.setScreen(ScreensFramework.screen3ID);
    }
	@Override
	public void initialize(URL arg0, ResourceBundle arg1) {
		// TODO Auto-generated method stub
 
	}
}

et quand je clique sur un des boutons de la toolbar, j'obtiens une erreur...

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
Exception in thread "JavaFX Application Thread" java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
	at javafx.fxml.FXMLLoader$MethodHandler.invoke(Unknown Source)
	at javafx.fxml.FXMLLoader$ControllerMethodEventHandler.handle(Unknown Source)
	at com.sun.javafx.event.CompositeEventHandler.dispatchBubblingEvent(Unknown Source)
	at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(Unknown Source)
	at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(Unknown Source)
	at com.sun.javafx.event.CompositeEventDispatcher.dispatchBubblingEvent(Unknown Source)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.EventUtil.fireEventImpl(Unknown Source)
	at com.sun.javafx.event.EventUtil.fireEvent(Unknown Source)
	at javafx.event.Event.fireEvent(Unknown Source)
	at javafx.scene.Node.fireEvent(Unknown Source)
	at javafx.scene.control.Button.fire(Unknown Source)
	at com.sun.javafx.scene.control.behavior.ButtonBehavior.mouseReleased(Unknown Source)
	at com.sun.javafx.scene.control.skin.BehaviorSkinBase$1.handle(Unknown Source)
	at com.sun.javafx.scene.control.skin.BehaviorSkinBase$1.handle(Unknown Source)
	at com.sun.javafx.event.CompositeEventHandler$NormalEventHandlerRecord.handleBubblingEvent(Unknown Source)
	at com.sun.javafx.event.CompositeEventHandler.dispatchBubblingEvent(Unknown Source)
	at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(Unknown Source)
	at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(Unknown Source)
	at com.sun.javafx.event.CompositeEventDispatcher.dispatchBubblingEvent(Unknown Source)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(Unknown Source)
	at com.sun.javafx.event.EventUtil.fireEventImpl(Unknown Source)
	at com.sun.javafx.event.EventUtil.fireEvent(Unknown Source)
	at javafx.event.Event.fireEvent(Unknown Source)
	at javafx.scene.Scene$MouseHandler.process(Unknown Source)
	at javafx.scene.Scene$MouseHandler.access$1500(Unknown Source)
	at javafx.scene.Scene.impl_processMouseEvent(Unknown Source)
	at javafx.scene.Scene$ScenePeerListener.mouseEvent(Unknown Source)
	at com.sun.javafx.tk.quantum.GlassViewEventHandler$MouseEventNotification.run(Unknown Source)
	at com.sun.javafx.tk.quantum.GlassViewEventHandler$MouseEventNotification.run(Unknown Source)
	at java.security.AccessController.doPrivileged(Native Method)
	at com.sun.javafx.tk.quantum.GlassViewEventHandler.handleMouseEvent(Unknown Source)
	at com.sun.glass.ui.View.handleMouseEvent(Unknown Source)
	at com.sun.glass.ui.View.notifyMouse(Unknown Source)
	at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
	at com.sun.glass.ui.win.WinApplication.lambda$null$141(Unknown Source)
	at com.sun.glass.ui.win.WinApplication$$Lambda$37/1109371569.run(Unknown Source)
	at java.lang.Thread.run(Unknown Source)
Caused by: java.lang.reflect.InvocationTargetException
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
	at java.lang.reflect.Method.invoke(Unknown Source)
	at sun.reflect.misc.Trampoline.invoke(Unknown Source)
	at sun.reflect.GeneratedMethodAccessor1.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
	at java.lang.reflect.Method.invoke(Unknown Source)
	at sun.reflect.misc.MethodUtil.invoke(Unknown Source)
	... 52 more
Caused by: java.lang.NullPointerException
	at application.MenuBarController.goToScreen3(MenuBarController.java:27)
	... 61 more

En fait, je ne comprends pas bien... C'est une structure d'appli relativement courante. Comment font les developpeurs javaFx ?

C'est pourtant clair, non :

Code:

1
2
Caused by: java.lang.NullPointerException
	at application.MenuBarController.goToScreen3(MenuBarController.java:27)

Pour la barre qui ne s’étend pas horizontalement, tu peux simplement mettre sa maxWidth = Double.MAX_VALUE via SceneBuilder.

Et de toute manière, tu peux simplifier ton FXML de :

Code:

1
2
3
4
5
6
7
<AnchorPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <MenuBar prefHeight="25.0" prefWidth="128.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         [...]
      </MenuBar>
   </children>
</AnchorPane>

vers :

Code:

1
2
3
<MenuBar prefHeight="25.0" prefWidth="128.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
   [...]
</MenuBar>