11 Replies Latest reply on May 12, 2010 10:21 AM by Freydaklin

    Retrieving data using Flex 4 & PHP

    Freydaklin

      Hello,

       

      I'm making an image gallery, and after giving up javascript, I tried to achieve this with Flex 4.

      I have a MySQL database containing all useful data, and php files that can retrieve that data and output it in XML format (tested and works).

       

      Now as for the Flex part, I have no idea on how to "parse" that data. Yes, I have tried nearly every single article about httpservices and itemrenderers, but nothing would work. Unfortunately, most of the articles are outdated and just don't work in Flex 4.

       

      Just to clarify my goal: the database information must be used to dynamically create mx:image tags with their appropriate image source.

       

      Could somebody help me find a little tutorial on how to retrieve data from a php service?

       

      Thanks alot!

        • 1. Re: Retrieving data using Flex 4 & PHP
          SpaghettiCoder Level 3

          Retreive data,

           

          put data into a arraycollection

           

          have a dgroup or a list, and bind that to the arraycollection

           

          have a custom item renderer with a image

          • 2. Re: Retrieving data using Flex 4 & PHP
            TeotiGraphix Level 3

            Hi,

             

            You basically need;

             

            - request

            - loader

            - load/error handler

            - loop that enumerates through the XML's children

            - instantiation of an Image component capable of loading your string XML url

            - a container that will hold the Image components

             

            var request:URLRequest = new URLRequest("/myserver/actions.getImageXML.php");

            var loader:URLLoader = new URLLoader();

            loader.addEventListener("complete", loader_completeHandler);

            loader.load(request);

             

            private function completeHandler(event:Event);

            {

                var data:String = event.currentTarget.data;

                var xml:XML = new XML(data);

                for each(var image:XML in xml..image)

                {

                     trace(image.@src)

                }

            }

             

            The above gives you an "idea" of what you need to get you started with the data.

             

            Once you have the image url you can use;

             

            var image:Image = new Image();

            image.source = imageURL;

            container.addChild(image);

             

            or in a Spark container;

             

            container.addElement(image);

             

            Mike

            1 person found this helpful
            • 3. Re: Retrieving data using Flex 4 & PHP
              TeotiGraphix Level 3

              As SpaghettiCoder pointed out using an item renderer is the best bet.

               

              I am just trying to show you how to get it to work without that extra layer of abstraction confusing the image loading.

               

              Once you get images loading from your server using the XML, you can worry about the item renderers.

               

              Mike

              • 4. Re: Retrieving data using Flex 4 & PHP
                Freydaklin Level 1

                Thank you for all the answers. One of my possible solutions seems to be exactly what Spaghetti suggested, so I guess I'll show my code (it's nearly the same code as in an article I found somewhere on the net).


                It compiles without any error and I don't get any error either on runtime.

                Maybe it has nothing to do, but when I run the application in my browser (Firefox), the status bar keeps showing "Read <mydomain>" instead of "Done".

                 

                My main file, Main.mxml:

                <?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"
                                  minWidth="955" minHeight="600"
                                  preloaderChromeColor="#000000" backgroundColor="#000000" backgroundAlpha="0.0"
                                  creationComplete="thumbs_request.send()">
                     <fx:Style source="Main.css"/>
                     <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                          <s:HTTPService id="thumbs_request" url="gallery_app.php" useProxy="false" result="on_dispatch(event)" />
                     </fx:Declarations>
                     <fx:Script>
                          <![CDATA[
                               import mx.collections.ArrayCollection;
                               import mx.rpc.events.ResultEvent;
                
                               
                               [Bindable]private var photodata:ArrayCollection;
                               
                               private function on_dispatch(event:ResultEvent):void
                               {
                                    photodata = event.result.photos as ArrayCollection;
                                    //photos = thumbs_request.lastResult.photos as ArrayCollection; // Didn't work either
                
                                    img_main.source = "http://ladoree.be/img/LD.jpg"; // Just to let me know when the service has dispatched
                               }
                          ]]>
                     </fx:Script>
                
                     <!-- Panel not so important -->
                     <s:Panel y="10" width="620" height="400" title="La Dorée" textAlign="center" horizontalCenter="0">
                          <mx:Image y="10" width="600" height="350" id="img_main"  scaleContent="false" x="8"/>
                     </s:Panel>
                     
                     <s:DataGroup itemRenderer="img_renderer" dataProvider="{photodata as ArrayCollection}">
                          <s:layout>
                               <s:HorizontalLayout />
                          </s:layout>
                     </s:DataGroup>
                </s:Application>
                

                 

                My item renderer (created the file by clicking "New" -> "MXML Item Renderer" on my project):

                <?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" 
                                    autoDrawBackground="true">
                     
                     <s:Label text="{data.photo.filename}" color="#FFFFFF" />
                     
                </s:ItemRenderer>
                

                 

                I'm temporarily trying to output a label with just the file name as text, but that doesn't work either.

                 

                Thanks alot for any help! (In the meanwhile I'll try Teoti's "full-script" suggestion)

                • 5. Re: Retrieving data using Flex 4 & PHP
                  Freydaklin Level 1

                  Here is a solution that I tried based on Teoti's suggestion:

                   

                  <?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"
                                    minWidth="955" minHeight="600"
                                    preloaderChromeColor="#000000" backgroundColor="#000000" backgroundAlpha="0.0"
                                    creationComplete="init()">
                       <fx:Style source="Main.css"/>
                       <fx:Declarations>
                            <!-- Place non-visual elements (e.g., services, value objects) here -->
                       </fx:Declarations>
                       <fx:Script>
                            <![CDATA[
                                 import mx.collections.ArrayCollection;
                                 import mx.controls.Alert;
                                 import mx.rpc.events.ResultEvent;
                                 
                                 private function init():void
                                 {
                                      var request:URLRequest = new URLRequest("gallery_app.php");
                                      var loader:URLLoader = new URLLoader();
                                      loader.addEventListener("complete", loader_complete);
                                      loader.load(request);
                                 }
                                 
                                 private function loader_complete(event:Event):void
                                 {
                                      var data:String = event.currentTarget.data;
                                      var xml:XML = new XML(data);
                                      for each(var img:XML in xml.photos)
                                      {
                                           Alert.show(img.@filename); // It'll spam me if it works, but then at least I know it works :)
                                      }
                                      img_main.source = "http://ladoree.be/img/LD.jpg"; // Just to let me know when the service has dispatched
                                 }
                            ]]>
                       </fx:Script>
                       <!-- Panel not so important -->
                       <s:Panel y="10" width="620" height="400" title="La Dorée" textAlign="center" horizontalCenter="0">
                            <mx:Image y="10" width="600" height="350" id="img_main"  scaleContent="false" x="8"/>
                       </s:Panel>
                  </s:Application>
                  

                   

                  But it doesn't work at all. The function loader_complete(event:Event) gets called because img_main.source = "http://ladoree.be/img/LD.jpg"; is executed, but I don't get any alert...

                  I'm new to XML parsing in Flex, so don't be mad at me if I made errors (which seems pretty probable).

                   

                  Thanks again for any suggestion!

                  • 6. Re: Retrieving data using Flex 4 & PHP
                    David_F57 Level 5

                    hi,

                     

                    here is a simple example with xml usage(it was purpose done for another forum post), it may be useful...

                     

                    http://gumbo.flashhub.net/imgmenu/   src included

                     

                     

                    David.

                    1 person found this helpful
                    • 7. Re: Retrieving data using Flex 4 & PHP
                      Freydaklin Level 1

                      Thanks alot, but I cannot seem to find out where the source is located.

                       

                      By the way, if somebody wants to see the XML output, you can by just going on http://ladoree.be/app/bin-debug/gallery_app.php.

                      http://ladoree.be/app/bin-debug/Main.html is a live example (currently contains the code of my previous post).

                      • 8. Re: Retrieving data using Flex 4 & PHP
                        David_F57 Level 5

                        hi,

                         

                        just right click on the application and it shows you a menu(view source) (...this is a standard feature built into flex that allows you to include the source. when you create a release build of your project.

                        • 9. Re: Retrieving data using Flex 4 & PHP
                          David_F57 Level 5

                          hi,

                           

                          do you have the php source (gallery_app.php), it doesn't seem to be returning xml formatted data...

                           

                          David.

                          • 10. Re: Retrieving data using Flex 4 & PHP
                            David_F57 Level 5

                            hi,

                             

                            Its ok, just chrome is doing something weird with the response, IE seems to be ok.

                             

                            David.

                            • 11. Re: Retrieving data using Flex 4 & PHP
                              Freydaklin Level 1

                              I got it working, at last!

                               

                              Had to alter the code to parse the XML data to something like this:

                              for each(var img:XML in xml.children())
                              {
                                   var thumb:Image;
                                   thumb.source = img.child("filename").toString();
                                   //...
                              }
                              

                               

                              And now it works like a charm!

                              Thank you all for the assistance!