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