Blog d'un développeur multi-support » Flex Flash Floush http://www.oni-ecchi.info/blog [DIM] pour les intimes :) Fri, 18 Jun 2010 06:27:38 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 SQlite & Air http://www.oni-ecchi.info/blog/decouverte-flex-flash/sqlite-air.html http://www.oni-ecchi.info/blog/decouverte-flex-flash/sqlite-air.html#comments Mon, 02 Feb 2009 07:00:52 +0000 Guillaume chave http://www.oni-ecchi.info/blog/?p=215 Un peu d’SQL ça fait pas de mal non ?

Je fais que peu de back admin en ce moment … j’écrit quasi pas de requêtes .. vive les ORM (object-relational mapping) .. et j’occupe mon temps libre à Flex/Flash et mon application de suivi de stats sportives.

Je suis en train d’écrire une nouvelle version de mon application, avec un code plus propre, et surtout multi utilisateur afin que chacun inscrive ses statistiques sportives dans la même application. Je pourrais m’en sortir en utilisant à mort les HTTPService, faire un webservice et site dédié à la cause.. mais bon je n’ai pas vocation (pour l’instant) de créer un site pour se montrer le nombril … et imaginer le nombre de requêtes à traiter …

En sachant que Air embarque nativement un moteur SQLite, pourquoi ne pas garder sur le poste du client toutes ses stats ? Quitte à faire par la suite un bouton « synchroniser sur le web » :) Ca peut le faire non ?

I ) Easy mode

Voyons voir, tapons « air sqlite » dans google et regardons un peu l’existant

On se rend compte que le principe est assez simple au final :

  1. Je crée un fichier from scratch via la classe File
  2. Je l’ouvre à travers une SQLConnection
  3. Je crée un SQLStatement à partir de mon objet SQLConnection
  4. J’exécute ma requête pour obtenir un SQLResult et j’en extrait les données sous forme de tableau
  5. Simple non ?

Mais bon, même si c’est l’affaire d’une quinzaine de ligne, c’est quand même un peu relou de tout faut tout se retapper à chaque requete .. autant avoir une classe bien sympa qui gère la BDD dans son coin non ?

II ) Moi, j’ai la classe

J’aime découper mes applications en MVC quand je le peux. Une classe qui gère ma BDD et qui centralise les appels, c’est cool. On appelle ça le « Model » :) Voici, sans prétention, ma chtite classe qui va bien :

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

package bdd
{
	import flash.data.SQLConnection;
	import flash.data.SQLResult;
	import flash.data.SQLStatement;
	import flash.filesystem.File;
 
	public class MySqlLite extends SQLConnection
	{
		protected var fichier:File;
 
		// Pattern Singleton c'est mieux.
		private static var instance:MySqlLite
 
		public function MySqlLite(access:Singleton)
		{
			super();
 
			// Initilisation de la base. Création des tables si besoin est.
			init();
		}
 
		// Implémentation du singleton.
		public static function getInstance():MySqlLite{
			if(instance == null){
				instance = new MySqlLite(new Singleton());
			}
			return instance;
		}		
 
		public function init():void
		{
			// Autant se créer notre fichier BDD dans le répertoire d'installation de notre Application non ?
			fichier = new File(File.applicationDirectory.nativePath + "/Sports2009-bdd.bd")
 
			// Si le fichier n'existe pas déjà, on crée nos tables !
			if(!fichier.exists)
			{
				this.open(fichier);
				var stmt:SQLStatement = new SQLStatement();
				stmt.sqlConnection = this;
				stmt.text = "CREATE TABLE performances (id INTEGER PRIMARY KEY AUTOINCREMENT, creation_date DateTime, calorie decimal, kilometre decimal, temps decimal)";
				// Hop insertion de notre 1er table
				stmt.execute();	
 
				// Notre Statement est chaud bouillant pour créer une deuxième table, soyons fou.
				stmt.text = "CREATE TABLE utilisateur (id INTEGER PRIMARY KEY AUTOINCREMENT, nom longvarchar, password longvarchar)";
				stmt.execute();
			}
			else
			{
				// Le fichier existe, on ouvre notre bdd :)
				this.open(fichier);
			}
		}
 
		// On peut explicitement fermer la bdd ..
		public function fermer():void
		{
			this.close();
		}
 
		// Exécutons notre requete SQL et retournons le résultat :)
		public function requete(maRequeteSql:String):SQLResult
		{
			var requete:SQLStatement = new SQLStatement();
			requete.sqlConnection =this;
			requete.text = maRequeteSql
			requete.execute();
 
			// On récupère le résultat de l'execution
			var r:SQLResult = new SQLResult()		
 
			// ATTENTION on ne peut faire qu'un seul getResult()
			// Pourquoi ? car c'est à usage unique
			// une fois que l'on a demandé des infos "pssshhtt ça disparait !"
			r =  requete.getResult();
			return r;
		}
 
	}
}
 
