Vaadin avec AppFoundation

Vaadin

Vaadin est un framework codé en Java permettant de réaliser des applications web riches. Il est basé sur GWT et est très simple d’utilisation.

AppFoundation

AppFoundation est un add-on de Vaadin. Il a été développé par Kim Leppänen, et permet en autre de gérer vos différentes vues dans votre application. Il comporte d’autres modules permettant de gérer la persistance, l’authentification et l’internationalisation.

Dans cet article je ne parlerais que de la gestion des vues.

Pourquoi ?

A l’heure où j’écris cet article, il n’y a pas, dans Vaadin, de gestion de vues. Il existe plusieurs façons de mettre en place nos composants en utilisant divers design patterns comme MVP par exemple avec d’autres add-on. Mais AppFoundation s’avère efficace et très simple à mettre en place. De plus la gestion des évènements nous est transparente. Tout est géré par le ViewHandler.

C’est cette simplicité d’utilisation qui me fait apprécier cet outil.

Mise en place

Toute la gestion passe par le ViewHandler.

On commence par définir un composant personnalisé servant de conteneur à nos vues. C’est ici que sera géré l’enregistrement des vues et le changement de vues. Cette classe définit notre layout principal.

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
public class MainLayout extends CustomComponent implements ViewContainer{
    private VerticalLayout verticalLayout;
    private View vueCourante;

    public MainLayout(){
        verticalLayout=new VerticalLayout();
        setCompositionRoot(verticalLayout);

        //enregistrement de la vue
        ViewHandler.addView(MaVue.class);

        //activation de la vue
        ViewHandler.activateView(MaVue.class) //possibilité de rajouter des arguments

        //récupération de la vue
        vueCourante = ViewHandler.getViewItem(MaVue.class).getView();

        //ajout de la vue au layout
        verticalLayout.addComponent(vueCourante);
    }

    public void activate(View view){
        verticalLayout.replaceComponent((Component)vueCourante, (Component)view);
        vueCourante=view;
    }
    public void deactivate(View view){
        ...
    }
}

On crée une vue, dans laquelle on définit les différents composants que l’on veut afficher.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public MaVue extends AbstractView<VerticalLayout> {
    ...
    public MaVue(){
        super(new VerticalLayout());
        ...
    }

    public void activated(Object... params){
        //traitement à faire lors de l'activation
    }
    public void dactivated(Object... params){
        //traitement à faire lors de la désactivation
    }
}

Fonctionnement

C’est assez simple. Voici un schéma qui résume le fonctionnement de la gestion des vues :

On enregistre d’abord la vue dans son conteneur. Quand on clique sur le bouton, on active notre vue ce qui engendre l’appel aux méthodes activated() de la vue et active() du conteneur. Ensuite la vue s’affiche dans le layout.

Gestion des URIs

Avec ce framework on peut aussi gérer la navigation. Comme d’habitude tout se fait très simplement. Il suffit d’associer à chaque vue un fragment.

Reprenons l’exemple de ci-dessus :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class MainLayout extends CustomComponent implements ViewContainer{
    ...
    public MainLayout(){
        ...
        //enregistrement de la vue
        ViewHandler.addView(MaVue.class);

        //on ajoute au layout la gestion des fragments
        verticalLayout.addComponent(ViewHandler.getUriFragmentUtil());

        //on ajoute une URI a notre vue
        ViewHandler.addUri("mavue", MaVue.class);

        //a l'activation de la vue on ajoute un boolean à true qui indique qu'on a une URI
        ViewHandler.activateView(MaVue.class, true)
        ...
    }
    ...
}

Ce UriFragmentUtil permet de gérer les évènements sur les URIs. Il est nécessaire de l’ajouter afin que votre application comprenne quand l’URL change.
Et maintenant à chaque activation d’une vue qui est associée à une URI, on devra passer un boolean à true à la méthode activateView().

 

VN:R_U [1.9.22_1171]
Rating: +2 (from 2 votes)
Share
Ce contenu a été publié dans Outils, Trucs & astuces, avec comme mot(s)-clef(s) . Vous pouvez le mettre en favoris avec ce permalien.

Laisser un commentaire