Observons leur représentation graphique respective
MVC…
Vs MVP
Source : google
Dans les 2 cas, le code métier (calcul, appel de méthodes, des webservices, etc..) est sorti de la vue et affecté au Controller pour le MVC et au Presenter pour le MVP. Leur autre point commun est de déléguer au modèle la charge du traitement des données. La grande différence est que le MVP va pousser le développeur à sortir complètement la logique de présentation de la couche Vue.
En clair, le Presenter possède une référence sur la vue et effectue la logique de la représentation graphique. La vue n’est plus qu’un code statique.
La vue, se charge de donner des références qu’elle contient c’est à dire par exemple sa propre référence, sa référence sur un boutton, ou sur un champs voire même sur des objets.
Le Presenter doit faire 3 actions principales :
- Déterminer l’interface de la vue.
- Binder les actions de la vue avec des méthodes qu’il contient
- Appeler la couche Model (gestion des données)
Exemple de code Presenter avec GWT
La déclaration de l’interface
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
public class EditProjectSheetPresenter implements Presenter {
public interface Display {
HasClickHandlers getSaveButton();
HasClickHandlers getCancelButton();
HasClickHandlers getAddServerButton();
HasClickHandlers getAddFlowButton();
HasClickHandlers getAddInternetButton();
HasClickHandlers getAddIntranetButton();
HasClickHandlers getAddNetworkElementButton();
HasText getName();
HasText getId();
Widget asWidget();
AbsolutePanel getBoundaryPanel();
ExtendedDialogBox getDialogBox();
Diagram getDiagram();
}
|
remarquez comment l’interface indique à la vue les moyens pour rapatrier les éléments.
Les événements dans la méthode bind()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
public void bind() {
this.display.getSaveButton().addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
doSaveProject();
}
});
this.display.getCancelButton().addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
eventBus.fireEvent(new EditProjectCancelledEvent());
}
});
this.display.getAddServerButton().addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
addVmToZone();
}
|
Ici on remarque que le Presenter qui a une référene sur la vue (display) rapatrie les élément à l’aide des méthode qu’il a lui même défini dans son code. il peut alors traiter les évènements.
2 possibilités, soit on déclenche un évènement (ici le EditProjectCancelledEvent) et l’application remonte à la racine pour traiter cet évènement, soit on effectue une action. il faut penser à sortir le code l’inner class (new clickHandler(à{}) et le mettre dans une méthode à part pour pouvoir tester
Le corps des méthodes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
public void doSaveProject() {
if(!"".equals(display.getId().getText())){
project.setId(Long.valueOf(display.getId().getValue()));
} else {
project.setIdProject(new Double(Math.random()*10000).longValue());
}
project.setName(display.getName().getValue());
rpcService.updateProject(project, new AsyncCallback<Project>() {
public void onSuccess(Project result) {
eventBus.fireEvent(new ProjectSheetUpdatedEvent(result));
}
public void onFailure(Throwable caught) {
Window.alert("Error updating project");
}
});
}
|
Au contraire du MVC, les tests sont donc grandement facilité car ils ne reposent plus que sur une seul couche. De plus comme le code de la vue est statique on peut en créer facilement des “mock object”
Voila pour l’introduction au MVP. Vous n’avez pas tout saisi du MVP? Normal, il faut le temps de le prendre en main. Et pour cela je vous propose une petite suite … bientôt.
Au menu de la suite :
- Le MVP en profondeur : L’interaction entre les 3 couches
- L’Event Bus
références :