class Singleton{
	public function Singleton()
	{
 
	}
}

Utilisation

Pour la gestion de mes utilisateurs par exemple, voici ma classe « Utilisateur » (Waahou je suis original) qui me sert à l’insertion et la connexion, etc d’un de mes gugus. Elle est vraiment basique, mais ça marche ;)

On reste encore dans le « Model » :)

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

package users
{
	import bdd.MySqlLite;
	import flash.data.SQLResult;
	import flash.data.SQLStatement;
 
	public class Utilisateur extends Object
	{
 
		private var name:String;
		private var password:String;
 
		public function Utilisateur(nom:String,pass:String)
		{
			super();
			this.setName(nom);
			this.setPassword(pass);
		}
 
		public function getName():String
		{
			return this.name;
		}
 
		public function getPassword():String
		{
			return this.password;
		}
 
		public function setName(nom:String):void
		{
			this.name= nom;
		}
 
		public function setPassword(pass:String):void
		{
			this.password = pass;
		}
 
		// Test voir si le gugus existe
		public function existe():Boolean
		{
			var test:SQLResult = new SQLResult();
			test = MySqlLite.getInstance().requete("SELECT * from utilisateur WHERE nom='" + this.name +"' and password='" + this.password +"' ");
			return test.data != null
		}
 
		// Inscription du gugus
		public function inscription():Boolean
		{
			if(!existe())
			{
				var test:SQLResult = new SQLResult();
				test = MySqlLite.getInstance().requete("INSERT INTO utilisateur (nom,password) VALUES ('" + this.name +"','" + this.password +"') ");
				return true;
			}
			else
			{
				return false;
			}
		}
 
	}
}

Et le petit contrôleur qui va bien, extrait de mon code :

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

public function TestConnexion(e:ConnexionEvent):void
{
	var user:Utilisateur = new Utilisateur(e.sLogin,e.sPassword)
	if(user.existe())
	{
		pannelConnexion.currentState = "OK"
		this.currentState = "Dashboard";
	}
	else
	{
		pannelConnexion.currentState = "Erreur"
	}
}
 
public function Inscription(e:ConnexionEvent):void
{
	var user:Utilisateur = new Utilisateur(e.sLogin,e.sPassword)
	if(user.inscription())
	{
		trace("je me suis bien inscrit");
	}
	else
	{
		trace("j'existe déjà ...");
	}
}

Vous notez que j’ai un évènement personnalisé qui contient le login & le password à tester. Voici son code pour ceux que ça intéresse, y a rien de spécial, c’est tout basique :

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package Event
{
	import flash.events.Event;
 
	public class ConnexionEvent extends Event
	{
		public var sLogin:String;
		public var sPassword:String;
 
		public function ConnexionEvent(type:String,login:String,password:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
			sLogin = login;
			sPassword = password;
		}
 
	}
}

Voilà, vous avez là un exemple très simpliste d’utilisation de SQLite dans Air. Pour tout dire, je ne suis pas encore aller très loin avec :)

