Sencha touch contacts - Historique des versions

Andreaskundig : /* ossature du projet */

2011-12-02T11:36:58Z

ossature du projet

← Version précédente		Version du 2 décembre 2011 à 11:36
Ligne 28 :		Ligne 28 :
	créer assets/www/index.html		créer assets/www/index.html
	<source lang="html5">		<source lang="html5">
			<!DOCTYPE html>
	<!DOCTYPE html>		<html>
	<html>		<head>
	<head>
	<title>Learning sencha</title>		<title>Learning sencha</title>
	<script type="text/javascript" src="lib/touch/sencha-touch-debug-w-comments.js"></script>		<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" />		<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/application.js"></script>		<script type="text/javascript" src="js/application.js"></script>
	</head><body></body>		</head><body></body>
	</html>		</html>

	</source>		</source>

Andreaskundig : /* ossature du projet */

2011-12-02T11:36:22Z

ossature du projet

← Version précédente		Version du 2 décembre 2011 à 11:36
Ligne 28 :		Ligne 28 :
	créer assets/www/index.html		créer assets/www/index.html
	<source lang="html5">		<source lang="html5">
	<!DOCTYPE html>
			<!DOCTYPE html>
	<html>		<html>
	<head>		<head>
Ligne 35 :		Ligne 36 :
	<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />		<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/application.js"></script>		<script type="text/javascript" src="js/application.js"></script>
	</head><body></body>		</head><body></body>
	</html>		</html>

	</source>		</source>

Andreaskundig le 2 décembre 2011 à 10:09

2011-12-02T10:09:03Z

← Version précédente		Version du 2 décembre 2011 à 10:09
Ligne 281 :		Ligne 281 :
	</source>		</source>

	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.(application.js version 2)		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. Déployer ce code pour voir l'alerte.(application.js version 2)
	<source lang="javascript">		<source lang="javascript">
	Ext.setup({ onReady: function() { initializer.onSenchaReady();}});		Ext.setup({ onReady: function() { initializer.onSenchaReady();}});
Ligne 300 :		Ligne 300 :
	};		};
	</source>		</source>

	* Déployer et voir l'alerte

	On peut maintenant rajouter dans '''onEverythingReady''' le code pour créer la liste.(application.js version 3):		On peut maintenant rajouter dans '''onEverythingReady''' le code pour créer la liste.(application.js version 3):

Andreaskundig le 2 décembre 2011 à 10:07

2011-12-02T10:07:35Z

