[POSITIONNEMENT][ROOTLAYOUTPANEL] position dans le browser

Hello,

Je suis entrain de développer une petite application basée sur GWT pour la partie UI. Vous me direz jusqu'ici tout va bien..

J'ai intégré la librairie GXT, là encore pas de soucis.

J'ai créé dans ma classe principale (EntryPoint) un contentPanel qui recevra l'ensemble de mes widgets.

Ce que je n'arrive pas à faire, c'est centrée ce conteneur au milieu de mon browser.

Code:

---

1 2 3 4 5 6 7

ContentPanel cp = new ContentPanel(); cp.setHeading("Application Name"); cp.setLayout(new CenterLayout()); cp.setSize(800, 600); //ajout de mes widgets RootLayoutPanel.get().add(cp);

---

le conteneur est affiché dans le coin en haut à gauche de mon browser.

J'ai essayé de faire cette mise en place directement sur le RootLayoutPanel.. mais il ne propose pas de méthode setLayout.

Si je ne dis pas de bêtise dans la page Html du projet gwt, il n'y a aucune div au conteneur Html à préciser.

J'espère que j'ai été clair dans mes explications, si ce n'est pas le cas n'hésitez pas à me demander des infos complémentaires.

Merci d'avance pour votre aide,

Cordialement,

Salut,

je vois 2 solutions à ton problème.

1. Ajouter 1 div dans ton fichier html qui centreras ton contentPanel et utiliser la methode RootLayoutPanel.get("idDuDiv").add(cp)

2. Ajouter un premier ContentPanel avec un setLayout(new CenterLayout()) et y ajouter un 2nd ContentPanel qui lui sera centré.

Il y a certainement d'autres solutions (peut être même des meilleures :) ) mais c'est ce qu'il me viens à l'esprit.

Hello,

Merci pour ta réponse.

Concernant la solution 1), le problème est la méthode

Code:

---

RootLayoutPanel.get()

---

ne permet pas de faire pointer vers un conteneur (div par exemple) existant dans la page.

J'avais déjà essayé.. :(

Concernant la solution 2) j'ai essayé aussi, mais le soucis est le RootLayoutPanel, génére sa propre DIV qui va encapsuler ce contentpanel..

Aujourd'hui j'en suis à essayer de modifier le style de cette balise parent au RootLayoutPanel..:?

Merci d'avance pour votre aide,

effectivement, essayes avec RootPanel.get("content").add(cp)

Hello,

Merci pour ta réponse aussi rapide.

Est ce que le RootPanel est compatible avec le RootLayoutPanel?

Je vais tester.. et je te tiens au courant

Hello,

ça marche pô.. :?

Les composants (button) ne sont pas accessibles.

Je crois que lorsque l'on utilise des Layouts, ce n'est pas compatible avec le rootPanel... je n'affirme rien..

Mon problème reste entier.. :cry:

possible, perso je "remplace" le contenu de ma div avec un ViewPort que je rempli ensuite de composants GWT/GXT.

Sinon je ne connais pas la différence entre le RootPanel et le RootLayoutPanel, j'ai toujours utilisé le RootPanel puisque je n'ai jamais eu de problème avec :p

bon courage :)

Hello,

Merci,

C'est quoi un ViewPort?

Le meilleur moyen de ne pas dire de bêtises c'est de recopier la description fournie dans l'API GXT :)

"A LayoutContainer that fills the browser window and monitors window resizing. Viewports are best used for applications that will fill the browser without window scrolling. Children of the viewport can allow scrolling."

Précision de derniere minute, c'est sur ce ViewPort que je set le layout "général" de mon appli, à savoir un BorderLayout.

Hello,

L'utilisation du viewPort m'a donné une piste :ccool:... je vais approfondir et je reviendrai poster ce que j'aurai réussi à faire..

Merci pour ton aide!

@++

Hello,

Ca marche!

J'ai réussi à centrer mon application! (grâce à ton aide).:ccool:

Voila le code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

Viewport viewport = new Viewport(); ContentPanel cp = new ContentPanel(); cp.setHeading("Application Title"); // ajout d'un gestionnaire de placement du conteneur de l'appli cp.setLayout(new CenterLayout()); cp.setSize(800, 600); cp.add([Ajout des composants à afficher]); viewport.setLayout(new CenterLayout()); viewport.add(cp); RootLayoutPanel.get().add(viewport);

---

Si vous avez des remarques (constructives) à propos de ce bout de code, je suis preneur :)

Quelques précisions :

