« Sencha touch contacts » : différence entre les versions

Version du 1 décembre 2011 à 23:17

Il s'agit de représenter les contacts du téléphone avec les composants graphiques de sencha touch.

demo

Pour se faire une idée de ce qu'on peut faire avec sencha touch, c'est bien d'aller voir les demos sur leur site: http://dev.sencha.com/deploy/touch/examples/

Les demos sont aussi comprises dans la distribution de sencha qu'on peut télécharger ici: http://www.sencha.com/products/touch/download Déballer sencha-touch-1.1.0.zip dans h:/work, et ouvrir les démos dans chrome: file:///h:/work/sencha-touch-1.1.0/examples/index.html

Voir le kitchen sink qui est une demonstration de la plupart des composants graphiques. L'exemple sous User Interface > List serait approprié

Pour examiner le code source des exemples, et tout le reste de sencha, c'est bien de créer un projet sencha dans eclipse et d'importer tous les fichiers sous h:/work/sencha-touch-1.1.0

Il y a aussi beaucoup à apprendre dans la documentation en ligne: http://docs.sencha.com/touch/1-1/

ossature du projet

créer un nouveau projet senchagui créer les répertoires assets/www/js

créer assets/www/lib/touch y copier les fichiers du répertoire c:/work/sencha-touch-1.1.0 ainsi que les sous-répertoires pkgs, resources, src !! au déploiement faudra garder que le js et css nécessaire

créer assets/www/index.html

<!DOCTYPE html>
 <html>
 <head>
   <title>Learning sencha</title>
   <script type="text/javascript" src="lib/touch/sencha-touch-debug-w-comments.js"></script>
   <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="js/application.js"></script>
</head><body></body>
</html>

Pendant le développement, on utilise la version lisible de la librairie sencha-touch-debug-w-comments.js.

créer assets/www/js/application.js (application0.js)

Ext.setup({
      onReady: function() {

       var toolbar = new Ext.Toolbar({dock: 'top',title: 'une barre' });

       new Ext.Panel({
            fullscreen: true,
            //html: "toute l'application va être à l'intérieur de ce <b>panneau</b>",
            items: [{html:"toute l'application va être à l'intérieur de ce <b>panneau</b>"}],
            dockedItems: [toolbar]
       });
 }});

Selon la doc Ext.setup reçoit un objet avec des attributs;

l'attribut onReady est une fonction qui va être appelée quand la page est chargée

Ext.Panel

il y a deux manières de mettre le html
on voit un exemple ou la toolbar est définie d'une autre manière
une recherche sur xtype mène au tableau de correspondance entre xtype et classes: http://docs.sencha.com/touch/1-1/#!/api/Ext.Component
dockedItem est un composant qu'on peut coller au bord du panel. Il a un attribut dock qui peut être top, right, left ou bottom

on peut ouvrir ça dans chrome

Pour y accéder depuis le téléphone, on peut mettre le projet sur infolipo.net avec le client ftp filezilla. L'adresse du serveur est ftp.servage.net, l'utilisateur est smartcours et je vais vous donner le mot de passe.

