7 Replies Latest reply on Jul 26, 2009 12:06 PM by David_F57

    image doesn't load source

    edua91

      Hi,

      I created a component which has a tileList, also i created a new item renderer (based on canvas) that only has a label and a image, all images are stored on my web server. The source of that image is stored on a mysql database which i get from a dataservice. But when i test the application the image doesnt lode, i already check by outputing the source if it has the correct url and it is rigth. Also, if i hardcore one source for all, the image is displayed correctly. I really dont know what to di and expect someone can help me =).

       

      Here is the code for the itemRenderer:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="90" height="80">
          <mx:Script>
              <![CDATA[
                  import mx.events.FlexEvent;

       

                  protected function img_creationCompleteHandler(event:FlexEvent):void
                  {
                      trace(img.source)
                  }

       

              ]]>
          </mx:Script>
          <mx:VBox x="0.6" y="0.2" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
              <mx:Label width="35" height="14.808125" id="nombre" text="{data.id}"/>
              <mx:Image creationComplete="img_creationCompleteHandler(event)" width="70.993225" height="55.417603" id="img" source="{data.url}"/>
          </mx:VBox>
         
      </mx:Canvas>

       

      And here is the code for the component:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" xmlns:getinfo="services.getinfo.*">
          <mx:Script>
              <![CDATA[
                  import mx.events.FlexEvent;
                  import mx.controls.Alert;

       

                  protected function tileList_creationCompleteHandler(event:FlexEvent):void
                  {
                      getAllImgsResult.token = getInfo.getAllImgs();
                  }

       

              ]]>
          </mx:Script>
          <mx:TileList width="100%" height="100%" id="tileList" itemRenderer="components.tile" creationComplete="tileList_creationCompleteHandler(event)" dataProvider="{getAllImgsResult.lastResult}" labelField="imagen"></mx:TileList>
          <mx:CallResponder id="getAllImgsResult"/>
          <getinfo:GetInfo id="getInfo" destination="getInfo" endpoint="http://localhost/admin_beta-debug/gateway.php" fault="Alert.show(event.fault.faultString)" showBusyCursor="true" source="getInfo"/>
      </mx:Panel>

       

      Thxs all

        • 1. Re: image doesn't load source
          David_F57 Level 5

          You need to have a load complete handler for the image source, otherwise you are creating images one after the other and adding them to the display list before they have content.

           

          My preference is to use a bindable array and feed the images into it by iterating through the query result, this also gives you better control over preloaders etc...

           

          David

          • 2. Re: image doesn't load source
            edua91 Level 1

            thank you, but can you explain me how would i do that, (iam quite starting learnig flex)

            • 3. Re: image doesn't load source
              David_F57 Level 5

              There are a lot of different ways you can achieve this, i've tried to make it easy to read by first getting the values from a php request then starting at the top of the list use a loader to retreive the image from its url, after each image is loaded I step to the next item in the list. This is not the most efficient way to do it but it is easier to understand the logic if it is in broken into sequence of functions. I hope this helps a bit.

               

               

              <?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/halo"

                                  minWidth="1024" minHeight="768"

                                  creationComplete="application1_creationCompleteHandler(event)">

              <fx:Declarations>

              <mx:RemoteObject id="lc_Images" fault="onFault(event)" showBusyCursor="true" source="mypics" destination="amfphp">

                   <mx:method name="getImages" result="qryImages(event)" />

              </mx:RemoteObject>     

              </fx:Declarations>

               

              <fx:Script>

                   <![CDATA[

                   import mx.controls.Alert;

                   import mx.collections.ArrayCollection;

                   import mx.events.FlexEvent;

                   import mx.rpc.events.ResultEvent;

                   import mx.rpc.events.FaultEvent;

                   

                   [Bindable] private var ImageArray:ArrayCollection = new ArrayCollection();

                   [Bindable] private var GridArray:ArrayCollection = new ArrayCollection();

                   

                   private var LoadImage:Loader = new Loader();

                   private var ImageLabel:String;

                   private var MyCount: int = 0;

                   

                   protected function application1_creationCompleteHandler(event:FlexEvent):void

                   {

                        lc_Images.getOperation("getImages").send();

                   }

               

                   private function qryImages(res:ResultEvent):void

                   {

                        var i:Number=0;

                        while(i < res.result.length)

                        {

                          var tmpData:Object = {

                                                        url: res.result[i].URL,

                                                        lbl: res.result[i].TITLE

                                                   }

                          GridArray.addItem(tmpData);                              

                             i++;

                      }

                      MyCount = 0;

                        getImages();

                   }

               

                   

                   private function getImages(): void

                   {

                        LoadImage.contentLoaderInfo.addEventListener(Event.COMPLETE,getimage);

                        LoadImage.load(new URLRequest(GridArray[MyCount].url));

                   }

               

                   

                   private function getimage(e:Event): void

                   {

                        LoadImage.contentLoaderInfo.removeEventListener(Event.COMPLETE,getimage);

                          var ba: ByteArray = new ByteArray();

                        ba = LoadImage.contentLoaderInfo.bytes;

                        var tmpData: Object = {     img: ba,

                                                      lbl: GridArray[MyCount].lbl

                                                   }

                          MyCount += 1;

                        ImageArray.addItem(tmpData);

                        tl.invalidateDisplayList();

                        if (MyCount < GridArray.length) getImages(); 

                   }

               

                   

                   private function onFault(e:FaultEvent):void

                   {

                        Alert.show("Connection failed","Error");

                   }

                   ]]>

              </fx:Script>

              <mx:TileList id="tl" x="40" y="42" width="784" height="418" dataProvider="{ImageArray}" itemRenderer="myPics"/>

                   

              </s:Application>

              • 4. Re: image doesn't load source
                edua91 Level 1

                Thank you for all your help david, i think iam getting into your idea of how to make things work, but i have been trying to modify the application *** you have said but i cant make it work, dont know if it is because iam not using amfphp or other stuff, here i send you the flash builder project

                • 5. Re: image doesn't load source
                  edua91 Level 1

                  it seems that the forum doesnt let me upload the file, problems with the flash builder extension (.fxp)

                   

                  Message was edited by: edua91

                  • 6. Re: image doesn't load source
                    edua91 Level 1

                    someone??

                    • 7. Re: image doesn't load source
                      David_F57 Level 5

                      fxp is just a zip file so rename it to zip and all should be ok.

                       

                      I had a quick look at your code but I don't have an environment that allows me to see what is being returned by your call. If you are getting the correct values (image url addresses) in your return data then the code I sent to you should work. Just use the url string of your request