How to open an image in a popup or TitleWindow

Hello!

I´m using an example from Adobe to upload pictures and a description text to the webserver. I can upload a preview- and a full size image. The data is displayed in a datagrid. This app have the function, if i click a button near the thumb, the full size image open in the browser (firefox, ie, ...).

Please have somebody a solution where the full size image opens in a popup or a titlewindow inside the flex app.?

Thank´s!

Regards,
Mario

phpDemo.mxml
--------------------------------
<?xml version="1.0" encoding="utf-8"?>
 
<!--IMPORTANT TO ENCLUDE XMLNS: DATA AND CREATIONCOMPLETE AS SEEN BELOW -->
 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:phpDemo="*" creationComplete="getPhoto.send()" height="603">
 
<!--THE FIRST HTTPSERVICE WILL CALL A PHP FILE FOR THE DATAGRID WHICH IS ACTUALLY DISPLAYING AS XML-->
<!--IMPORTANT NOTE: CHANGE TO URL WHERE "YOURDOMAIN.COM TO YOUR SERVER PATH -->
 
 <mx:HTTPService
        id="getPhoto"
        url="http://YOURDOMAIN.com/demo/getPhoto.php"
        useProxy="false" />
       
<!--THE SECOND HTTPSERVICE WILL POST OUR UPLOADS AND DESCRIPTIONS TO THE MYSQL DATABASE  -->
      
        <mx:HTTPService id="postPhoto" url="http://YOURDOMAIN.com/demo/postPhoto.php" method="POST" contentType="application/x-www-form-urlencoded" resultFormat="text" result="thanks2(event)">
         <mx:request>
         <id_>{id_.text}</id_>
         <img>{img.text}</img>
         <des>{des.text}</des>
         <link>{link.text}</link>
         </mx:request>
         </mx:HTTPService>
      
<!--THE THIRD HTTPSERVICE WILL DELETE SELECTED ROWS IN OUR DATAGRID   -->
        
         <mx:HTTPService id="deletePhoto" showBusyCursor="true" url="http://YOURDOMAIN.com/demo/deletePhoto.php" method="POST" contentType="application/x-www-form-urlencoded" resultFormat="text" result="thanks1(event)" >
         <mx:request>
         <id_>{id_.text}</id_>
         </mx:request>
         </mx:HTTPService>
        
<!--THE FOLLOWING ACTIONSCRIPT WILL MAKE OUR POST AND DELETE FUNCTIONS WORK -->
        
         <mx:Script>
<![CDATA[
 
    import mx.managers.PopUpManager
import mx.controls.Alert;
       import mx.events.CloseEvent;
 
   private function deleteInfo():void{
      deletePhoto.send()
    }
  private function thanks1(evt:Event):void{
    mx.controls.Alert.show("Item Deleted!")
   }
    private function titleWindow_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(this)
            }
            private function sendInfo():void{
    if(img.text=="" || link.text=="" ){
     mx.controls.Alert.show("One of your links is blank!")
    } else {
      postPhoto.send()
    }
   }
   private function thanks2(evt:Event):void{
    if(String(postPhoto.lastResult)=="ok") mx.controls.Alert.show("Thanks! image added.")
    else mx.controls.Alert.show("Sorry, there was a server error!")
   }
   ]]>
   </mx:Script>
   
<!--BUILD THE PANEL TO HOUSE THE DATAGRID AND FORM -->
   
         <mx:Panel width="483" height="593" layout="absolute" title="PHP Image Loader Demo" horizontalCenter="-21" verticalCenter="-5">
                  <mx:DataGrid x="10" y="10" width="443" height="176" dataProvider="{getPhoto.lastResult.rss.channel}" id="dgPhoto">
                           <mx:columns>                         
<!--HERE IS OUR FIRST ITEMRENDERER FOR THE PREVIEW IMAGE  -->  
                                    <mx:DataGridColumn headerText="Preview" dataField="img">
                                    <mx:itemRenderer>
        <mx:Component>
        <mx:VBox>
        <mx:Image source="{data.img}" width="100%" height="100" horizontalAlign="center"/>
        </mx:VBox>
        </mx:Component>
        </mx:itemRenderer>
        </mx:DataGridColumn>
                                    <mx:DataGridColumn headerText="Description" dataField="des"/>
