Insertion dynamique d'un bouton dans chaque ligne d un TableView avec pattern MVC

**johanndebutant** · 10/03/2018, 19h09

Bonjour,
J ai réalisé il y a quelques mois un petit programme qui permettait d'ajouter lors d une création de ligne d un tableView un bouton pour supprimer éventuellement la ligne et ça marchait plutôt pas mal mais j'ai été obligé de refaire ce programme avec une architecture MVC car par ailleurs il y avait des Bugs insolubles

. Malheureusement je n'arrive pas à intégrer mon bouton dynamique suppression dans la nouvelle monture . Pouvez vous m'aider ?

Voici un extrait de mon ancien programme avec la gestion et la création de mon bouton supprimer

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
public class Main extends Application {
  public static void main(String[] args) {
    launch(args);
  }
  @Override
  public void start(Stage primaryStage) {
    TableView table = new TableView();
    table.setEditable(true);
 
    final TableColumn<Coordonnees, Boolean> visibleColumn = new TableColumn<>("A supprimer");
	        visibleColumn.setMinWidth(50/2);
	        visibleColumn.setCellValueFactory(new PropertyValueFactory<>("visible"));
 
	        final TableColumn<Coordonnees, Integer> OrdreCol = new TableColumn<>("Ordre");
	        OrdreCol.setMinWidth(50/2);
	        OrdreCol.setCellValueFactory( new PropertyValueFactory<>("Ordre"));
 
	        final TableColumn<Coordonnees, Double> LongeCol = new TableColumn<>("Longitude");
	        LongeCol.setMinWidth(50);
	        LongeCol.setCellValueFactory( new PropertyValueFactory<>("Longitude"));
 
	        final TableColumn<Coordonnees, Double> LatCol = new TableColumn<>("Latitude");
	        LatCol.setMinWidth(50);
	        LatCol.setCellValueFactory(new PropertyValueFactory<>("Latitude"));
 
	        table.getColumns().setAll(visibleColumn, OrdreCol, LongeCol, LatCol);
 
     //////Gestion affichage bouton suppression Boolean sert � l'espace Bouton
	        visibleColumn.setCellFactory(
	                new Callback<TableColumn<Coordonnees, Boolean>, TableCell<Coordonnees, Boolean>>() {
 
	                    @Override
	                    public TableCell<Coordonnees, Boolean> call(TableColumn<Coordonnees, Boolean> p) {
	                        return new ButtonCell();
	                    } });
 
 
    StackPane root = new StackPane();
    root.getChildren().add(table);
    primaryStage.setScene(new Scene(root, 200, 250));
    primaryStage.show();
  }
 
  // Classe coordonees pour pouvoir afficher les coordonnees dans le tableau TableView
	public static class Coordonnees {
			static int ordrebridge=-1;
			private final SimpleStringProperty longitude;
			private final SimpleStringProperty latitude;
			private final SimpleIntegerProperty ordre;
 
		private	Coordonnees (String ordre , String lati , String longi){
				ordrebridge++;
				this.ordre=new SimpleIntegerProperty(ordrebridge);
				this.longitude = new SimpleStringProperty(longi);
				this.latitude = new SimpleStringProperty(lati);
 
			}
 
			public String getLongitude() {
		        return longitude.get();
		    }
 
		    public void setLongitude(String longi) {
		       longitude.set(longi);
		    }
 
		    public String getLatitude() {
		        return latitude.get();
		    }
 
		    public void setLatitude(String lati) {
		      latitude.set(lati);
		    }
 
		    public int getOrdre() {
		        return ordre.get();
		    }
 
		    public void setOrdre(int position) {
		        ordre.set(position);
		    }
		}	
 
	//Classe permettant d ajouter un bouton suppression a chaque ligne du tableau avec gestion de chaque bouton Suppression
	public class ButtonCell extends TableCell<Coordonnees, Boolean>  {
 
		final Button cellButton = new Button("Suppression");
		int monmarker=0;
 
