Update: The HTML Component version 1.8.4 has been released. Read this post…
I have been spending the last few months working on an HTML Component for Flex. It is not just an IFrame component like a few others out there. My main goals were to address real issues that real developers making real applications in the real world need. For real. What does that mean? You can load html pages simply by specifying the url. You can also enter raw HTML in your Flex app and display it. You can load raw HTML externally from a database and display it. You can display a HTML wysiwyg rich text editor and set and retrieve the HTML generated code. This is provided through the HTML Component for Flex. You can communicate to and from HTML. You can move it, resize it, hide it and show it. If the browser doesn’t support it there is a fall back mechanism to provide alternative htmlText. You can have multiple components at the same time. You can resize the HTML component to the height of the HTML content to get rid of the scrollbars. This feature is called the fitContentToHeight feature.
I’ve created some demo’s to demonstrate loading an local html page and a remote url.
HTML Component loading remote and local urls
The second demo sets the htmlText property of the HTML Component.
HTML Component setting HTML code
There are two main methods you can use. The first is to set the URL to the page you want to view local or remote (Note: local relative pages do not load in IE when in the file system – to fix load to localhost or a remote server). The returned page will show inside the HTML Component.
The second method involves setting the htmlText property. When this property is set any HTML is displayed in the component.
As you move and resize the component the HTML moves and resizes with it. Showing or hiding the HTML element.
Note: There are a few minor bugs. If you find any bugs please mention them here.
Note: The scripting code is very messy. It will be cleaned up before a final release.
Note: I am doing this component as a donation to the community.
UPDATE: The HTML Component version 1.8.4 is out. Read this post…
nice. will this work for “popped up” stuff like TitleWindows for say help systems?
in any case, when will you be releasing the code?
Very nice work !. It’s great your donating it to the community as well. I noticed you haven’t solved the problem of a html page taking over the entire app. Were by some pages you navigate to will take over the top level browser window (not really that big of a deal). I really like the fact it keeps the history, not sure if this is intentional or not.
Anyway I’m interested in using this. Keep up the good work. If I can help with it in any way I’d be willing.
Jason
@Paul – It should be able to. I’ll run a test on it today. I’m not sure yet if I will be releasing the component code. I’ll be releasing the swc and html template in the next couple of weeks. A portion of the code that makes this work is in the included javascript file which you’ll have access to. If there is something else that you need let me know.
@Jason – If you know of a way to prevent a site from “breaking out of frames” so to speak I’d like to know. I don’t think its possible to manipulate the javascript (that does this) in another domains frame.
this is excellent. thanks for the hard work.
Great Stuff! I’m sure more than a few people would be willing to pay for the source code. I’m one of them! Again, nice work!
Nice work! I actually need something like this in a project now, so you made your goal of adressing real issues in the real world!
The htmlText property of the TextArea component seems to be of quite limited use.
Hope everything turns out well and you will be able to release this soon!
Hakon
This is great. Can’t wait to get my hands on it.
Have you solved the problem of having the component automatically hidden? For example, let’s say you have the HTML component in one tab and when you go to other tabs or you hide the parent component, you want the IFRAME to automatically hide. I was able to get the IFRAME hack working, but could not find a way to have the IFRAME hidden automatically when the component’s parent object was not shown.
Let me know when we can start playing with this.
Thanks,
Very nice. I could definitely use this on a project I am working on now, so hopefully you’ll have it available soon.
This will be one of those great donations to the community.
great work..
It fulfills my need to load raw HTML externally from a database and display it.
Since I don’t have control over the html, I want to ensure that there is no scripting inside (javascript etc) that can be used for malicious purpose. So I’m hoping that the component only displays html formatted text and I should be able to disable any scripting.
Thanks.
This is fantastic! Excellent work.
Looks great! I can tell you from the traffic on my site that there’s a huge number of of people interested in using HTML in Flex. And I’ve also noticed that a lot of people are having issues with the basic iframe solution. I’ll make sure to put a link up to your solution when you get a final release posted.
Beautiful component. I could use this immediately in at least two of my current projects please email me as soon as it is available for download.
Excellent Work. Very Nice.
nice stuff… have u tried it when we have a menu control? and the popup are over the html frame…?
@mirwas – the html component uses a div or iframe that is displayed over the top of the flash element in the browser. so it is the topmost element on the page. though it is not the most ideal solution you can hide the html element by setting the htmlVisibility property to false when the menu pops up or move the html down the page. the html that flash parses will be visible behind the control if you use division method which may be less of a drastic change if you hide the html division or you can use set the visibility to false to completely hide the html element. though, i do not think it is possible to place flash elements above the iframe / div until html rendering is native to flex.
@avi – in division mode you control what html is to be displayed. you can run your html through a regexp before it is rendered. if you are loading a page you do not have access to the html page unless it is on your site and that page does not have access to your page unless it is on your site as well.
thanks for previous answer. is it possible to have a tab component and within each tab your flex/html component is used to display a different HTML page. by moving from one tab to the other, the user would then be able to see different HTML pages. I don’t want to redevelop IE7 or Firefox, but that would be great for my project if your component enables this.
@eric – yeah. check out the tab navigator example included in the download. add another tab that contains a second html component and run it.
Check out http://www.iyoype.com we use similar techniques inspired by some of you to make reading RSS easy. Also have a few other goodies thrown in.
I am having trouble deploying my application that uses your component. All controls other than the HTMLComponent work. I dont know what is wrong. The HTMLComponent remains blank when I deploy the swf on a server and it works perfectly when I run the application from the flex builder on my system.
Any suggestions on how to fix this?
–Anubhav
@Paul (first commenter) – Support for pop up windows have been added. Not complete support for Firefox when dragging mouse over the html but this is a Firefox issue.
@Anubhav – try the latest version. also be sure to make sure the tests run for you. sounds like the html template that goes with the html component was not included. i recommend you install firebug and see if you get any javascript errors.
I am getting error when trying to load the following URL: http://mysite.com/LL/DynamicPage?LLc1s4=MYC_PT_EHIX&LLc1s1=MYC_LN_FJBJ&LLc2s3=MYC_GRD_FJBQ&newdatagrid=true&mgrId=per_10211932
ERROR: The reference entity ‘LLcss1′ must be ended with the ‘;’ delimiter.
Anyway around this? Thanks
@Kenneth – What is the error? It looks like your url has encoded ampersands. http://mysite.com/LL/DynamicPage?LLc1s4=MYC_PT_EHIX& <–look at this, “& amp;”
That or the page you are refering to is a redirect or redirecting to a css file. When I try to access that url I see the home page for that site. Should I be seeing something else?
Anybody have a problem using this in a viewstack and then attempting to resize the htmlcomponent?
I am having trouble deploying my application that uses your component.
I am compiling my application at serverside(using life cycle dataservices)
All controls other than the HTMLComponent work. I dont know what is wrong. The HTMLComponent remains blank when I request myappication.
If you can’t see any HTML here are some things to check. First, test your page with Firefox and also check that you can view the examples listed on this page http://drumbeatinsight.com/htmlcomponent.
Next install firebug http://www.getfirebug.com. This will tell you of any javascript errors on the page.
1. Make sure you are viewing the swf in the browser. It needs the browser to render the html.
2. Make sure to include the htmlcomponent.js file in your project. It is in the same directory as the html wrapper file.
3. Make sure you have copied the html wrapper file to your project.
4. Make sure wmode is set to opaque in your html wrapper file and that you are including the htmlcomponent.js file if you are using your own html page. Compare you’re page to the html template page or example page on the site.
5. If you are testing in Internet Explorer then view the pages on a server (localhost) to see any pages in an iframe. You cannot view certain pages from the file system in an iframe in Internet Explorer. Use Firefox to preview or upload to a server.
Right click on the location that the html component is supposed to be and check to see if you get the browser context menu (as opposed to the Edit or Flash Player context menu).
I am using the 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.
@waxm – hi, any versions before version 3 do not work properly in pop up windows. at the time they were only tested in the live demo configurations listed on the site http://www.drumbeatinsight.com/htmlcomponent. new code was written to handle pop up behavior in version 3.
how is this coming. can you test what this page looks like when it loads?
w3.painteddiaries.com
w3.beatnikcafe.com
I tried using a component like this a while back, possibly yours sorry for being forgetful. anyways, the problem i experienced was the mouse cursor would act up when i tried to load any of this flash content. if you are offering a new version commercially and this issue were fixed i’d buy this in a heartbeat, provided the cost was good.
Hi ,
I am loading a url, the content from url has swf files. So when I load the url I get the it is playing add from the url. My air is to get the play time of swf object that is loaded from url. Please help me.
Thank You,
Venkat.