IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Implémenter un Hello World avec Moobile

Image non disponible

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 WorldHello World publié sur le site de MoobileMoobile.
Commentez Donner une note à l´article (5)

Article lu   fois.

Les deux auteur et traducteur

Site personnel

Traducteur : Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

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