Wikilipo - Contributions [fr]

Canvas

2011-12-09T09:41:41Z

Andreaskundig :

Voici un fichier html qui crée une une aiguille qui tourne. On peut le regarder ici : http://infolipo.net/cours/canvas/canvas.html
<source lang="javascript">
<html><head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script type="text/javascript">
function start(){
var exemple = document.getElementById('exemple');

// angle de l'aiguille
var angle_en_degres = 0;
function dessineImage(){
// on change l'angle
angle_en_degres = angle_en_degres + 2;
var angle_en_radians = angle_en_degres * Math.PI/180;
dessineAiguille(angle_en_radians);
}

// executer 60 fois par seconde dessineImage
setInterval(dessineImage,1000/60);

/* une autre manière de faire
function dessineAvecTimeout(){
setTimeout(dessineAvecTimeout,1000/60);
dessineImage();
}
dessineAvecTimeout();
*/

}

function dessineAiguille(rotation){
var exemple = document.getElementById('exemple');
var contexte = exemple.getContext('2d');

// on enlève tout ce qui est dessiné
contexte.clearRect(0,0,exemple.width,exemple.height);

// on enregistre l'état du canvas
// pour pouvoir y retourner après
contexte.save();

// on se place au centre du canvas
contexte.translate(exemple.width/2,exemple.height/2);
// on dessine un rectangle au centre
contexte.fillRect(-5, -5, 10, 10);
// on tourne le canvas
contexte.rotate(rotation);

// on dessine l'aiguille
// on commence un chemin
contexte.beginPath();
// on se déplace au centre
contexte.moveTo(0,0);
// on tire un trait de 50 pixels vers la droite
contexte.lineTo(0, 50);
// on termine le chemin
contexte.closePath();
// on dessine le chemin
contexte.stroke();

// on dessine un rectangle de 10 pixels de coté
// à une hauteur de -5 pour qu'il soit centré
// et 50 pixels vers la droite pour qu'il soit
// au bout de l'aiguille
contexte.fillRect(-5, 50, 10, 10);

// on remet le canvas dans son état de départ
// sans translation ni rotation
contexte.restore();
}
</script>
</head>
<body onload="start();">
<canvas id="exemple" width="200" height="200">
Affichage d'un texte pour les navigateurs qui ne supportent pas canvas.
</canvas>
<p>Voir aussi ce <a href="https://developer.mozilla.org/fr/Tutoriel_canvas">tutoriel</a></p>
</body>
</source>

Canvas

2011-12-09T09:39:35Z

Andreaskundig : Page créée avec « Ce fichier html crée une une aiguille qui tourne. On peut le regarder ici: http://infolipo.net/cours/canvas/canvas.html <source lang="html5"> <html><head> <!-- prevent zoomi... »

Ce fichier html crée une une aiguille qui tourne. On peut le regarder ici: http://infolipo.net/cours/canvas/canvas.html
<source lang="html5">
<html><head>

<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<script type="text/javascript">
function start(){
var exemple = document.getElementById('exemple');

// angle de l'aiguille
var angle_en_degres = 0;
function dessineImage(){
// on change l'angle
angle_en_degres = angle_en_degres + 2;
var angle_en_radians = angle_en_degres * Math.PI/180;
dessineAiguille(angle_en_radians);
}

// executer 60 fois par seconde dessineImage
setInterval(dessineImage,1000/60);

/* une autre manière de faire
function dessineAvecTimeout(){
setTimeout(dessineAvecTimeout,1000/60);
dessineImage();
}
dessineAvecTimeout();
*/

}

function dessineAiguille(rotation){
var exemple = document.getElementById('exemple');
var contexte = exemple.getContext('2d');

// on enlève tout ce qui est dessiné
contexte.clearRect(0,0,exemple.width,exemple.height);

// on enregistre l'état du canvas
// pour pouvoir y retourner après
contexte.save();

// on se place au centre du canvas
contexte.translate(exemple.width/2,exemple.height/2);
// on dessine un rectangle au centre
contexte.fillRect(-5, -5, 10, 10);
// on tourne le canvas
contexte.rotate(rotation);

// on dessine l'aiguille
// on commence un chemin
contexte.beginPath();
// on se déplace au centre
contexte.moveTo(0,0);
// on tire un trait de 50 pixels vers la droite
contexte.lineTo(0, 50);
// on termine le chemin
contexte.closePath();
// on dessine le chemin
contexte.stroke();

// on dessine un rectangle de 10 pixels de coté
// à une hauteur de -5 pour qu'il soit centré
// et 50 pixels vers la droite pour qu'il soit
// au bout de l'aiguille
contexte.fillRect(-5, 50, 10, 10);

// on remet le canvas dans son état de départ
// sans translation ni rotation
contexte.restore();
}
</script>
</head>
<body onload="start();">
<canvas id="exemple" width="200" height="200">
Affichage d'un texte pour les navigateurs qui ne supportent pas canvas.
</canvas>
<p>Voir aussi ce <a href="https://developer.mozilla.org/fr/Tutoriel_canvas">tutoriel</a></p>
</body>
</source>

Introduction au développement pour smartphone

2011-12-09T09:37:41Z

Andreaskundig : /* Sencha touch */

Solutions

2011-12-08T23:55:53Z

Andreaskundig : a déplacé Solutions vers Solutions cours smartphone

#REDIRECTION [[Solutions cours smartphone]]

Solutions cours smartphone

2011-12-08T23:55:53Z

Andreaskundig : a déplacé Solutions vers Solutions cours smartphone

== phonegap ==

=== Exercice 1 ===