	 ButtonCell() {
	 	cellButton.setMinWidth((50/2)-4);
	 	cellButton.getStyleClass().add("my-btn1");
 
	     cellButton.setOnAction(new EventHandler<ActionEvent>() {
 
 
	         @Override
	         public void handle(ActionEvent t) {
	             // do something when button clicked
 
	             Coordonnees coordoasup = (Coordonnees) ButtonCell.this.getTableView().getItems().get(ButtonCell.this.getIndex());
	            // obtenir le numero du bouton à detruire
	            /*
	             data.remove(coordoasup);
	             monmarker = coordoasup.getOrdre()-1;
	             mespoints.remove(coordoasup);
 
	             webview.getEngine().executeScript("clearMarkers("+ monmarker +");");
	           */
	         }
	     });
	 }
 
	 //Display button if the row is not empty
	 @Override
	 protected void updateItem(Boolean t, boolean empty) {
	     super.updateItem(t, empty);
	     if (!empty) {
	         setGraphic(cellButton);
	     }
	 }
	}

et un essai de MVC avec un simple TableView mais là j ai quelques problèmes pour mettre un bouton dynamique à chaque ligne créer
Ici mon contrôleur:

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
 
public class SampleController {
	String [] latitrajet ;
	String [] longitrajet;
	String Envoijavascript;
	boolean tableviewc,tableviewc1 ;
	ObservableList<Coordonnees> coordonnees = FXCollections.observableArrayList();
 
	static int compteur = 0;
	int monmarker=0;
 
 
 
 
	@FXML
	private URL location;
 
	@FXML
	private ResourceBundle resources;
 
	@FXML
	private Button B1,B2,B3,B4,B5;
 
	@FXML
	public WebView webview;
 
	@FXML
	private Button menu;
 
	@FXML
	private Button enregistrement;
 
	@FXML
	private TableView<Coordonnees> tableview1 ;
 
	@FXML
	private TableColumn<Coordonnees,String> pointnumero;
 
	@FXML TableColumn<Coordonnees,String> longitude1;
 
	@FXML
	private TableColumn<Coordonnees,String> latitude1;
 
	@FXML
	private TableColumn<Coordonnees,Button> delete;
 
 
	//private Main main;
 
public SampleController() {
 
	}
 
	@FXML
	private void initialize() throws SocketException
	{		
	// initialisation des colonnes de tableview1
		pointnumero.setCellValueFactory(cellData -> cellData.getValue().OrdreProperty());
		latitude1.setCellValueFactory(cellData -> cellData.getValue().LatitudeProperty());
		longitude1.setCellValueFactory(cellData -> cellData.getValue().LongitudeProperty());
	//	delete.setCellValueFactory(new PropertyValueFactory<>("true"));
 
 
		tableview1.setVisible(true);
 
 
		webview.getEngine().getLoadWorker().stateProperty().addListener((ObservableValue<? extends Worker.State> observableValue, Worker.State oldValue, Worker.State newValue) -> {
			final boolean disabled = newValue != Worker.State.SUCCEEDED; 
 
		});
 
	}

et là , ma partie FXML :

Code XML :

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
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.web.WebView?>
 
<BorderPane xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.SampleController">
   <top>
      <AnchorPane prefHeight="800.0" prefWidth="600.0" BorderPane.alignment="CENTER">
         <children>
            <WebView fx:id="webview" layoutX="127.0" layoutY="20.0" prefHeight="580.0" prefWidth="604.0" /> 
            <TableView fx:id="tableview1" layoutX="93.0" layoutY="226.0" prefHeight="200.0" prefWidth="604.0">
                    <columns>
                      <TableColumn fx:id="pointnumero" prefWidth="151.0" text="numero">
        				</TableColumn>
                      <TableColumn fx:id="longitude1" prefWidth="151.0" text="Longitude" />
                      <TableColumn fx:id="latitude1" prefWidth="151.0" text="Latitude" />
                      <TableColumn fx:id="delete" prefWidth="151.0" text="Supprimer">
                     <graphic>
                        <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="135.0" text="Supprimer" />
                     </graphic></TableColumn>
                    </columns>
                  </TableView>
 
