UPDATE! The HTML Component has been updated. It is now at version 1.8.4 and contains new features and bug fixes. If you are having issues upgrade the component. Please post issues at the new version 1.8.4 release page.
I have been spending the last few months working on an HTML Component for Flex. The reason being many developers, including myself, need a way to display HTML markup in our Flex applications. Since Flex only renders a subset of HTML tags it was clear that not all HTML content would be viewable. It was also clear that not every html page made could or should be translated over to the subset that Flex provides. It was also not practical to put all HTML content into a Flex application. Also, John said Flex cannot compare with HTML because Flex does not have the blink tag… :P
So my main goals were to make a generic Flex component that allowed you to add HTML to your application as easy as adding any other component to your application. I wanted to be able to supply this component with a url to an html page (or php or whatever) and have it display it. I also wanted to just give the component HTML code and have it display that. For example, I wanted to supply it with a chunk of HTML like a post from a blog. I wanted to be able to move it around and resize it. I wanted it to automatically resize to the height of the HTML content so there were no visible HTML scrollbars. I didnt want it to look like it wasn’t part of the Flex application. I wanted to be able to display multiple instances. I wanted to provide a fall back mechanism so users of yet to be supported browsers would still see a working application. I wanted to talk to HTML elements from Flex and get a value back from it. I wanted it to do everything basically.
It’s beta but so far it works in Firefox 1.5+ and Internet Explorer 6, 7 for PC. I haven’t done extensive testing on other browsers (someone send me a macbook puhleeease or sell me one cheap :)) but I’ve heard reports that it runs ok in those browsers.
Update in version 3: Many of the original issues in this post have been addressed. This now works in Safari (Safari version 3 or greater) and issues have been resolved in the Flash Player or with workarounds.
I’ve created some demo’s to demonstrate loading a 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 displaying HTML code
The third demo shows the HTML Component in a Tab Navigator.
HTML Component in Tab Navigator
The fourth demo shows the HTML Component as it would appear in an unsupported browser.
HTML Component in Unsupported Browser
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 view on 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.
This component is free. :)
Update Dec 2007: Thank you all for your feedback and support. I no longer have time to support the free version. If you would like to use it is located at http://drumbeatinsight.com/forums/viewtopic.php?t=610. This version does not work with pop ups, does not work with Flex Builder 3 and does not have some of the features or refactoring done in version 3. It should work for most applications but do not expect support for it. Again, I apologize but I just do not have the time.
If you would like to support future components and projects like this or you just want the component source code you can purchase it or any of the other components here.
Note: There are some issues in some browsers (mostly minor that you may never run into). These are not the fault of the HTML Component but of I believe they exist because the integration of the Flash Player plug-in in some browsers (*cough cough firefox, safari*) have never been stress tested like this before. You can email Adobe and the browser manufacturer to get these fixed. If you find any bugs please write down the steps to reproduce them, if possible using the examples above and mention them here (at this page) and to Adobe and the browser manufacturer. Deal?
Update Dec 2007: Numerous bugs have been fixed in the latest versions of Flash Player and Safari 3 browser.
Download the HTML Component
IMPORTANT NOTE! Please read the included quickstart pdf before posting questions. The component requires an additional step than typical components for it to work.
HTML Component using source property
Code
HTML Component using htmlText property
Code
Note: There is another HTML Component out for Apollo with similar functionality named “HTML Control.”
Is there any way to make this work in Apollo? Tried but it gives the following errors:
Error: Error #2067: The ExternalInterface is not available in this container. ExternalInterface requires Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime.
at Error$/throwError()
at flash.external::ExternalInterface$/call()[C:\Documents and Settings\acrorel\Local Settings\Temp\aslibc-26332\ExternalInterface.as:371]
at com.flexcapacitor.controls::HTML/set source()
at mx.core::Container/createComponentFromDescriptor()
at mx.core::Container/createComponentsFromDescriptors()
at mx.core::Container/mx.core:Container::createChildren()
at mx.core::UIComponent/initialize()
at mx.core::Container/initialize()
at mx.core::Application/initialize()
at newscraper/initialize()
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::childAdded()
at mx.managers::SystemManager/::initializeTopLevelWindow()
at mx.managers::SystemManager/::docFrameHandler()
Hello,
i’ve a question.
Is possible put into the tag htmlText the code of functions JavaScript?
How i call functions JavaScript from the code in htmlText?
thanks from spain.
Hi Judah,
Very nice stuff you have here. I got a question that is similar to Juan. I’m trying to run the following:
<script> id=”widget-script” type=”text/javascript” src=”http://www.bookjetty.com/widget.js”></script>
i did this by putting wrapping it in a div but it doesn’t appear. Any ideas?
@Erki – a few years ago this was not supported in 9 out of 10 browsers. only ie6 fully supported this use without any problems. now only a few browsers do not fully support this. all major browsers do except safari (nightly build of webkit has full support for this)
@James – try the newest version. some files were missing from the first release.
@Clint – scroll has been fixed in the newest version 1.8.4. i really got stuck on this problem for a month. no joke. i finally found some events on the scrollbar and a simple solution to get it fixed.
@Steve – these issues should be resolved (as you said in your own words) ;).
@Anton – Hmm… I haven’t tried it in Apollo. Apollo has its own HTML Component called HTML Control. btw, I decided to keep the name HTML Component because,
1. that was the original name before I heard about the Apollo HTML Control
2. that is what it is. It is not an HTML IFrame component. It can create an IFrame or a Div or an editor such as FCKEditor which uses a combination of both.
3. with namespaces it is really Flex Capacitor HTML Component. Namespaces were invented for this reason. Flex Capacitor Label, Drumbeat Insight Tree, etc.
Anyway back to the point. You should use the Apollo HTML Control in your Apollo app and this one in your web app. I have not tried doing this but I would like to see an example.
@Juan, Mark – I don’t think you can embed Javascript script blocks within the htmlText property. At least not in all browsers. I read recently about JavaScript Injection technique on a blog that does this but it is a function call. I do not have the link (search for joan on http://www.dougmccune.com) . I do not know if it is compatible or not with many browsers but looks to be a similar solution. What I would recommend you do is include script in the HTML wrapper page.
Hi Judah,
Thanks for the reply. Couldn’t find joan on http://www.dougmccune.com but i found a reference to a javascript injection technique by http://www.abdulqabiz.com from the above. Tried that too but still can’t seem to work. I guess all current methods of utilizing javascript is to call a specific method of javascript. However what I’m trying to do is running a javascript block that does not have any calling method.
The only way I can think of successfully doing this is creating a div over the flex/flash movie and use flex to control the display of that div.
@Mark - That's what the HTML Component is doing for you. You can call JavaScript functions from the code in your htmlText code.
htmlText:
Here is the javascript injection technique I was talking about, JavaScript Injection. I haven't had time to test this technique but I would love to hear back about what browsers it works in.
You can also put a JavaScript function calls in your HTML Wrapper and then call the functions from your HTML.
Hi,
Is there any other solution to load HTML content in flex.
Here you have used a div which is positioned absolute. this works if the application doesn't have scroll but in case of applications which have vertical scroll the div floats.
Thanks,
Sudesh
Hi,
How can I integrate HTML component with Flex AIR? Any one with experience with this issue? Any advice and links are appreciated. Thank you
[...] Component for Flex December 7, 2009 mukeshinpossibility Leave a comment Go to comments HTMLComponent is the component used for showing html content in Flex application.It is free swc file and source [...]
[...] AS3 and AIR 2.0(beta version) are supporting the touch events including multitouch and gestures. On lucamezzalira you can read more. Now I can create the application in As or in AIR running on Touch-Screen devices. [...]
Is the HTML Component for Flex still available? The website does not show anything.
Hi
I have seen the demo of this HTML component, but coud not able to download from the above link. Can I have any other alternative to download this component.
Thanks in advance.