Discussion :

[Ade123]

Bonjour,
J'ai un projet dans mon école et je dois créer un Cube Escape.
J'utilise JavaFX et le scene Builder.
J'ai crée un magazine avec 9 pages.
Le problème, c'est que pour tourner les pages j'utilise toujours le même bouton (tournerPageDroite pour aller a droite et tournerPageGauche pour l'inverse).
Et quand je fais ça, je fais des toFront et des toBack des images afin de les afficher.
Mais c'est toujours le même code dans les if.

Je vous montre le code pour le bouton de droite:

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 @FXML
    private Button tournerPageDroite;
    @FXML
    private Button tournerPageGauche;
 
 
    //toutes les pages du magazine
    @FXML
    private ImageView page0;
    @FXML
    private ImageView Page1;
    @FXML
    private ImageView Page2;
    @FXML
    private ImageView Page3;
    @FXML
    private ImageView Page4;
    @FXML
    private ImageView Page5;
    @FXML
    private ImageView Page6;
    @FXML
    private ImageView Page7;
    @FXML
    private ImageView Page8;
    @FXML
    private ImageView page9;
 
 
    //images magazine
    @FXML
    private ImageView magazine;
    @FXML
    private ImageView pageDroiteMagazine;
    @FXML
    private ImageView pageGaucheMagazine;
 
    //autres variables
    private static int page = 0;
 
public void clicPDMag(MouseEvent e){
 
        if(e.getSource() == tournerPageDroite && page == 8) {
            magazine.toBack();
            Page7.toBack();
            Page8.toBack();
            pageGaucheMagazine.toFront();
            page9.toFront();
            tournerPageDroite.toFront();
            tournerPageGauche.toFront();
            page = 9;
        }
 
        //si on est sur la septieme et huitieme page
        if(e.getSource() == tournerPageDroite && page == 78) {
            magazine.toBack();
            Page7.toBack();
            Page8.toBack();
            pageGaucheMagazine.toFront();
            page9.toFront();
            tournerPageDroite.toFront();
            tournerPageGauche.toFront();
            page = 9;
        }
 
        //si on est sur la cinquieme et sixieme page
        if(e.getSource() == tournerPageDroite && page == 56) {
            Page5.toBack();
            Page6.toBack();
            Page7.toFront();
            Page8.toFront();
            tournerPageDroite.toFront();
            tournerPageGauche.toFront();
            page = 78;
        }
        //si on est sur la troisieme et quatrieme page
        if(e.getSource() == tournerPageDroite && page == 34) {
            Page3.toBack();
            Page4.toBack();
            Page5.toFront();
            Page6.toFront();
            tournerPageDroite.toFront();
            tournerPageGauche.toFront();
            page = 56;
        }
        //si on est sur la premiere et deuxieme page
        if(e.getSource() == tournerPageDroite && page == 12) {
            Page1.toBack();
            Page2.toBack();
            page9.toBack();
            Page3.toFront();
            Page4.toFront();
            tournerPageDroite.toFront();
            tournerPageGauche.toFront();
            page = 34;
        }
        if(e.getSource() == tournerPageDroite && page == 0) {
            pageDroiteMagazine.toBack();
            page0.toBack();
            magazine.toFront();
            Page1.toFront();
            Page2.toFront();
            tournerPageDroite.toFront();
            tournerPageGauche.toFront();
            page = 12;
        }
 
 
    }

Pour information, magazine est une image de fond qui représente un livre ouvert sur 2 pages.
pageDroiteMagazine représente seulement la partie droite du livre et pageGaucheMagazine inversement.
La fonction "clicPDMag" est due a un onMouseClicked sur le scene builder.
Je suis dans le controller et je l'ai bien relié au scene builder.
Ce magazine marche très bien comme ça mais j'aimerai vraiment l'optimiser car je trouve que c'est vraiment trop long (surtout qu'il y a aussi le bouton de gauche)

J'ai essayé de faire un tableau d'image:

Code :

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

ImageView[] tabPages= new ImageView[]{page0, Page1, Page2, Page3, Page4, Page5, Page6, Page7, Page8, page9};

Mais je n'arrive pas à l'utiliser quand je code.
J'ai tenté avec ce code et ce tableau:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
if(e.getSource() == tournerPageDroite && page!= 8) {
            tabPages[page].toBack();
            tabPages[page-1].toBack();
            magazine.toFront();
            page++;
            tabPages[page].toFront();
            page++;
            tabPages[page].toFront();
            tournerPageDroite.toFront();
            tournerPageGauche.toFront();
        }

Mais ca ne marche pas.

Merci d'avance si vous trouvez une autre solution ou juste l'erreur dans mon tableau ou mon code.
J'espère que se que j'ai expliqué n'était pas trop brouillon.

[bouye]

Note : SceneBuilder c'est le nom du logiciel qui permet de créer des FXML dans un environnement WYSIWYG (« what you see is what you get » = « ce que vous voyez est ce que vous obtenez » ; bref un éditeur visuel). Tu veux sans doute parler de FXML à la place.

Certaines choses ne sont pas très claires dans la conception de ton magazine car tu ne sous pas pas donné le FXML et tu ne nous pas pas mis de capture d'écran pour qu'on puisse voir ce à quoi ca ressemble.
Je note :