Créer un répertoire à son nom (le mien s'appelle andreas)
Sencha est déjà sur le serveur, pour éviter que chacun doive le copier dans son projet.

Pour l'inclure dans l'application, il faut faire une version modifiée d'index.html, qu'on peut appeler servage.html et dans lequel on change l'adresse des fichiers sencha

   <script type="text/javascript" src="../lib/touch/sencha-touch.js"></script>
   <link href="../lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />

exercice

changer la couleur de fond de l'application

créer une liste

Le code de la demo kitchensink est un peu compliqué, mais on peut chercher List dans la doc. On peut carrément copier l'exemple donné dans application.js, et ajouter la liste dans les items du panel: (application1.js)

Ext.setup({
      onReady: function() {

       Ext.regModel('Contact', {fields: ['firstName', 'lastName']} );

       var store = new Ext.data.JsonStore({
         model  : 'Contact',
         sorters: 'lastName',
         getGroupString : function(record) { return record.get('lastName')[0];},
         data: [
           {firstName: 'Tommy',   lastName: 'Maintz'},
           {firstName: 'Rob',     lastName: 'Dougan'},
           {firstName: 'Ed',      lastName: 'Spencer'}
           //...
         ]
       });

       var list = new Ext.List({
         fullscreen: true, 
         itemTpl : '{firstName} {lastName}',
         grouped : true,
         indexBar: true,
         store: store});      

       var toolbar = new Ext.Toolbar({dock: 'top',title: 'Contacts' });

       new Ext.Panel({
            fullscreen: true,
            //html: "toute l'application va être à l'intérieur de ce <b>panneau</b>",
            //items: [{html:"toute l'application va être à l'intérieur de ce <b>panneau</b>"}],
            items: [list],
            dockedItems: [toolbar]
       });
 }});

On voit que la liste contient un store, qui utilise un modèle, qui est défini par Ext.regModel, qui crée un objet Ext.data.Model http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Model

Un tour dans la doc montre qu'un modèle offre toute une série de fonctionnalités:

la validation permet de vérifier que les champs contiennent des valeurs correctes.
on peut les associer à d'autres modèles
on peut les enregistrer de différentes manières

Toutes ces fonctionnalités vont au-delà du coté graphique pour lequel nous avons choisi sencha touch.

Model / View / Controller

Au delà des composants graphiques, sencha offre un framework pour construire des applications. Le framework offre des fonctionnalités que dont les applications ont en général besoin, et il offre aussi une manière d'organiser le code, qui suit un principe d'architecture connu: le pattern Model/View/Controller. http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

Les modèles: représentent les données, par exemple les contacts que nous avons défini par les champs firstName et lastName.
Les vues: servent à représenter les données graphiquement. Si on suit la structure voulue par Sencha, il faut créer des objets View à base de composants graphiques comme Ext.Panel, Ext.List etc..
Les controllers: font le lien entre les vues et les modèles. Un bouton, qui fait partie de la vue, appelle un controller quand il est appuyé, et le controleur apporte des modifications au modèle. Souvent ce n'est pas tout à fait évident de dire ou s'arrete la responsabilité du modele ou de la vue et ou commence le controller.

C'est tout à fait légitime d'ignorer tout celà si on en a pas besoin, et de continuer à se servir juste des composants graphiques. Les questions d'architecture deviennent plus importantes pour des plus grosses applications.

configuration de List

itemTpl est une template.

Chaque élément de la liste va être représenté par ce texte, ou les variables {firstName} et {lastName} sont remplacées par leur valeur dans le modèle représenté.
On peut ajouter du texte à la template:

   itemTpl : 'Prénom: {firstName}, Nom: {lastName}',

On peut même ajouter des éléments html

   itemTpl : 'Prénom: {firstName}, <b>Nom</b>: <span style="color:red">{lastName}</span>',

La documentation d'itemTpl mentionne qu'elle suit une structure de XTemplate. En cherchant XTemplate on trouve la documentation sur le langage de template. Dans les exemples on voit que la variable {#} indique le numéro de l'élément.

   itemTpl : '{#}. {firstName} {lastName}',

On voit qu'on peut tester des conditions

   itemTpl : '{#}. {firstName} {lastName} <tpl if="firstName[0]==\'T\'"> (commence par T)</tpl>',

(Ici, il a fallu écrire \' pour éviter que les guillemets ne se ferment)

exercices

Essayer les différentes manières de faire des templates, et examiner le code généré dans chrome. [clef à molette] > Outils > Outils de développement (ou directement ctrl+maj+I)
Mettre ça sur le serveur et le regarder avec le téléphone.

grouped indique si les éléments doivent être groupés. Si on veut grouper les éléments,il faut donner au store une méthode getGroupString qui retourne le string qui sert à grouper les éléments. ici on a

  getGroupString : function(record) { return record.get('lastName')[0];},

Pour grouper les éléments par la deuxième lettre du prénom, on peut écrire

  getGroupString : function(record) { return record.get('firstName')[1];},

exercices

pistes: regarder la doc sencha, le code des exemples livrés avec sencha

supprimer la liste alphabétique qui apparait à droite
trouver comment ajouter le bouton à droite des éléments qui apparait dans l'exemple List du kitchensink quand on clique sur Disclosure
trouver comment executer du code quand le bouton est appuyé.

intégrer les contacts du téléphone

ossature du projet phonegap

on suit les instructions de http://phonegap.com/start/#android

Il faut créer un nouveau projet qui intègre phonegap.

File > new > other > Android project
Project name: senchacontacts
Build Target: Android 4.0
Package Name: org.infolipo
new folders: libs assets/www
copier depuis callback-phonegap-9f0856d\Android
- phonegap-1.2.0.jar vers libs
- phonegap-1.2.0.js vers assets/www
- xml vers res

Retour dans eclipse

click droit senchacontacts > refresh
click droit sur libs/phonegap-1.2.0.jar > Build path > Add to build path
modifier src/org.infolipo/SenchacontactsActivity.java

    public class SenchacontactsActivity extends DroidGap { //Activity {
    super.loadUrl("file:///android_asset/www/index.html"); //setContentView(R.layout.main);

Source > Organize imports (ou ctrl-shift-o)
click droit sur AndroidManifest.xml > open with > text editor
insérer ceci après versionname

   <supports-screens
   android:largeScreens="true"
   android:normalScreens="true"
   android:smallScreens="true"
   android:resizeable="true"
   android:anyDensity="true"
   />
   <uses-permission android:name="android.permission.CAMERA" />
   <uses-permission android:name="android.permission.VIBRATE" />
   <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
   <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
   <uses-permission android:name="android.permission.READ_PHONE_STATE" />
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.RECEIVE_SMS" />
   <uses-permission android:name="android.permission.RECORD_AUDIO" />
   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
   <uses-permission android:name="android.permission.READ_CONTACTS" />
   <uses-permission android:name="android.permission.WRITE_CONTACTS" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />

ajouter android:configChanges="orientation|keyboardHidden" dans

        <activity
            android:label="@string/app_name"
            android:name=".SenchacontactsActivity" 
            android:configChanges="orientation|keyboardHidden">

ajouter une deuxieme activité après la première

        <activity android:name="com.phonegap.DroidGap" 
                  android:label="@string/app_name" 
                  android:configChanges="orientation|keyboardHidden"> 
           <intent-filter> </intent-filter>
        </activity>

changer la version du sdk pour correspondre au téléphone (sur le téléphone Réglages > A propos du téléphone, Version Android) http://developer.android.com/guide/appendix/api-levels.html

   
    <uses-sdk android:minSdkVersion="10" />

copier le répertoire assets du projet précédent (senchagui)
inclure la librairie phonegap dans index.html

   <script type="text/javascript" src="lib/phonegap-1.2.0.js"></script>

effacer servage.html: on ne peut pas mettre une application phonegap sur un serveur.

initialisation de l'application

Avant de commencer à travailler, il faut s'assurer à la fois que phonegap et que sencha sont bien initialisés. Phonegap est initialisé quand quand l'événement deviceReady est lancé. On peut s'y abonner en y ajoutant cette ligne dans index.html.

   <script type="text/javascript">
      document.addEventListener("deviceready", initializer.onPhonegapReady, false);
   </script>

Ainsi l'événement deviceReady déclenche l'appel de la fonction initializer.onPhonegapReady. On définit la fonction onPhonegapReady sur un nouvel objet initializer dans application.js:

  var initializer = {
 	onPhonegapReady: function(){ initializer.phonegapReady = true; },
	onSenchaReady: function(){ initializer.senchaReady = true; }
  };

La méthode onSenchaReady sert à être appelée quand sencha est prêt. On l'appelle depuis la fonction onReady de la configuration passée en argument au setup.(application2.js)

Ext.setup({ onReady: function() { initializer.onSenchaReady();}});

On rajoute à l'initializer une méthode appelée quand phonegap et sencha sont prêts

 var initializer = {
 	onPhonegapReady: function(){ 
	   initializer.phonegapReady = true;
	   if(initializer.senchaReady){ initializer.onEverythingReady(); }
	},
	onSenchaReady: function(){
           initializer.senchaReady = true;
           if(initializer.phonegapReady){ initializer.onEverythingReady(); }
	},
	onEverythingReady: function(){
		alert("phonegapReady: " + initializer.phonegapReady + "\nsenchaReady:" + initializer.senchaReady);
	}	
 };

Déployer et voir l'alerte

On peut maintenant rajouter dans onEverythingReady le code pour créer la liste.(application3.js):

 Ext.setup({ onReady: function() { initializer.onSenchaReady();}});

 var initializer = {
 	onPhonegapReady: function(){
 		initializer.phonegapReady = true;
 		if (initializer.senchaReady){ initializer.onEverythingReady();}
 	},
 	onSenchaReady: function(){
 		initializer.senchaReady = true;
 		if (initializer.phonegapReady){ initializer.onEverythingReady();}
 	}
  };
 
 // j'ai sorti de l'initializer la définition de la fonction qui lance tout
 // pour bien la mettre en évidence
 initializer.onEverythingReady = function(){
		
       Ext.regModel('Contact', {fields: ['firstName', 'lastName']} );

       var store = new Ext.data.JsonStore({
         model  : 'Contact',
         sorters: 'lastName',
         getGroupString : function(record) { return record.get('lastName')[0];},
         data: [
           {firstName: 'Tommy',   lastName: 'Maintz'},
           {firstName: 'Rob',     lastName: 'Dougan'},
           {firstName: 'Ed',      lastName: 'Mencer'}
         ]
       });

       var list = new Ext.List({
         fullscreen: true, 
         itemTpl : '{firstName} {lastName}',
         indexBar:true,
         grouped : true,
         store: store});      

       var toolbar = new Ext.Toolbar({dock: 'top',title: 'Contacts' });
       new Ext.Panel({
            fullscreen: true,
            items: [list],
            dockedItems: [toolbar]
       });
 };

lire les contacts du téléphone

On peut s'inspirer du projet exemple que nous avons vu en premier, ou de la documentation phonegap. Pour contacts.find elle donne l'exemple suivant:

    // PhoneGap is ready
    //
    function onDeviceReady() {
        // find all contacts with 'Bob' in any name field
        var options = new ContactFindOptions();
        options.filter="Bob"; 
        var fields = ["displayName", "name"];
        navigator.contacts.find(fields, onSuccess, onError, options);
    }

    // onSuccess: Get a snapshot of the current contacts
    //
    function onSuccess(contacts) {
        for (var i=0; i<contacts.length; i++) {
            console.log("Display Name = " + contacts[i].displayName);
        }
    }

    // onError: Failed to get the contacts
    //
    function onError(contactError) {
        alert('onError!');
    }

Il s'agit d'appeler

 navigator.contacts.find(fields, onSuccess, onError, options);

fields: contient les noms des champs de Contact à retourner. La doc de Contact nous donne le nom des champs disponibles.
onSuccess et onError: sont les fonctions à appeler après l'execution.
options: Les options servent à préciser quels contacts on cherche. Elles sont facultatives.

Pour commencer simplement, nous allons juste afficher tous les noms sur la console. Ajouter ceci à la fin de onEverythingReady (application4.js):

      function findSuccess(contacts){
              for (var i=0; i<contacts.length; i++) {
                console.log("Display Name = " + contacts[i].displayName);
              }
      };
		   
      navigator.contacts.find(
           ["displayName"], 
           findSuccess,
           function(error){ console.log("error: " + error) }
      );

regarder l'application dans l'émulateur. Ouvrir la console dans chrome: Outils > Console Javascript. Vérifier que les noms sont affichés.

Charger l'application sur le téléphone,les noms devraient s'afficher dans logCat. Mettre un filtre dans logCat en cliquant sur + et en mettant "Web Console" dans le champ "by Log Tag".

exercice

Nous savons afficher des contacts, et nous savons lire les contacts du téléphone. Il faut maintenant remplacer les données fictives définies dans l'objet store par les contacts du téléphone. Il est suffisant d'afficher juste le champ displayName.

@@ Ligne 138 : / Ligne 138 : @@
 Toutes ces fonctionnalités vont au-delà du coté graphique pour lequel nous avons choisi sencha touch.
+=== Model / View / Controller ===
 Au delà des composants graphiques, sencha offre un framework pour construire des applications.
 Le framework offre des fonctionnalités que dont les applications ont en général besoin,
@@ Ligne 148 : / Ligne 149 : @@
 C'est tout à fait légitime d'ignorer tout celà si on en a pas besoin, et de continuer à se servir juste des composants graphiques. Les questions d'architecture deviennent plus importantes pour des plus grosses applications.
+=== configuration de List ===
 '''itemTpl''' est une template.
@@ Ligne 161 : / Ligne 164 : @@
 (Ici, il a fallu écrire \' pour éviter que les guillemets ne se ferment)
-=== exercices ===
+==== exercices ====
 # Essayer les différentes manières de faire des templates, et examiner le code généré dans chrome. [clef à molette] > Outils > Outils de développement (ou directement ctrl+maj+I)
 # Mettre ça sur le serveur et le regarder avec le téléphone.
@@ Ligne 170 : / Ligne 173 : @@
 <pre>  getGroupString : function(record) { return record.get('firstName')[1];},</pre>
-=== exercices ===
+==== exercices ====
 pistes: regarder la doc sencha, le code des exemples livrés avec sencha
 # supprimer la liste alphabétique qui apparait à droite

« Sencha touch contacts » : différence entre les versions

Version du 1 décembre 2011 à 23:17

Sommaire

demo

ossature du projet

exercice

créer une liste

Model / View / Controller

configuration de List

exercices

exercices

intégrer les contacts du téléphone

ossature du projet phonegap

initialisation de l'application

lire les contacts du téléphone

exercice

Menu de navigation

« Sencha touch contacts » : différence entre les versions

Version du 1 décembre 2011 à 23:17

demo

ossature du projet

exercice

créer une liste

Model / View / Controller

configuration de List

exercices

exercices

intégrer les contacts du téléphone

ossature du projet phonegap

initialisation de l'application

lire les contacts du téléphone

exercice

Menu de navigation

Rechercher

« Sencha touch contacts » : différence entre les versions