Outils pour utilisateurs

Outils du site


cours2009:multimedia:projet_basique_navigation_ge_ne_ralise_e

Projet basique : Navigation généralisée

Le but de cette activité est de modifier la façon dont est gérée la navigation. La version précédemment vue est idiomatique en terme de compétences : mettre en place un gestionnaire d'événement et réaliser par son biais une action. Reste qu'elle présente des limitations :

  • Elle est réalisable que dans la Classe Application (la base de l'application).
  • On doit avoir nommé les instances des boutons pour leurs connectés les gestionnaires d'événements.
    • Les boutons doivent exister au démarrage de l'application (ne peuvent être sur une page).

Explications générales

La méthode que j'ai choisi de vous présenter a le mérite de n'introduire qu'un concept (les déclarations “static”). Mais elle en porte les inconvénients :

  • Les déclarations “static” lient des méthodes ou variables à la Classe et non à une instance.
    • Elles sont donc équivalentes à des variables globales avec les inconvénients associés.
  • L'application perd en modularité, car on utilise un point central qui doit rester unique.

Reste que cette méthode est “très simple” :

  • On met en place une méthode “static” navigueVers (accessible de partout).
  • Cette méthode utilise l'unique instance de notre Classe Application.
    • Elle se charge de lui demander de changer de page.
  • Les gestionnaires d'événements sont librement mis en place et déclarés.
    • Ils utilisent la méthode “static” navigueVers pour réaliser l'action désirée.

Cette méthode se prête bien à de petits projets. Pour des projets plus ambitieux et modulaires, on préférera une méthode utilisant des concepts avancés de gestion des événements “DOM level 3” : propagation et événement personnalisé. Ces points ne seront pas abordés.

Préambule

Si vous avez fait la mise en place du menu dans le TP précédent, vous devez avoir un code semblable à ceci :

Vous remarquerez que le code est identique à l'exception de la Classe à instancier.

On va écrire une méthode afficheClass qui fait le même travail que le code identique et prend en paramètre la Classe à instancier :

On dispose maintenant d'une méthode réalisant la navigation vers une page. Mais ce n'est pas une méthode “static” :

  • C'est une méthode d'instance : elle doit être appelée sur une instance (l'instance de l'Application).
    • On ne peut donc pas l'appeler depuis n'importe où.
  • Elle ne peut être une méthode statique car elle utilise des variables et méthodes d'instance (ex: la page actuellement affichée).

Mise ne place de la navigation généralisée

Par étapes successives, on va mettre en place les modifications nécessaires. Ces étapes sont construites pour faciliter votre compréhension. Pour un autre projet, vous pourrez utiliser directement la solution complète.

La méthode "static"

Déclaration

On va mettre en place la méthode animVers :

  • public” : Accessible de tous.
  • static” : Ne nécessitant pas d'instance (à appeler directement sur la Classe Application).
  • Prend comme paramètre la classe de la page à afficher.

Contenu

On désire tout simplement appeler la méthode afficheClass :

Mais la méthode afficheClass est une méthode qui doit être appelée sur une instance. La suite consiste à rendre accessible l'unique instance de la Classe Application.

Accéder à l'unique instance

La solution est de la référencer par une variable :

Cette variable doit être ”static” pour pouvoir être utilisé dans une méthode ”static” :

Elle est de type Application (celui de la Classe), car elle contient une instance de cette même Classe.

On va initialiser cette variable dans le constructeur (this désigne l'instance sur laquelle sont appelés les méthodes) :

Tester la méthode

Pour faire un simple test, on vas simplement modifier le code d'un gestionnaire d'événement :

  • Sur la Classe Application
  • On appelle la méthode navigueVers

Important : Vérifiez bien que cela fonctionne avant de passer à la suite.

Ce test ne mets pas en valeur le fait que l'on peut appeler ”Application.navigueVers(…)” depuis tout code du projet. Il faut avant lever un dernier problème…

Ne pas utiliser une Classe comme paramètre

Utiliser une Classe comme paramètre de la navigation est un problème :

  • On introduit une liaison entre des codes qui devraient rester indépendants.
    • C'est contraires au principe de POO qui veut que les différentes parties d'un programme (objet) sont ”open/closed” (fr).
    • Exemple : si on voulait modifier la façon de faire certaines pages (ne pas juste faire une instance), il faudrait modifier toute interaction de navigation.
  • On ne peut pas utiliser et tester les différentes pages indépendamment.
    • Pour compiler une page, on aurait besoin du code des pages vers lesquelles on veut pouvoir naviguer.
    • On ne pourrait pas tester une page tant que les autres ne sont pas écrites.

La solution consiste à utiliser une chaîne de caractères (un identifiant personnalisé) comme paramètre…

Modification du paramètre de navigation

  • On va utiliser une chaîne de caractères comme paramètre.
    • Cette chaîne sera unique pour chaque page.
  • Elle sera traduite en la Classe de la page à créer

Traduction de la chaîne de caractères en une Classe de page

On va utiliser un tableau associatif (Object en notation littérale) dans lequel on recherchera la chaine passée en paramètre pour obtenir la Classe de la page.

Tester l'appel avec une chaîne de caractères

Simplement remplacer le nom de la classe par la chaîne de caractères comme paramètre.

À utiliser partout

Maintenant vous pouvez utiliser le code suivant pour déclencher une navigation dans l'application :

Application.navigueVers("...");

Il suffit d'avoir importé la Classe Application.

Cela fonctionne aussi depuis le panneau d'actions de Flash IDE :

Maintenant, vous disposez d'une solution pour gérer les actions de navigations :

  • Vous pouvez utiliser ce code depuis tous points de l'application.
  • La mise en place des gestionnaires d'événement n'est plus liée à la Classe Application.
    • Vous mettre en place un gestionnaire d'événement directement sur un bouton pour réagir à un click (ou autre action).
    • Ces actions peuvent prendre place sur une page et non uniquement sur le “menu”.
    • Vous avez toute liberté pour organiser vos éléments graphiques. Il n'est plus nécessaire de les nommer pour mettre en place les interactions depuis une Classe.

Très important : Si vous avez le message d'erreur ”1120: Accès à la propriété non définie _instance”. Ajoutez a un panneau “Actions” de ”application.fla” un import de la Classe ”Application” C-à-d : ”import src0.grZ0.unNom.projet.Application;”.

Conclusions

Cette activité met en oeuvre l'usage du modificateur ”static”. Ce n'est pas un concept qu'il vous est utile de maitriser. C'est juste un moyen pour mettre en place la navigation.

Les points importants sont :

  • L'action de navigation est en fait un message :
    • Quand un élément graphique reçoit une interaction (ex: message CLICK), il le retranscrit en un message de navigation à l'intention de l'application.
  • Le message de navigation prend ici la forme d'un appel de méthode (statique).
    • C'est une solution simple pour de petites applications.
    • Plus tard vous pourrez utiliser des événements personnalisés pour le même effet.
  • La gestion de la navigation est faite par un point centrale : la Classe Application.
    • C'est obligatoire, il faut un objet responsable (et uniquement lui !) des éléments affichés.
    • On appelle cela un contrôleur.
      • Il peut y avoir plusieurs contrôleurs dans l'application :
        • Pour une page avec des sous-parties par exemple.
        • Mais si on utilise des méthodes statiques, il ne peut y avoir qu'une instance de chaque Classe servant de contrôleur !

Pour votre culture : ce que vous venez de faire ressemble beaucoup au goto de Gaia. Sauf que Gaia fait bien plus…

Bonus

Suivre le TP : Deep Linking

Pour les curieux...

On peut simplifier la mise en place des interactions dans les panneaux d'actions :

  • En définissant une Classe dans le paquet anonyme.
    • Mauvaise pratique qui fait que l'on a alors réellement une variable globale !
  • En généralisant la mise en place des gestionnaires d'événements.
    • L'usage de fonctions anonymes présente des inconvénients.

Bref, des solutions qui ne vont pas dans le bon sens et qui ne valent que pour des cas très simples. À n'utiliser qu'en connaissance de cause !

package  
{
    import flash.events.EventDispatcher;
    import flash.events.IEventDispatcher;
    import flash.events.MouseEvent;
    import src0.grZ0.unNom.projet.Application;
 
    public class API
    {
 
        public static function navigueVers(nomPage:String):void
        {
            Application.navigueVers(nomPage);
        }
 
        public static function ecoutePourAllerA(objet:IEventDispatcher, nomPage:String):void
        {
            objet.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
                navigueVers(nomPage);
            });
        }
    }
}

Le code dans les panneaux d'action devient :

API.ecoutePourAllerA(this, "Page1");

Cela vous montre que maitriser les concepts permet d'écrire un code plus simple. Attention : ce code utilise de mauvaises pratiques. C'est juste pour vous faire réfléchir…

cours2009/multimedia/projet_basique_navigation_ge_ne_ralise_e.txt · Dernière modification: 2010/05/13 22:00 (modification externe)