Implémenter un Hello World avec Moobile

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.

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.

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.

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.

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

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 !

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é !

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

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.