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.

36 Responses to HTML and Flex

  1. ryan says:

    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.

  2. Leif Wells says:

    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

  3. 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

  4. Dirk says:

    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.

  5. wow gold says:

    useful post.thanks for ur sharing!

  6. Song says:

    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.

  7. David Welch says:

    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.

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

  9. ggfou says:

    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.

  10. Apranax says:

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

  11. Marcos says:

    Nice post. My need is to display a pdf document inside of a flex interface. I use now an iframe where I show the pdf file, but, as you sad also, there are a lot of problems that comes with iframe and wmode set to opaque. Do you think that I can create a component where to display a pdf, using your solution, or I should try something else?
    Thanks,
    Marcos
    ———————-
    Alex responds:
    Displaying a PDF will be a lot of work, but could be possible. Consider deploying an AIR app instead.

  12. Stephen says:

    I made something that takes html and then puts it onto the screen.
    Not quite as sophisticated as yours :p however it does work 🙂
    can be found here
    http://code.google.com/p/flex-htmlfilter/

  13. Steve says:

    I’m trying to display IFrame in a popup. doesn’t work. any ideas please?
    ———————
    Alex responds:
    Not my area. Ask on Flexcoders

  14. Rahul says:

    Hi,
    I am trying to use to a dynamic html being loaded from
    http://abc.dfe.com/123.html but I am getting an error
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at flex.html::HTMLElement/processAttributes()[C:\Documents and Settings\aharui\workspace\FlexHTML\flex\html\HTMLElement.as:390]. Please help
    —————————-
    Alex responds:
    These examples are unsupported. You’ll have to debug it yourself or ask for help on FlexCoders. It looks like somehow a null is being passed into setting outerHTML

  15. Trevor says:

    Has anybody picked up the ball on this.
    It would be really nice for this to become available. (After a bit of a mare with rendering html).
    If nobody has picked this up I would be more than happy to and sort out a small team (Already have volunter) to complete this.
    ——————
    Alex responds:
    AFAIK, nobody’s off and running with it. There is another effort going on at http://osflash.org/projects/wrapper but I haven’t followed it. If you want to get the ball rolling, feel free.

  16. Trevor says:

    Alex,
    thanks for the go ahead. I have looked quite extensively at the wrapper option and it is very good. But slightly different to the intension here.
    I will keep you informed…

  17. dialloma says:

    Hello,
    Great JOB.
    I’m verry happy to see this contribution. I would like to use it in a verry big project. Is’there some documentation on how to use this librairy. I mean, some AsDoc, and some examples on how to use certain classes (Component).
    thanks
    dialloma
    ———————–
    Alex responds:
    No documentation, no support. This is just a prototype. Contact some of the other commenters. Maybe they can help.

  18. Mike says:

    Does anyone know more already about the display of dynamic html already ?
    Would this be through XML??
    Thanks,
    Mike
    ———————-
    Alex responds:
    I’m not sure I understand the question.

  19. Seems like this is very important to wider/deeper Flex adoption says:

    Great start. Any new developments since Feb 09?I could really use something like this. Being new to AS, I wish this was just a little bit more baked – maybe handling some common badly formed HTML (like a missing closing tag) and an easy way to map specific html/xml tags dynamically to some kind of custom htmlItemRenderer.Anything coming in Flex 4 that would help with displaying HTML natively?

  20. II says:

    What about displaying .rtf in Flex?

  21. Alex Harui says:

    I haven’t had any time to work on this.
    The Flex 4 TextLayoutFramework will do some kinds of HTML better, but I believe it doesn’t have table support.
    If you scan the comments there is a link to a third party effort.

  22. Alex Harui says:

    It might be possible to write a parser. Good luck.

  23. mani says:

    Hi,
    Can you please just clarify me, the above component renders table tag but does not show the grid lines. Whether given code does not support it or it is a mistake from my end?

  24. Alex Harui says:

    I don’t think it is implemented yet.

  25. sai says:

    Hi i am getting the below error when the html file contains tag. Anyone know how can i solve this problem. Thanks in advance to all.
    TypeError: Error #2007: Parameter url must be non-null.
    at flash.display::Loader/_load()
    at flash.display::Loader/load()
    at flex.html::Image/commitProperties()[C:\Documents and Settings\aharui\workspace\FlexHTML\flex\html\Image.as:83]
    at mx.core::UIComponent/validateProperties()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:5807]
    at mx.managers::LayoutManager/validateProperties()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:539]
    at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:689]
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8628]
    at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8568]

  26. Ashish says:

    Thanks Alex,

    This is really a helpful library for my project, flash devlopers can hope for the better support to HTML from FLASH PLAYER in future.

  27. Jian says:

    Hi Alex,
    Is there any way to make the displayed text could be selected?
    Could you give me some hints with this question?
    Thank you.

    • Alex Harui says:

      If I were to try to support selection, I’d just add mouse handlers that detect the drag-creation of a rectangle, then walk all the children and see who intersects that rectangle.

  28. Peter says:

    Hello,

    I’ve inherited a Flex project w/ a problem I think your code would solve. It’s pulling HTML formatted string content from an XML file and inadequately displaying it (e.g. no tables) using “TextConverter.TEXT_FIELD_HTML_FORMAT”.

    I’m brand new to Flex (though I have some AS background), and I get the impression it’s a simple process to import the code into the project and call it – but I’m not sure where to begin..

    Any assistance getting pointed in the right direction would be awesome!

    Thanks in advance/anyway,

    Peter

    • Alex Harui says:

      You’re welcome to give it a try, but caveats apply. If you copy the code somewhere and point your source-path to it, you should be able to use it.

  29. JC says:

    Hi

    Just wondering. Now with Flex 4 we have TLF.
    Can your code with TLF, how easy is it to integrate this with TLF.

    We are basically looking for a html renderer that can do simple html rendering that TLF can do now with table and bullet support on top. I have not go through your code in details but it sound promising.

  30. Peter says:

    Hi:
    I’m using your component, and I have one doubt, I want to show one page that it has one image, but this doesn’t show, how can I do it?

    thanks in advance.

    • Alex Harui says:

      I think you’ll just have to debug into it. Make sure the image loads, then see how it reports its size.