Blog d’un développeur multi-support

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.

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 :

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).

• Mon Projet Flex (zip)
  
• Le site d’exemple

Voilà, c’est tout pour aujourd’hui

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 tutoriel 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’iphone. 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 vidéo 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

Bonjour,

Cette semaine j’ai du rendre pour l’école des gobelins le jeux 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 slick dans un projet eclipse est assez déroutante pour un newbie JAVA (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 framework 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 code !

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 > 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 ?

Ce billet commence à être long .. la suite continue ici !