Showing a popup image in flex and passing variables to a mxml module

I already show a thumbnail image in my Quickwins application, but I wanted to show the full image when one clicked on the thumbnail. The image should open in a window on top of the current application window, and can be closed again.

I had to google for a while (I got a lot of help from reading “Web Development Central” ) and search the Flex built-in help before I figured it out, but I think it’s because it’s so damn easy to do this in just a few lines of code !  Here’s how you do this :

Say you want to show an image – the image’s path is “c:\windows\test.jpg” and that path is stored in a string variable screenshot_path

1. Create a new mxml module in your project, for example call it ‘ViewWindow.mxml’ – Make it a TitleWindow
2. In your main program, call the module via the PopUpManager  (you’ll need to import it via “import mx.managers.PopUpManager;”):

   PopUpManager.createPopUp(this, ViewWindow, false);

3. In your ViewWindow module you create a mx:image – let’s say we give it the id “Image2View”. This image will be loaded upon initialisation of the window via the init() function which is automatically executed when the module is called. We wil use the screenshot_path variable from the main application. To do that, we need to tell ViewWindow from where the variable is coming from: from the parent application. Appropriately, you can use the referrer ‘parentApplication’ :

   Image2View.load(parentApplication.screenshot_path);

4. Upon closing the window (notice that we have activated the close button) we tell the popupmanager to remove this window.

See the full code for the ViewWindow.mxml below.