Flex: IFrame demos updated to Flexbuilder 3 & Other stuff

Flex IFrame

I have updated the IFrame demos source code to Flexbuilder 3. You can find them on the project page here.

A recent correspondence reminded me that there is a problem with loading local html when developing with Flexbuilder. I haven’t figured out the problem yet but if you use IE as your browser with Flexbuilder then local html doesn’t render. If you deploy it to a web server it works fine, aaargh!

I am thinking that it has to be an IE security setting but after a fair bit of playing around with the settings I am none the wiser. My advice is to use Firefox for now.

You can set the default browser for execution/debugging through the Flexbuilder preferences settings:

Window-Preferences/General/Web Browser.

Choose Firefox (assuming you have it installed). If you don’t have Firefox installed then I suggest as a web developer you do.

If you are using the IFrame then I would like to hear from you. I know some people have employed it in various ways. If you make general improvement that you think would benefit others then email me and I will include it into the demo sources.

Social Graph Browser

Sample App

As I don’t have any updates as yet to show I thought it might be worth mentioning that I have been working on this to extend the rendering of the nodes to show ‘favicons’. I thought this would be straightforward but it’s turned out to take more focus than the entire graph browser took to write.. and it’s still not complete. I have 75% of it done but I am finding myself immersed in documentation for icon file formats which was something I hadn’t expected.

As part of this I have created an application called Favicongrabber which demonstrates the technique. It’s not for everybody as it uses a Python script to download the icon and compress it to Base64 which is then decoded on the Flex side (somebody please tell me there is an easier way). I am completely bloody minded at finishing stuff so I hope to have something to show soon which I think is probably going to be of interest to anyone who want to grab images from remote sites using AS3 and in particular ‘favicons’.

Comments

