Tour de Flex – Web Version Released!

March 30, 2009By 7 Comments

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!

Filed in: Adobe FlexFlexFlex/AIR Tags:

About the Author ()

Comments (7)

Trackback URL | Comments RSS Feed

  1. Olivier Pons says:

    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: http://www.adobe.com/devnet/flex/tourdeflex/ 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!

    Holly

    • Sean says:

      Holly, can we speak candidly? I’m sorry to just impose on this particular comment…but I’m desperate!

      I finally bought my own Flex Builder License (4.7) (Normally the company buys this for me) and I was BLOWN AWAY with a sense of loss on the product. What happened? This version of the Adobe Flex is not useful anymore.

      They removed the GUI designer (saves me loads of time, especially when I can mockup faster in that than anything) and none of the components I’m familiar with are there; hence, no canvas, viewstack, etc.

      You can’t even design the layout in an earlier version and import. Regardless of the implementation used (s:spark & mx:MXML).

      The only thing you can do that is remotely interesting is push to an iOS device… For me to do this I needed to start a company (that’s a 500 step process) get a DUNS number (not hard but still a hassle), get accepted by Apples Development, get a security cert, provision the application, provision the device, and then there’s the few hundred trial and error steps to successfully load the Air 3.5 SDK into 4.7 so that it would finally work.

      And then, it works. And it looks like total dog meat. Sure, we can spend all day skinning objects but an asset to Flex was that I dropped a decent looking button on the page. It looked good, it worked. I know, boohoo.

      Anyway, I think you more than anybody knows what’s going on with Flex. My friends insist that Adobe is trying to kill off Flex/Flash apps. Granted, there’s a bit of a learning curve here because I was stuck compiling on Flex 3.0 projects all this time because the clients never upgraded past flash 9.x until just last summer.

      Feedback would be greatly appreciated!

  3. Aldo Valenti says:

    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,

    Aldo.

  4. minh says:

    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.
    Thanks,

  5. Gene Qian says:

    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!

    Gene

  6. Ward says:

    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