11 Replies Latest reply on Sep 15, 2009 2:05 AM by mfriasv

    Open url request from PopUpManager

    mfriasv

      Hi,

       

      I have a function which opens a new browser window with the result of a URL request (an image). I wonder if  I can do the same but with a window "embedded" in the flash application.

       

      I saw there is a class called PopUpManager. I understood that I have to create a new component ("popup") with the data for the new window. The problem is that I don't know how to pass the result of the URL request to that popup component.

       

      Is it possible at all? Is there any other alternative?

       

      Regards,

      Manolo

        • 2. Re: Open url request from PopUpManager
          Andrew Rosewarn Level 3

          To get the data across to the pop up you can create a custom component called for instance myComp below based on a canvas.  This had a public propety str available.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="268" height="66" backgroundColor="#FFFFFF" borderColor="#000000" borderStyle="solid">
              <mx:Script>
                  <![CDATA[
                      [Bindable]
                      private var _str:String;
                     
                      public function set str(value:String):void {
                          _str = value;
                      }
                  ]]>
              </mx:Script>
              <mx:Label x="27" y="23" text="{_str}"/>
          </mx:Canvas>

           

          Then in you application you can instansiate this, assign the relevant data to the property and then create the pop up by using the custom comp to the PopUpManager

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
              <mx:Script>
                  <![CDATA[
                      import mx.managers.PopUpManager;
                     
                      private function showPopUp():void {
                          var myComp:MyComp = new MyComp();
                          myComp.str = 'Data to send';
                          myComp.x = 100;
                          myComp.y = 100;
                          PopUpManager.addPopUp(myComp,this);
                      }
                ]]>
              </mx:Script>
              <mx:Button x="28" y="23" label="Button" click="showPopUp()"/>
          </mx:Application>

           

          There are a number of ways rto do this thats just one.  To get data back from the component you can add event listeners to it to pass the data back.

           

          Hope thats a start.

           

          Andrew

          • 3. Re: Open url request from PopUpManager
            mfriasv Level 1

            Hi Andrew,

             

            that was a good one. I get the url to the popup but I still don't know how to get the image result of the url request. I guess the changes should be done in myComp - maybe another datatype for _str?

             

            Regards,

            Manolo

            • 4. Re: Open url request from PopUpManager
              mfriasv Level 1

              More info,

               

              I assigned the url to the str property:

               

              var url:String = new String("http://myserver/export?bbox="+xMin+","+yMin+","+xMax+","+yMax+"&layers=show:"+visLayersBackg+visLayers+"&size="+size+" &format="+format+"&f="+f)
                                    
                                     var myComp:popup = new popup();
                                  myComp.str = url;
                                  myComp.x = 100;
                                  myComp.y = 100;
                                  PopUpManager.addPopUp(myComp,this);

               

              Is ths the right way to do it?

               

              Manolo

              • 5. Re: Open url request from PopUpManager
                Andrew Rosewarn Level 3

                Are you trying to display the images in the custom comp, if so why not put the image tag object in that comp as below

                 

                Cusom Component

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
                    <mx:Script>
                        <![CDATA[
                            [Bindable]
                            private var _url:String;
                           
                            public function set url(value:String):void {
                                _url = value;
                            }
                        ]]>
                    </mx:Script>
                   
                    <mx:Image x="10" y="10" width="380" height="280" source="{_url}"/>
                   
                </mx:Canvas>

                 

                Then send the url to this component in your main application

                 

                Application

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                    <mx:Script>
                        <![CDATA[
                            import mx.managers.PopUpManager;
                           
                            private function showImageInPopUp():void {
                                var imageComp:ImageComp = new ImageComp();
                                imageComp.x = 100;
                                imageComp.y = 100;
                                imageComp.url = 'http://www.badcreditukcarfinance.co.uk/images/bad_credit_car_finance.jpg'
                                PopUpManager.addPopUp(imageComp,this);
                                PopUpManager.centerPopUp(imageComp);
                            }
                        ]]>
                    </mx:Script>
                    <mx:Button x="39" y="30" label="Button" click="showImageInPopUp()"/>
                </mx:Application>

                 

                That way you can resue the component for any object.  In this example my custom component has a fixed width and height so the component is scaled.  You caould adjust this to fit images.

                 

                Any help or am I missing the point ?

                 

                Andrew

                • 6. Re: Open url request from PopUpManager
                  mfriasv Level 1

                  Hi Andrew!

                   

                  great! Just what I wanted! If I may ask another question I would like to center the Canvas to the center of the screen. I went through all Canvas properties but I haven't figured out how to do it. My problem is that the popup seems to be placed on top of the my mxml widget which is not the main application. I saw some properties like owner, parent or parentApplication. Could I use them to center the popup on top of the main application? I haven't succeeded yet.

                   

                  Another question is how to make a button, called for example "save", so that the user can download the image. I made a attempt with fileReference and URLRequest (see below) but I got stack.

                   

                  Regards,

                  Manolo

                   

                   

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="500" backgroundColor="#FFFFFF" borderColor="#000000" borderStyle="solid">
                      <mx:Script>
                          <![CDATA[
                              [Bindable]
                              private var _url:String;
                             
                              private var _formatpop:String;
                             
                              private var downloadURL:URLRequest = new URLRequest();

                   

                              public function set url(value:String):void {
                                  _url = value;
                              }
                              public function set formatpop(value:String):void {
                                  _formatpop = value;
                              }
                             public function clickHandler(event:MouseEvent):void
                             {
                                 var fileReference:FileReference = new FileReference();
                                 downloadURL.url = _url;
                                 fileReference.download(downloadURL,"test."+_formatpop);
                             }
                            
                          ]]>
                      </mx:Script>
                  <mx:Image width="500" height="500" source="{_url}"/>
                  <mx:Button label="Save" id="save" click="clickHandler(event)"/>
                  </mx:Canvas>

                  • 7. Re: Open url request from PopUpManager
                    mfriasv Level 1

                    Hi,

                     

                    I solved the first problem:

                     

                    PopUpManager.addPopUp(myComp,this.parentApplication as DisplayObject);
                    PopUpManager.centerPopUp(myComp);

                     

                    The second one seems to be more complex. Any ideas?

                     

                    Regards,

                    Manolo

                    • 8. Re: Open url request from PopUpManager
                      Andrew Rosewarn Level 3

                      Hi there

                       

                      Yep cool with the PopUpManager.centrePopUp.

                       

                      As for saving an image.  You can save graphics from Flex by specifiying a rectangular region you want to save.  You can save the selected region out as a jpg or a png using the encoders.  In the example below I have saved out an image. 

                       

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

                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

                      <mx:Script>

                      <![CDATA[

                           import mx.graphics.codec.JPEGEncoder;

                           import flash.utils.ByteArray;

                       

                       

                           private function saveImage():void {

                                var bitmapData:BitmapData = new BitmapData(myImage.contentWidth, myImage.contentHeight);

                                bitmapData.draw(myImage);    

                       

                                var jpeg:JPEGEncoder = new JPEGEncoder();

                                var byteArray:ByteArray = jpeg.encode(bitmapData);

                       

                                var file:FileReference = new FileReference();

                                file.save(byteArray,'TestImage.jpg');

                           }

                      ]]>

                      </mx:Script>

                       

                      <mx:Image id="myImage" x="78" y="33" width="283" height="180" source="http://www.maniacworld.com/amazing-cars.jpg"/>

                      <mx:Button x="78" y="236" label="Button" click="saveImage()"/>

                      </mx:Application>

                       

                      Note you need to be compiling for Flash PLayer 10 in your Flex compiler settings as that allow you to read and write local files.

                       

                      Hope it helps

                       

                      Andrew.

                      1 person found this helpful
                      • 9. Re: Open url request from PopUpManager
                        mfriasv Level 1

                        Hi Andrew!

                         

                        thanks for the hint! The use of the encoders are cool. The problem is that they only work, as far as I know, for JPG or PNG. Since I have more formats I managed to do it with the URLRequest as I wrote above.

                         

                        Regards,

                        Manolo

                        • 10. Re: Open url request from PopUpManager
                          Andrew Rosewarn Level 3

                          Yea the example code was really to show you could grab something from your screen and save it out.  However this is useful if you wanna save some dynamically created data like a chart or something.   You can save it straight out.

                           

                           

                          • 11. Re: Open url request from PopUpManager
                            mfriasv Level 1

                            Hi Andrew,

                             

                            now my problem is that I want to show a html page in the popup. Is there any component I could use inside TitleWindow?

                             

                            Regards,

                            Manolo