One of the biggeset pain points of FLEX/Flash (as i see it) is its inability to render HTML in its totality. FLEX supports a few HTML Tags, but not all. Another question that people pose to me is… “When are you guys gonna include PDF rendering in Flash ?”.
I hope the answer to that is soon (since its the logical way to go), but here’s a (partial) answer to people’s woes. I call it “FLEX – i – FRAME”. Its an old wine in new bottle, considering the fact that Flash Designers/Developers have been using it since time immemorial.
Thanks to Cristophe, who ported the idea to FLEX1.5 in AS2 (read the post here) and then Brian who gracefully ported the same to AS3 with FLEX 2.0 (read that post here). It has an awesome way of resizing the iFrame when the Flex Application is sized. The great part is, it can make it look like you are rendering HTML and even PDF content inside a Flash/Flex Application.
I took Brian’s iFrame MXML component and made a quick application (in about half hour) to show its capabilities. This application will be a one-stop-shop for all resources pertaining to Adobe India’s “Adobe Developer Olympiad” RIA Challenge. You can choose from a choice of sites/resources and PDFs from inside this application. So here it is
(To view source, right click on the movie once
you click the above link OR click here)
You can download the whole source code, complete with all dependent files (javascripts, assets.. etc) and use it to playaround with iFrame yourself 🙂
The trick is very simple. Its just a clever use of the External API interface that lets the Actionscript inside a Flash movie, talk to the Javascript inside the html (in which it is embedded). In this case, the approach is to let the javascript position an IFrame on top of a specific area of your Flex application to provide a container for the HTML content which will then appear embedded in the application.
The IFrame component extends Canvas and is used like any other Flex container. Behind the scenes, it acts as a proxy for the actual HTML IFrame. For example, when the IFrame component is resized or moved it automatically asks the HTML document to resize/move the actual IFrame. You can easily find the ExternalInterface calls in IFrame.mxml and the corresponding JavaScript functions in iFrameDemo.html (renamed to iFrameDemohtml.mxml for reading purposes).
But what kind of surprised me was the amazing perfomance of the History Managemet API. While still within the FLEX Application, you can use the browser back button to navigate to earlier pages… really NEAT !!!
People participating in the ADO RIA Challenge, go ahead and use this innovatively in your application. For more details on ActionScript – JavaScript interaction through External APIs, refer the following links.
FLEXing My Muscle 
Thanks Raghu for the snippet. We are looking at ways to bring PDF content inside Flex. Is there a way we can load a flv inside flex, and able to stop and add annotations on top it and which can be played back with the annotations depending upon the frame it is annotated. Btw, I am in discussion with Ram in Bangalore, if you are in bangalore, i would love to meet you. Let me know your convenience. I am available at narain at 360in dot com
Raghu, Just a ?. When trying to download source code for IFrame Demo I only get the .swf’s and not the .mxml’s (working files, etc). Nonetheless, it’s a great app.
Hey,
I was woundering if there was a way to communicate between the html page you loaded in the Iframe and the flex application?Ex. Pass a variable to javascript function in the html page.
Hello Raghu, just a little question, it’s possible to make a snaphot on iFrame?
Thanks for your sharing! Rajiv.
[…] and its significance in Flex Project Development I had posted a couple of posts earlier (the iFrame, contextMenu based fullscreen & the fullScreenVideo) where it required you to edit the html in […]
have you noticed a problem with the demo. While viewing this if you press Ctrl and move the mouse wheel the iFrame resizes. Any solution to this???
I have copied all the files into my project, but when I click on a tree node it does not bring a page into an Iframe. It just shows big graphics.
Can you help, please?
hi This is because in your html file the wmode=opaque is missing
same old junk,nothing new on these posts.nothing original just copied from some where else
I am unable to download (domain expired), can you help?
It will be up in a couple of days… sorry for the inconvenience…
Raghu,
I have learned how to load a pdf in Flex from your blog.
I am writing a blog to show different things that I have done with Flex, PDF and AIR.
With your permission I want to use your blog url in my blog. I am planning to publish the blog by end of 2nd Nov.
Thank you,
Avinash
We use this IFrame component to render BIRT reports (via our reporting service). We loading a report we forward the user to a ‘waiting’ page and then when the report is finished generating, we show the report. This works great, but when resizing the browser window, the report attempts to reload itself. Any idea how I can keep this from happening?