Sencha touch contacts
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)
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
- 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.
- 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é.
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>
- 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.