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

De Wikilipo
Aller à la navigation Aller à la recherche
Ligne 89 : Ligne 89 :
# démarrer une console dos, tape ipconfig et noter l'adresse ip du pc
# démarrer une console dos, tape ipconfig et noter l'adresse ip du pc
# ajouter ceci dans servage.html: <script src="http://[adresse ip]:8081/target/target-script-min.js"></script>
# ajouter ceci dans servage.html: <script src="http://[adresse ip]:8081/target/target-script-min.js"></script>
# copier index.html sur le serveur
# copier servage.html sur le serveur
# cd h:/weinre-jar
# dans la console:
# java -jar weinre.jar --boundHost [adresse ip] --httpPort 8081
#* cd h:/weinre-jar
#* java -jar weinre.jar --boundHost [adresse ip] --httpPort 8081
# aller sur http://infolipo.net/cours/[votre nom]/servage.html avec le téléphone
# aller sur http://infolipo.net/cours/[votre nom]/servage.html avec le téléphone
# dans chrome aller sur http://localhost:8081 et cliquer sur client
# dans chrome aller sur http://localhost:8081 et cliquer sur client

Version du 1 décembre 2011 à 23:46

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

  1. changer la couleur de fond de l'application

déboguer sur le téléphone

  1. démarrer une console dos, tape ipconfig et noter l'adresse ip du pc
  2. ajouter ceci dans servage.html: <script src="http://[adresse ip]:8081/target/target-script-min.js"></script>
  3. copier servage.html sur le serveur
  4. dans la console:
    • cd h:/weinre-jar
    • java -jar weinre.jar --boundHost [adresse ip] --httpPort 8081
  5. aller sur http://infolipo.net/cours/[votre nom]/servage.html avec le téléphone
  6. dans chrome aller sur http://localhost:8081 et cliquer sur client

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)

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

  1. 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)
  2. Mettre ça sur le serveur et le regarder avec le téléphone.
  3. supprimer la liste alphabétique qui apparait à droite
  4. trouver comment ajouter le bouton à droite des éléments qui apparait dans l'exemple List du kitchensink quand on clique sur Disclosure
  5. trouver comment executer du code quand le bouton est appuyé.

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

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>

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

Récupérée de « https://wikilipo.unige.ch/w/index.php?title=Sencha_touch_contacts&oldid=1006 »