         </children>
      </AnchorPane>
   </top>
</BorderPane>

En attente de vous lire , et de mettre en pratique vos conseils.

**bouye** · 11/03/2018, 23h51

Je ne vois pas trop ce que tu essaies de faire dans ton FXML mais si tu veux qu'un bouton apparaisse dans pour chaque cellule de ta colonne, c'est pas la TableCell que tu dois passer.

Il t'est possible de spécifier la fabrique a cellule via FXML cependant (pas teste) :

Code XML :

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

1
2
3
4
5
6
7
8
<TableColumn fx:id="firstNameColumn" text="First Name" prefWidth="100">
     <cellValueFactory><PropertyValueFactory property="firstName" />
     </cellValueFactory>
     <cellFactory>
          <FormattedTableCellFactory alignment="center">
          </FormattedTableCellFactory>
     </cellFactory>
</TableColumn>

Et rien n’empêche ta cellule d'avoir elle-même une base FXML si tu veux tout faire en MVC.

PS : une manière plus simple de récupérer l'objet actuel lorsque tu cliques sur le bouton est de faire :

Code :

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

Coordonnees coordoasup = (Coordonnees) ButtonCell.this.getTableRow().getItem();

**johanndebutant** · 12/03/2018, 22h51

Bonjour Mr BOUYE,
Merci beaucoup pour votre réponse . J'ai jeté aussi un coup d'oeil sur le lien fourni : Au total si j ai tout saisi je dois aussi déclarer une <FXCollections fx:factory="observableArrayList"> dans le FXML qui permet de stocker mes objets instanciés Coordonnee et pour faire le lien entre les Variables de ma classe Coordonnee et cellValueFactory je dois déclarer autant de cellValueFactory dans le FXML qu'il y a de variables de ma classe Coordonnee à afficher :

ex Ma classe Coordonnee est defini par :

Code :

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

1
2
3
4
5
 
        private final SimpleStringProperty longitude;
	private final SimpleStringProperty latitude;
	private final SimpleStringProperty ordre;
	private Button bouton;

Je devrais donc avoir :

Code XML :

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
<TableColumn text="Ordre">
        <cellValueFactory><PropertyValueFactory property="ordre" />
        </cellValueFactory>
     </TableColumn>
     <TableColumn text="Longitude">
        <cellValueFactory><PropertyValueFactory property="longitude" />
        </cellValueFactory>
     </TableColumn>
<TableColumn text="Latitude">
        <cellValueFactory><PropertyValueFactory property="latitude" />
        </cellValueFactory>
     </TableColumn>
     <TableColumn text="Supprimer">
        <cellValueFactory><PropertyValueFactory property="bouton" />
        </cellValueFactory>
     </TableColumn>

Est ce bien cela pour la partie FXML ?
En attente de Vous lire.
Bien Cdt

**bouye** · 14/03/2018, 02h17

Déclarer la collection des objets a même le FXML n'est utile que si tu comptes fournir une liste finie écrite en dur (exp menu deroulant avec liste de choix dont le contenu ne change jamais) ou a des fins d’aperçu ou de tests (prototypage ou dans SceneBuilder par exemple). Dans le cadre d'une liste d'objet qui est fournie dynamiquement (ex: en provenance d'une BD, restauree a partir d'un fichier ou saisie par l'utilisateur), ca ne sert a rien.

EDIT - ensuite il faudrait peut-être aussi rajouter les méthodes accesseurs de ces propriétés. Et pourquoi c'est le modèle qui fourni le bouton ? Non que ce soit infaisable mais en bon découpage ce dernier devrait etre dans la cellule et non pas dans le modèle. Ca evitera des exception lorsque le bouton est réutilisé dans une cellule sans avoir été retiré de sa cellule parente précédente (les cellules sont réutilisées pour éviter de créer trop d'objet graphiques)

**johanndebutant** · 15/03/2018, 23h07

Bonjour Mr BOUYE,
Merci pour vos conseils mais je n y arrive pas . Voila ce que je souhaiterais obtenir Nom : Capture d’écran (17).png
Affichages : 1596
Taille : 270,0 Ko

Nom : Capture d’écran (17).png
Affichages : 1596
Taille : 270,0 Ko

