Blog d'un développeur multi-support

[DIM] pour les intimes :)

phpFlickr & Flex

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 .

  • $_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.
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

Tags : , , ,

Tutoriel Iphone

Bonjour,

Connaissez vous Weecast.fr ? Mais si voyons, le tout nouveau  service d’earling d’emob !

Je parcourais un peu le site pour voir si il y avait des tutoriaux vidéos pour programmeur, et hormis les vidéos de video2brain sur Flex qui sont intéressante il y a peu de choses qui m’interpellait. Et c’est là que je voix « Xcode » dans leurs menu avec trois tutoriaux d’objective-c dont un parlais directement de l’iphone.

Il est disponible à cette adresse et vous apprendrez autant que sur le sur developpez.com à savoir :

  • Cliquer sur un bouton pour déclencher une méthode classe

A la différence d’un énième hello world pour l’. Il y a cependant un petit truc d’interessant c’est la gestion du clavier virtuel. Au final on passe 15 mn pour apprendre à gérer correctement le clavier, c’est bon à prendre.

Je regrette simplement que sur la le commentateur ne commente pas les choses vraiment utile. On s’en fou qu’il faut mettre un point virgule ou qu’il est en train d’ouvrir une accolade non ?

Je pense qu’il aurait mieux fait de dire, par exemple, pourquoi il doit écrire du @property (retain, nonatomic) UILabel *monChamp dans l’entete de la classe (fichier .h) et @synthesize monChamp; dans l’implémentation effective de la classe (fichier .m). Enfin bon rien ne remplace de la bonne documentation pour ce genre de question. Et pendant que j’y suis il aurait pu dire deux mots sur les delagate qu’il utilise pour le clavier. Là on dirait que tout sort d’un chapeau de magicien.

Donc oui les tutoriaux vidéos c’est cool, c’est mode, et ca fait gagné du temps mais quitte à en faire un soyez le plus explicites possibles !

En tout ca, merci apple pour la documentation textuels dg vidéos de qualité.

ps : Si vous voulez suivre mes « découvertes » iphone,  mon flux delicious est constamment mis à jour ! http://delicious.com/onishinji/iphone

Tags : , , ,

Slick en détail

Bonjour,

Cette semaine j’ai du rendre pour l’école des gobelins le que j’ai fait avec un framework java. Comme ce projet est fini, et que je ne pense pas que je vais en faire grand chose de mon coté, je vais vous en expliquer le fonctionnement. Peut être que ça vous sera utile.

I) Installation

L’installation de dans un projet eclipse est assez déroutante pour un newbie (j’y ai passé une demi journée de cours ^^) même avec un très bon (l’unique ?) tutoriel d’installation. Faites bien attention au dernier point, c’est important.

En fait Slick est basé sur un autre nommée lwgl, il y a donc deux librairies pour le prix d’une. Vive la réutilisation ! Slick étant un framework dédié aux un jeux 2D, il fait le ménage dans lwgl des choses non indispensables et rajoute tout ce qui va bien pour la 2D.

Passons au !

II) Premier Exemple

Je pars du principe que votre installation est fonctionnelle. Voici le code de mon premier test slick. Il s’agissait d’afficher une image, un test, et grâce au clavier de faire pivoter cette image. Le principe de base est le même pour le jeux final.

J’ai commenter tout le code pour vous expliquer pas à pas ce qu’il se passe.

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
import org.newdawn.slick.BasicGame;
import org.newdawn.slick.GameContainer;
import org.newdawn.slick.Graphics;
import org.newdawn.slick.Image;
import org.newdawn.slick.Input;
import org.newdawn.slick.SlickException;
import org.newdawn.slick.AppGameContainer;
import org.newdawn.slick.util.Log;
 
//Il faut étendre la classe BasicGame
public class SimpleTest extends BasicGame {
 
	// L'image tourne, il faut un petit angle non ?
	// En fait il en faut un pour se souvenir d'un FPS à l'autre de combien il
	// faut tourner l'image.
	public Integer angle_image = 0;
	public Image imgToTurn;
 
	// Il faut un constructeur de base.
	// Vous noterez que toutes les erreurs seront catchés au moment de
	// l'exécution. (c'est à dire, dans le main)
	public SimpleTest() throws SlickException {
		// Initialise le nom de la fenetre ..
		super("SimpleTest");
		// Très pratique pour débuger l'application. Remplace le
		// System.out.println .. et plus si affinié
		Log.info("je viens d'être initialisé");
	}
 
	// Initialise mes objets. Exécuté au lancement du jeux.
	@Override
	public void init(GameContainer container) throws SlickException {
 
		// J'ai besoin d'une image.
		imgToTurn = new Image("ressources/images/woman.jpg");
 
	}
 
	// Méthode appelé en boucle. C'est ici que l'on fait vivre nos objets
	// "non graphique" comme la gestion des touches, de nos propriétés (comme
	// angle) etc
	@Override
	public void update(GameContainer container, int delta)
			throws SlickException {
 
		// Si on appuie sur la fleche Haut
		if (container.getInput().isKeyDown((Input.KEY_UP))) {
			angle_image++;
		}
		// Si on appuie sur la fleche Bas
		if (container.getInput().isKeyDown(Input.KEY_DOWN)) {
			angle_image--;
		}
 
		// On fait en sorte que notre angle "tourne en rond" ^^
		if (angle_image &amp;gt; 360)
			angle_image = 0;
	}
 
	// Méthode appelé en boucle. C'est ici qu'on gére l'affichage.
	@Override
	public void render(GameContainer container, Graphics g)
			throws SlickException {
 
		// Affiche un hello world en x:0 et y:100
		g.drawString("Hello, Slick world!", 0, 100);
		g.drawString("coucou", 0, 150);
 
		// Je fais tourner l'image
		imgToTurn.setRotation(angle_image);
 
		// Et je la rajoute à ma fenetre
		g.drawImage(imgToTurn, 200, 0);
 
	}
 
	public static void main(String[] args) {
		try {
			// Démarre un jeux à partir de ma classe
			AppGameContainer app = new AppGameContainer(new SimpleTest());
			app.setTargetFrameRate(500);
			app.start();
 
		} catch (SlickException e) {
			// Et c'est ici que je catch les erreurs de toutes mes méthodes.
			e.printStackTrace();
		}
	}
}

Wahou non ? on a fait un jeux à partir de 5 fonctions, dans l’ordre :

  1. constructeur() – Spécifie la fenetre de jeux (icone, intitulé de fenetre ..)
  2. init()  – Initialise tout nos objets
  3. update() – Gestion du clavier et mis à jours d’objet non graphique
  4. render() – Gestion de l’affichage, c’est là qu’on affiche ou non des éléments graphiques (image, texte, animation, etc)
  5. main() – Il faut bien un point d’entré non ? On peut aussi s’en servir comme point de récupération des erreurs.

Bon ca casse pas trois pattes à un canard, mais en moins de 100 lignes de codes avec les commentaires on s’en sort plutôt pas mal non ?

SimpleTest SimpleTest-2

Lire la Suite

Tags : , , , ,

Découverte Flex : new NumberFormatter();

Pour mon application (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/, j’ai commencé à faire un 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.

Tags : , , , ,

Flex c’est cool

Ouaip avec le rameur que j’ai eu ce noel, j’en fais des … Bon passons ce de mot pourri. En fait je me suis remis à et plus particulierement à 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 à 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 source est moche :)

Tags : , , ,