Discussion :

[coaut898]

Bonjour,

Je me permets de poster un message pour savoir comment je peux résoudre mon problème de multi rectangle avec FXML.

Quelques explications :

Je dois réaliser un scrabble (15 sur 15 = 225 cases) donc avec SceneBuilder, je créé un GridPane contenant 15 rectangles par 15.

Je souhaite réaliser des actions communes sur chacun des rectangles :
- Lorsque je clique dessus
- Lorsque je survole
- ...

Actuellement, je sais réaliser l’opération individuellement (pour un rectangle seulement) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
@FXML
private Rectangle A1;
 
@FXML
private void mouseEnter(MouseEvent event) throws IOException {
     A1.setFill(Color.LIGHTGREY);
     }

Comment puis-je faire la même action sur tout les rectangles en question ?

Cordialement

[bouye]

En déplaçant ta logique et en la faisant sur la grille (le conteneur - le plateau de jeu) et non pas sur les rectangles individuels qu'elles contient. De plus, chaque rectangle ayant la même taille, de simples divisions permettent de retrouver au-dessus de quel rectangles on se trouve, lesquels sont adjacents, etc.

Suggestion : plutôt que d'affecter des couleurs manuellement, utilise les CSS et des pseudoclasses (en CSS) ça te permettra plus facilement de customiser la couleur sans l'écrire en dur et plus tard de complètement changer l'apparence en utilisant par exemple des images etc. sans devoir aller retaper dans le code.

[coaut898]

Bonjour,

Merci de votre réponse.

Pour l'affection des couleurs, avec CSS (mouseover par exemple) ça sera plus simple pour moi.

Effectivement chaque rectangle ont la même taille, j'ai un total de 225 rectangles qui sont contenu dans un GridPane, est-ce la meilleur structure pour modéliser un scrabble ?

Quand vous dîtes, de mettre ma logique sur le conteneur et non les rectangles individuelles, je suis d'accord mais chaque rectangle ont une position différente et ne font pas la même chose (mot double, mot triple par exemple, je rentre un petit peu dans les règles du scrabble). Vous parlez de simples divisions afin de retrouver la localisation du rectangle, puis-je avoir plus de détails ou un exemple concret ?

Cordialement

[bouye]

Un GridPane me semble un poil lourd pour une simple grille carrée.

Certaines choses sont propres aux cellules (mot compte triple; déjà occupé par une lettre; etc), mais la logique de sélection à la souris peut être faite dans le conteneur parent (puisque tu ne voulais pas dupliquer cette logique dans chaque cellue). Il va falloir que tu fasse des choix suivant ce que tu peux centraliser et ce que tu peux laisser dans un cellule. A priori, vu de l'extérieur ça serait bien moins prise de tête de tout centraliser sur la grille.

Main.java

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
package scrabble;
 
import java.net.URL;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) {
        final Grid grid = new Grid();
        final StackPane root = new StackPane();
        root.getChildren().add(grid);
        final Scene scene = new Scene(root, 500, 500);
        final URL cssURL = getClass().getResource("Scrabble.css");
        scene.getStylesheets().add(cssURL.toExternalForm());
        primaryStage.setTitle("Scrabble");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
 
}

Grid.java

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
package scrabble;
 
import java.util.ArrayList;
import java.util.List;
import java.util.stream.IntStream;
import javafx.event.EventHandler;
import javafx.geometry.Bounds;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Region;
 
public class Grid extends Region {
 
    private static final short CELL_NUMBER = 225;
    private static final short CELL_PER_COLUMN = 15;
    private static final short CELL_PER_ROW = 15;
    private final Group gridContainer = new Group();
    private final List<Cell> cells = new ArrayList<>(CELL_NUMBER);
 
    public Grid() {
        super();
        setId("grid");
        getStyleClass().add("scrabble-grid");
        IntStream.range(0, CELL_PER_ROW)
                .forEach(row -> IntStream.range(0, CELL_PER_COLUMN)
                        .forEach(column -> {
                            final String cellId = String.format("%d-%d", column, row);
                            final Cell cell = new Cell();
                            cell.setId(cellId);
                            cell.getProperties().put("column", column);
                            cell.getProperties().put("row", row);
                            cells.add(cell);
                        }));
        gridContainer.setId("grid-container");
        gridContainer.getChildren().setAll(cells);
        gridContainer.addEventFilter(MouseEvent.MOUSE_PRESSED, mousePressedHandler);
        getChildren().add(gridContainer);
    }
 
