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

 
Sélectionnez
<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 :

 
Sélectionnez
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 :

 
Sélectionnez
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 :

 
Sélectionnez
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 :

 
Sélectionnez
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 :

 
Sélectionnez
.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 iciDémo.

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