Cette application n'utilise pas la fonction de la boussole ('''Compass'''). Ajoutez un bouton qui indique l'angle que fait le téléphone avec le nord. Afficher la valeur de l'angle avec la fonction '''notification.alert''' fournie par phonegap.

* Solution:
Ajouter un bouton dans index.html
<source lang="html5">
<a href="#" class="btn large" onclick="read_compass();">Read Compass</a>
</source>

Ce bouton appelle la fonction '''read_compass''' définie dans main.js. Le reste est copié de la documentation phonegap.
<source lang="javascript">
function read_compass(){
navigator.compass.getCurrentHeading(onCompassSuccess, onCompassError);
}

function onCompassSuccess(heading){
alert('Heading: ' + heading.magneticHeading);
}

function onCompassError(compassError){
alert('Compass Error: ' + compassError.code);
}
</source>

=== Exercice 2 ===

Ce n'est pas pratique d'avoir le nord que quand on appuie un bouton. Modifiez la fonction pour qu'elle affiche l'angle à intervalle régulier, d'une manière similaire à '''toggleAccel'''

* Solution:
La solution est copiée sur la mesure de l'accélération.

Il faut ajouter un élément ou écrire la mesure de la boussole.
<source lang="html5">
<dl><dt>Heading</dt><dd id="heading"> </dd></dl>
</source>

Il faut aussi ajouter un bouton pour déclencher et interrompre la mesure:
<source lang="html5">
<a href="#" class="btn large" onclick="toggleCompass();">Toggle Compass</a>
</source>

Le code javascript est presque indentique à celui de toggleAccel:
<source lang="javascript">
var compassWatch = null;

function updateCompass(heading) {
document.getElementById('heading').innerHTML = heading.magneticHeading;
}

function onCompassError(compassError){
alert('Compass Error: ' + compassError.code);
}

var toggleCompass = function() {
if (compassWatch !== null) {
navigator.compass.clearWatch(compassWatch);
updateCompass({magneticHeading:""});
compassWatch = null;
} else {
var options = {};
options.frequency = 1000;
compassWatch = navigator.compass.watchHeading(
updateCompass,
function(ex) {
alert("accel fail (" + ex.name + ": " + ex.message + ")");
}, options);
}
};
</source>

Phonegap sample project

2011-12-08T23:55:35Z

Andreaskundig : /* exercices */

== copier l'exemple phonegap ==

Ce projet est une bonne démonstration des fonctionnalités auxquelles phonegap permet d'accéder. Le projet se trouve sous H:/callback-phonegap-9f0856d/Android/Sample. Il faut le copier sous I:/work.

== exécuter l'application ==
=== exécuter dans l'émulateur ripple ===

Ouvrir chrome à cette adresse: file:///I:/work/Sample/assets/www/index.html.
Un click droit ouvre un menu avec Emulator, choisir enable.

=== importer le projet dans eclipse ===
# dans le projet Sample, effacer project.properties. Ce fichier est automatiquement généré par eclipse.
# File>New>Other
# Android>Android project
# name: Sample, (x) Create project from existing source, Location: H:/work/Sample
# next version Android 4.0, next minimum SDK 10(10 Android 4.0), finish
# il y a des erreurs de compilation
# dans l'arborescence Sample>libs>phonegap-1.1.0.jar, click droit Build Path>Add to Build Path
# L'erreur de compilation disparait

(A un moment j'ai eu problème avec project.properties, il a fallu écrire à la main la valeur target=android-14. Mais ce problème ne s'est pas reproduit)

=== construire l'application et l'exécuter sur un téléphone android ===

# installer le driver usb pour adb de l'appareil
# le brancher le téléphone sur usb
# (si on a rooté son appareil, on peut travailler sans usb avec l'app adbWireless)
# autoriser le débogage sur le téléphone: Réglages>Applications>Développement>Débogage USB
# dans eclipse, click droit sur Sample, Run As>1 Android Application
# l'application démarre sur le téléphone

Une autre solution:
# Autoriser l'installation d'applications ne provenant pas d'Android Market: Réglages > Applications > Sources inconnues
# dans eclipse, click droit sur Sample, Run As>1 Android Application. L'application est construite sous la forme du fichier bin/Sample.apk
# copier le fichier bin/Sample.apk sur le téléphone, par exemple dans le répertoire download.
# ouvrir un explorateur et appuyer sur Sample.apk
# accepter l'installation

Une autre solution pour construire le fichier apk
# mettre tous les fichiers du répertoire assets/www dans une archive zip
# ouvrir un compte sur https://build.phonegap.com/
# uploader le fichier zip.
# attendre un peu
# télécharger le fichier apk.

== examiner l'exemple ==

Les fichiers de l'application sont sous Sample/assets/www/
'''index.html'''
* inclut les autres fichiers: phonegap.js, main.js, master.css
* appelle des fonctions javascript dans body onload et a onclick
'''main.css'''
* définit les styles des éléments
'''main.js'''
* contient les fonctions javascript appelées dans '''index.html'''

Le code javascript utilise des objets javascript créés par phonegap.js comme ''device'', navigator.''accelerometer''. Ces objets ne sont disponible qu'après l'initialisation de phonegap, qui est signalée par l'événement ''deviceready''

=== init ===
La fonction '''init''', appelée au chargement d'index.html fait en sorte que la fonction ''deviceInfo'' n'est appelée que quand phonegap est prêt. La fonction deviceInfo lit des propriétés de l'objet device, comme device.platform etc...
<source lang="javascript">
function init() {
document.addEventListener("deviceready", deviceInfo, true);
}
</source>

=== beep ===
Les autres fonctions, comme '''beep''', sont appelées lorsqu'on clique sur un bouton.
<source lang="html5">
<a href="#" class="btn large" onclick="beep();">Beep</a>
</source>

'''beep''' est une fonction très simple:
<source lang="javascript">
var beep = function() {
navigator.notification.beep(2);
};
</source>

=== show_pic ===
'''show_pic''' est plus compliquée, elle passe à getPicture les fonctions '''dump_pic''' et '''fail'''. '''fail''' est appelée s'il y a eu un problème.
<source lang="javascript">
function show_pic() {
navigator.camera.getPicture(dump_pic, fail, {
quality : 50
});
}
</source>

=== dump_pic ===
'''dump_pic''' s'occupe de la photo en cas de succès. Elle reçoit en argument les données de la photo.
<source lang="javascript">
function dump_pic(data) {
//...
document.getElementById("test_img").src = "data:image/jpeg;base64," + data;
}
</source>

Pour savoir exactement comment utiliser ces fonctions, on peut aussi consulter l'excellente documentation de phonegap
http://docs.phonegap.com/en/1.2.0/phonegap_camera_camera.md.html#Camera

Pour chaque fonctionnalité, la documentation indique aussi sur quels plateformes elle est disponible.

=== toggleAccel ===

'''toggleAccel''' est la plus compliquée des fonctions de l'exemple

<source lang="javascript">
var accelerationWatch = null;

function updateAcceleration(a) {
document.getElementById('x').innerHTML = roundNumber(a.x);
document.getElementById('y').innerHTML = roundNumber(a.y);
document.getElementById('z').innerHTML = roundNumber(a.z);
}

var toggleAccel = function() {
if (accelerationWatch !== null) {
navigator.accelerometer.clearWatch(accelerationWatch);
updateAcceleration({
x : "",
y : "",
z : ""
});
accelerationWatch = null;
} else {
var options = {};
options.frequency = 1000;
accelerationWatch = navigator.accelerometer.watchAcceleration(
updateAcceleration,
function(ex) {
alert("accel fail (" + ex.name + ": " + ex.message + ")");
}, options);
}
};
</source>

Ici c'est plus simple de regarder d'abord la documentation. http://docs.phonegap.com/en/1.2.0/phonegap_accelerometer_accelerometer.md.html#Accelerometer
Phonegap fournit trois méthodes pour l'accéléromètre, et ce code n'en utilise que deux: '''watchAcceleration''' et '''clearWatch'''.
* '''watchAcceleration''' fait en sorte qu' à intervalle régulier '''updateAcceleration''' est appelée avec les données de l'accéléromètre
* L'appel à '''watchAcceleration''' retourne une variable d'identification appelée dans l'exemple '''accelerationWatch''' . Pour interrompre les mesures d'accélération, on peut appeler '''clearWatch(accelerationWatch)'''
* On voit que la fonction '''toggleAccel''' déclenche la mesure de l'accélération la première fois qu'elle est appelée. A l'appel suivant elle interrompt la mesure, et à l'appel d'après elle le remet en marche etc...

== exercices ==
# Cette application n'utilise pas la fonction de la boussole ('''Compass'''). Ajoutez un bouton qui indique l'angle que fait le téléphone avec le nord. Afficher la valeur de l'angle avec la fonction '''notification.alert''' fournie par phonegap.
# Ce n'est pas pratique d'avoir le nord que quand on appuie un bouton. Modifiez la fonction pour qu'elle affiche l'angle à intervalle régulier, d'une manière similaire à '''toggleAccel'''.

[[solutions cours smartphone|solutions]]

== autres fonctionnalités de phonegap ==
Comme on peut voir dans la documentation, phonegap donne l'accès à d'autres fonctionnalités du téléphone:
* '''Capture''' permet d'enregistrer de l'audio, des vidéos et des photos
* '''Connection''' permet de savoir si l'appareil est connecté à internet
* '''Contacts''' donne accès au carnet d'adresses
* '''Events''' permet de réagir à des évènements propres au téléphone. Nous avons déjà vu
** '''deviceready''' est lancé quand phonegap est initialisé.
** '''pause'''/'''resume''' sont déclenchés quand l'application est mise en arrière/avant-plan.
** '''online'''/'''offline''' signalent la connexion/deconnexion à internet
** '''batterycritical''', '''batterylow''', '''batterystatus''' réagissent à des changement du niveau de batterie.
** '''backbutton''', '''menubutton''', '''searchbutton''' etc... signalent qu'un bouton a été pressé sur le téléphone, et ne sont disponibles que sur les téléphones qui ont ces boutons
* '''File''' permet d'écrire et de lire des fichiers sur le téléphone.
* '''Geolocation''' donne la latitude et longitude du téléphone. (Cette information est aussi disponibles au pages web).
* '''Media''' permet d'enregistrer et de lire des fichiers audio.
* '''Storage''' donne l'accès à une base de donnée relationnelle avec laquelle on peut communiquer avec le langage SQL.

2011-12-02T13:54:08Z

Andreaskundig :

Ceci est une application qui résoud un problème concret.

Ma femme est aide-soignante dans un EMS. Ses heures de travail changent d'un jour à l'autre. Elle apprend au courant du mois ses horaires pour le mois suivant. Jusqu'ici elle arrivait à se procurer une photocopie des horaires. Malheureusement, un règlement absurde interdit de les photocopier et la direction a récemment décidé d'appliquer ce règlement. Nous ferions mieux d'appeler le syndicat, mais comme je suis informaticien, j'écris plutôt une application.

L'application doit permettre à ma femme de saisir rapidement son horaire du mois suivant quand il est affiché. Comme j'ai moi aussi besoin de connaitre les horaires de ma femme, et que ma mère aimerait les savoir aussi. L'application doit pouvoir publier l'horaire sur internet.

Cette application fonctionne, mais elle est loin d'être finie.

== application.js ==

<source lang="javascript" enclose="none">
Ext.setup({
onReady: function() {

Ext.regModel('Day', {fields: ['date','horaire']} );
var list = new Ext.List({
itemTpl : '{date}: {horaire}',
singleSelect: true,
//pour raccourcir le code, je crée le store ici.
store: new Ext.data.JsonStore({
model : 'Day',
// voir la définition de loadData plus bas
data: loadData()})
});

// Les configurations qui vont être utilisées pour les boutons.
// Les attributs qui sont pareils pour tous les boutons (xtype, height, width, listeners)
// vont être ajoutés par défaut par la fonction makeButtonPannel
var buttons1 = [{text: '1'},{text: '2'},{text: '3'},{text: '3s'},{text: '4'},{ text: '5'}];
var buttons2 = [{text: 'ce'},{text: 'f'},{text: 'r'},{text: 'v'},{text: 'fo'},
{
// Les listeners sont des fonctions qui sont appelées lorqu'un événement a lieu.
// Ici on a un listener qui réagit à l'événement 'tap', qui est envoyé
// quand on touche le bouton. Pour un exemple d'utilisation d'autres événements
// voir sencha-touch-1.1.0/examples/kitchensink/src/demos/touch.js
// Comme ce bouton a déjà un attribut listeners, il ne va pas recevoir
// les listeners par défaut donnés par makeButtonPanel
listeners: {
'tap': function () {selectPreviousNode(list);}
},
// Ce dernier bouton contient une icone à la place du texte.
// Ca ne fonctionne pas très bien avec l'agrandissement des boutons.
// Pour faire cela correctement, voir
// http://www.sencha.com/forum/showthread.php?150028-Scaling-button-icons
iconCls: 'arrow_up',
iconMask: true // necessary if the icon is encoded as base64
}];
var size = screen.width/Math.max(buttons1.length,buttons2.length);
var buttonPanel1 = makeButtonPannel(buttons1,size,list);
var buttonPanel2 = makeButtonPannel(buttons2,size,list);

var titleToolbar = new Ext.Toolbar({dock: 'top',title: 'horaires' });
var bottomToolbar = new Ext.Toolbar({
dock: 'bottom',
defaults: {iconMask: true},
layout: {pack: 'center'},
items: [{iconCls: 'delete',
text: 'reset',
listeners: {'tap': function () {resetData(list);}}
},
{iconCls: 'action',
text: 'save',
listeners: {'tap': function () {saveData(list);}}
},
{iconCls: 'compose',
text: 'post',
listeners: {'tap': function () {postData(list);}}
}]

});

new Ext.Panel({
fullscreen: true,
// Le layout 'fit' remplit tout avec le seul item qu'il contient
// Sans cette ligne la liste dépasserait sous les boutons
// voir la doc http://docs.sencha.com/touch/1-1/#!/api/Ext.layout.FitLayout
layout: 'fit',
items: [list],
dockedItems: [titleToolbar,bottomToolbar,buttonPanel2,buttonPanel1]
});

list.select(0);

}});

// Crée un panel de boutons à partir de:
// buttons: un array de configurations de boutons
// size: le coté d'un bouton (ils sont carrés)
// list: la liste sur laquelle agissent les boutons
function makeButtonPannel(buttons, size, list){
return new Ext.Panel({
// quand on utilise ce panel comme dockedItem d'un autre panel
// il apparait en bas
dock: 'bottom',
layout: {
// layout qui pose ses items côte à côte horizontalement
// voir http://docs.sencha.com/touch/1-1/#!/api/Ext.layout.HBoxLayout
type : 'hbox',
pack : 'center'
},
// hauteur du panel: size passé en argument de la fonction
height: size,
// attributs qui vont s'ajouter aux attributs des items.
defaults: {
// Les items auront le type Button
// pour la correspondance entre xtypes et classes
// voir http://docs.sencha.com/touch/1-1/#!/api/Ext.Component
xtype: 'button',
height: size,
width: size,
listeners: {
'tap': function(button, event){ setHoraire(button.text,list);}
}
},
// la liste de boutons passés en argument
items: buttons
});
}

// Positionne l'horaire à la date sélectionnée dans la liste
// et sélectionne l'élément suivant.
function setHoraire(horaire,list){
// Il doit y en avoir un unique élément sélectionné
var selectedRecord = list.getSelectedRecords()[0];
var index = list.indexOf(selectedRecord);

// C'est un modèle. Pour le modifier il faut utiliser la fonction set
// http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Model
selectedRecord.set('horaire',horaire);
// Il faut rafraichir le node pour que le changement soit visible
list.refreshNode(index);

// sélectionner la ligne suivante
if(index < list.getStore().getCount() - 1){
list.select(index + 1);
}
}

// Recule la sélection d'une position dans la list
function selectPreviousNode(list){
var selectedNode = list.getSelectedNodes()[0]; //il doit y en avoir un
var selectedIndex = list.indexOf(selectedNode);
var newIndex = selectedIndex === 0 ? 0 : selectedIndex - 1;
list.select(newIndex);
}

// Enregistre les horaires sous la forme d'un string,
// par exemple "3s|4|r|..."
function saveData(list){
// Array de tous les modèles Day
var records = list.getStore().data.getRange();
// string "3s|4|r|..."
var horaires = DAY.recordsToHoraires(records);
// localStorage est un objet fourni par javascript (html 5).
// Les données qu'on y met sont enregistrées dans le browser
// et sont disponibles à chaque fois qu'on va sur la page.
localStorage["horaires"] = horaires;
}

// Lit les données enregistrées et les retourne sous forme d'un array
// de configuraions du modèle Day
// par exemple [{date: "Thu 1.12.2011", horaire: "4"}, {...}, ... ]
function loadData(){
// Ce programme n'est pas encore capable de gérer plusieurs mois.
// On décide arbitrairement qu'on est en décembre 2011
var year = 2011;
// les mois sont numérotés de 0 à 11, 11 est décembre
var month = 11;

// les données enregistrées.
// localStorage est un objet fourni par javascript (html 5)
// Les données qu'on y met sont enregistrées dans le browser
// et sont disponibles à chaque fois qu'on va sur la page.
var horaires = localStorage["horaires"];
if(horaires){
return DAY.horairesToRecordConfigs(year,month,horaires)
}else{
return DAY.makeEmptyRecordConfigs(year,month);
}
}

// Remet tous les horaires de la liste à "-"
function resetData(list){
var records = list.getStore().data;
for(var i=0; i< records.length; i++){
// records est une MixedCollection, sur laquelle il faut appeler la méthode get.
// record est un modèle. Pour le modifier il faut utiliser la méthode set
// http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Model
records.get(i).set("horaire","-");
}
}

// Envoie les horaires sur un serveur.
function postData(list){
// Array de tous les modèles Day
var records = list.getStore().data.getRange();
// string "3s|4|r|..."
var horaires = DAY.recordsToHoraires(records);

// On envoie les données sur le serveur par ajax.
// On peut faire des requetes ajax directement en javascript
// mais c'est plus confortable de passer par une librairie.
// Ici nous utilisons celle qui est fournie par sencha.
Ext.Ajax.request({

// l'adresse du serveur
// J'y ai mis un programme php qui enregistre les données pour un nom.
url: "http://infolipo.net/cours/data/data.php",

// C'est gentil de remplacer "andreas" par votre nom pour ne pas écraser mes données.
// On peut voir ce qui est enregistré à la page
// http://infolipo.net/cours/data/data.php?name=andreas
params: {name:"andreas",
data:horaires},

// Cette fonction est appelée au retour de la requête, si tout a bien marché
success: function(response, opts) {
alert("Réponse du serveur: " + response.responseText);
},

// Cette fonction est appelée en cas d'échec.
failure: function(response, opts) {
alert('échec: ' + response.status);
}
});
}

// Les fonctions pour manipuler le modèle Day ont assez en commun
// pour que je les regroupe dans un même objet, je trouve.
// C'est une question de gout.
var DAY = {

// Crée les configuration de modèles pour un mois
// year: l'année
// month: le mois
// horaires: un string représentant les horaires "3s|4|r|..."
horairesToRecordConfigs: function(year, month, horaires){
// les horaires sont enregistrés sous la forme "3s|4|r|..."
// sépare les horaires pour avoir un array ["3s","4","r",...]
var horairesEnArray = horaires.split("|");
var day = 0;
return horairesEnArray.map(function(h){
var date = new Date(year,month,day);
var config = DAY.createRecordConfig(h,date);
day ++;
return config;
}
);
},

// Crée un string qui représente les horaires "3s|4|r|..."
// à partir d'un array de modèles Day
recordsToHoraires: function(records){
// On tire des records un array qui contient les horaires dans l'ordre
// par exemple ["3s","4","r",...]
var horairesEnArray = records.map(function(record){
// C'est un modèle. Il faut utiliser la méthode get
// http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Model
return record.get("horaire");
});
// retourner un string "3s|4|r|..."
return horairesEnArray.join("|");
},

// Retourne un array de configurations pour le modèle Day,
// toutes avec l'horaire "-",
// pour tous les jours du mois indiqué
makeEmptyRecordConfigs: function(year, month){
// prendre l'array de dates fourni par datesOfMonth()
// et le transformer en array de configurations pour le modèle Day.
var datesData = DAY.datesOfMonth(year,month).map(
function(d){ return DAY.createRecordConfig("-",d);}
);
return datesData;
},

// Crée la configuration pour un modèle Day
createRecordConfig: function(l_horaire, la_date){
// la méthode format est ajoutée à Date par sencha
// voir http://docs.sencha.com/touch/1-1/#!/api/Date
return {
date: la_date.format("D d.m.Y"),
horaire: l_horaire
};
},

// Retourne un array contenant les objets Date du mois indiqué
datesOfMonth: function(year, month){
var date = new Date(year, month, 1);
var month = date.getMonth()
var dates = [];
date.setDate(1);
while (month === date.getMonth()) {
dates.push(date);
// la méthode add est ajoutée par sencha
// à la classe Date fournie par javascript
date = date.add(Date.DAY, 1);
}
return dates;
}
}

</source>

== exercices ==

Il s'agit en premier de décortiquer l'application pour comprendre ce quelle fait, et en suite de l'améliorer

=== Comprendre l'interface graphique ===

# Déplacer la barre des taches du bas de l'écran vers le haut
# Rajouter une rangée de boutons

=== Comprendre le fonctionnement de l'application ===

# Désactiver la fonctionnalité de chaque bouton et la remplacer par un alert.
# Voir comment fonctionne l'enregistrement de données.
# Voir comment l'application envoie des données ailleurs par ajax.

=== Améliorer l'interface graphique ===

# Créer une plus belle template pour afficher les rangées.
# Les boutons '''save''', '''reset''' et '''post''' sont trop accessibles, ils pourraient être appuyés par erreur
## Ouvrir un dialogue de confirmation qui dit "vraiment?", avec un bouton '''Interrompre''' et un bouton '''OK''' qui déclenche l'action.
## Autre solution: remplacer les trois boutons par un bouton '''actions''' qui ouvre un panneau avec '''save''', '''reset''' et '''post'''

=== Améliorer la fonctionnalité ===

# Ajouter un bouton pour appeler le syndicat
# L'application ne fonctionne que pour un mois de l'année. Comment peut-on laisser l'utilisateur choisir le mois
## Choisir un composant graphique
## Ajouter un bouton qui appelle ce composant graphique
## Gérer l'affichage en fonction du mois
## Gérer la nouvelle donnée du mois pour l'enregistrement et l'envoi par ajax.
# Les horaires sont identifiés par un nom, mais ils correspondent à des heures de début et de fin. Comment intégrer les heures dans l'application?
## Tenir compte des horaires coupés qui sont fait d'une période de travail le matin, et d'une autre le soir.

=== Améliorations hardcore ===

# Trouver comment faire pour que les boutons reflètent l'état du jour sélectionné. Je n'ai pas trouvé comment faire en sorte qu'un bouton reste appuyé. Je n'ai pas voulu utilisé les radiobuttons qui me semblaient trop volumineux. Est-ce qu'il faut créer des boutons soi-même avec html/css?
# Publier les horaires sous forme d'évènements dans un agenda en ligne google. Ce serait très utile parce que les agendas d'android et d'iphone peuvent être synchronisés avec un agenda google.

A part ça ce serait utile de profiter de html5 pour permettre à l'application de tourner offline: http://www.sencha.com/learn/taking-sencha-touch-apps-offline/

2011-12-02T10:20:26Z

Andreaskundig : Page créée avec « Ma femme est aide-soignante dans un EMS. Ses heures de travail changent d'un jour à l'autre. Elle apprend au courant du mois ses horaires pour le mois suivant. Jusqu'ici ell... »

Ma femme est aide-soignante dans un EMS. Ses heures de travail changent d'un jour à l'autre. Elle apprend au courant du mois ses horaires pour le mois suivant. Jusqu'ici elle arrivait à se procurer une photocopie des horaires. Malheureusement, un règlement absurde interdit de les photocopier et la direction a récemment décidé d'appliquer ce règlement. Nous ferions mieux d'appeler le syndicat, mais comme je suis informaticien, j'écris plutôt une application:

<source lang="javascript>
Ext.setup({
onReady: function() {

Ext.regModel('Day', {fields: ['date','horaire']} );
var list = new Ext.List({
itemTpl : '{date}: {horaire}',
singleSelect: true,
//pour raccourcir le code, je crée le store ici.
store: new Ext.data.JsonStore({
model : 'Day',
// voir la définition de loadData plus bas
data: loadData()})
});

// Les configurations qui vont être utilisées pour les boutons.
// Les attributs qui sont pareils pour tous les boutons (xtype, height, width, listeners)
// vont être ajoutés par défaut par la fonction makeButtonPannel
var buttons1 = [{text: '1'},{text: '2'},{text: '3'},{text: '3s'},{text: '4'},{ text: '5'}];
var buttons2 = [{text: 'ce'},{text: 'f'},{text: 'r'},{text: 'v'},{text: 'fo'},
{
// Les listeners sont des fonctions qui sont appelées lorqu'un événement a lieu.
// Ici on a un listener qui réagit à l'événement 'tap', qui est envoyé
// quand on touche le bouton. Pour un exemple d'utilisation d'autres événements
// voir sencha-touch-1.1.0/examples/kitchensink/src/demos/touch.js
// Comme ce bouton a déjà un attribut listeners, il ne va pas recevoir
// les listeners par défaut donnés par makeButtonPanel
listeners: {
'tap': function () {selectPreviousNode(list);}
},
// Ce dernier bouton contient une icone à la place du texte.
// Ca ne fonctionne pas très bien avec l'agrandissement des boutons.
// Pour faire cela correctement, voir
// http://www.sencha.com/forum/showthread.php?150028-Scaling-button-icons
iconCls: 'arrow_up',
iconMask: true // necessary if the icon is encoded as base64
}];
var size = screen.width/Math.max(buttons1.length,buttons2.length);
var buttonPanel1 = makeButtonPannel(buttons1,size,list);
var buttonPanel2 = makeButtonPannel(buttons2,size,list);

var titleToolbar = new Ext.Toolbar({dock: 'top',title: 'horaires' });
var bottomToolbar = new Ext.Toolbar({
dock: 'bottom',
defaults: {iconMask: true},
layout: {pack: 'center'},
items: [{iconCls: 'delete',
text: 'reset',
listeners: {'tap': function () {resetData(list);}}
},
{iconCls: 'action',
text: 'save',
listeners: {'tap': function () {saveData(list);}}
},
{iconCls: 'compose',
text: 'post',
listeners: {'tap': function () {postData(list);}}
}]

});

new Ext.Panel({
fullscreen: true,
// Le layout 'fit' remplit tout avec le seul item qu'il contient
// Sans cette ligne la liste dépasserait sous les boutons
// voir la doc http://docs.sencha.com/touch/1-1/#!/api/Ext.layout.FitLayout
layout: 'fit',
items: [list],
dockedItems: [titleToolbar,bottomToolbar,buttonPanel2,buttonPanel1]
});

list.select(0);

}});

// Crée un panel de boutons à partir de:
// buttons: un array de configurations de boutons
// size: le coté d'un bouton (ils sont carrés)
// list: la liste sur laquelle agissent les boutons
function makeButtonPannel(buttons, size, list){
return new Ext.Panel({
// quand on utilise ce panel comme dockedItem d'un autre panel
// il apparait en bas
dock: 'bottom',
layout: {
// layout qui pose ses items côte à côte horizontalement
// voir http://docs.sencha.com/touch/1-1/#!/api/Ext.layout.HBoxLayout
type : 'hbox',
pack : 'center'
},
// hauteur du panel: size passé en argument de la fonction
height: size,
// attributs qui vont s'ajouter aux attributs des items.
defaults: {
// Les items auront le type Button
// pour la correspondance entre xtypes et classes
// voir http://docs.sencha.com/touch/1-1/#!/api/Ext.Component
xtype: 'button',
height: size,
width: size,
listeners: {
'tap': function(button, event){ setHoraire(button.text,list);}
}
},
// la liste de boutons passés en argument
items: buttons
});
}

// Positionne l'horaire à la date sélectionnée dans la liste
// et sélectionne l'élément suivant.
function setHoraire(horaire,list){
// Il doit y en avoir un unique élément sélectionné
var selectedRecord = list.getSelectedRecords()[0];
var index = list.indexOf(selectedRecord);

// C'est un modèle. Pour le modifier il faut utiliser la fonction set
// http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Model
selectedRecord.set('horaire',horaire);
// Il faut rafraichir le node pour que le changement soit visible
list.refreshNode(index);

// sélectionner la ligne suivante
if(index < list.getStore().getCount() - 1){
list.select(index + 1);
}
}

// Recule la sélection d'une position dans la list
function selectPreviousNode(list){
var selectedNode = list.getSelectedNodes()[0]; //il doit y en avoir un
var selectedIndex = list.indexOf(selectedNode);
var newIndex = selectedIndex === 0 ? 0 : selectedIndex - 1;
list.select(newIndex);
}

// Enregistre les horaires sous la forme d'un string,
// par exemple "3s|4|r|..."
function saveData(list){
// Array de tous les modèles Day
var records = list.getStore().data.getRange();
// string "3s|4|r|..."
var horaires = DAY.recordsToHoraires(records);
// localStorage est un objet fourni par javascript (html 5).
// Les données qu'on y met sont enregistrées dans le browser
// et sont disponibles à chaque fois qu'on va sur la page.
localStorage["horaires"] = horaires;
}

// Lit les données enregistrées et les retourne sous forme d'un array
// de configuraions du modèle Day
// par exemple [{date: "Thu 1.12.2011", horaire: "4"}, {...}, ... ]
function loadData(){
// Ce programme n'est pas encore capable de gérer plusieurs mois.
// On décide arbitrairement qu'on est en décembre 2011
var year = 2011;
// les mois sont numérotés de 0 à 11, 11 est décembre
var month = 11;

// les données enregistrées.
// localStorage est un objet fourni par javascript (html 5)
// Les données qu'on y met sont enregistrées dans le browser
// et sont disponibles à chaque fois qu'on va sur la page.
var horaires = localStorage["horaires"];
if(horaires){
return DAY.horairesToRecordConfigs(year,month,horaires)
}else{
return DAY.makeEmptyRecordConfigs(year,month);
}
}

// Remet tous les horaires de la liste à "-"
function resetData(list){
var records = list.getStore().data;
for(var i=0; i< records.length; i++){
// records est une MixedCollection, sur laquelle il faut appeler la méthode get.
// record est un modèle. Pour le modifier il faut utiliser la méthode set
// http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Model
records.get(i).set("horaire","-");
}
}

// Envoie les horaires sur un serveur.
function postData(list){
// Array de tous les modèles Day
var records = list.getStore().data.getRange();
// string "3s|4|r|..."
var horaires = DAY.recordsToHoraires(records);

// On envoie les données sur le serveur par ajax.
// On peut faire des requetes ajax directement en javascript
// mais c'est plus confortable de passer par une librairie.
// Ici nous utilisons celle qui est fournie par sencha.
Ext.Ajax.request({

// l'adresse du serveur
// J'y ai mis un programme php qui enregistre les données pour un nom.
url: "http://infolipo.net/cours/data/data.php",

// C'est gentil de remplacer "andreas" par votre nom pour ne pas écraser mes données.
// On peut voir ce qui est enregistré à la page
// http://infolipo.net/cours/data/data.php?name=andreas
params: {name:"andreas",
data:horaires},

// Cette fonction est appelée au retour de la requête, si tout a bien marché
success: function(response, opts) {
alert("Réponse du serveur: " + response.responseText);
},

// Cette fonction est appelée en cas d'échec.
failure: function(response, opts) {
alert('échec: ' + response.status);
}
});
}

// Les fonctions pour manipuler le modèle Day ont assez en commun
// pour que je les regroupe dans un même objet, je trouve.
// C'est une question de gout.
var DAY = {

// Crée les configuration de modèles pour un mois
// year: l'année
// month: le mois
// horaires: un string représentant les horaires "3s|4|r|..."
horairesToRecordConfigs: function(year, month, horaires){
// les horaires sont enregistrés sous la forme "3s|4|r|..."
// sépare les horaires pour avoir un array ["3s","4","r",...]
var horairesEnArray = horaires.split("|");
var day = 0;
return horairesEnArray.map(function(h){
var date = new Date(year,month,day);
var config = DAY.createRecordConfig(h,date);
day ++;
return config;
}
);
},

// Crée un string qui représente les horaires "3s|4|r|..."
// à partir d'un array de modèles Day
recordsToHoraires: function(records){
// On tire des records un array qui contient les horaires dans l'ordre
// par exemple ["3s","4","r",...]
var horairesEnArray = records.map(function(record){
// C'est un modèle. Il faut utiliser la méthode get
// http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Model
return record.get("horaire");
});
// retourner un string "3s|4|r|..."
return horairesEnArray.join("|");
},

// Retourne un array de configurations pour le modèle Day,
// toutes avec l'horaire "-",
// pour tous les jours du mois indiqué
makeEmptyRecordConfigs: function(year, month){
// prendre l'array de dates fourni par datesOfMonth()
// et le transformer en array de configurations pour le modèle Day.
var datesData = DAY.datesOfMonth(year,month).map(
function(d){ return DAY.createRecordConfig("-",d);}
);
return datesData;
},

// Crée la configuration pour un modèle Day
createRecordConfig: function(l_horaire, la_date){
// la méthode format est ajoutée à Date par sencha
// voir http://docs.sencha.com/touch/1-1/#!/api/Date
return {
date: la_date.format("D d.m.Y"),
horaire: l_horaire
};
},

// Retourne un array contenant les objets Date du mois indiqué
datesOfMonth: function(year, month){
var date = new Date(year, month, 1);
var month = date.getMonth()
var dates = [];
date.setDate(1);
while (month === date.getMonth()) {
dates.push(date);
// la méthode add est ajoutée par sencha
// à la classe Date fournie par javascript
date = date.add(Date.DAY, 1);
}
return dates;
}
}

</source>

Pour finir nous examinons une application dans un état plus avancé, mais qui est loin d'être finie. L'exercice constitue à décortiquer l'application, et à la compléter:
# Mettre tout en haut la barre des taches qui est tout en bas.
# Ajouter une rangée de boutons
# Désactiver la fonctionnalité de chaque bouton et la remplacer par un alert.
# Voir comment fonctionne l'enregistrement de données.
# Voir comment l'application envoie des données ailleurs par ajax.
# L'application ne fonctionne que pour un mois de l'année. Comment peut-on laisser l'utilisateur choisir le mois
## Choisir un composant graphique
## Ajouter un bouton qui appelle ce composant graphique
## Gérer l'affichage en fonction du mois
## Gérer la nouvelle donnée du mois pour l'enregistrement et l'envoi par ajax.
# L'application n'est pas très belle, comment pourrait on l'améliorer?
## Créer une meilleure template pour afficher les rangées.
## Peut-on remplacer les boutons par du css/html fait à la main? (Je n'en suis pas sur. J'aimerais bien avoir une espèce de bouton qui reste appuyé en fonction de la rangée sélectionnée.)

Introduction au développement pour smartphone

2011-12-02T10:15:20Z

Andreaskundig : /* Sencha touch */

2011-12-01T23:45:22Z

Andreaskundig : /* déboguer sur le téléphone */

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
<pre>
<!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>
</pre>

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)
<pre>
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]
});
}});
</pre>

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
<pre>
<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" />
</pre>
* Déployer l'application sur le serveur, y accéder par téléphone http://infolipo.net/cours/[votre nom]/servage.html

=== exercice ===
# changer la couleur de fond de l'application

=== déboguer sur le téléphone ===
# 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>
# copier index.html sur le serveur
# 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
# 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)
<pre>
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]
});
}});
</pre>
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:
<pre> itemTpl : 'Prénom: {firstName}, Nom: {lastName}',</pre>
:* On peut même ajouter des éléments html
<pre> itemTpl : 'Prénom: {firstName}, <b>Nom</b>: <span style="color:red">{lastName}</span>',</pre>
:* 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.
<pre> itemTpl : '{#}. {firstName} {lastName}',</pre>
:* On voit qu'on peut tester des conditions
<pre> itemTpl : '{#}. {firstName} {lastName} <tpl if="firstName[0]==\'T\'"> (commence par T)</tpl>',</pre>
(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
<pre> getGroupString : function(record) { return record.get('lastName')[0];},</pre>
Pour grouper les éléments par la deuxième lettre du prénom, on peut écrire
<pre> getGroupString : function(record) { return record.get('firstName')[1];},</pre>

=== 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
<pre>
public class SenchacontactsActivity extends DroidGap { //Activity {
super.loadUrl("file:///android_asset/www/index.html"); //setContentView(R.layout.main);
</pre>
* Source > Organize imports (ou ctrl-shift-o)
* click droit sur AndroidManifest.xml > open with > text editor
* insérer ceci après versionname
<pre>
<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" />
</pre>

* ajouter ''android:configChanges="orientation|keyboardHidden"'' dans
<pre>
<activity
android:label="@string/app_name"
android:name=".SenchacontactsActivity"
android:configChanges="orientation|keyboardHidden">
</pre>
* ajouter une deuxieme activité après la première
<pre>
<activity android:name="com.phonegap.DroidGap"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter> </intent-filter>
</activity>
</pre>

* 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
<pre>
<uses-sdk android:minSdkVersion="10" />
</pre>

* copier le répertoire assets du projet précédent (senchagui)
* inclure la librairie phonegap dans index.html
<pre>
<script type="text/javascript" src="lib/phonegap-1.2.0.js"></script>
</pre>
* 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'''.
<pre>
<script type="text/javascript">
document.addEventListener("deviceready", initializer.onPhonegapReady, false);
</script>
</pre>
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''':
<pre>
var initializer = {
onPhonegapReady: function(){ initializer.phonegapReady = true; },
onSenchaReady: function(){ initializer.senchaReady = true; }
};
</pre>

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)
<pre>
Ext.setup({ onReady: function() { initializer.onSenchaReady();}});
</pre>

On rajoute à l'initializer une méthode appelée quand phonegap et sencha sont prêts
<pre>
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);
}
};
</pre>

* Déployer et voir l'alerte

On peut maintenant rajouter dans '''onEverythingReady''' le code pour créer la liste.(application3.js):
<pre>
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]
});
};
</pre>

== 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:
<pre>
// 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!');
}
</pre>

Il s'agit d'appeler
<pre> navigator.contacts.find(fields, onSuccess, onError, options); </pre>

;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):
<pre>
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) }
);
</pre>

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.