galerie photo debutant en flex [Résolu]

[G4uthier]

Bonjour,

J'ai un fichier php qui me permet d'afficher des photos. Le nom de ces photos est stocké dans une base de donnée. Je voudrais savoir si il est possible avec flex de lire la base de donnée pour afficher les photo concernée et si c'est possible comment me connecter a ma base de donnée? comment intégré ca à ma page php?
est il possible que j'integre du flex a mon php?
je suis debutant je connais pas trop flex j'ai lu quelque tuto mais rien relatant de ca .

[greatalain]

soit tu as ton interface en HTML créée à partir de php et je vois pas l'intérêt de flex soit tu fait une interface flex et tu intègre par le biai de remoteObject ou de httpServices ton script flex pour récupérer et afficher tes images.
En fonction du cas je te dirai la marche à suivre

[G4uthier]

J'ai deja ma page en HTML et je voudrais que je puisse faire une application avec flex qui me permettrait d'avoir un rendu telle que ceci:
http://www.flex-tutorial.fr/2008/02/...c-exemple-as3/
en fonction du nombre d'image que contient ma table , j'affiche les photos de cette façon.
Dis moi ce que tu en pense. C'est possible à faire pour un débutant ?

Merci de ta réponse

[greatalain]

afficher tes images avec flex c'est très facile il y a pas mal de tuto sur le sujet (faut utiliser les tileList) par contre si tu veux intègrer tes photos dans des panels comme sur le lien que tu à noté, faut que tu crées tes panels dynamiquement et calculer en fonction du nombre d'image la taille de ces derniers
Ce n'est pas vraiment compliqué en soi mais si tes débutant tu t'attaque peut être à un gros morceaux maintenant si tu n'es pas pressé...
Si tu veux simplifié n'utilise pas les effets et crée un panel fixe et en dessous un TileList avec comme itemRenderer un composant avec un panel contenant une image. lorsque tu alimentera le dataprovider de ton tileList avec les 'path' des images, ton composant recevra une variable 'data' dans laquelle sera contenu les 'path' de tes images lesquels tu affectera au source de ton composant images. il te restera à intercepter le clic sur ton image pour qu'il affecte au panel du haut le 'path' de l'image sur laquelle tu viens de cliquer.


Bonne chance

[G4uthier]

merci de ton conseil je vais chercher des tutoriels sur ça et essayer de reproduire l'effet que je t'ai montré. Donc meme si l'extension de ma page est un ".php" ca va aller ?

[Jim_Nastiq]

Salut,


pour communiquer avec une BDD dedpuis Felx il y a plusieurs solutions:

-ASSQL , ou tu effectue tes requetes depuis ton application flex en AS3
-AMFPHP, tu effectues les requetes en php
-Hibernate(Java) avec LCDS ou BlazeDS

a toi de voir dans quel langage tu es le plus à l'aise et ce que tu peux faire coté serveur

[greatalain]

pour communiquer avec une BDD dedpuis Felx il y a plusieurs solutions:

-ASSQL , ou tu effectue tes requetes depuis ton application flex en AS3
-AMFPHP, tu effectues les requetes en php
-Hibernate(Java) avec LCDS ou BlazeDS

Comme il est débutant il aura plus facile à généré un XML à partir de php avec les path de ses images et utilisé les httpServices pour les réccupèrer.

[G4uthier]

J'ai cherché de bon tutos et franchement j'ai rien trouvé sur ca
Si vous avez des liens parce que j'ai vraiment cherché (google est mon ami)
et rien du tout à ce sujet. De temps en temps on trouve des sources non commenté aussi ...
Bref je suis perdu

[G4uthier]

ca ne marche pas et je vois pas ce qui ne va pas.
Si vous me repondez j'aimerais que vs me donniez des explications si possible merci d'avance.

mon xml
fichier: MyXml.xml

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?xml version="1.0" encoding="UTF-8"?>
<property>
<id_properties>0</id_properties>
<id>1</id>
<img>PICT0211.JPG</img>
<img2></img2>
</property>
<property>
<id_properties>1</id_properties>
<id>2</id>
<img>PICT0385.JPG</img>
<img2></img2>
<id_properties>1</id_properties>
<id>2</id>
<img>PICT0382.JPG</img>
<img2></img2>
</property>

mon code flex :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" color="#2A0631" themeColor="#FF00FC"
	>
 
 <mx:Script>
         <![CDATA[
 
    ]]>	
    </mx:Script>
 
 
   <mx:Model  id="prop" source="../assets/MyXml.xml"/>
   <mx:TileList id="tile" dataProvider="{prop.property}" 
      height="184" width="131" rowHeight="130" columnWidth="175" itemRenderer="Thumbnail" x="122" y="105"/>
	<mx:Application>

mon fichier thumbnail:

Code :

1
2
3
4
5
 
<mx:VBox xmlns:mx="http://www.macromedia.com/2005/mxml">
<mx:Image id="image" width="60" height="60"
source="{prop.img}"/>
</mx:VBox>

[greatalain]

Code :

1
2
3
4
5
Code :
<mx:VBox xmlns:mx="http://www.macromedia.com/2005/mxml">
<mx:Image id="image" width="60" height="60"
source="{prop.img}"/>
</mx:VBox>

remplace source="{prop.img}" par source="{data.img}"

Ta balise <mx:application> ty la ferme quand ??? remplace par </mx:Application>

