Tutoriel Sencha Touch 2.0 MVC

Je suis très nouveau à Sencha Touch cadre, vous voulez commencer avec Sencha Touch 2.0, mais pas en mesure de trouver un tutoriel qui montre une application à l'aide d'un Modèle MVC, et plus précisément dans le Sencha Touch version 2.0.

source d'informationauteur coure2011

  1. 12

    Voici deux vidéos de la sencha 2011 conférence:

    SenchaCon 2011: MVC dans la Profondeur de la Partie 1
    https://vimeo.com/33311074

    et

    SenchaCon 2011: MVC dans la Profondeur de la Partie 2
    https://vimeo.com/33430731

    Aussi, vous pouvez consulter leur blog pour d'autres tutoriels.

    Une autre vidéo pour mieux comprendre le Sencha Touch 2

    SenchaCon 2011: Le Sencha Système De Classe https://vimeo.com/33437222

  2. 43

    C'est probablement l'un des premiers tutoriels afin d'être patient et de savoir que les choses peuvent changer d'ici la version finale voit la lumière du jour.

    Pour MVC, tu vas souhaitez définir votre structure de dossier en premier. Quelque chose comme ceci:

    MyApp
    app
      controller
      model
      profile
      store
      view
    touch2
    app.js
    index.html

    Maintenant, nous allons commencer avec un exemple d'application.

    index.html

    <!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sample App</title>

    <link  href="touch2/resources/css/sencha-touch.css" type="text/css" title="senchatouch" id="senchatouch" />
    <link  href="touch2/resources/css/android.css" type="text/css" title="android" id="android" disabled="true" />
    <link  href="touch2/resources/css/apple.css" type="text/css" title="apple" id="apple" disabled="true" />
    <link  href="touch2/resources/css/bb6.css" type="text/css" title="blackberry" id="blackberry" disabled="true" />

    <link  href="styles/main.css" type="text/css">
    <script type="text/javascript" src="touch2/sencha-touch-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

    app.js

    Ext.Loader.setConfig({
    enabled : true
});


