• phpFlickr & Flex

    Billet écrit dans : Découverte PHP, Flex Flash Floush 30.01.2009

    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

    Billet écrit dans : Découverte PHP, Flex Flash Floush 30.01.2009

    Tags: , , ,

  • 4 Réactions !!

    WP_Modern_Notepad
    • Palleas dit:
      le 30 janvier 2009 à 13h02

      J’trouve ça honteux que tu construises ton XML à la main ! :D
      DataCharged, c’est rigolo (franglais, toussa).
      Pour le httpService, t’aurais pu le faire en MXML aussi, mais après c’est question de préférence !

      GG pour le reste sinon :)

    • Guillaume chave dit:
      le 30 janvier 2009 à 19h12

      palleas dit « J’trouve ça honteux que tu construises ton XML à la main ! :D »

      @palleas : Tu dis ça car je construis mon xml dans php à la main ? J’aurais pu passer par une classe php qui construit mon xml, j’aurais pu utiliser une interface puis une classe pour caracteriser mon objet « photo » dans Flex aussi … et puis quoi encore ?? l’idée c’est de faire simple ^^

      @palleas : Vive le franglais !!

    • Palleas dit:
      le 30 janvier 2009 à 19h52

      Et puis je continu de faire mon relou :

      « if($tab['photo'][$i]['id'] != «  ») »

      C’est honteux !

    • Guillaume chave dit:
      le 30 janvier 2009 à 19h56

      if(!empty($tab['photo'][$i]['id'])) c’est mieux je sais. Mais qu’es ce que tu crois, j’ai fais du copier coller :)

      Bon t’arrête de faire le relou sur le PHP maintenant ! ;)

    Réagissez a cet article ?!

    Attention: Les commentaires sont modérés et ne sont pas visibles automatiquement. Ce n'est pas la peine de re-soumettre votre commentaire.

CV Guillaume chave