Et ton TileList faut lui passé un array donc mets :

Code :

1
2
3
 
<mx:TileList id="tile" dataProvider="{mx.utils.ArrayUtil.toArray(prop.property)}" 
      height="184" width="131" rowHeight="130" columnWidth="175" itemRenderer="Thumbnail" x="122" y="105"/>

Essaye ça, cela devrait fonctionner

[G4uthier]

Bizar ca ne fonctionne pas pourtant j'ai suivi tes instructions.
j'ai juste rajouré un ./ pour :

Code :

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Image source="./{data.img}" width="50" height="50"/>
</mx:VBox>

Lorsque mon navigateur se lance, il ne fait que apparaitre une tilelist....
Pour le tableau en fait tu le remplis de valeur provennat du fichier xml c'est ca?

[greatalain]

tu ne dois pas mettre de ./ devant data.img

Attention si tu mets dans ton fichier xml image.jpg comme path il faut que ton image se trouve au même niveau que ton source.

[G4uthier]

oui c'est ce que j'avais fais mais ca ne fonctionne toujours pas .

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" color="#2A0631" themeColor="#FF00FC"
	>
 
 <mx:Script>
         <![CDATA[
 
    ]]>	
    </mx:Script>
 
 
   <mx:Model  id="prop" source="../assets/MyXml.xml"/>
   <mx:TileList id="tile" dataProvider="{mx.utils.ArrayUtil.toArray(prop.property)}" 
      height="184" width="131" rowHeight="130" columnWidth="175" itemRenderer="Thumbnail" x="122" y="105"/>
	</mx:Application>

Code :

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Image source="{data.img}" width="50" height="50"/>
</mx:VBox>

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?xml version="1.0" encoding="UTF-8"?>
<property>
<id_properties>0</id_properties>
<id>1</id>
<img>PICT0211.JPG</img>
<img2></img2>
</property>
<property>
<id_properties>1</id_properties>
<id>2</id>
<img>PICT0385.JPG</img>
<img2></img2>
<id_properties>1</id_properties>
<id>2</id>
<img>PICT0382.JPG</img>
<img2></img2>
</property>

[greatalain]

je viens de tester ton code, moi ca marche mais faut que tu mettes ( faut enlever property

Code :

1
2
<mx:TileList id="tile" dataProvider="{mx.utils.ArrayUtil.toArray(prop)}" 
      height="184" width="131" rowHeight="130" columnWidth="175" itemRenderer="Thumbnail" x="122" y="105"/>

[greatalain]

Petite rectification:

Ajoute un niveau root à ton XML

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="UTF-8"?>
<root>
 <property>
  <id_properties>0</id_properties>
  <id>1</id>
  <img>3971.JPG</img>
  <img2></img2>
 </property>
 <property>
  <id_properties>1</id_properties>
  <id>2</id>
  <img>3981.JPG</img>
  <img2></img2>
 </property>
</root>

et dans l'appli ecrit ton code comme suit :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" color="#2A0631" themeColor="#FF00FC" creationComplete="{init();}"
	>
 
 <mx:Script>
         <![CDATA[
      private function init():void {
      	tile.dataProvider = this.prop.property as Array;
      }
    ]]>	
    </mx:Script>
 
 
   <mx:Model  id="prop" source="xml.xml"/>
   <mx:TileList id="tile" 
      height="184" width="100%" rowHeight="100" columnWidth="175" itemRenderer="Thumbnails" x="122" y="105"/>
 
</mx:Application>

[G4uthier]

moi aussi ca fonctionne la merci, je vais continuer à travailler dessus parce que c'est bizar qu il ne m'affiche qu'une photo alors que j'en ai plusieurs dans mon fichier xml.
C'est meme bizar qu'en enlevant un noeud, il trouve la photo.
En tout cas je te emrerci beaucoup Alain pour ton aide.

[G4uthier]

Code :

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
 
	<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" color="#2A0631" themeColor="#FF00FC" creationComplete="{resultPropHandler();}"
	>
 
 <mx:Script>
         <![CDATA[
         	import mx.controls.Label;
         	import mx.controls.Image;
         	import mx.collections.IViewCursor;
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;
 
 
 
			private function resultPropHandler():void  
			{
 
				var test:String;
				var img:Image=new Image();
				var label:Label=new Label();	
				tile.dataProvider = this.prop.property as Array;
             	img.source=tile.dataProvider.getItemAt(0);
	            panel.addChild(img);
 
 
			}
 
 
 
 
 
 
 
 
    ]]>	
    </mx:Script>
 
 
   <mx:Model  id="prop" source="MyXml.xml" />
   <mx:Panel id="panel" x="68" y="10" width="292" height="215">
   </mx:Panel>
   <mx:TileList id="tile" 
      height="76" width="378" rowHeight="100" columnWidth="175" itemRenderer="Thumbnail" x="25" y="233"/>
 
</mx:Application>
 
			}

je n'arrive pas à dire que je veux l'image qui est dans le panel a pour source le premier elemnt de ma Tilelist .
Comment dois je faire mon code fonctionne pas . Au debut j'avais essayé de tout parcourir avec un iterator mais rien ne fonctionnait ...

[greatalain]

il manque '.img' pour pointer ton path d'image!!

Code :

 img.source=tile.dataProvider.getItemAt(0).img;

[G4uthier]

merci alain tout de suite ca fonctionne

[greatalain]

de rien hésite pas en cas de prob