et malheureusement voila le code erreur que je reçois : Nom : erreur.png
Affichages : 1629
Taille : 147,5 Ko

Voici le code FXML complet

Code XML :

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
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.web.WebView?>
<?import application.Coordonnees?>
<?import javafx.collections.FXCollections?>
<?import java.lang.*?>
<?import application.SampleController?>
 
<BorderPane xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.SampleController">
   <top>
      <AnchorPane prefHeight="800.0" prefWidth="600.0" BorderPane.alignment="CENTER">
         <children>
            <WebView fx:id="webview" layoutX="127.0" layoutY="20.0" prefHeight="580.0" prefWidth="604.0" />
            <Button fx:id="B1" layoutX="16.0" layoutY="44.0" mnemonicParsing="false" onAction="#SiB1" prefHeight="25.0" prefWidth="94.0" text="Depart" />
            <Button fx:id="B2" layoutX="17.0" layoutY="182.0" mnemonicParsing="false" onAction="#SiB2" prefHeight="25.0" prefWidth="94.0" text="Trajet" />
            <Button fx:id="B3" layoutX="16.0" layoutY="112.0" mnemonicParsing="false" onAction="#SiB3" prefHeight="25.0" prefWidth="94.0" text="Tableau Balises" />
            <Button fx:id="B4" layoutX="18.0" layoutY="256.0" mnemonicParsing="false" onAction="#SiB4" prefHeight="25.0" prefWidth="94.0" text="Tableau Reception" />
            <Button fx:id="B5" layoutX="19.0" layoutY="328.0" mnemonicParsing="false" onAction="#SiB5" prefHeight="25.0" prefWidth="94.0" text="Connexion" />
            <TableView fx:id="tableview" layoutX="128.0" layoutY="432.0" prefHeight="200.0" prefWidth="602.0">
                    <columns>
                      <TableColumn fx:id="longitude" prefWidth="120.0" text="Longitude" />
                      <TableColumn fx:id="latitude" prefWidth="120.0" text="Latitude" />
                        <TableColumn fx:id="boussole" prefWidth="120.0" text="Boussole" />
                        <TableColumn fx:id="tilt1" prefWidth="120.0" text="Tilt1" />
                        <TableColumn fx:id="tilt2" prefWidth="120.0" text="Tilt2" />
                    </columns>
                  </TableView>
            <TableView fx:id="tableview1" layoutX="128.0" layoutY="432.0" prefHeight="200.0" prefWidth="604.0">
                    <columns>
 
                      <TableColumn fx:id="pointnumero" prefWidth="151.0" text="numero">
        				</TableColumn>
                      <TableColumn fx:id="longitude1" prefWidth="151.0" text="Longitude" />
                      <TableColumn fx:id="latitude1" prefWidth="151.0" text="Latitude" />
                      <TableColumn fx:id="delete" prefWidth="151.0" text="Supprimer" >
                      	<cellValueFactory>
                      		<PropertyValueFactory property="bouton" />
     					</cellValueFactory>
     					<cellFactory>
          					<FormattedTableCellFactory alignment="center">
          					</FormattedTableCellFactory>
     					</cellFactory>
                      </TableColumn>
 
                    </columns>
                  </TableView>
            <Button fx:id="menu" layoutX="128.0" layoutY="654.0" mnemonicParsing="false" onAction="#Menubutton" prefHeight="25.0" prefWidth="113.0" text="Menu" />
            <Button fx:id="enregistrement" layoutX="632.0" layoutY="654.0" mnemonicParsing="false" onAction="#Enregistrementbutton" prefHeight="25.0" prefWidth="98.0" text="Enregistrer" />
 
         </children>
      </AnchorPane>
   </top>
</BorderPane>

Mais peut être que cela n'est pas possible en MVC ?
En attente de vous lire
Cdt

**bouye** · 16/03/2018, 07h02

Il manque l'import de PropertyValueFactory :

Code XML :

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

<?import javafx.scene.control.cell.PropertyValueFactory?>

Insertion dynamique d'un bouton dans chaque ligne d un TableView avec pattern MVC

JavaFX

Discussions similaires

Partager

Partager