0 Replies Latest reply: Apr 24, 2013 7:05 AM by Dani@developer RSS

    Images Xml data provider in a HoritzontalList

    Dani@developer

      Hello,

       

      I'm trying to make a list with images under a video player but it appears in the layout but it's empty! Please help me :S

       

      Here is my code:

       

      Main:

       

          

      <?xml version="1.0" encoding="utf-8"?>

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                       xmlns:s="library://ns.adobe.com/flex/spark"

                                       xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"

                                      applicationComplete="initApp();">

       

                <fx:Script>

                          <![CDATA[

                                    import mx.collections.ArrayCollection;

                                    import mx.controls.*;

                                    import mx.core.*;

                                    import mx.skins.halo.WindowBackground;

       

                                    import spark.components.VideoDisplay;

       

       

                                    public var vids:ArrayCollection = new ArrayCollection(["assets/20051210-w50s.flv", "assets/barsandtone.flv"]);

                                    public var ims:ArrayCollection = new ArrayCollection(["assets/wheelchair0.jpg","assets/10275402-icono-de-la-television-tv-reci clado-papel-palo-sobre-fondo-de-color-de-pantalla-retro-grunge.jpg"]);

       

                                    public var i:int = 0;

                                    public var a:int = 0;

       

                                    public function initApp():void{

       

                                              stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandler);

       

                                    }

       

       

                                    public function keyHandler(event:KeyboardEvent):void{

       

                                              switch (event.keyCode){

                                                        case 37:

                                                        if (i!=0){

                                                                  i-=1;

       

                                                        vid.source= vids[i];

                                                        if(vid.visible){

                                                                  fadeResizeShowVid.stop();

                                                                  fadeResizeShowVid.play();

                                                                  vid.play();

                                                        }else{

                                                                  fadeResizeShowIm.stop();

                                                                  fadeResizeShowIm.play();

                                                        }

       

                                                        if(a!=0){

                                                                  a-=1;

                                                                  im.source=ims[a];

                                                        }

       

                                                        }

                                                        break;

       

                                                        case 38:

       

       

       

                                                        break;

       

                                                        case 39:

                                                                  if (i!=(vids.length-1)){

       

                                                                  i+=1;

                                                                  vid.source= vids[i];

                                                                  //Alert.show(vids[i]);

       

       

                                                                  if(vid.visible){

                                                                  fadeResizeShowVid.stop();

                                                                  fadeResizeShowVid.play();

                                                                  vid.play();

                                                                  }else{

                                                                  fadeResizeShowIm.stop();

                                                                  fadeResizeShowIm.play();

                                                                  }

                                                                  if(a!=(ims.length-1)){

                                                                            a+=1;

                                                                            im.source = ims[a];

       

                                                                  }

                                                                  }

       

                                                        break;

       

                                                        case 40:

       

                                                        break;

       

                                                        case 32:

                                                                  if (vid.playing){

                                                                            fadeResizeHideVid.stop();

                                                                            fadeResizeHideVid.play();

                                                                            fadeResizeShowIm.stop();

                                                                            fadeResizeShowIm.play();

                                                                            vid.stop();

                                                                  }else{

                                                                            fadeResizeHideIm.stop();

                                                                            fadeResizeHideIm.play();

                                                                            fadeResizeShowVid.stop();

                                                                            fadeResizeShowVid.play();

                                                                            vid.play();

                                                                  }

                                                        break

                                              }

       

       

                                    }

       

                                    protected function image1_clickHandler(event:MouseEvent):void

                                    {

       

       

                                              fadeResizeHideIm.stop();

                                              fadeResizeHideIm.play();

                                              fadeResizeShowVid.stop();

                                              fadeResizeShowVid.play();

                                              vid.play();

                                              im.visible=false;

                                              vid.visible=true;

                                    }

       

                                    protected function im_mouseOverHandler(event:MouseEvent):void

                                    {

       

       

                                    }

       

                                    protected function vid_clickHandler(event:MouseEvent):void

                                    {

                                              vid.stop();

                                              fadeResizeHideVid.stop();

                                              fadeResizeHideVid.play();

                                              fadeResizeShowIm.stop();

                                              fadeResizeShowIm.play();

                                              vid.visible=false;

                                              im.visible=true;

       

       

                                    }

       

                                    protected function image2_clickHandler(event:MouseEvent):void

                                    {

                                              if (i!=0){

                                                        i-=1;

       

                                                        vid.source= vids[i];

                                                        if(vid.visible){

                                                                  fadeResizeShowVid.stop();

                                                                  fadeResizeShowVid.play();

                                                                  vid.play();

                                                        }else{

                                                                  fadeResizeShowIm.stop();

                                                                  fadeResizeShowIm.play();

                                                        }

       

                                                        if(a!=0){

                                                                  a-=1;

                                                                  im.source=ims[a];

                                                        }

       

                                              }

       

                                    }

       

                                    protected function image3_clickHandler(event:MouseEvent):void

                                    {

                                              if (i!=(vids.length-1)){

       

                                                        i+=1;

                                                        vid.source= vids[i];

                                                        //Alert.show(vids[i]);

       

       

                                                        if(vid.visible){

                                                                  fadeResizeShowVid.stop();

                                                                  fadeResizeShowVid.play();

                                                                  vid.play();

                                                        }else{

                                                                  fadeResizeShowIm.stop();

                                                                  fadeResizeShowIm.play();

                                                        }

                                                        if(a!=(ims.length-1)){

                                                                  a+=1;

                                                                  im.source = ims[a];

       

                                                        }

                                              }

       

                                    }

       

                          ]]>

                </fx:Script>

       

                <fx:Declarations>

       

       

                          <s:Sequence id="fadeResizeHideVid"

                                                        targets="{vid}"

                                                        duration="1000">

                                    <s:Fade id="fadeHideVid"

                                                        alphaFrom="1.0"

                                                        alphaTo="0.0"/>

                                    <s:Resize id="resizeHideVid"

                                                          widthTo="0"

                                                          heightTo="0"/>

                          </s:Sequence>       

       

                          <s:Parallel id="fadeResizeShowVid"

                                                        target="{vid}"

                                                        duration="1000">

                                    <s:Resize id="resizeShowVid"

                                                          widthTo="294"

                                                          heightTo="197"/>

                                    <s:Fade id="fadeShow"

                                                        alphaFrom="0.0"

                                                        alphaTo="1.0"/>

                          </s:Parallel>

       

       

                          <s:Sequence id="fadeResizeHideIm"

                                                        targets="{im}"

                                                        duration="1000">

                                    <s:Fade id="fadeHideIm"

                                                        alphaFrom="1.0"

                                                        alphaTo="0.0"/>

                                    <s:Resize id="resizeHideIm"

                                                          widthTo="0"

                                                          heightTo="0"/>

                          </s:Sequence>       

       

                          <s:Parallel id="fadeResizeShowIm"

                                                        target="{im}"

                                                        duration="1000">

                                    <s:Resize id="resizeShowIm"

                                                          widthTo="294"

                                                          heightTo="197"/>

                                    <s:Fade id="fadeShowIm"

                                                        alphaFrom="0.0"

                                                        alphaTo="1.0"/>

                          </s:Parallel>

       

                          <fx:XML id="gallery" source="gallery.xml" />

                          </fx:Declarations>

       

                <s:Image id="im" source="{ims.getItemAt(y.valueOf())}"

                                     click="image1_clickHandler(event)"

                                     buttonMode="true"

                                     mouseOver="im_mouseOverHandler(event)"

                                     x="156" y="85" width="294" height="197"/>

                <s:VideoPlayer id="vid" source="{vids.getItemAt(i.valueOf())}"

                                                 autoPlay="false" visible="false"

                                                 buttonMode="true" click="vid_clickHandler(event)" loop="true"

                                                 x="156" y="85" width="294" height="197" />

       

       

       

                <s:List x="198" y="295" width="200" height="83" horizontalScrollPolicy="on" dragEnabled="true" itemRenderer="hListItemRenderer">

                          <s:dataProvider>

                                    <s:XMLListCollection source="{gallery.children()}"/>

                          </s:dataProvider>

                </s:List>

                <s:Image x="49" y="150" width="135" height="64" source="assets/flecha_anterior.png" click="image2_clickHandler(event)" buttonMode="true"/>

                <s:Image x="420" y="152" width="135" height="64" source="assets/flecha_siguiente.png" buttonMode="true" click="image3_clickHandler(event)"/>

       

       

       

       

       

       

      </s:Application>

       

      ItemRenderer:

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                           xmlns:s="library://ns.adobe.com/flex/spark"

                           xmlns:mx="library://ns.adobe.com/flex/mx"

                           autoLayout="true">

       

                <s:Image source="{data.children()}" />

       

      </s:ItemRenderer>

       

      XML:

       

      <?xml version="1.0" encoding="utf-8"?>

      <!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tile list-control/ -->

      <gallery>

                <image img="assets/wheelchair0.jpg"/>

                <image

                                    img="assets/10275402-icono-de-la-television-tv-reciclado-papel-palo-sobre- fondo-de-color-de-pantalla-retro-grunge.jpg" />

      </gallery>

       

       

      </xml>