Skip navigation
Dani@developer
Currently Being Moderated

Images Xml data provider in a HoritzontalList

Apr 24, 2013 7:05 AM

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-l a-television-tv-reciclado-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-galler y-with-the-flex-tilelist-control/ -->

<gallery>

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

          <image

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

</gallery>

 

 

</xml>

 

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points