Je conseille aux développeurs Java qui font du Web - à travers GWT, JSF ou tout autre framework de mise en page - de prendre quelques heures pour parcourir les articles d'OpenWeb. Les curieux pourront approfondir avec les articles d'Alsacréation. Ces deux sites Web sont une mine d'Or pour les francophones qui souhaitent monter en compétence sur le domaine du développement Web.

La mauvaise pratique

Pour ceux qui ont la flemme d'aller sur la mailing pour comprendre quel était le problème; un développeur souhaitait savoir comment injecter une balise br entre deux Widgets GWT. Il voulait faire cela pour obtenir un retour à la ligne.

Dans ce cas, la balise br de retour à la ligne était une solution pour un problème de mise en page. C'est une mauvaise pratique connue depuis bien longtemps.. je dirais dans les années 90 :)

La bonne pratique

Je vais être cool, je vais également vous donner un exemple de code GWT qui permet de combiner les bonnes pratiques Java et Web.

Voici un exemple de classe représentant le combo label + input text :

class InputTextBox extends FlowPanel {
  private final TextBox input;
  public InputTextBox(String labelText) {    
    super();
    Label label = new Label(labelText);
    this.input = new TextBox();
    this.add(label);
    this.add(this.input);
    this.addStyleName("myBox");
    }
  ...
  public String getValue() {
    return this.input.getValue();
  }
  public void setValue(String text) {
    return this.input.setValue(text);
  }
}

Ce qui, dans le navigateur (où le DOM pour les intimes), rend ceci :

<div class="myBox">
  <div class="gwt-Label">Nom :</div>
  <input type="text" tabindex="1" class="gwt-TextBox"/>
</div>

Je n'ai pas précisé dans le code ici comment gérer le tabindex html. Vous devez trouver un mécanisme pour gérer correctement cet attribut sur vos pages. Je ne m'y attarde pas ici car il s'agit d'une réflexion global sur la gestion d'une "page".

Ajoutez un peu de CSS comme celui-ci par exemple :

.myBox {
  float: left; width: 200px;
}
.myBox .gwt-Label {
  float: left; width: 200px;
}
.myBox .gwt-TextBox {
  float: left; width: 200px;
}

Et vous obtenez un super combo label + input box en utilisant des bonnes pratiques de développement. C'est au niveau CSS que vous déterminerez la mise en page de votre combo.

Dans un prochain billet j'expliquerais comment obtenir une balise html label en lieu et place d'une simple div pour le texte de label, et je donnerais les raisons d'une telle implémentation.