Utilisation des transitions avec Moobile

Image non disponible

Jean-Philippe Déry est le concepteur de Moobile, le framework MooTools orienté mobile. Il nous propose ici un article permettant de créer des transitions avec des effets de styles.
Cet article est la traduction de Using TransitionsUsing Transitions publié sur le site de MoobileMoobile.
Commentez Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Site personnel

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Avant-propos

Ce guide vous aidera à mettre en place les étapes nécessaires pour créer une application qui représente un déplacement d'une vue à une autre à l'aide d'une transition.

II. Prérequis

Pour suivre ce guide, vous devez télécharger le package MoobilePackage Moobile.

Si vous utilisez Google Chrome, assurez-vous que vous le démarrez à l'aide de l'option en ligne de commande --allow-file-access-from-files comme expliqué ici, ou il pourrait ne pas fonctionner correctement.

III. Introduction

La transition d'une vue à une autre nécessite l'objet Moobile.ViewControllerStack. Cet objet gère un tableau de vues qui ont été insérées dans la pile du contrôleur de vue. La pile du contrôleur de vue utilise une transition lorsque vous appuyez sur une vue pour l'afficher et utilise la même transition (mais de manière inverse) lorsque le contrôleur de vue revient à son état initial.

IV. Créer un contrôleur de vue

Nous avons besoin de créer deux contrôleurs de vue. Ouvrez www/js/app.js et ajoutez le code suivant :

 
Sélectionnez
var ViewControllerOne = new Class({

    Extends: Moobile.ViewController,

    nextButton: null,

    viewDidLoad: function() {
        this.view.addClass('view-one');
        this.nextButton = new Moobile.Button();
        this.nextButton.setLabel('Next view');
        this.nextButton.addEvent('tap', this.bound('onNextButtonTap'));
        this.view.addChildComponent(this.nextButton);
    },

    destroy: function() {
        this.nextButton.removeEvent('tap', this.bound('onNextButtonTap'));
        this.nextButton = null;
        this.parent();
    },

    onNextButtonTap: function() {
        this.getViewControllerStack().pushViewController(new ViewControllerTwo, new Moobile.ViewTransition.Slide);
    }

});

var ViewControllerTwo = new Class({

    Extends: Moobile.ViewController,

    prevButton: null,

    viewDidLoad: function() {
        this.view.addClass('view-two');
        this.prevButton = new Moobile.Button();
        this.prevButton.setLabel('Previous view');
        this.prevButton.addEvent('tap', this.bound('onPrevButtonTap'));
        this.view.addChildComponent(this.prevButton);
    },

    destroy: function() {
        this.prevButton.removeEvent('tap', this.bound('onPrevButtonTap'));
        this.prevButton = null;
        this.parent();
    },

    onPrevButtonTap: function() {
        this.getViewControllerStack().popViewController();
    }
});


Ouvrez également le fichier www/css/styles.css et ajoutez le code suivant :

 
Sélectionnez
.view.view-one > .view-content,
.view.view-two > .view-content {
    -webkit-box-pack: center;
    padding: 12px;
}

V. Charger la pile du contrôleur de vue

L'étape suivante consiste à définir une instance de Moobile.ViewControllerStack en guise de contrôleur de vue racine. Ouvrez www/index.html et recherchez ce morceau de code :

 
Sélectionnez
window.addEvent('ready', function() {
    var rootViewController = new ViewController.Home(); // remplacez cette ligne par celle de votre contrôleur de vue racine
    new Moobile.WindowController().setRootViewController(rootViewController);
});


Remplacez-le par :

 
Sélectionnez
window.addEvent('ready', function() {
    var rootViewController = new Moobile.ViewControllerStack();
    new Moobile.WindowController().setRootViewController(rootViewController);
    rootViewController.pushViewController(new ViewControllerOne);
});


Cela crée une pile de contrôleur de vue et exécute un push d'une instance de ViewControllerOne sans transition.

VI. Ajouter une transition

L'étape suivante consiste à ajouter un événement tap sur les deux boutons. Cela permettra de passer au second contrôleur de vue et puis de revenir au premier.

 
Sélectionnez
var ViewControllerOne = new Class({

    Extends: Moobile.ViewController,

    nextButton: null,

    viewDidLoad: function() {
        this.view.addClass('view-one');
        this.nextButton = new Moobile.Button();
        this.nextButton.setLabel('Next view');
        this.nextButton.addEvent('tap', this.bound('onNextButtonTap'));
        this.view.addChildComponent(this.nextButton);
    },

    destroy: function() {
        this.nextButton.removeEvent('tap', this.bound('onNextButtonTap'));
        this.nextButton = null;
        this.parent();
    },

    onNextButtonTap: function() {
        this.getViewControllerStack().pushViewController(new ViewControllerTwo, new Moobile.ViewTransition.Slide);
    }

});

var ViewControllerTwo = new Class({

    Extends: Moobile.ViewController,

    prevButton: null,

    viewDidLoad: function() {
        this.view.addClass('view-two');
        this.prevButton = new Moobile.Button();
        this.prevButton.setLabel('Previous view');
        this.prevButton.addEvent('tap', this.bound('onPrevButtonTap'));
        this.view.addChildComponent(this.prevButton);
    },

    destroy: function() {
        this.prevButton.removeEvent('tap', this.bound('onPrevButtonTap'));
        this.prevButton = null;
        this.parent();
    },

    onPrevButtonTap: function() {
        this.getViewControllerStack().popViewController();
    }
});


La méthode onNextButtonTap ajoute un nouveau contrôleur de vue à la pile à l'aide d'une transition de type Moobile.ViewTransition.Slide. La méthode onPrevButtonTap supprime le contrôleur de vue courant (lui-même) de la pile à l'aide de la même transition mais de manière inverse.

Ouvrez le simulateur moobile-simulator/index.html dans votre navigateur web et appréciez le résultat !

Image non disponible

VII. Démonstration

Téléchargez la démonstration iciDémo.

VIII. Remerciements

Cet article a été publié avec l'aimable autorisation de Jean-Philippe Déry. L'article original peut être lu sur le site de MoobileMoobile : Using TransitionsUsing Transitions.
Je remercie également FirePrawn pour sa relecture attentive et assidue.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2012 Jean-Philippe Déry. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.