Implémenter un Hello World 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 une application Hello World.
Cet article est la traduction de Hello World publié sur le site de Moobile.
Commentez

- Titre : Implémenter un Hello World avec Moobile

- Auteur : Jean-Philippe Déry

- Traducteur : vermine

- Parution : 16 octobre 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. Création d'un modèle d'affichage

- IV. Créer un contrôleur de vue et lancer son affichage

- V. Ajouter des événements

- VI. Charger le contrôleur de vue

- VII. Le rendre plus joli

- VIII. Démonstration

- IX. Remerciements

I - Avant-propos

Ce guide vous aidera à mettre en place les étapes nécessaires pour créer une application avec un seul bouton qui affiche une alert en cas de clic. Grâce à ce tutoriel, vous apprendrez à créer un contrôleur de vue, lancer son affichage et le personnaliser à l'aide de styles CSS.

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 - Création d'un modèle d'affichage

Dans le dossier www/templates/views/, créez un fichier hello-world-view.html et ajoutez-y le code suivant :

<div class="hello-world-view">
<div data-role="button" data-name="hello-world-button">Hello World</div>
</div>

Cela définit notre zone d'affichage. Le fait d'ajouter un élément avec l'attribut data-role="button" va créer un bouton. Dans ce cas, il est nommé hello-world-bouton.

IV - Créer un contrôleur de vue et lancer son affichage

L'étape suivante consiste à créer un contrôleur de vue et à lancer son affichage. Ouvrez www/app.js et ajoutez le code suivant :

var HelloWorldViewController = new Class({

Extends: Moobile.ViewController,

loadView: function() {
this.view = Moobile.View.at('templates/views/hello-world-view.html');
}

});

Cela crée un nouveau contrôleur de vue et lance son affichage à l'aide du modèle templates/views/hello-world-view.html.

V - Ajouter des événements

À ce stade, il faut ajouter un événement tap sur le bouton. Mettez à jour le code précédent pour qu'il ressemble à ceci :

var HelloWorldViewController = new Class({

Extends: Moobile.ViewController,

helloWorldButton: null,

loadView: function() {
this.view = Moobile.View.at('templates/views/hello-world-view.html');
},

viewDidLoad: function() {
this.helloWorldButton = this.view.getChildComponent('hello-world-button');
this.helloWorldButton.addEvent('tap', this.bound('onHelloButtonTap'));
},

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

onHelloButtonTap: function() {
var alert = new Moobile.Alert();
this.view.addChildComponent(alert);
alert.setTitle('Hello');
alert.showAnimated();
}

});

La méthode loadView est appelée une fois que la vue est totalement chargée et que ses composants sont accessibles. Dans ce cas nous récupérons le bouton de la vue et nous lui ajoutons l'événement tap. Dès le début de la frappe, ce contrôleur crée une alert et l'affiche.

VI - Charger le contrôleur de vue

Enfin, il faut charger notre contrôleur de vue. Ouvrez le fichier www/index.html et recherchez ce code :

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

Remplacez-le par celui-ci :

window.addEvent('ready', function() {
var rootViewController = new HelloWorldViewController();
new Moobile.WindowController().setRootViewController(rootViewController);
});

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

VII - Le rendre plus joli

La présentation de toute la vue n'est pas optimale. Le bouton serait certainement mieux placé s'il était centré avec un padding. Ouvrez le fichier www/css/styles.css et ajoutez les lignes suivantes :

.view.hello-world-view .hello-world-view-content {
-webkit-box-pack: center;
padding: 12px;
}

Rechargez la page et vous avez terminé !

VIII - Démonstration

Téléchargez la démonstration ici.

IX - 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 : Hello World.
Je remercie également FirePrawn pour sa relecture attentive et assidue.