    @Override
    protected void layoutChildren() {
        super.layoutChildren();
        final double width = getWidth();
        final double height = getHeight();
        final Insets insets = getInsets();
        final double areaX = insets.getLeft();
        final double areaY = insets.getTop();
        final double areaW = Math.max(0, width - (insets.getLeft() + insets.getRight()));
        final double areaH = Math.max(0, height - (insets.getTop() + insets.getBottom()));
//        System.out.println(areaW + " " + areaH);
        if (areaW == 0 || areaH == 0) {
            return;
        }
        final double cellSide = Math.min(areaW, areaH) / CELL_PER_COLUMN;
        IntStream.range(0, CELL_PER_ROW)
                .forEach(row -> IntStream.range(0, CELL_PER_COLUMN)
                        .forEach(column -> {
                            final int index = row * CELL_PER_COLUMN + column;
                            final Cell cell = cells.get(index);
                            final double x = column * cellSide;
                            final double y = row * cellSide;
                            cell.resizeRelocate(x, y, cellSide, cellSide);
                        }));
        final double gridX = areaX + (areaW - gridContainer.getBoundsInParent().getWidth()) / 2.0;
        final double gridY = areaY + (areaH - gridContainer.getBoundsInParent().getHeight()) / 2.0;
        gridContainer.relocate(gridX, gridY);
//        System.out.println(gridContainer.getLayoutX() + " --- " + gridContainer.getLayoutY());
    }
 
    private final EventHandler<MouseEvent> mousePressedHandler = mouseEvent -> {
        final double mouseX = mouseEvent.getX();
        final double mouseY = mouseEvent.getY();
        final Bounds gridBounds = gridContainer.getBoundsInLocal();
        final int column = (int) (CELL_PER_COLUMN * mouseX / gridBounds.getWidth());
        final int row = (int) (CELL_PER_ROW * mouseY / gridBounds.getHeight());
        System.out.println(column + " " + row);
        final int index = row * CELL_PER_COLUMN + column;
        final Cell cell = cells.get(index);
        System.out.println(cell.getId() + "      " + cell.getProperties().get("column") + " " + cell.getProperties().get("row"));
    };
 
    public static class Cell extends Region {
 
        public Cell() {
            super();
            setId("cell");
            getStyleClass().add("scrabble-cell");
            setManaged(false);
        }
    }
}

Scrabble.css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.scrabble-grid {
    -fx-border-color: red;
    -fx-padding: 50px;
}
.scrabble-cell {
    -fx-border-color: blue;
}
.scrabble-cell:hover {
    -fx-background-color: beige;
}

[coaut898]

Merci de votre exemple très concret.

A la base, j'avais poser la question car je ne savais pas comment réaliser cela avec FXML de JavaFX.

Votre exemple me permet de mieux comprendre votre méthode, mais puis-je faire cela en utilisant FXML ?

Cordialement

[bouye]

Le reste de l'interface peut être fait en FXML mais la grille ? Tu te vois vraiment créer manuellement un FXML contenant 225 cellules ?
Après si tu génères le FXML par un générateur de code (ce qui n'est pas très dur à coder en qq dizaines de lignes; après tout c'est juste du XML) y a pas de soucis mais il te faudra quand même procéder à un layout manuel en invoquant layoutChildren() si ta grille est redimensionnable comme ici. Si elle ne l'est pas, ,par contre tu peux effectivement mettre les placements et tailles de cellules en dur dans le FXML (ici aussi via un générateur de FXML).

Pour pouvoir accéder à <children> il faudra changer un peu l'héritage et faire par exemple que Grid hérite de Pane. Mais comme tu peux utiliser des composants customs en FXML, tu peux faire :

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<Grid id="grid" fx:id="grid" styleClass="scrabble-grid">
  <children>
      <Group id="grid-container"> 
        <children>
           <Cell id="0-0" fx:id="0-0"/>
           [...]
        <children>
      </Group>
  <children>
</Grid>

Ca sera un peu plus compliqué de faire ouvrir un tel FXML dans SceneBuilder mais ce n'est pas impossible (voir FAQ et article récemment publié).