A vous de jouer !

]]> http://www.oni-ecchi.info/blog/decouverte-flex-flash/sqlite-air.html/feed 6 phpFlickr & Flex http://www.oni-ecchi.info/blog/decouverte-flex-flash/phpflickr-flex.html http://www.oni-ecchi.info/blog/decouverte-flex-flash/phpflickr-flex.html#comments Fri, 30 Jan 2009 06:00:35 +0000 Guillaume chave http://www.oni-ecchi.info/blog/?p=200 Pour un cours de Flex, il nous avait été demandé de créer une application très simple constitué de deux écrans pour nous apprendre à manipuler les « states », les composants personnalisés, le « data binding » etc.

Le sujet de l’application était d’afficher des images en fonction d’une ville – en vue de faire du data binding sur un XML « statique » de villes – et de récupérer des images issues d’un XML dynamique via l’objet HTTPService.

Alors quitte à faire du dynamique, autant interroger directement un web service existant en vue de récupérer pleins d’images sans se prendre la tête. Et là j’ai pensé à FlickR et sa monstrueuse API. Après 5mn montre en main j’ai eu ma clé pour accèder à l’API et 4mn après je découvrait phpFlickR.

Upload de la librairie et voici mon bout de script qui me renvoit suivant deux paramètres en $_GET un joli XML près à être utilisé en Flex.

  • $_GET['town'] est le terme rechercher dans l’api FlickR sur les tags et le text qui commente une photo.
  • $_GET['max'] est le nombre de photos qu’il faudra retourner.
?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

require_once("phpFlickr.php");
$flickR = new phpFlickr("ta_cle_de_connection_flickR");
 
// 10 résultat par défaut ..
if(isset($_GET['max']))
$max = $_GET['max'];
else $max=10;
 
$search = array("tags"=>$_GET['town'],'per_page'=>$max, "tag_mode"=>"any",'text' => $_GET['town']);
$tab = $flickR->photos_search($search);
 
// On renvoit un XML à Flex
header("content-type: application/xml");
 
// La balise qui va bien
echo "<?xml version="1.0" encoding="utf-8" ?>";
 
for ($i = 0; $i != $max; $i++)
{
        // on s'assure d'avoir des photos valides
	if($tab['photo'][$i]['id'] != "")
	{
	// Simple de créer des urls FlickR non ?
	$url = $flickR->buildPhotoURL($tab['photo'][$i],"thumbnail");
	$link = $flickR->buildPhotoURL($tab['photo'][$i],"medium");
 
	echo "<image><url>".$url."</url><urlLarge>".$link."</urlLarge></image>";
	}
}

La partie Flex est tout aussi simple, voici la partie essentielle qui nous intéresse :

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="searchPhoto('france',20)">
 
<mx:Script>
<![CDATA[
import mx.rpc.http.HTTPService;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
 
[Bindable]
private var servicePhoto:ArrayCollection = new ArrayCollection(); 
 
 
private function searchPhoto(search:String,max:int):void
{
	var modService:HTTPService = new HTTPService();
	modService.method = "get";
	modService.url = "http://oni-ecchi.info/labo/FlexPhotos/service.php";
 
	var parameters:Object = new Object();
	parameters.town = search;
	parameters.max = max;
	modService.request = parameters;                
	modService.send();
	modService.addEventListener(ResultEvent.RESULT,onDataCharged);                
}
 
private function onDataCharged(e:ResultEvent):void
{
	servicePhoto = new ArrayCollection();
	servicePhoto = e.result.root.image as ArrayCollection;		
	vignettes.dataProvider = e.result.root.image as ArrayCollection;
}
 
]]>
</mx:Script>
<mx:TileList id="vignettes" dataProvider="{servicePhoto}" width="481" height="279" columnWidth="110" rowHeight="110" columnCount="4" horizontalCenter="0" paddingRight="5" verticalCenter="0">
    <mx:itemRenderer>
   		<mx:Component>
   			<mx:Image  source="{data.url}" verticalAlign="middle" horizontalAlign="center" />
   		</mx:Component>
    </mx:itemRenderer>       
</mx:TileList>
 
 
</mx:Application>

