Discussion :

[UchiwaItachi]

Bonjour,

Je débute dans la programmation GWT (2.5 sans librairies additionnelles), je souhaiterai créer une page qui contient une liste sans entête contenant des composants cliquable, personnalisé. Par exemple, je souhaiterai afficher un tableau contenant plusieurs modèles de voitures, le composant contiendra une image, avec en dessous la marque de la voiture, et en dessous le modèle de la voiture. Chaque cellule du tableau contiendra un de ces composants. Par exemple,
(ligne = 0, colonne = 0, composant) -> marque de voiture A, modèle 1
(ligne = 0, colonne = 1, composant) -> marque de voiture B, modèle 1
(ligne = 1, colonne = 0, composant) -> marque de voiture G, modèle 1
et ainsi de suite.

Au click sur un des composants, le détail de la voiture doit être affiché.

J'ai pensé tout d'abord à créer un CustomCell, puis ensuite un CustomWidget placé soit dans une Grid ou soit une Sous classe de Flextable, associé à un SimplePager.

Les exemples que j'ai trouvé sont des exemples classiques de création de tableau avec des colonnes.

Quelqu'un pourrait-il m'indiquait les composants GWT à utiliser pour ce que je souhaiterais réaliser ?

J'ai vu quelques exemples de codes HTML réalisant ce genre de fonctionnalités, et celui-ci utilisent dans la plupart du temps des balises <ul><li></li>.....</ul> et non des <table></table>.

[valkeke]

voir peut-être du côté de cellList ou cellTable voir peut-être nouvellement Datagrid....
difficile de dire le mieux pour ton cas...

on peut essayer plusieurs widgets différents car leur utilisation, leur implémentation est assez facile pour prototyper ta webapp....

[UchiwaItachi]

Merci pour ta réponse. J'avais effectivement pensé à CellTable en créant une classe Custom (Custom Cell) héritant de AbstractCell. Mais il me semble que l'on ne peut afficher qu'une seule colonne avec une CellTable.

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
 
public class OverviewCell extends AbstractCell<OverviewDisplay>{
 
	/**
     * The html of the image used for contacts.
     */
    private final String imageHtml;
 
 
    public OverviewCell(Image image) {
        //this.imageHtml = AbstractImagePrototype.create(image).getHTML();
    	this.imageHtml = image.getUrl();
    }
 
	@Override
	public void render(Context context, OverviewDisplay value, SafeHtmlBuilder sb) {
 
		 // Value can be null, so do a null check..
	     if (value == null) {
	        return;
	     }
 
	     sb.appendHtmlConstant("<table>");
 
	     // Add the contact image.
	     sb.appendHtmlConstant("<tr><td>");
	     sb.appendHtmlConstant(imageHtml);
	     sb.appendHtmlConstant("</td>");
 
	     // Add the name and address.
	     sb.appendHtmlConstant("<td style='font-size:95%;'>");
	     sb.appendEscaped(value.getMainInformation().getText());
	     sb.appendHtmlConstant("</td></tr><tr><td>");
	     sb.appendEscaped(value.getInformation().getText());
	     sb.appendHtmlConstant("</td></tr></table>");
 
	}
 
}

Après des recherches sur internet, je me suis tourné vers Custom widget héritant de la classe Composite qui pourrait être inséré dans une Flextable (Classe hérité de Flextable avec ajout de méthode qui permettent la pagination). Mais là, encore, est-il possible d'afficher côte à côte sur une même ligne des éléments qui n'ont rien à avoir entre eux.

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
 
public class OverviewWidget extends Composite {
 
	private VerticalPanel panel = null;
	private Image cover = null;
	private Label lblTitle = null;
	private Label lblInformation = null;
 
	public OverviewWidget(Image image, String title, String information) {
 
		this.panel = new VerticalPanel();
		this.cover = image;
		this.lblTitle = new Label(title);
		this.lblInformation = new Label(information);
 
		panel.add(cover);
		panel.add(lblTitle);
		panel.add(lblInformation);
 
		initWidget(panel);
 
	}
}

Auriez-vous des pistes car je suis débutant sur GWT .

Merci

[valkeke]

je comprends pas bien

Mais il me semble que l'on ne peut afficher qu'une seule colonne avec une CellTable.

Une CellTable peut afficher autant de colonne que tu veux. Regarde le showcase de gwt avec le widget CellTable.

Avec le widget FlexTable, tu peux faire ce que tu veux car c'est juste un <table> en html. Par contre, pour la pagination, tu vas devoir tout te taper par rapport à une CellTable.

Si tu veux de la pagination, utilise plus les widget du style Celltable, CellList voir Datagrid..... car il n'y a pas bcp de travail pour intégrer la pagination.

Il y a un paramètre important également dans le choix du widget : est-ce que les données affichées seront modifiable par l'utilisateur, directement à partir de ce widget ?si oui, bcp plus de travail avec une FlexTable, d'aprés moi...

[UchiwaItachi]

Merci beaucoup pour ta réponse. Je vais pouvoir enfin avancer dans mes développement après plusieurs jours de blocage .