Utilisation des transitions avec Moobile

Jean-Philippe Déry

Traducteur

vermine

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 Transitions publié sur le site de Moobile.
Commentez

- Titre : Utilisation des transitions avec Moobile

- Auteur : Jean-Philippe Déry

- Traducteur : vermine

- Parution : 23 octobre 2012

- Mise à jour : 7 novembre 2012

- Licence : 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 et 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.

Sommaire

- I. Avant-propos

- II. Prérequis

- III. Introduction

- IV. Créer un contrôleur de vue

- V. Charger la pile du contrôleur de vue

- VI. Ajouter une transition

- VII. Démonstration

- VIII. Remerciements

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 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 :

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 :

.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 :

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 :

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.

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 !

VII - Démonstration

Téléchargez la démonstration ici.

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 Moobile : Using Transitions.
Je remercie également FirePrawn pour sa relecture attentive et assidue.