« Debugging Tricks | Main | Threads in Actionscript 3 »

HTML and Flex

In case you didn't know, the Flash Player is not very good at displaying HTML content. Since the Flash Player is the foundation for Flex, Flex apps deployed on the Web aren't very good at displaying HTML either. In the Adobe AIR Player, essentially a full browser is built in and HTML content is rendered faithfully. However, the amount of code required to display HTML in AIR is measured in megabytes and is too large to be included in the Flash Player download at this time.

Various folks have made reasonable attempts to get something to work in Flash. There is the DENG project . And popular among many Flex developers is the third-party HTMLComponent which uses the IFrame trick to display HTML "over" chosen areas in your Flex application. FABridge lets you integrate your Ajax application with Flex widgets.

None of these solutions are fully-integrated with Flex in the sense that the HTML is part of the Flex DOM. Right after 2.0 shipped, I was doing some testing on how fast Flash Player 9 and ActionScript 3 was and hacked together a little test which grabs an XHTML file, parses it using E4X, and creates a UIComponent for every HTML tag and one or more TextFields for every run of text. It ran suprisingly fast. I put it down to get on to Flex 3 work and poked at it a bit since then. I finally found time to fix post this code. You'll see that there are many bugs and missing features.

To fully finish off HTML rendering and CSS, fix bugs, etc in this code is outside of the scope of Adobe's focus at this time. It might make a great community project if some of you want to take on the effort. I'm no expert in HTML so you may or may not want to start with the code attached here. This test just proves the feasiblity of mapping HTML tags to UIComponents so there is better integration with Flex and better HTML rendering than you can currently get in the Flash Player.

Source Code for flex.html.*
Source Code for test files for flex.html.*
SWFs, HTML, etc for test files for flex.html.*

The zips can be imported into FlexBuilder 3. I didn't post the SWFs because you need to run out of your local sandbox to get around security restrictions, so it is best to download the files, import the projects, build them and run them.

Personally, I don't believe most of you need a full browser. You probably just have 'plain' HTML documents that don't run scripts, don't do fancy DIV stuff like wrapping text around images, etc. So you might be able to fix a few bugs and get what you want to work in relatively short order. You probably also don't need to wade through hand-authored HTML and 'bad' HTML. All of that sutff adds weight to the code.

For example, htmltest3 in the test zip is test for the superscript/subscript tags. Maybe all you need is a few tags like those plus bold and italic.

The hmltest2 test also shows the principle of dynamic UI. You can send your UI over as XHTML and by wrapping your Flex component appropriately, you can generate the UI from the XHTML description. Notice the DataGrid in the document.

The code has an IHTMLElement interface so you can talk to it in DHTML/AJAX-like ways. There's even the beginnings of an XMLHTTPRequest class. There is also a class that tries to clean up bad HTML.

Have fun, hope it helps, and DO NOT REPORT BUGS. I will probably delete all comments reporting bugs as this is totally unsupported by me.




Comments

would be nice if it were a runtime shared library... sounds interesting, thanks for sharing this...

------------------------

I wrote it so you could only add in the tags you need in order to save size. If it ever gets polished enough, then you could make a case for it to be cached.

I just did a run through for this project and am interested in assisting. Have you thought about putting this project up on Google Code?

Let me know how I can help you out.

Leif


There are some very capable web browsers from 300k through 1.5megs - or it looks like there are on Google.

300k would be very doable, even a several meg file, now that FlashPlayer9 has persistant object/component storage where approved components are saved from previous trips to the net.

Sure do wish Flash could contain/display HTML.

Thanks for the effort.

----------------

That's the key: the implementation would probably have to be done in Actionscript. Maybe the community will get together and make it happen

thank you.

Hi Alex,

have you seen "Wrapper" - it's amazing:

http://osflash.org/projects/wrapper

Dirk.

----------------

Haven't had time to dig into it. They went public the day after I posted this. Not sure if I forced them to or not. Someone said their stuff doesn't do Tables yet, but I can't confirm that.

I don't have any particular need to see my version become 'the' version. As long as somebody's working on it.

useful post.thanks for ur sharing!

is it licence free?Thanks.
i can't find any licence file in the source folder.

--------------

This version has an Adobe copyright. It will be removed when James gets the open source repository up and working.

Personally, I don't have any problem with you using it.

Very nice, I've used some of this to adapt to an XHTML-like tool generator that creates simple Flex forms.

Any news on making this an open source project?

-----------------------
Alex responds:

Check with James Ward (jamesward.org). There is another third-party open source effort around as well. I don't recall the name right now, but you can probably google for it.

Thanks, Ive been searching for this and found you on google blog search.

is it licence free?Thanks.
i can't find any licence file in the source folder.

---------------------
Alex responds:

It is not under license so you can do what you want with it. There are no warranties either.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)