12 Replies Latest reply on Apr 16, 2010 12:27 AM by Matt Le Fevre

    Dynamic Image Source taken from XML

    djh88ukwb Level 1

      Hello there!

       

      I wonder if anyone can give me some feedback or point me in the direction in relation to a problem i have.

       

      Basically my flex application is playing video at the same time as displaying an image.

       

      The source of the image is taken from an external XML file.  I am using a PHP script to alter the image link in this XML file, and i need the image in the flex application to update as the XML file updates.

       

      I am not 100% on how i can achieve this and am looking for some feedback.

       

      In an ideal world i need the image source to update every second or so, taking it from the XML however i cant have the whole flex application refresh as this would affect the video feedback.

       

      Thanks in advance and i look forward to some feedback

        • 1. Re: Dynamic Image Source taken from XML
          Matt Le Fevre Level 4

          djh88ukwb wrote:

           

          Hello there!

           

          I wonder if anyone can give me some feedback or point me in the direction in relation to a problem i have.

           

          Basically my flex application is playing video at the same time as displaying an image.

           

          The source of the image is taken from an external XML file.  I am using a PHP script to alter the image link in this XML file, and i need the image in the flex application to update as the XML file updates.

           

          I am not 100% on how i can achieve this and am looking for some feedback.

           

          In an ideal world i need the image source to update every second or so, taking it from the XML however i cant have the whole flex application refresh as this would affect the video feedback.

           

          Thanks in advance and i look forward to some feedback

           

          so if i understand correctly,

           

          you're essentially displaying a video, and you have an image displayed next to it that you want to change every few seconds or so?

           

          or does the image change according to the position in the video, and so the xml needs to be altered?

           

           

          or do all the images already exist, and you simply want to create a slide show effect as the video is playing? and need to update the XML each time a new image is due to be displayed?

          • 2. Re: Dynamic Image Source taken from XML
            djh88ukwb Level 1

            Yes the video is going to be a live stream so the images need to be changed at random times, not pre set times.  I have made a php script that alters the XML so once the flex application has loaded i need the source of the image to keep looking at the XML file to change image when needed

            • 3. Re: Dynamic Image Source taken from XML
              Matt Le Fevre Level 4

              djh88ukwb wrote:

               

              Yes the video is going to be a live stream so the images need to be changed at random times, not pre set times.  I have made a php script that alters the XML so once the flex application has loaded i need the source of the image to keep looking at the XML file to change image when needed

               

              well you could do it on a timer/timeout event, simply updating the img components source every few seconds for example,

               

               

              i'll assume you're using an HTTPService to get your XML information.

               

              <mx:HTTPService id="getImage" result="handleImage(event)" url="imagepath.xml" method="POST"/>

               

              and that the XML information looks like the following:

               

              <imagelocation>imageFolder/image.png</imglocation>

               

              and that your image name will change each time it's altered (image1.png, image2.png, image3.png etc...)

               

               

              he's an example app that uses the above code and a repeated timeout function (it saves you from having to create a timer)

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="nextImage()">
                  
                  <mx:Script>
                      <![CDATA[
                          import mx.rpc.events.ResultEvent;
                          
                          private function nextImage():void
                          {
                              getImage.send();
                              setTimeout(nextImage,5000);
                          }
                          
                          private function handleImage(event:ResultEvent):void
                          {
                              img1.source = event.result.imagelocation;
                          }
                      ]]>
                  </mx:Script>
                  
                  <mx:HTTPService id="getImage" result="handleImage(event)" url="imagepath.xml" method="POST"/>
                  
                  <mx:Image id="img1"/>
                  
              </mx:Application>

               

               

              that will automatically update the image's source to whatever is stored in the XML file every 3 seconds.

               

               

              if you're wanting to use the same name for the image, eg: keeping it called 'image.png' constantly, write a bit of extra script in PHP to append a question mark followed by a random number to write to the XML each time it's changed, as that'll prevent the flex app from caching the image and failing to update.

               

              eg:

              <imagelocation>image.png?2389462834</imagelocation>

              • 4. Re: Dynamic Image Source taken from XML
                djh88ukwb Level 1

                Grizzzzzzzzzz

                 

                Thanks for the code ! it works really well offline, however when i publish it online the image dosent seem up update, even thou i have put the full link to the XML file :S

                • 5. Re: Dynamic Image Source taken from XML
                  Matt Le Fevre Level 4

                  djh88ukwb wrote:

                   

                  Grizzzzzzzzzz

                   

                  Thanks for the code ! it works really well offline, however when i publish it online the image dosent seem up update, even thou i have put the full link to the XML file :S

                   

                  are you sure the image link is being altered successfully in the XML by the PHP script?

                   

                  if so, it's most likely a caching issue, try this code instead:

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="nextImage()">
                     
                      <mx:Script>
                          <![CDATA[
                              import mx.rpc.events.ResultEvent;

                                 [Bindable]
                                 public var dataDump:String = "datadump";
                             
                              private function nextImage():void
                              {
                                  getImage.send();
                                  setTimeout(nextImage,5000);
                              }
                             
                              private function handleImage(event:ResultEvent):void
                              {
                                  img1.source = event.result.imagelocation;
                              }
                          ]]>
                      </mx:Script>
                     
                      <mx:HTTPService id="getImage" result="handleImage(event)" url="imagepath.xml" method="POST">
                       <mx:request xmlns="">
                            <dataDumping>
                                 {
                  dataDump}
                            </dataDumping>
                       </mx:request>
                      </mx:HTTPService>
                     
                      <mx:Image id="img1"/>
                     
                  </mx:Application>
                  • 6. Re: Dynamic Image Source taken from XML
                    David_F57 Level 5

                    Hi,

                     

                    Could this be an issue with the loading of the image, I would have thought that a loader would have been used to fetch the image before it was assigned to the display object.

                     

                     

                    David.

                    • 7. Re: Dynamic Image Source taken from XML
                      djh88ukwb Level 1

                      Its now working as intended the last lot of code sorted the problem.  Thanks alot again for helping me on this !


                      • 8. Re: Dynamic Image Source taken from XML
                        Matt Le Fevre Level 4

                        no worries, glad to help

                        • 9. Re: Dynamic Image Source taken from XML
                          djh88ukwb Level 1

                          Sorry to be a pain, i dont suppose you could help me with one last problem ?

                           

                          If i have a number of php scripts on the same server as the flex application how can I make a normal mx:button run a script once clicked?

                          • 10. Re: Dynamic Image Source taken from XML
                            Matt Le Fevre Level 4

                            You'll have to declare an HTTPService for each of your scripts, and then '.send()' them on the button click, either directly or passively through a function call.

                             

                            I have a fair bit of Flex&PHP interaction in these sample applications i made

                             

                            http://www.mattlefevre.com/viewExample.php?tut=flexPHP&proj=Simple%20Login%20Application

                             

                            http://www.mattlefevre.com/viewExample.php?tut=flexPHP&proj=Chat%20Program

                             

                            you're more than welcome to steal anything that may help from the source code

                            • 11. Re: Dynamic Image Source taken from XML
                              djh88ukwb Level 1

                              After looking at your code and on the Internet i have come up with this -

                               

                              <?xml version="1.0" encoding="utf-8"?>
                              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                                 
                                  <mx:Script>
                                      <![CDATA[
                                          import mx.rpc.events.ResultEvent;

                               

                                          private function b1(event:Event):void
                                          {
                                              button1.send();
                                          }
                                          private function b2(event:Event):void
                                          {
                                              button2.send();
                                          }
                                          private function b3(event:Event):void
                                          {
                                              button3.send();
                                          }
                                          private function b4(event:Event):void
                                          {
                                              button4.send();
                                          }
                                          private function b5(event:Event):void
                                          {
                                              button5.send();
                                          }
                                          private function b6(event:Event):void
                                          {
                                              button6.send();
                                          }
                                      ]]>
                                  </mx:Script>
                                 
                                  <mx:HBox x="46" y="501" width="523">
                                      <mx:Button label="Image One" click="b1(event)"/>
                                      <mx:Button label="Image Two" click="b2(event)"/>
                                      <mx:Button label="Image Three" click="b3(event)"/>
                                      <mx:Button label="Image Four" click="b4(event)"/>
                                      <mx:Button label="Image Five" click="b5(event)"/>
                                      <mx:Button label="Image Six" click="b6(event)"/>
                                  </mx:HBox>
                                 
                                 
                                  <mx:HTTPService id="button1" url="URLTOSCRIPT"  method="POST"/>
                                  <mx:HTTPService id="button2" url="URLTOSCRIPT"  method="POST"/>
                                  <mx:HTTPService id="button3" url="URLTOSCRIPT"  method="POST"/>
                                  <mx:HTTPService id="button4" url="URLTOSCRIPT"  method="POST"/>
                                  <mx:HTTPService id="button5" url="URLTOSCRIPT"  method="POST"/>
                                  <mx:HTTPService id="button6" url="URLTOSCRIPT"  method="POST"/>
                              </mx:Application>

                               

                               

                              Now this works kind of, it lets me use the butttons to change hte image once or twice and then after that it stops working, however if i go direct to the script in my web browser the sript runs perfect and the image changes in my other app.  For some reason this App that i posted above, works for a little bit then cloggs up and stops working, any ideas why ?

                               

                              Thanks in Advance

                              • 12. Re: Dynamic Image Source taken from XML
                                Matt Le Fevre Level 4

                                djh88ukwb wrote:

                                 

                                After looking at your code and on the Internet i have come up with this -

                                 

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                                   
                                    <mx:Script>
                                        <![CDATA[
                                            import mx.rpc.events.ResultEvent;

                                 

                                            private function b1(event:Event):void
                                            {
                                                button1.send();
                                            }
                                            private function b2(event:Event):void
                                            {
                                                button2.send();
                                            }
                                            private function b3(event:Event):void
                                            {
                                                button3.send();
                                            }
                                            private function b4(event:Event):void
                                            {
                                                button4.send();
                                            }
                                            private function b5(event:Event):void
                                            {
                                                button5.send();
                                            }
                                            private function b6(event:Event):void
                                            {
                                                button6.send();
                                            }
                                        ]]>
                                    </mx:Script>
                                   
                                    <mx:HBox x="46" y="501" width="523">
                                        <mx:Button label="Image One" click="b1(event)"/>
                                        <mx:Button label="Image Two" click="b2(event)"/>
                                        <mx:Button label="Image Three" click="b3(event)"/>
                                        <mx:Button label="Image Four" click="b4(event)"/>
                                        <mx:Button label="Image Five" click="b5(event)"/>
                                        <mx:Button label="Image Six" click="b6(event)"/>
                                    </mx:HBox>
                                   
                                   
                                    <mx:HTTPService id="button1" url="URLTOSCRIPT"  method="POST"/>
                                    <mx:HTTPService id="button2" url="URLTOSCRIPT"  method="POST"/>
                                    <mx:HTTPService id="button3" url="URLTOSCRIPT"  method="POST"/>
                                    <mx:HTTPService id="button4" url="URLTOSCRIPT"  method="POST"/>
                                    <mx:HTTPService id="button5" url="URLTOSCRIPT"  method="POST"/>
                                    <mx:HTTPService id="button6" url="URLTOSCRIPT"  method="POST"/>
                                </mx:Application>

                                 

                                 

                                Now this works kind of, it lets me use the butttons to change hte image once or twice and then after that it stops working, however if i go direct to the script in my web browser the sript runs perfect and the image changes in my other app.  For some reason this App that i posted above, works for a little bit then cloggs up and stops working, any ideas why ?

                                 

                                Thanks in Advance

                                 

                                Flex sometimes does this weird thing where once it has sent a HTTPService, if it can't detect any immediate changes, it won't bother sending it again. I assume it's a cache thing.

                                 

                                to get around this problem, i simply send a little chunk of junk data along with every HTTPService i send. Flex sees that it has to send information each time, and so performs the HTTPService without running into the issue of using the cache.

                                 

                                so you could try something like this to see if this is the problem:

                                 

                                 

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                                   
                                    <mx:Script>
                                        <![CDATA[
                                            import mx.rpc.events.ResultEvent;

                                 

                                          [Bindable]

                                          public var dataDump:String = "sdjkfh";

                                 

                                            private function b1(event:Event):void
                                            {
                                                button1.send();
                                            }
                                            private function b2(event:Event):void
                                            {
                                                button2.send();
                                            }
                                            private function b3(event:Event):void
                                            {
                                                button3.send();
                                            }
                                            private function b4(event:Event):void
                                            {
                                                button4.send();
                                            }
                                            private function b5(event:Event):void
                                            {
                                                button5.send();
                                            }
                                            private function b6(event:Event):void
                                            {
                                                button6.send();
                                            }
                                        ]]>
                                    </mx:Script>
                                   
                                    <mx:HBox x="46" y="501" width="523">
                                        <mx:Button label="Image One" click="b1(event)"/>
                                        <mx:Button label="Image Two" click="b2(event)"/>
                                        <mx:Button label="Image Three" click="b3(event)"/>
                                        <mx:Button label="Image Four" click="b4(event)"/>
                                        <mx:Button label="Image Five" click="b5(event)"/>
                                        <mx:Button label="Image Six" click="b6(event)"/>
                                    </mx:HBox>
                                   
                                   
                                    <mx:HTTPService id="button1" url="URLTOSCRIPT"  method="POST">

                                <mx:request xmlns="">
                                          <dataDumping>
                                               {dataDump}
                                          </dataDumping>
                                     </mx:request>
                                    </mx:HTTPService>

                                    <mx:HTTPService id="button2" url="URLTOSCRIPT"  method="POST">

                                <mx:request xmlns="">
                                          <dataDumping>
                                               {dataDump}
                                          </dataDumping>
                                     </mx:request>
                                    </mx:HTTPService>
                                    <mx:HTTPService id="button3" url="URLTOSCRIPT"  method="POST">

                                <mx:request xmlns="">
                                          <dataDumping>
                                               {dataDump}
                                          </dataDumping>
                                     </mx:request>
                                    </mx:HTTPService>
                                    <mx:HTTPService id="button4" url="URLTOSCRIPT"  method="POST">

                                <mx:request xmlns="">
                                          <dataDumping>
                                               {dataDump}
                                          </dataDumping>
                                     </mx:request>
                                    </mx:HTTPService>
                                    <mx:HTTPService id="button5" url="URLTOSCRIPT"  method="POST">

                                <mx:request xmlns="">
                                          <dataDumping>
                                               {dataDump}
                                          </dataDumping>
                                     </mx:request>
                                    </mx:HTTPService>
                                    <mx:HTTPService id="button6" url="URLTOSCRIPT"  method="POST">

                                <mx:request xmlns="">
                                          <dataDumping>
                                               {dataDump}
                                          </dataDumping>
                                     </mx:request>
                                    </mx:HTTPService>
                                </mx:Application>

                                 

                                 

                                As you can see, that is starting to get a little bit messy, seeing as all the services are similar, and the only thing that really needs changing is their URL, you could try a simple string reference on button click to call different php scripts, for example:

                                 

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                                   
                                    <mx:Script>
                                        <![CDATA[
                                            import mx.rpc.events.ResultEvent;
                                
                                            [Bindable]
                                            public var dataDump:String = "sdjkfh";
                                
                                        [Bindable]
                                        public var serviceURL:String;
                                
                                            private function sendService(urlValue:String):void
                                            {
                                        serviceURL = urlValue;
                                                VaryingService.send();
                                            }
                                            
                                        ]]>
                                    </mx:Script>
                                   
                                    <mx:HBox x="46" y="501" width="523">
                                        <mx:Button label="Image One" click="sendService('http://localhost/service1.php')"/>
                                        <mx:Button label="Image Two" click="sendService('http://localhost/service2.php')"/>
                                        <mx:Button label="Image Three" click="sendService('http://localhost/service3.php')"/>
                                        <mx:Button label="Image Four" click="sendService('http://localhost/service4.php')"/>
                                        <mx:Button label="Image Five" click="sendService('http://localhost/service5.php')"/>
                                        <mx:Button label="Image Six" click="sendService('http://localhost/service6.php')"/>
                                    </mx:HBox>
                                   
                                    <mx:HTTPService id="VaryingService" url="{serviceURL}" method="POST">
                                    <mx:request xmlns="">
                                          <dataDumping>
                                               {dataDump}
                                          </dataDumping>
                                    </mx:request>
                                    </mx:HTTPService>
                                
                                </mx:Application>