• Plusieurs ImageView, autant que de pages - c'est pour faire un aperçu des pages dans une sorte de table des matières ou une interface de navigation rapide ?
• Une ImageView pour la page de droite.
• Une ImageView pour la page de gauche.
• Une ImageView pour le magazine - fonction ?

L'utilisation de toBack() et toFront() me semble étrange ici et donc ça serait bien d'avoir un aperçu de ce que tu tente de faire.

Plus généralement. Tu as la variable page qui indique ta page courante. A partir de là tu peux retrouver dans le tableau la bonne page à afficher. En fonction de ce nombre tu peux donc connaitre qui est la page de gauche et qui est la page de droite. Tu peux aussi savoir si une de ces 2 pages est vide (ex : 0 = pas de page de gauche, page max = pas de page de doite si ce nombre est impair). Donc tu es sensé pouvoir écrire l'algorithme de changement de page de manière générique sans avoir à tenir compte des valeurs actuelles de ce numéro de magazine qui tu es entrain d'afficher (et qui a 10 page qui sont numérotée de 0 à 9).

Normalement si je clique sur une page N, il me faut déterminer qui est la page à afficher, si elle va à droite où à gauche (page est pair ou impair) ce qui du coup me permet de trouver la page en vis-à-vis (s'il y en a une, voir plus haut). Ensuite je peux récupérer les Image contenue dans les ImageView de ces pages et les afficher dans les ImageView des pages de droite et de gauche (une Image peut-être partagée entre plusieurs ImageView).

[Ade123]

Bonjour,
Oui j'ai crée un fichier FXML où j'ai mis mon magazine.
Voici donc des images de mon magazine.
La page de couverture: on y accède en appuyant sur le bouton "Accéder au magazine":



L'intérieur du magazine:



La page de fin:



Par contre, je ne comprend pas votre question désolé.
Mais oui chaque page a une image. La variable page prend les valeurs 0 = page de couverture, 12 = page 1 et page 2 etc. Cette variable me sert de repère mais permet aussi d'afficher les bonnes pages avec le même bouton.
J'ai codé les pages 0 et 9 pour afficher qu'une seul page aussi donc ce problème est réglé.
Il n'y a pas de fonction pour le magazine c'est juste une imageView qui me permet d'afficher le fond du livre.

Ensuite, pour votre idée de page impair et pair, ca veut dire que pour chaque image je dois mettre un onMouseClicked si j'ai bien compris ce que vous voulez dire. Le problème, c'est que ça ne résoudra pas mon problème de redondance. J'aurai juste beaucoup plus de fonctions.

Et pour cette phrase que vous m'avez écrite:
"Ensuite je peux récupérer les Image contenue dans les ImageView de ces pages et les afficher dans les ImageView des pages de droite et de gauche (une Image peut-être partagée entre plusieurs ImageView). "
Je ne comprend pas trop ce que vous voulez dire désolé.

En tout cas merci de votre aide.

[bouye]

Mais oui chaque page a une image. La variable page prend les valeurs 0 = page de couverture, 12 = page 1 et page 2 etc.

Pourquoi se casser la tête à créer un identifiant qui est la composition des indices de 2 pages alors que stocker l'indice de la page active est nettement plus rapide et plus simple vu que ca permet facilement de retrouver les 2 pages affichées puisqu'on affiche toujours 2 pages en vis-à-vis.

Ensuite, pour votre idée de page impair et pair, ca veut dire que pour chaque image je dois mettre un onMouseClicked si j'ai bien compris ce que vous voulez dire. Le problème, c'est que ça ne résoudra pas mon problème de redondance. J'aurai juste beaucoup plus de fonctions.

Bien sur que non puisqu'on peut placer le même écouteur sur plusieurs nœuds. L'important c'est de savoir écrire du code générique pour toutes les pages plutôt que du code spécifique à la page N.

"Ensuite je peux récupérer les Image contenue dans les ImageView de ces pages et les afficher dans les ImageView des pages de droite et de gauche (une Image peut-être partagée entre plusieurs ImageView). "
Je ne comprend pas trop ce que vous voulez dire désolé.

ImageView (une des pages 0 à N) sert à afficher une Image, cette même image peut être placée dans l'ImageView qui sert de page droite ou gauche (pageDroiteOuGaughe.setImage(aperçuN.getImage())). Ca évite de devoir charger 2 fois l'image en mémoire (bien sur c'est utile que si les aperçus sur le coté affichent les mêmes images HD que la page du magazine)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Lorsqu'on sélectionne la page N.
int pageGauche = -1;
int pageDroite = -1;
if (page % 2 == 0) { // Page active paire -> page de droite.
    pageGaughe = page - 1; 
    pageDroite = page;
} else { // Page active impaire -> page de gauche.
   pageGaughe = page;
   pageDroite = (page == maxPage -1) ? -1 : page + 1;
}
[...]
// Affichage des pages.
pageGaucheView.setImage((pageGauche == -1) ? null : aperçus[pageGauche].getImage());
pageDroiteView.setImage((pageDroite == -1) ? null : aperçus[pageDroite].getImage());