Ext.application({
    name: 'MyApp',

    profiles: ['Tablet'],

    views: [
        //common Tablet & Phone views 
    ],

    models: [

    ],

    controllers: [
        'Main'
    ],
    launch:function(){
        Ext.Viewport.add(Ext.create('MyApp.view.Main'));        
        //Ext.Viewport.add(Ext.create('MyApp.view.tablet.Main'));
     }        
});

    Bon, maintenant que vous avez les deux pivots de fichiers en lieu et Ext.Chargeur ira chercher les composants de l'infrastructure nécessaire pour faciliter le débogage.

    D'abord vous avez configuré votre application espace de noms (MyApp). Cela signifie que tous vos futures classes seront définies en vertu de l'MyApp espace de noms.

    Ensuite, vous avez défini les deux principaux profils. Tablette et Téléphone. Ils disent à votre application comment se comporter dans des environnements différents. Spécifier autant (ou aucun) ici.

    Ensuite, vous avez défini points de vue, les modèles et les contrôleurs qui sont partagés entre les deux profils. Ils ne se soucient pas si vous utilisez l'application sur un téléphone ou une tablette.

    Continuons avec notre Tablette profil

    app/profile/Tablet.js

    Ext.define('MyApp.profile.Tablet', {
    extend: 'Ext.app.Profile',

    config: {
        views: [
            'Main'
        ]
    },

    isActive: function() {
        return !Ext.os.is('Phone');
    },

    launch: function() {
        Ext.create('MyApp.view.tablet.Main');
    }
});

    Assez explicite. Config de prise d'objet de votre point de vue/modèles/contrôleurs qui sont spécifiques au profil. Ils ne sont pas utilisés (inclus) si vous exécutez l'application sur un smartphone.

    est actif méthode doit retourner true ou false après l'évaluation de l'environnement. J'ai précisément dit que les Tablettes sont toutes non-téléphones portables. Logiquement c'est incorrect, mais j'ai décidé de jouer de cette manière pour des raisons de simplicité. Le plus correct serait 

    return Ext.os.is('Tablet') || Ext.os.is('Desktop');

    Le point final d'un profil est la méthode de lancement. Il raconte l'application que faire lorsque l'application est lancée dans le profil particulier. MyApp va créer la vue principale en Ext.Fenêtre d'affichage.

    Noter que les Ext.Fenêtre d'affichage est une instance de Ext.Conteneur qui a déjà été ajouté à DOM sur l'app démarrer.

    Allons créer notre premier point de vue. Il peut être tout ce widget que vous souhaitez, et j'ai choisi la fenêtre des éléments.

    app/views/Main.js

    Ext.define('MyApp.view.Main', {
    extend: 'Ext.navigation.View',

    config: {
        fullscreen  : true,

        items: [
            {
                title: 'My Great App'
            }
        ]

    }
});

    C'est en plein écran (100% de la largeur&hauteur) et il crée immédiatement une barre de titre avec le titre de Mon Grand App.

    Avez-vous remarqué que nous venons de définir MyApp.vue.Principale, mais l'application va attendre MyApp.vue.de la tablette.Principal? Exactement parce que je voulais montrer comment vous pouvez réutiliser les points de vue entre les profils. Il n'est utile que si nous sommes en train de changer les bits d'entre eux en fonction du profil.

    app/views/tablet/Main.js

    Ext.define('MyApp.view.tablet.Main', {
    extend: 'MyApp.view.Main',

    initialize: function() {
        this.add({
           xtype    : 'button',
           action   : 'coolBtn', 
           text     : 'Running on a tablet'
        });
        this.callParent();
    }
});

    Cela ressemble beaucoup déjà. Juste pour le plaisir de l'extension, j'ai ajouté un bouton supplémentaire à la fenêtre des éléments. Je vais mettre en place un contrôleur qui va travailler avec le bouton

    app/controller/Main.js

    Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: { 
            coolButton: 'button[action=coolBtn]' 
        },

        control: {
            coolButton: {
                tap: 'onCoolButtonTap'
            }
        },

        routes: {
            'show/:id' : 'showItem'
        }
    },

    onCoolButtonTap: function(button) {
        console.log(button === this.getCoolButton());
    },

    showItem: function(id) {
        console.log('Showing item',id);
    }

});

    C'est le super partie, ici. Refs de nous donner un accès rapide aux composants basés sur la composante de la règle de requête (bouton[action=coolBtn] signifie trouver mon xtype = bouton cmp qui a la propriété action = coolBtn). Refs ajouter des méthodes de lecture, trop, comme on le voit dans onCoolButtonTap exemple.

    Puis-je contrôler le bouton et indiquer à l'application de surveiller le robinet de l'événement et de lui affecter un gestionnaire.

    Un autre ajout intelligent pour le modèle MVC sont les routes. Ils vont détecter les "commandes" dans votre chemin de l'URI, par exemple http://localhost/#show/7482 et de les exécuter à travers des showItem gestionnaire.

    Résumé

    Je pense que maintenant vous avez l'idée de base de la façon de démarrer avec votre application MVC. Avec un peu de curiosité, vous pouvez élargir les connaissances et de créer de formidables apps.

    Notez que j'ai écrit ce hors de ma tête et je n'ai pas testé. Laissez-moi savoir si vous trouvez une erreur ou quelque chose.

  3. 2

    Assurez-vous d'utiliser la Beta1 realease, comme c'est la dernière série d'exemples. Si vous jetez un oeil à la jog-avec-amis exemple, vous pouvez voir comment le système de classe de travaux.

    La première chose à comprendre est que la structure de l'application qui se compose de contrôleurs, de modèles, de magasins et de points de vue et la façon dont ils sont définis à l'intérieur de la Poste.De l'Application...

    Ils sont encore à travailler sur la documentation et les tutoriels sont rares, j'ai appris la nouvelle de la classe système de simplement en regardant l'exemple d'application, prendre un coup d'oeil, il sera probablement aider à vous obtenir en cours

    Également la documentatikn pour le système de classe est ici: http://docs.sencha.com/touch/2-0/#!/guide/class_system

    Edit: Après cette annonce, j'ai vu que Beta2 est maintenant publié