← Version précédente		Version du 2 décembre 2011 à 10:07
Ligne 42 :		Ligne 42 :

	créer assets/www/js/application.js		créer assets/www/js/application.js
	(~~application0.js~~)		(version 0)
	<source lang="javascript">		<source lang="javascript">
	Ext.setup({		Ext.setup({
Ligne 100 :		Ligne 100 :
	Le code de la demo kitchensink est un peu compliqué,		Le code de la demo kitchensink est un peu compliqué,
	mais on peut chercher List dans la doc.		mais on peut chercher List dans la doc.
	On peut carrément copier l'exemple donné dans application.js,		On peut carrément copier l'exemple donné dans application.js (version 1),
	et ajouter la liste dans les items du panel:		et ajouter la liste dans les items du panel:
	~~(application1.js)~~
	<source lang="javascript">		<source lang="javascript">
	Ext.setup({		Ext.setup({
Ligne 282 :		Ligne 281 :
	</source>		</source>

	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)		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.(application.js version 2)
	<source lang="javascript">		<source lang="javascript">
	Ext.setup({ onReady: function() { initializer.onSenchaReady();}});		Ext.setup({ onReady: function() { initializer.onSenchaReady();}});
	~~</source>~~

	On rajoute à l'initializer une méthode appelée quand phonegap et sencha sont prêts		//On rajoute à l'initializer une méthode appelée quand phonegap et sencha sont prêts
	~~<source lang="javascript">~~
	var initializer = {		var initializer = {
	onPhonegapReady: function(){		onPhonegapReady: function(){
Ligne 306 :		Ligne 303 :
	* Déployer et voir l'alerte		* Déployer et voir l'alerte

	On peut maintenant rajouter dans '''onEverythingReady''' le code pour créer la liste.(~~application3~~.js):		On peut maintenant rajouter dans '''onEverythingReady''' le code pour créer la liste.(application.js version 3):
	<source lang="javascript">		<source lang="javascript">
	Ext.setup({ onReady: function() { initializer.onSenchaReady();}});		Ext.setup({ onReady: function() { initializer.onSenchaReady();}});

Andreaskundig le 2 décembre 2011 à 09:57

2011-12-02T09:57:49Z

← Version précédente		Version du 2 décembre 2011 à 09:57
Ligne 257 :		Ligne 257 :
	<source lang="xml">		<source lang="xml">
	<uses-sdk android:minSdkVersion="10" />		<uses-sdk android:minSdkVersion="10" />
	</~~slurce~~>		</source>

	* copier le répertoire assets du projet précédent (senchagui)		* copier le répertoire assets du projet précédent (senchagui)
	* inclure la librairie phonegap dans index.html		* inclure la librairie phonegap dans index.html
	<source lang="~~hmtl5~~">		<source lang="html5">
	<script type="text/javascript" src="lib/phonegap-1.2.0.js"></script>		<script type="text/javascript" src="lib/phonegap-1.2.0.js"></script>
	</source>		</source>
Ligne 269 :		Ligne 269 :

	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'''.		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~~>		<source lang="html5">
	<script type="text/javascript">		<script type="text/javascript">
	document.addEventListener("deviceready", initializer.onPhonegapReady, false);		document.addEventListener("deviceready", initializer.onPhonegapReady, false);
	</script>		</script>
	</~~pre~~>		</source>
	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''':		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~~>		<source lang="javascript">
	var initializer = {		var initializer = {
	onPhonegapReady: function(){ initializer.phonegapReady = true; },		onPhonegapReady: function(){ initializer.phonegapReady = true; },
	onSenchaReady: function(){ initializer.senchaReady = true; }		onSenchaReady: function(){ initializer.senchaReady = true; }
	};		};
	</~~pre~~>		</source>

	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)		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~~>		<source lang="javascript">
	Ext.setup({ onReady: function() { initializer.onSenchaReady();}});		Ext.setup({ onReady: function() { initializer.onSenchaReady();}});
	</~~pre~~>		</source>

	On rajoute à l'initializer une méthode appelée quand phonegap et sencha sont prêts		On rajoute à l'initializer une méthode appelée quand phonegap et sencha sont prêts
	<~~pre~~>		<source lang="javascript">
	var initializer = {		var initializer = {
	onPhonegapReady: function(){		onPhonegapReady: function(){
Ligne 302 :		Ligne 302 :
	}		}
	};		};
	</~~pre~~>		</source>

	* Déployer et voir l'alerte		* Déployer et voir l'alerte

	On peut maintenant rajouter dans '''onEverythingReady''' le code pour créer la liste.(application3.js):		On peut maintenant rajouter dans '''onEverythingReady''' le code pour créer la liste.(application3.js):
	<~~pre~~>		<source lang="javascript">
	Ext.setup({ onReady: function() { initializer.onSenchaReady();}});		Ext.setup({ onReady: function() { initializer.onSenchaReady();}});

Ligne 352 :		Ligne 352 :
	});		});
	};		};
	</~~pre~~>		</source>

	== lire les contacts du téléphone ==		== 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:		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~~>		<source lang="javascript">
	// PhoneGap is ready		// PhoneGap is ready
	//		//
Ligne 381 :		Ligne 381 :
	alert('onError!');		alert('onError!');
	}		}
	</~~pre~~>		</source>

	Il s'agit d'appeler		Il s'agit d'appeler
	<~~pre~~> navigator.contacts.find(fields, onSuccess, onError, options); </~~pre~~>		<source lang="javascript"> navigator.contacts.find(fields, onSuccess, onError, options); </source>

	;fields : contient les noms des champs de Contact à retourner. La doc de Contact nous donne le nom des champs disponibles.		;fields : contient les noms des champs de Contact à retourner. La doc de Contact nous donne le nom des champs disponibles.
Ligne 391 :		Ligne 391 :

	Pour commencer simplement, nous allons juste afficher tous les noms sur la console. Ajouter ceci à la fin de onEverythingReady (application4.js):		Pour commencer simplement, nous allons juste afficher tous les noms sur la console. Ajouter ceci à la fin de onEverythingReady (application4.js):
	<~~pre~~>		<source lang="javascript">
	function findSuccess(contacts){		function findSuccess(contacts){
	for (var i=0; i<contacts.length; i++) {		for (var i=0; i<contacts.length; i++) {
Ligne 403 :		Ligne 403 :
	function(error){ console.log("error: " + error) }		function(error){ console.log("error: " + error) }
	);		);
	</~~pre~~>		</source>

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

Andreaskundig le 2 décembre 2011 à 09:54

2011-12-02T09:54:57Z

Voir les modifications

Andreaskundig : /* exercice */

2011-12-01T23:48:27Z

exercice

← Version précédente		Version du 1 décembre 2011 à 23:48
Ligne 410 :		Ligne 410 :
	et en mettant "Web Console" dans le champ "by Log Tag".		et en mettant "Web Console" dans le champ "by Log Tag".

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

Andreaskundig : /* exercices */

2011-12-01T23:47:54Z

exercices

← Version précédente		Version du 1 décembre 2011 à 23:47
Ligne 182 :		Ligne 182 :
	=== 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)		# 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
	~~# 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 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é.
	# ~~trouver~~ comment executer du code quand le bouton est appuyé.
	pistes: regarder la doc sencha, le code des exemples livrés avec sencha		pistes: regarder la doc sencha, le code des exemples livrés avec sencha

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

2011-12-01T23:46:20Z

déboguer sur le téléphone

← Version précédente		Version du 1 décembre 2011 à 23:46
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

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

2011-12-01T23:45:22Z

déboguer sur le téléphone

← Version précédente		Version du 1 décembre 2011 à 23:45
Ligne 88 :		Ligne 88 :
	=== déboguer sur le téléphone ===		=== déboguer sur le téléphone ===
	# 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:		# ajouter ceci dans servage.html: <script src="http://[adresse ip]:8081/target/target-script-min.js"></script>
	~~<pre>~~ <script src="http://[adresse ip]:8081/target/target-script-min.js"></script~~></pre~~>		# copier index.html sur le serveur
	:# copier index.html sur le serveur
	# cd h:/weinre-jar		# cd h:/weinre-jar
	# java -jar weinre.jar --boundHost [adresse ip] --httpPort 8081		# java -jar weinre.jar --boundHost [adresse ip] --httpPort 8081

Sencha touch contacts - Historique des versions

Andreaskundig : /* ossature du projet */

Andreaskundig : /* ossature du projet */

Andreaskundig le 2 décembre 2011 à 10:09

Andreaskundig le 2 décembre 2011 à 10:07

Andreaskundig le 2 décembre 2011 à 09:57

Andreaskundig le 2 décembre 2011 à 09:54

Andreaskundig : /* exercice */

Andreaskundig : /* exercices */

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

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

Andreaskundig : /* ossature du projet */

Andreaskundig : /* ossature du projet */

Andreaskundig : /* exercice */

Andreaskundig : /* exercices */

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

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