voici un de mes premier tutoriel sur flex et j'espere sera le debut d'une longue serie de tutoriels sur flex et action script 3.

dans ce tuto nous n'allons pas stocké les images dans un fichier externe mais on va faire plsu simple, on va utiliser un tableau (Array) et on developpera ça au fur et a mesure.

code MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]"
creationComplete="loadImage()">

<mx:states>
<mx:State name="display">
<mx:RemoveChild target="{tile1}"/>
<mx:AddChild position="lastChild">
<mx:Image id="imageDisplay" bottom="10" left="10" top="46" right="10"/>
</mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Button y="16" label="Retour" right="10" click="currentState=''"/>
</mx:AddChild>
</mx:State>
</mx:states>

<mx:Script>
<![CDATA[
private var imageList:Array = [
{name:"Image 1", path:"assets/images/image1.jpg"},
{name:"Image 2", path:"assets/images/image2.jpg"}
];

private function loadImage():void
{
imageRepeater.dataProvider = imageList;
}

private function showImage(imageObj:Object):void
{
currentState = "display";
imageDisplay.source = imageObj.path;
}

]]>
</mx:Script>

<mx:Label x="10" y="10" text="Flex Gallery" fontSize="18" id="title"/>

<mx:Tile right="10" left="10" top="46" bottom="10" id="tile1">
<mx:Repeater id="imageRepeater">
<mx:VBox>
<mx:Image source="{imageRepeater.currentItem.path}" width="140" height="140" click="showImage(event.currentTarget.getRepeaterItem())" useHandCursor="true"  buttonMode="true"/>
<mx:Label text="{imageRepeater.currentItem.name}" width="140" textAlign="center" />
</mx:VBox>

</mx:Repeater>
</mx:Tile>

</mx:Application>

source

No related posts.

Cet article a été publié le Lundi 17 décembre 2007 à 11:29 et est classé dans as3, flex. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.