RootPanel : Le panneau racine qui permet d'ajouter des widgets dans le body.
Existe depuis le début de GWT.
La page html utilisait obligatoirement le mode quirk (mode css non standard de microsoft (avant ie6) et repris malheureusement par la concurrence pour s'imposer à une époque ou ie avait +90% parts du marché des navigateurs).
Ce mode batard ne respecte pas les standards css du W3C mais il était presque incontournable de l'utiliser si on voulait être pragmatique.

RootLayoutPanel : Idem au RootPanel mais permet d'utiliser les nouveaux layouts qui reposent sur div/css au lieu des tableaux. Avec ces nouveaux layouts, il est même obligatoire.
Existe depuis la version 2.0 de GWT.
La page html utilise désormais le mode standard et le doctype html5.
A conseiller pour les nouveaux projets pur GWT.


Et avec GXT ?
Même si ça devrait changer avec les futures version, aujourd'hui, GXT utilise le mode quirk non standard. Peut être que ça peut fonctionner avec le mode standard mais dans la doc d'installation de la version actuelle, GXT recommande le mode non standard (le mode originel de GWT)
Donc pour l'instant, il serait plus cohérent d'utiliser le RootPanel avec GXT.

Après, pour ton besoin, effectivement, le ViewPort est le composant qui s'adapte à la fenêtre et qui se redimensionne avec elle.


Pour lecode :

Code:

---

1 2 3 4 5 6 7 8 9

ContentPanel monPanelQuiPrendTouteLaPlace = new ContentPanel(); monPanelQuiPrendTouteLaPlace.setLayout(/*cf Note 1*/); monPanelQuiPrendTouteLaPlace.add(...); ... monPanelQuiPrendTouteLaPlace.add(...); Viewport viewport = new Viewport(); viewport.setLayout(new FitLayout()); viewport.add(monPanelQuiPrendTouteLaPlace); RootPanel.get().add(viewport);

---

Note1 : Utiliser ici un Layout suivant ce que tu veux y mettre :

• Si tu mets un unique contenu qui est censé occupé toute la place (genre un autre ContentPanel), tu utilises un FitLayout.
• Si tu mets un unique contenu qui ne doit pas être redimensionné (genre bouton), tu utilises un CenterPanel.
• Si tu mets plusieurs composants, tu utilises le layout le plus approprié : BorderLayout, TabLayout, ... suivant les cas.

Note2 : Tu as besoin de préciser une taille (setSize) si le composant n'est pas redimensionné (nécessaire s'il est contenu dans un conteneur qui a un CenterLayout mais inutile dans un conteneur qui a un FitLayout.)

Hello,

Merci pour ce complément d'information très intéressant! :ccool: :)

Dans mon appli, j'utilise exclusivement des layouts pour contenir mes widgets (je ne sais pas si j'emploie le bon terme ?).
Par exemple pour l'écran de login voila le code :

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

ContentPanel panel = new ContentPanel(); panel.setHeaderVisible(true); panel.setHeading("Authentification"); VBoxLayout authenLayout = new VBoxLayout(); authenLayout.setVBoxLayoutAlign(VBoxLayoutAlign.CENTER); authenLayout.setPack(BoxLayoutPack.CENTER); panel.setLayout(authenLayout);   VBoxLayoutData layoutData = new VBoxLayoutData(new Margins(0, 0, 5, 0)); LabelField lblLogin = new LabelField("Login : "); final TextField<String> login = new TextField<String>(); LabelField lblPassword = new LabelField("Password : "); final TextField<String> password = new TextField<String>(); Button authenAction = new Button("Log in"); authenAction.addListener(Events.OnClick, new Listener<ButtonEvent>() { /*note1*/ public void handleEvent(ButtonEvent ce) { MessageBox mb = new MessageBox();       mb.setMessage("Autentification login - password : " +login.getValue() +" "+ password.getValue()); mb.show();   gui.display("home"); }});   panel.add(lblLogin,layoutData); panel.add(login,layoutData); panel.add(lblPassword,layoutData); panel.add(password,layoutData); panel.add(authenAction,layoutData); panel.setSize(300, 200);         return panel;

---

note1: c'est une maquette, dans l'implémentation finale, le bouton fait appelle a un service coté serveur.

Pour plus de précision, le cadre dans lequel va s'exécuter mon application à des dimensions définies (800*600). ce cadre est défini dans le point d'entrée de l'application (Entrypoint) cf le code donné dans ma dernière réponse.

Donc, si je ne dis pas de bêtise, ici j'utilise bien que des layouts (issues de GXT), donc je suis plutôt sur un mode standard w3C (cf détail de benwit)?
Ou alors les layouts proposés par GXT ne sont quand même pas conforme aux standards?

Merci d'avance pour votre aide,

Du moment que tu utilises GXT comme ils le recommandent, c'est le mode quirk, et bien que non standard, ça a le mérite de passer partout !

Pour être honnête, si on regarde le code généré par GxT pour certains composants (des tables pour faire des boutons), on n'utiliserait pas cette lib si on voulait respecter certains sacro-saints principes d'intégristes du code.

Je suis plus pragmatique. Si les sacro-saints principes ont certaines raisons d'être et si les librairies devraient toutes y tendre, pour faire certains trucs compatibles multi-navigateurs (qui ne respectent pas tous les standards), certains hacks immondes sont parfois nécessaires.
et si j'utilise GXT dans ce cas, c'est pour le rendu final.

J'ai constaté que les utilisateurs lambda préfèrent un design élégant et ergonomique (le code sous jacent, ils s'en moquent) à un code plus "propre" qu'ils ne verront jamais sauf moins bien rendu à l'écran !

Hello,

Merci pour ton retour et tes arguments convainquant!

tu as raison, quel paradoxe de vouloir respecter les standards (ce qui est bien) avec des navigateurs qui ne les respecte pas forcément.. :aie:

Bonne journée

Bonjour je revient sur le sujet.
Je maintien une application en GWT 2.5 qui utilise encore RootPanel.
Il y a t-il une contrainte à utiliser RootLayoutPanel ce qui me permettrait d'utiliser les nouveaux composants Layout ?