Blog to discuss Midnight Coders products, features, ideas and trends in development of Rich Internet Applications

Wednesday, December 06, 2006

Mixing HTML and Flex using IFrame

One of the core elements of the new WebORB console is the TabNavigator component providing access to various product subsystems. Some tabs display nothing but a pure HTML content (introduction, getting started and documentation). The approach behind integrating Flex and HTML is quite simple. We borrowed the example created by Christophe Conraets and made some changes so it would work with Flex 2. Below is an example of the component in action followed by an overview of how it works:



The approach is very simple: the HTML page hosting a Flex application contains an IFrame and some JavaScript functions responsible for positioning the internal frame and configuring it to load html content. All the Flex-to-IFrame communication is encapsulated in a MXML component which extends Canvas (see IFrame.mxml). When a the component is set to become visible, it uses the ExternalInterface API to call on the JavaScript function to position the IFrame exactly on top of the component and load corresponding content. When the component is hidden, it calls a JS function to hide IFrame. In the example above, the same IFrame is used to render HTML for each tab.

You can browse and download the source for the example here.
The HTML page with the added JavaScript is available here.

The HTML file contains the following modifications:
  1. moveIFrame, setIFrameContent, hideIFrame and showIFrame functions.
  2. "wmode","opaque" parameters in the AC_FL_RunContent call. (If these parameters are not added, the html frame is not rendered properly.).
  3. iframe declaration at the bottom of the file
I am sure there are a lot of things can be done to improve the usefulness and the performance of the component. If you come up with something interesting, please let me know.

20 Comments:

Anonymous Anonymous said...

Very Cool Mate, I have used this approach before but was pointed to two problems with WMODE=OPAQUE; 1. the blinking-bar cursor doesnt display on text fields and two the shift-tabbing (ie oposite direction of tabing) through the text fields doesnt work.

There are a mix of these issues in the last few version of the flash player 9. Some with one some with bith, and 9.0.15.0 was fine from memory. Just a heads up.

Campbell A.
www.xsive.co.nz

1:15 AM

 
Anonymous Anonymous said...

One problem: this approach doesn't work with Safari.

2:50 AM

 
Anonymous Anonymous said...

This didn't work in Safari. The webpages disappears at load and only shows for half a second when i roll-over one of the tabs.

Maybe the iframe is beeing pushed behind the flex app?

5:43 AM

 
Anonymous Anonymous said...

While developing a Flex app for I client I used this solution for one piece of the app.

What I learned is wmode is VERY FLAKY! Especially on Internet Explorer. Input boxes and buttons throught the application had missing hit areas, and in some cases could not be clicked at all.

After a few days of head-banging, I realized wmode was the culprit. As it turns out, setting wmode to opaque is not necessary on IE, so now I am browser sniffing and only setting the wmode for Non-IE browsers, and the results are far better.

Gus

6:54 AM

 
Anonymous Brian Deitte said...

I created an updated version of Christophe's code as well:

http://www.deitte.com/archives/2006/08/finally_updated.htm

There's also 50+ comments on the post that discuss the approach and problems with it.

9:44 AM

 
Blogger aadi said...

hi,

when i have downloaded given zip file of application & run on local machine it wont give exact effect which i have seen on internet.

Its giving me error,while tryig to run on local machine.

11:46 PM

 
Blogger Paritosh said...

Hi all,

I downloaded the code and tried to run it but it don't work why i don't know? Can anybody help?

6:14 AM

 
Blogger Attitude said...

I was so happy to see this piece of code, coz its exactly what I was looking for in a project im working on. But it didnt work when I ran it locally... Please help me sort this issue out! Thanks!

1:03 AM

 
Anonymous Anonymous said...

Hi, i tried this IFrame component and it works, Nice. But i have an issue here, i have some drop down menus, these menus are going behind the IFrame, how can i get it on top of the iFrame content ?

7:05 AM

 
Anonymous waxm said...

hey,
I am using this but get a problem. I am using iframe component on a popup titlewindow. as soon as i click on the border of the titlewindow or the the surrounding area, the iframe vanishes..

any idea how to resolve this.

5:09 PM

 
Anonymous Jayant said...

Great simple example. However I am not able to see it work on my linux box in firefox. The page and the movie loads but the internal pages, google, yahoo or msn dont show up.

Has anyone seen this issue? Is there anything that can be done to get it to work in firefox on linux.

9:30 AM

 
Anonymous Williams said...

Nice code. Thanks for developing an easiest (surely) way of mixing html with flex with the help of iframe.
Thanks!

2:40 AM

 
Anonymous Stephen P. said...

I have been following this through the pipline and your example works well.

I have a page where I'm using this and it works. The bug is that if you leave the page with the Iframe,(IE7) it never leaves and covers everything else. This could be becuase I'm using states for the other pages...not sure yet. My Second hypothises is that the embeded iframe code on the HTML is causing it to stick?

Example: www.homesinnorthwest.com > Click on Search MLS listings. Then once the iframe loads, click on another link. The iframe doesn't go away.

PS - this sites under development so excuse the mess :)

Cheers! & Thanks for the code!

9:43 AM

 
Anonymous Anonymous said...

For everybody having trouble running this on their local machine. Try putting it in Tomcat (or whatever server you're using) and run it through the server.

9:24 AM

 
Anonymous dfm said...

One thing to say: Don't ever ever ever ever ever EVER!!! think of using iframe, do not make this mistake!!! I'm working on big project and because we need to show some search result we need iframe, but there the problems started -> more cpu power required from wmode="OPAQUE", no wheel event... bad slow communication between flash and javascript. Sometimes pars from iframe stay.... Just don't use it.

4:21 PM

 
Blogger Alain Duchesneau said...

I'm in Safari and it works perfectly.

Boths versions 3.1.1 (4525.18) on mac and 3.1.1 (525.17) under windows

10:59 AM

 
Anonymous Rajashekhar said...

its a good example.

but it have a problem that open google search with "raaaga telugu" click the first result link it is completely navigating to that page.then click the back button it will not come as which has the previous position.

6:50 AM

 
Blogger dhileep said...

Very nice post.

It is amazing for me.

But its only work with IE.
Firefox flickering one time ...

could anyone solve this issue

5:12 AM

 
Anonymous sebasan said...

hi everybody

this is a great trick using html content in flex ... but I got the same bug like dhileep.

My App is flickeing all the time. It shows a piece of a page that contains flash content but you can´t see google for example. On the other hand the example shown here on this page runs also in firefox ... it´s crazy ... could you give us any idea how & why?

thanks Seba

5:29 AM

 
Anonymous Ian Hill said...

I had the same flickering problem, but I fixed it by using wmode="transparent" instead of "opaque". I know this is an old post, but in case the search engines send you here, that's my fix.

4:58 PM

 

Post a Comment

<< Home