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).
Voilà, c’est tout pour aujourd’hui