38 Responses to “Flex: IFrame demos updated to Flexbuilder 3 & Other stuff”

  1. kumar on March 18th, 2008 6:16 am

    Hi Alistair,

    Thank you for the detailed explanation. I was wondering if it is possible to show the HTML page in an IFrame within a TitleWindow. I pass the URL as a parameter to the window.
    Any help is greatly appreciated.

    For eg.,

  2. Administrator on March 18th, 2008 12:14 pm

    Kumar, I do know that others have done this. I do not know how it was achieved though.

    Al.

  3. kumar on March 18th, 2008 4:11 pm

    Alistair, thanks for the response. I appreciate it.

    Kumar

  4. Jylaxx on March 18th, 2008 7:32 pm

    Hi,
    I try to use an IFrame in a Module but it is not visible !!
    It is working if I put the same code in the application.
    Any idea ??
    Thx

  5. Administrator on March 20th, 2008 12:50 am

    Jylaxx,

    Please see the ‘Things to remember’ section at the bottom of the ‘Flex IFrame’ entry in projects page (you can reach this from the homepage of netthreads).

    I suspect you have not made the modifications for ‘wmode=opaque’ in you html template page.

    If you examine the ‘index.template.html’ file in the downloadable samples you will see that there is a slight modification to add ‘wmode=opaque’. Alter your ‘index.template.html’ accordingly.

    Please tell me if you are successful. I am here to help.

    Al.

  6. Gegebelzebuth on March 20th, 2008 10:10 am

    Hello i’m a newbie in flex and your demo is very usefull for me, thank you !
    I try to use drag n drop in my application instead of clicking on the website name to change the url.
    The only way i know to do this is to use the dropEnabled property but it’s not possible on the IFrame.
    Do you know a way to enable it ?
    Thank you

  7. Administrator on March 20th, 2008 1:28 pm

    Gegebelzebuth,

    Interesting question. Since the html frame is essentially a hole punched through the Flex application there is no dragenabled support. Once you are over the hole you have left Flash-land.

    If you can detect the mouse has entered the area which bounds the iframe you could then set the source. Whether the Flex app at that point could detect the mouse-button up or not is debatable, I suspect not.

    Al.

  8. DomPazz on April 8th, 2008 5:48 pm

    First, thanks for your work on this!

    I’m building an application that talks to an analytics server. Sometimes I get results back through my RPC as a string of HTML. This looks like it should allow me to display this string.

    I’m running into a few problems:
    1) Improper hiding. I run an analysis, get some output (3 types, log, text, and html) which I have in an accordian view. If I am last looking at the HTML, close the tab for the results, rerun the analysis with different parameters, then the old output is visable on top of the accordian. I assume I need to listen for an event and do something to properly close down the old IFrame. The which and the what I am still working out…

    2)My IFrame sits in a Canvas which is in an Accordian. Long HTML seems to over run the bottom of the containers.

    3)HTML renders properly in Firefox, but not in IE7. It renders, but the CSS information seems to get lost. Ideas on what could be going on?

    If you are interested, a sample output file is at http://www.talonrisk.com/apps/output.html

    Thanks
    Dom

  9. Administrator on April 9th, 2008 9:44 am

    Dom,

    Firstly, if you haven’t read the notes at the bottom of the IFrame entry on the Projects page then do so now.

    1) Loading the iframe contents was a contribution which I haven’t tested exhaustively but as someone is using it – it should work. The content setter is where you pass your div contents in

    frame.content = “myhtml”

    I have used multiple iframes within an accordian and it should work as long as you ensure you give each instance a different id.

    2)There may be an issue with this combination. Try putting the IFrame inside a Box instead.

    3) Have you remembered to use set the wmode=opaque setting in your html file?

    If you run your IFrame application locally under IE7 it will not render the page at all. This is mentioned in the ‘Bugs’ section on the Projects page. If you access your application via a web server i.e. when it is deployed or through a local installation of Apache it works fine. I have so far no solution to this. You will have to develop under Firefox.

    Your html looks pretty bog-standard so I can’t see that there would be a problem rendering it unless you have some CSS tricks in there which are breaking the flow nature of the page.

    Al

  10. harley on April 9th, 2008 11:27 am

    Hi..
    really was glad to find the iframe class improved.
    additionally, the fabridge was really new to me and you have combined the two.
    I have an active x plugin which loads into through the html and then loads into the flash player. I downloaded your openmaps example, but it was missing the html wrapper, unless i missed something.
    could you explain more about how your using the bridge with the iframe… thanks.

  11. DomPazz on April 9th, 2008 3:38 pm

    Hi Al,
    Thanks for the reply. I did read the notes which got me through the normal hurdles like “wmode=opaque”, and setting visible=true.

    Starting from the bottom:
    3) Yup, I am working off a server and have the wmode=opaque set. IE displays the HTML. It just doesn’t recognize the CSS.

    Thanks again for you work on this and the help you are providing!
    2)No dice. It still over runs the bottom (and maybe the right side). I took a screen shot http://www.talonrisk.com/apps/over_run.png. http://www.talonrisk.com/apps/over_run_ie.png shows the problem in IE along with the no formatting issue.

    1)I hear what you are saying about the id values. Right now, the iFrame is in a component, declared in MXML with a static id. It is when I add another instance of the component to my SuperTabNavigator that I start to see issues. Would creating the iFrame in Action Script and assigning a random string to the id value help?

  12. Paul Cotterell on April 23rd, 2008 2:20 pm

    Hi,

    Firstly, Great work on the IFrame component.

    I was wondering whether you know of any issues that you have come across with IE6? My IFrames do not appear in IE6 but do in FireFox and IE7.

    Thanks

  13. Administrator on April 23rd, 2008 8:25 pm

    Paul,

    There is an issue with the frame contents appearing under IE when running under Flexbuilder. This issue is for both IE6 and 7 though so it might be that you need to add the wmode=opaque setting in the html holder page. See the ‘Things to remember’ section on the Project page.

    Al.

  14. Paul Cotterell on April 24th, 2008 1:13 pm

    Hi,

    Thanks very much for the reply.

    I have implemented the IFrame component in a flex application that is on a hosting server and everything appears fine on IE7 and Firefox but still having a problem getting the content in the IFrame to show through on IE6. Have you had any issues with IE6 before?

    thanks

  15. Administrator on April 27th, 2008 1:43 am

    Paul,

    That is very strange. I haven’t come across a problem with using the IFrame under IE6 specifically. You say the frame do not appear. Daft question I know but can you explain what you mean by this a bit more? Is is possible the DOCTYPE or something like that in the html contents you are trying to display is somehow causing the contents not appear?

    Al

  16. R. Grimes on June 4th, 2008 9:31 pm

    I’ve been playing with this for a couple days now. Works great, but I haven’t been able to get a menu bar sub-menu to drop down over the IFrame component. Even if I manipulate the z-index ordering, the sub-menu drops between the IFrame component and the iFrame div (underneath the web page but in front of the Flex component).

    Any ideas how to get this to work?

    Thanks,

    Ron

  17. Administrator on June 8th, 2008 4:31 pm

    Ron,

    Is it not possible to have any Flex/Flash elements appear in front of a visible IFrame. The reason for this is that the IFrame is a hole punched through the Flash layer to the Browser. I have in general avoided any UI design with pull down menus because of this.

    A solution is to set the frame visibility to false when you trigger the menu and then reinstate it when the menu is closed.

    You can see this technique in action with a popup dialog (About) in the simple IFrame map demo here:

    http://www.netthreads.org/netthreads.co.uk/flex/iframe/IFrameMapDemo.zip

    The about box switches the visibility of the map off and then reinstates it when the popup is closed.

    Al.

  18. Ron on June 12th, 2008 5:29 pm

    Thanks for the tip on the dropdown menu dilemma.

    What I ended up doing was switching to an Accordion component on the left side as my navigation menu.

    Btw, my project (Employee Benefits) has received very positive reviews, using your IFrame component as the centerpiece for displaying content.

    Thanks,

    R. Grimes

  19. Administrator on June 16th, 2008 5:08 pm

    Ron, I am glad you resolved your problem. It’s always good to hear people are making use of this component.

    Al.

  20. Sunil on June 17th, 2008 5:48 am

    Hi,

    I have imported the Flex 3 projects in Fle 3 Builder. When I run the demo, nothing gets loaded. None of the examples are working for me. I am using Firefox on Mac. If I run the demo from the links you have provided, it runs fine. Just does not load on local machine.

    If someone is aware of this problem on mac, can you please recommend me a solution.

    Thanks,
    Sunil.

  21. Administrator on June 18th, 2008 11:57 am

    Sunil, If it works from the links then it should work under FB3 okay. I am not aware of any particular problems using the mac for development. Can you confirm the first and simplest demo on the projects page “HTMLTest” for FB3 does not run properly with FB3 on the mac?

  22. Jordan on July 28th, 2008 6:50 pm

    I believe I found a solution for ‘running your IFrame application locally under IE7’ – at least this worked for me. Basically, we just add what is called the Mark of the Web (MOTW) to the content we want to load.

    Add the following to the top (immediately following the !DOCTYPE declaration) of the html/xml page you’re loading into the iFrame;

    See http://kbalertz.com/899291/references-files-script-references-these-files-Windows-Service.aspx
    for more info.

  23. Jordan on July 28th, 2008 6:54 pm

    Sorry, forgot to escape the html – insert this at the top of the page you want to load into the iFrame;

    <!– saved from url=(0014)about:internet –>

  24. Administrator on August 1st, 2008 11:31 pm

    Jordan,

    Just back from my holiday/vacation. I will check out your link. Thx.

    Al.

  25. Andrea on August 13th, 2008 1:28 am

    Hi,
    I have the same problem as Sunil.
    I’m on Mac and I use Firefox3. Nothing loads on firefox, even with SimpleHtml.

    Anyway it works fine on Safari (-:

  26. Administrator on August 13th, 2008 1:16 pm

    Andrea,

    Very strange. I guess as long as you can use develop against Safari it’s not so bad. I assume when you deploy under a web server it renders okay with Firefox/IE.

    Al.

  27. Terence Ou on September 2nd, 2008 5:11 am

    The above .mxml for the application doesn’t work. I have already done the settings for wmode=opaque and it only works if my container is a tab navigator and doesn’t work when its not within anyway container or in a vbox. What is wrong?

    thank you for your time.

  28. Administrator on September 2nd, 2008 9:09 am

    Hello Terence, You may have to set the visible flag=true on creationcomplete if the frame is not within a container type control.

    Try this and tell me how you get on?

    Al.

  29. JZ on October 17th, 2008 3:39 pm

    Is there a way to get rid of the scroll bar on the Iframe. I am setting up a monitor display that no one will actually use, just look at, and i can’t seem to get rid of the scroll. Any ideas?

    thanks for the help

  30. Administrator on October 18th, 2008 12:47 am

    JZ,

    I guess the only way to do this is though the html itself.

    Al.

  31. lakshmi on October 22nd, 2008 8:31 am

    Hi,

    Had anyone suceeded on local html issue on IE???

    Thanks.

  32. JS on October 28th, 2008 11:01 pm

    Thank you for your work. However I ran into a problem when using the IFrame.as and have to modify line 253 to “if (this.visible && (event is IndexChangedEvent))” to resolve my issue. Thanks again.

  33. Daniel Miller on October 29th, 2008 10:51 pm

    I too am trying to load the IFrame control w/in a Module w/ no luck. I’ve set visible=true a million times and ways (as well as includeInLayout). There must be something with the way modules are rendered that borks with the iframe; the frame is there, I can see its existence in Firebug; it is just obscured the same way it would be when the embed is missing wmode=opaque.

    Any help would be welcome, compensation is def in the realm of possibilities…pretty far down this path and changing from the modular architecture has a lot of consequences I would like to avoid.

  34. Administrator on October 30th, 2008 12:13 am

    Daniel,

    You will have to give me some more details. Just email me at the address in the about page.

    I am here for you to help no compensation required.

    What platform are you attempting to get this working on?

    Al.

  35. Administrator on October 30th, 2008 12:14 am

    JZ,

    Yes you are correct the IFrame has no control over the html page. Trial and error are your friends on this one.

    Al.

  36. Daniel Miller on October 31st, 2008 1:02 am

    Al,

    The newest version of the IFrame released today seems to have whipped it. Thanks for all the work, and the new home on Goog Code.

  37. Zahid Chaudhry on May 15th, 2009 9:06 pm

    I tried this iFrame and it work fine in internet explorer and cant use it in firefox…see the link

  38. Administrator on May 17th, 2009 3:07 pm

    Zahid,

    Please read the FAQ on the iframe google code page.

    http://code.google.com/p/flex-iframe/wiki/FAQ

    You have missed the wmode=opaque setting.

    Al.

Leave a Reply