Le contexte:
Le projet a pour but d'améliorer l'ergonomie et l'usabilité du back office d’un produit en cours de développement réalisé en collaboration avec SFEIR
Dans le cadre de ce projet, la version de GWT utilisée passe de la 1.7.1 à la 2.0.3 afin de bénéficier des nouvelles fonctionnalités offertes par cette version. De nouveaux pattern de développement ont également été mis en place au cours de ce projet.
Voici une série d'article sur les nouveautés de GWT 2, les choix d'architectures, et bibliothèques utilisés qui font part de notre retour d'expérience sur le sujet. Ces articles ont été écris par David Aboulkheir, Patrice de Saint Steban et Cyril Lakech
- Nouveautés de GWT 2.0
- UiBinder, enfin une forte collaboration entre le designer et le développeur
- Intégration facile de maquette Html en GWT 2
- Architecture Modèle-Vue-Presenteur
- Implémentation Modèle-Vue-Présenteur
- Ecrire des tests unitaires avec Mockito
- Mise en place de Gin sur le projet
- Internationalisation
Voyons maintenant comment créer une architecture Model-View-Presenter.
Le présenteur doit étendre la classe Presenter qui fournit des fonctionnalités de base à notre application. Comme l'accès au global event bus et à la factory de vue.
public class TestPresenter extends Presenter {
/**
* Interface represents the test view
*/
public interface Display extends DisplayView {
public void setUserName(String username);
public HasClickHandlers getUserNameClickHandler();
}
// fields
/** View */
Display display;
// constructor
public TestPresenter(Display display, HandlerManager globalEventBus, DisplayFactory factory) {
super(globalEventBus, factory);
this.display = display;
bind();
}
// Bind all event
private void bind(){
getGlobalEventBus().addHandler(
OnUserLoggedEvent.getType(),
new OnUserLoggedEvent.Handler() {
@Override
public void onUserLogged(OnUserLoggedEvent event) {
display.setUserName(event.getUser()
.getLogin());
}
});
display.getUserNameClickHandler().addClickHandler(
new ClickHandler() {
public void onClick(ClickEvent event) {
getGlobalEventBus().fireEvent(
new OnUserLogout());
}
}
}
public void go(Placer panel) {
panel.setView(display);
}
}
Nous avons ici l'architecture de base d'un presenter :
- Le constructeur prend en paramètre toutes les interfaces qu'il va
utiliser :
- sa vue interfacé par l'interface interne au presenter : Display
- le global event bus (Bus d'évènement global à l'application pour la communication entre les presenter)
- la factory de vue (utilisée pour instancier les vues des sous-presenters)
- Éventuellement des services RPC
- la méthode bind() qui s'occupe d'enregistrer le présenteur aux évènements globaux de l'application (ici le login de l'utilisateur) et aux évènements de la vue (ici le click sur le label affichant le login de l'utilisateur).
- la méthode go(), qui permet au présenteur de s'afficher
- la classe Placer est une abstraction d'un Panel GWT, pour être complètement indépendant de GWT, cette interface possède une simple méthode setView qui prend en paramètre un DisplayView. L'interface DisplayView qui doit être étendu par toutes les vues demande juste d'implémenter la méthode asWidget() qui permet de retourner la vue (this) en tant que Widget GWT.
Créons maintenant la vue, en utilisant UiBinder :
public class TestView extends Composite implements TestPresenter.Display {
private static TestViewUiBinder uiBinder = GWT
.create(TestViewUiBinder.class);
interface TestViewUiBinder extends
UiBinder<Widget, TestView> {}
@UiField Label label;
public TestView() {
initWidget(uiBinder.createAndBindUi(this));
}
@Override
public HasClickHandlers getUserNameClickHandler() {
return label;
}
@Override
public void setUserName(String username) {
label.setText(username);
}
@Override
public Widget asWidget() {
return this;
}
}
Avec le fichier TestView.ui.xml associé :
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:Label ui:field="label" />
</ui:UiBinder>
Cette classe étend donc notre Display du présenteur et accède aux composant GWT.
On peux ainsi tester facilement le code de notre présenteur car il ne possède aucune adhérence à GWT.
Nous avons choisi dans un premier temps de se passer de ces framework et d’appliquer les pattern MVP en suivant uniquement les pratiques conseillées par Google. Maintenant que nous avons une première expérience avec le développement MVP, nous pouvons penser à utiliser un de ces framework pour bénéficier de leurs utilitaires comme la gestion de l’historique, du pattern action etc. Si nous devions en choisir un à ce jour, ce serait gwt-platform qui est issu de gwt-presenter et gwt-dispatch.