Ce n’est qu’un exemple très simple. Dans le fichier source qui va suivre, j’ai un peu plus travaillé la chose en utilisant un composant de chargement d’image sympathique, un spinner de chargement 2.0 et enfin la gestion des states (très simple).

Voilà, c’est tout pour aujourd’hui

]]> http://www.oni-ecchi.info/blog/decouverte-flex-flash/phpflickr-flex.html/feed 4 Découverte Flex : new NumberFormatter(); http://www.oni-ecchi.info/blog/decouverte-flex-flash/flex-et-numberformatter.html http://www.oni-ecchi.info/blog/decouverte-flex-flash/flex-et-numberformatter.html#comments Sat, 10 Jan 2009 17:57:44 +0000 Guillaume chave http://www.oni-ecchi.info/blog/?p=127 Pour mon application AIR (cf le post juste en dessous) j’ai eu besoin d’arrondir mes statistiques à l’entier supérieur/inférieur et les mettre en forme pour ne garder que deux décimal après la virgule. N’étant pas du tout expert en Flash/Flex, j’ai commencé à faire un code de bourrin comme splitter mon float selon la virgule, slicer ensuite pour ne garder que deux décimal etc … Bref, un truc vraiment crade pour me dépanner vite fait.

Je suis revenu quelque jours après sur ce bout de code pour le cleaner un peu et pour trouver une solution vraiment propre et voici ma « découverte » : NumberFormatter ! D’après une recherche google de 45s, il apparait que cette classe n’est disponible que pour Flex ..

Voici comment l’utiliser en AS3 seulement. Je n’ai pas pris le temps de l’essayer en MXML.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// L'objet magique
var oFormat:NumberFormatter = new NumberFormatter();
 
// Arrondis à l'entier le plus proche
oFormat.rounding = NumberBaseRoundType.NEAREST;
 
// Et on l'utilise
trace(oFormat.format(1.51)); // Affiche 2
trace(oFormat.format(1.49)); // Affiche 1
 
// Précision à 2 décimal
// D'abord on n'arrondis plus
oFormat.rounding = NumberBaseRoundType.NONE;
// On définit le nb max de décimal
oFormat.precision = "2";
 
// Et on l'utilise
trace(oFormat.format(1.544541511)); // Affiche 1.54
trace(oFormat.format(1.1)); // Affiche1.10 - note : rajout du 0 !

Et bien sur, rien ne vaut un coup d’oeil sur la documentation Adobe !
Et voilà, c’est tout pour aujourd’hui.

]]> http://www.oni-ecchi.info/blog/decouverte-flex-flash/flex-et-numberformatter.html/feed 0 Flex c’est cool http://www.oni-ecchi.info/blog/decouverte-flex-flash/flex-cest-cool.html http://www.oni-ecchi.info/blog/decouverte-flex-flash/flex-cest-cool.html#comments Tue, 06 Jan 2009 10:17:57 +0000 Guillaume chave http://www.oni-ecchi.info/blog/?p=122 Ouaip avec le rameur que j’ai eu ce noel, j’en fais des flex… Bon passons ce jeux de mot pourri. En fait je me suis remis à Flex et plus particulierement à air ce week end en vue de prendre un peu d’avance sur le cours gobelins que j’allais avoir.

L’idée était de créer une application toute simple qui me permette de suivre l’évolution de mon entrainement au rameur. Donc en gros, affichage de graphique, modification d’un XML via datagrid puis passage à PHP pour la manipulation de l’XML..

Vous pouvez la tester via http://oni-ecchi.info/labo/TrainingFlex/ et c’est app2.air qu’il vous faudra installer.

Au final, j’ai utilisé ces adresses internet http://delicious.com/onishinji/flex et le dvd de video2brain de Flex par Herve Girolet (mon ancien prof de Flash à l’IUT).

Je reviendrais peut etre plus en détail sur cette réalisation vu qu’actuellement le code source est moche :)

]]> http://www.oni-ecchi.info/blog/decouverte-flex-flash/flex-cest-cool.html/feed 0