Tour de Flex – Web Version Released!

Tour de Flex - Web Version

Tour de Flex - Web Version

Tour de Flex for the Web was released today! It’s hosted on the Adobe Devnet site where we also now keep the Tour de Flex AIR app download, and looks almost identical to the AIR version, minus the AIR-only samples for obvious reasons.

The web version contains deep linking integrated into it so it’s now very easy to bookmark samples for later reference, or to email a sample to a co-worker etc… This version is also a great option for those who are new to Flex or might want to explore it, but are not ready to download the full AIR application. When they are ready to download it, all they have to do is hit the Install button at the top of the page to get it.

I had some unique challenges in creating the web version, since we use HTML links to supply our content (in the form of SWF or HTML) for all of our tabs within the illustrations and documents, and obviously could not use the handy dandy HTML component as our AIR app used. Christophe Coenraets had been down this path before and suggested using iFrames to hold the content in the tabs, and advised on how he had done something similar, so that is the path we chose. The final result took a little bit of trickery to make the iFrames behave with the resizing of the browser window, popping up and hiding of other windows etc, due to the z-order of the iFrame always taking precedence over the Flex component, but ultimately worked! I plan to write another post about how this was done in case it may help others who need to build something like this in the future… so check back soon!

Also, be sure to check out Greg Wilson’s blog for the rest of the info on the Tour de Flex 1.2 AIR app updates and more!


6 Responses to “Tour de Flex – Web Version Released!”

  1. Hi !

    After viewing the HTML version I’ve decided to install it in Eclipse.
    Everthyng went fine, until now….
    When I try to view Tour de flex here’s what I do :
    – Launch Eclipse / Flex
    – Menu Window => other Views
    Then a popup appear asking me for view.
    I choose “Tour De Fled” then I’m asked this

    “Please locate the Tour de Flex application on your system”

    What shall I do ?

  2. devgirl Says:

    Hi Olivier! First you will need to download the AIR Tour de Flex application because the plugin interfaces with it. You can download that here: Then when the plugin asks you for a path, you would enter the location of the installed AIR app, something like: C:\Program Files\TourDeFlex\TourDeFlex.exe On Mac you would point to your Tour de Flex app file. The plugin will let you search for samples and then pop up that sample in the AIR app when you click the result, so you must have that first.

    I hope that helps! Let me know if you have any trouble!


  3. I also had to use the iframe approach to display HTML within a web Flex application.

    I’d like to know more about your experience on the topic.

    Thank you,


  4. I am also searching for ways to display HTML pages in Flex using iframe and would like to hear more about your experience with TDF on web.

  5. Would you share some knowledge about how to let those iFrame and HTML links to work perfectly? I tried to use mx:HTML control in web version, but flex doesn’t support it. I am really wondering to learn from your success story. Any script sample will be highly appreicated. Thank you very much!


  6. Dear Devgirl,

    I find some IFrame technique with google written by Brian Deitte in 2006, but it is not working in my code, the IFrame area is always blank. Would you please give some advice how to troubleshooting this? Thanks.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: