Problème multi rectangle avec FXML [SceneBuilder]

Version imprimable

07/05/2015, 16h22
coaut898

Problème multi rectangle avec FXML [SceneBuilder]
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:

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
07/05/2015, 23h41
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.
08/05/2015, 12h08
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

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:

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:

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:

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

08/05/2015, 17h54
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

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:

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:

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; } [...]

09/05/2015, 13h37
coaut898

1 pièce(s) jointe(s)

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" :

Pièce jointe 177294

Quand vous dîtes

Citation:

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
09/05/2015, 23h54
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.
10/05/2015, 12h26
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
10/05/2015, 22h04
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.
11/05/2015, 18h40
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

:ptdr: C'est pourtant pas bien dur :

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
 
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.
         [...]
    }
}

23/05/2015, 11h54
coaut898

Je vous remercie

Cordialement