Discussion :

[Florent23]

Bonjour à tous,

Utilisant depuis peu GWT et GWT Designer pour faire une application web, j'essaie de trouver quelles sont les "bonnes pratiques" le concernant, puisque le mix de javascript, java et CSS n'est pas forcément évident à bien appréhender, en tout cas de mon point de vue.

Mon problème est le suivant: en théorie, pour la présentation d'un site web classique, on est censé mettre tout l'aspect présentation (positions, couleurs etc) dans le fichier CSS. Mais en utilisant GWT Designer, on a du WYSIWYG qui met directement les positions des panels en dur dans le code java. Je n'ai pas encore testé, mais je doute qu'avec cette configuration, on puisse avoir une page qui s'adapte à toutes les résolutions d'écran et navigateurs. Mais si on rajoute par-dessus ces positions des propriétés CSS qui modifient à leur tour la position et le rendu d'un panel, on n'a plus du tout l'avantage du WYSIWYG du GWT Designer, et en plus on a du code concernant le design à 2 endroits différents, ce qui n'est pas très propre...

Ma question est donc la suivante: est il préférable d'utiliser GWT Designer, en le laissant gérer les positions comme il l'entend et ne modifier que l'aspect (et pas les positions) dans le CSS, ou l'utiliser au début pour avoir un aspect global, et retravailler ensuite les positions dans le CSS?

Tout avis ou expérience est le bienvenue

[ddave242]

boujour,
Merci d'avoir soulever ce probleme.
Moi aussi, il m'arrive la meme chose.
Quand le lance mon application en Developpement Mode, j'obtient
mes fenetres, menus, et autres qui s'affiche comme je le veux sous IE version
6.0. Cependant sous Firefox v5.0 j'ai des affichage bizarre, tout est melangé de partout .
Du coup c'est trés embétant ...
Et il faut que je modifie tout mon code pour l'adapter a un autre navigateur.
J'ai toujours pas de solutions à part ça.

[pvoncken]

Personnellement je réalise mes position avec Css pour une raison tres simple, c'est de tirer partie de toute la puissance de Css qui est un standard depuis un moment déjà et qui est très bien adapté pour ce travaille.

La seconde raison est la séparation des couches. Comme tu le dit il faut séparer le traitement du rendu. En Java ca reste possible mais la tentation est grande de tout mélangé, surtout quand un débutant arrive derriere pour la maintenance et apres c'est la kata

Apres il faut savoir etre humble et mettre de l'eau dans son vin en fonction de ses capacitées. Si le Css est un milieu complètement inconnu et qu'il faut produire quelque chose vite pour mettre en prod rapidement, dans ce contexte utiliser le WYSIWYG est une bonne solution. Dans ce cas fait tout en WYSIWYG.

Mais il faut savoir que le Css n'est pas tres compliqué et qu'il y a de tres bon site francophone qui explique les bases sur des bonnes pratiques.

[Florent23]

J'étais en train de me dire qu'une solution pourrait être de laisser le positionnement dans le code java, et de faire le reste (couleurs et autres effets) avec le CSS. Car je trouve le designer assez pratique pour générer le code rapidement (et ma paresse adore voir du code se créer tout seul ^^), et le seul hic c'est que lorsqu'on règle les tailles, on a par exemple

Code :

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

panel.setSize("100%", "100%");

qu'il faudrait, j'imagine, effacer du code java et déplacer dans le CSS. Effort un peu chiant à faire, car il faut appliquer des styles sur les différents objects etc, et c'est un peu lourd. En fait il faudrait demander à google de générer du code CSS au lieu du java en ce qui concerne les tailles et positions de widgets

[ddave242]

En fait la seule chose qu'on peut faire c'est d'ouvrir son code avec WindowBuilder Editor et ensuite pour chaque Panel correspond un Css en cliquant sur le styleName du Panel concerné ...

[Florent23]

Oui

Merci pour vos réponses, ça m'a aidé à y voir plus clair, même s'il faut faire très attention à tout ce qu'on fait pour bien ordonner les choses...

[Raphaël Brugier]

Et pourquoi ne pas utiliser UiBinder pour décrire ton interface ? Ainsi tu sera sûr de bien séparer la description du comportement ? Tu peux isoler les styles communs dans un fichier css à part puis redéfinir uniquement dans ton fichier uibinder les styles spécifiques.

Gwt Designer gère plutôt bien le lien entre les widget déclarés dans le fichier uibinder et liés au java en plus.


J'ai écrit un article qui résume un certain nombre de choses à savoir pour styler les composants gwt. Il manque certaines choses je pense, si tu en vois nécessite pas à me les signaler.

Google Web Toolkit (GWT) 2.0, Styles et UiBinder

Et un autre pour surcharger les styles définis par GWT :
Gwt – Surcharger les styles par défaut

Bonne fin d'année !