Et dans le cas d'une grille redimentionnable, ça demande un petit peu de réécriture dans layoutChildren() puisque désormais on a plus le contenu initialisé depuis le constructeur (tout est injecté par le loader après initialisation).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
public Grid() {
    super();
    setId("grid");
    getStyleClass().add("scrabble-grid");
}
 
private Group gridContainer;
private List<Cell> cells;
private boolean initialized = false;
 
@Override
protected void layoutChildren() {
    super.layoutChildren();
    if (!initialized) {
       if (getChildren().isEmpty()) {
           return;
       }
       gridContainer = (Group)getChildren().get(0);
       cells = gridContainger.getChildren()
           .stream()
           .map(node -> (Cell)node)
           .collect(Collectors.toList());
       initialized = true;
    }
    [...]

[coaut898]

Bonjour,

Merci de votre aide.

Quand je parle de FXML, j'utilise scene builder pour générer le fichier FXML, en peu de temps je peux générer 225 rectangles contenu dans un Group comme votre exemple. Ma grille sera non redimensionnable.

Dans Scene Builder, lorsque je clique sur un rectangle quelconque, je peux accéder a ses propriétés de "Layout" :



Quand vous dîtes

tu peux effectivement mettre les placements et tailles de cellules en dur dans le FXML

, vous parlez de ses propriétés que je dois utiliser pour permettre de localiser chaque rectangle ?

Cordialement

[bouye]

Justement je ne vois pas l’intérêt de passer par SceneBuilder pour faire cela alors qu'un générateur de code ira bien plus vite. Et permettra de changer les tailles quasiment instantanément le jour où tu te décideras de porter ton programme vers une autre plateforme/une autre taille d'écran.

[coaut898]

Bonjour,

Comme j'ai utilisé auparavant SceneBuilder, dans la suite je me disais de tout faire avec mais si vous me conseillez de faire autrement, il y a pas de problème.

Avec un générateur de code, c'est à dire ?

Actuellement, ce que j'ai fais avec FXML :
- une interface graphique pour la connexion (login, password, inscription, modalites d'inscription)
- une interface graphique des modalités d'inscription
- une interface graphique de l'inscription d'un utilisateur
- une interface graphique du Menu Scrabble (créer une partie ou l'observer)
- une interface graphique avec la grille de 225 cases et les boutons pour y jouer (c'est celle-ci que vous me conseillez de faire avec un générateur de code ?)

La dernière interface graphique (grille de scrabble), je ne l'a fais pas avec FXML ?

Cordialement

[bouye]

Sisi mais tu te crée un petit programme qui va générer ton FXML en fonction de deux paramètres : la taille de ta grille et le nom du fichier de sortie. Comme ce n'est pas redimensionnable tu peux précalculer toutes les positions qui seront écrites dans les 225 cellules présentes dans le FXML.

Oh en si tu veux skinner plus facilement notamment avec -fx-background-image, je te conseille d'utiliser Region au lieu de Rectangle pour tes cellules.

[coaut898]

Bonjour,

Encore merci de votre investissement.

Je ne vois pas comment générer mon FXML avec un petit programme, actuellement je sais le faire avec Scene Builder qui génère des lignes XML en fonction de ce que je modélise.
Pourriez vous me donnez un exemple ?

Cordialement

[bouye]

C'est pourtant pas bien dur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
public static void generateGridAsFXML(final File file, final int width) throws IOException {
    try (final OutputStream output = new FileOutputStream(file)) {
       generateGridAsFXML(output , width);
    }
}
 
public static void generateGridAsFXML(final OutputStream output, final int width) throws IOException {
    try (final Writer writer = new OutputStreamWriter(output )) {
       generateGridAsFXML(writer, width);
    }
}
 
public static void generateGridAsFXML(final Writer output, final int width) throws IOException {
    try (final PrintWriter out = new PrintWriter(output, "UTF-8")) {
         writer.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
         writer.println();
         writer.println("<?import javafx.scene.text.*?>");
         writer.println("<?import java.lang.*?>");
         writer.println("<?import java.util.*?>");
         writer.println("<?import javafx.scene.*?>");
         writer.println("<?import javafx.scene.control.*?>");
         writer.println("<?import javafx.scene.layout.*?>");
         writer.println();
         // Générer le contenu ici avec tous les bons attributs ("id", "fx:id", etc) et les bons positionnements des cellules en fonction de la taille de la grille.
         [...]
    }
}

[coaut898]

Je vous remercie

Cordialement