<!--HERE IS OUR SECOND ITEMRENDERER FOR THE BUTTON -->
                                    <mx:DataGridColumn headerText="Download" dataField="link">
                                    <mx:itemRenderer>
        <mx:Component>
        <mx:Box width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
        <mx:Button label="Download" width="100%"  >
         <mx:click>navigateToURL(new URLRequest(data.link));</mx:click>
        </mx:Button>
        </mx:Box>
        </mx:Component>
        </mx:itemRenderer>
        </mx:DataGridColumn>
                           </mx:columns>
                  </mx:DataGrid>
<!--LETS CALL OUR CUSTOM UPLOAD COMPONENT AND LABEL IT LOADER1 -->
                  <phpDemo:myUpload x="10" y="233" label="Button" id="loader1"/>
                  <mx:TextInput x="10" y="283" width="424" id="img" text="{loader1.img1.text}"/>
<!--THE TEXTINPUT ABOVE THIS LINE CALLS TO THE LABEL IN THE UPLOAD COMPONENT WITH ID OF IMG1 WHICH IS THE SOURCE FOR OUR IMAGE IN THE DATAGRID -->
                  <mx:Image x="10" y="313" width="112" height="109" source="{loader1.img1.text}"/>
<!--LETS CALL THE SAME COMPONENT AND LABEL IT LOADER2 SO NOW WE HAVE THE ABILITY TO UPLOAD TO FILES AT ONCE -->
                  <phpDemo:myUpload x="10" y="430" label="Button" id="loader2"/>
                  <mx:TextInput x="10" y="480" width="424" id="link" text="{loader2.img1.text}"/>
<!--THE TEXTINPUT ABOVE CALLS THE SAME UPLOAD COMPONENT WE TAGED AS LOADER2 AND WILL SERVE AS TO LINK TO DOWNLOAD NATIVE FILES -->
                  <mx:TextArea x="156" y="349" width="234" height="73" id="des"/>
                  <mx:Text x="156" y="332" text="Description"/>
                  <mx:Button x="330" y="510" label="Post to database" click="sendInfo(),getPhoto.send()"/>
                  <mx:Button x="389" y="194" label="Delete" click="deleteInfo(),getPhoto.send()"/>
                  <mx:TextInput x="10" y="194" width="34" editable="false" id="id_" borderStyle="none" text="{dgPhoto.selectedItem.id_}"/>
                  <mx:Label x="19" y="224" text="Upload Preview Image:"/>
                  <mx:Label x="19" y="421" text="Upload Deliverable:"/>
         </mx:Panel>
</mx:Application>
 
 
 
 
myUpload-mxml
--------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="424" height="42" creationComplete="init()">
  <mx:Script><![CDATA[
  [Bindable]
   private var urlRequest:URLRequest;
   private var fileReferenceList:FileReferenceList;
   private var serverSideScript:String = "http://YOURDOMAIN.com/demo/upload.php";
  
   private function init():void {
    urlRequest = new URLRequest(serverSideScript);
    fileReferenceList = new FileReferenceList();
    fileReferenceList.addEventListener(Event.SELECT, fileSelectedHandler);
   }
   
   private function uploadFile():void {
    fileReferenceList.browse();
   }
   
   private function fileSelectedHandler(event:Event):void {
    var fileReference:FileReference;
    var fileReferenceList:FileReferenceList = FileReferenceList(event.target);
    var fileList:Array = fileReferenceList.fileList;
 
    // get the first file that the user chose
    fileReference = FileReference(fileList[0]);
    
    // upload the file to the server side script
    fileReference.addEventListener(Event.COMPLETE, uploadCompleteHandler);
    fileReference.upload(urlRequest);
    
    // update the status text
    img1.text = "Uploading Please wait...";
   }
   
   /* CHANGE YOURDOMAIN TO YOURS */
   
   private function uploadCompleteHandler(event:Event):void {
    img1.text = "http://YOURDOMAIN.com/demo/files/" + event.target.name;
   }
 
  
  ]]>
 </mx:Script>
 
  <mx:Button label="Browse" y="10" x="10" click="uploadFile();"/>
  <mx:Label x="86" y="14" id="img1"/>
</mx:Canvas>

Select allOpen in new window