Home >
The mx:HTML control itself is pretty easy to understand... Its a control in the AIR tool set that enables you to display HTML based content in your AIR applications. You can set the "location" property of the mx:HTML control to render a web page within your application, or you can set the htmlText attribute with HTML content to render it within your application.
In a number of cases, it is a lot easier to format text for display with HTML, rather than create an ActionScript based component to render complex-formatted text. This is especially the case when you have mixed content that should be displayed inline within the content (images, tables, text wrapping, etc...).
Here are a few tricks that you can use to fully take advantage of the mx:HTML control within your applications:
Get rid of the default background on the HTML control so that it appears seamless withing your application.
You can set paintsDefaultBackground="false" and backgroundAlpha="0", and the background for the html control will not be rendered. You can use this approach to make your HTML content seamless with ActionScript based content in your applications. Skins or animations that are in the background will be completey visible (unless you define a background in the HTML content that covers whatever is behind it).
You can use the mx:HTML control to display basically any text within your application; dynamic text messages, debugging messages, transaction logs, or just about anything else. All of the formatting can be done in "plain old", easy to use HTML. The HTML control itself is based on the Webkit engine, so why reinvent the wheel? Let Webkit do the heaving lifting (and formatting) for you.
When you start dynamically generating HTML content in your application, you will start to run into some issues. The first is that every time you set the "location" or "htmlText" properties, the control will re-render all of the HTML content and reset the scroll position to the top. This will happen even if you are just performing a simple addition to the htmlText property, and could potentially cause serious performance issues:
myHTML.htmlText += "add this text";
This will also happen if you use the load or loadString methods on the HTML control's htmlLoader property:
htmlContent.htmlLoader.load( url );
htmlContent.htmlLoader.loadString( myHTMLContentString );
An easy way to get around this is to use a combination of JavaScript within the HTML control, and ActionScript to dynamically append to the HTML content within the HTML control. You can use DHTML techniques to append to the HTML content, which only causes a partial redraw, and does not lose your current vertical scroll position. The big difference is that you will be invoking the JavaScript within the HTML container through ActionScript in the parent container.
First, let's look at the HTML/JavaScript that you can use to to dynamically append to the HTML content. The following shows a simple HTML document that contains a JavaScript function "appendContent" and a HTML div that will contain the content. The HTML content (value) passed into the function will simply be appended to the HTML content of the "content" div.
Now, let's take a look at how this can be applied. The following is the source code for a simple AIR application that will allow the user to input text and append it to the HTML content:
You can see that the HTML content simply loads the html document shown above (content.html). By default, nothing shows when this is loaded, because there are no visible elements within the HTML. In fact, the HTML control has actually loaded the html and the script that is used to append content can now be accessed:
The "appendToHTMLContent" ActionScript function takes the user input, replaces any angle brackets (< or >) with the HTML-encoded values, wraps it in a HTML "div", and then invokes the "appendContent" JavaScript function with the encoded user input. You can access the JavaScript DOM (Document Object Model) for the loaded html through the htmlContent.htmlLoader.window property. Using this technique, you can invoke any JavaScript function using ActionScript.
This appends the user input onto the HTML content inside of the mx:HTML component, does not reset the scroll position, and only causes a minimal impact for redrawing the content.
An added bonus for this approach is that if you want to allow the user to be able to select large "chunks" of content and copy it to the clipboard, then you don't have to do anything special. This is already enabled within the HTML control.
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
In a number of cases, it is a lot easier to format text for display with HTML, rather than create an ActionScript based component to render complex-formatted text. This is especially the case when you have mixed content that should be displayed inline within the content (images, tables, text wrapping, etc...).
Here are a few tricks that you can use to fully take advantage of the mx:HTML control within your applications:
Get rid of the default background on the HTML control so that it appears seamless withing your application.
You can set paintsDefaultBackground="false" and backgroundAlpha="0", and the background for the html control will not be rendered. You can use this approach to make your HTML content seamless with ActionScript based content in your applications. Skins or animations that are in the background will be completey visible (unless you define a background in the HTML content that covers whatever is behind it).
You can use the mx:HTML control to display basically any text within your application; dynamic text messages, debugging messages, transaction logs, or just about anything else. All of the formatting can be done in "plain old", easy to use HTML. The HTML control itself is based on the Webkit engine, so why reinvent the wheel? Let Webkit do the heaving lifting (and formatting) for you.
When you start dynamically generating HTML content in your application, you will start to run into some issues. The first is that every time you set the "location" or "htmlText" properties, the control will re-render all of the HTML content and reset the scroll position to the top. This will happen even if you are just performing a simple addition to the htmlText property, and could potentially cause serious performance issues:
myHTML.htmlText += "add this text";
This will also happen if you use the load or loadString methods on the HTML control's htmlLoader property:
htmlContent.htmlLoader.load( url );
htmlContent.htmlLoader.loadString( myHTMLContentString );
An easy way to get around this is to use a combination of JavaScript within the HTML control, and ActionScript to dynamically append to the HTML content within the HTML control. You can use DHTML techniques to append to the HTML content, which only causes a partial redraw, and does not lose your current vertical scroll position. The big difference is that you will be invoking the JavaScript within the HTML container through ActionScript in the parent container.
First, let's look at the HTML/JavaScript that you can use to to dynamically append to the HTML content. The following shows a simple HTML document that contains a JavaScript function "appendContent" and a HTML div that will contain the content. The HTML content (value) passed into the function will simply be appended to the HTML content of the "content" div.
<body>
<script language="Javascript">
function appendContent( value )
{
document.getElementById("content").innerHTML += value;
}
</script>
<div id="content" name="content" />
</body>
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
defaultButton="{ append }">
<mx:Script>
<![CDATA[
private function appendToHTMLContent() : void
{
var content : String = textInput.text;
content = content.replace( /</g, "<" );
content = content.replace( />/g, ">" );
content = "<div>" + content + "</div>";
htmlContent.htmlLoader.window.appendContent( content );
textInput.text = "";
}
]]>
</mx:Script>
<mx:Button
label="Append Text"
top="10" right="10"
id="append"
click="appendToHTMLContent()" />
<mx:TextInput
top="10" left="10" right="116"
id="textInput" />
<mx:HTML
id="htmlContent"
location="content.html"
paintsDefaultBackground="false"
backgroundAlpha="0"
bottom="10" top="40" left="10" right="10"/>
</mx:WindowedApplication>
<mx:HTML
id="htmlContent"
location="content.html"
paintsDefaultBackground="false"
backgroundAlpha="0"
bottom="10" top="40" left="10" right="10"/>
private function appendToHTMLContent() : void
{
var content : String = textInput.text;
content = content.replace( /</g, "<" );
content = content.replace( />/g, ">" );
content = "<div>" + content + "</div>";
htmlContent.htmlLoader.window.appendContent( content );
textInput.text = "";
}
An added bonus for this approach is that if you want to allow the user to be able to select large "chunks" of content and copy it to the clipboard, then you don't have to do anything special. This is already enabled within the HTML control.
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Thanks! This helped me out. It'd be nice to see the working example...
As far as I can tell, none of the HTML controls in AIR dispatch any sort of load progress events/other useful events. If anyone has insight into what object I can get that status from, or of an alternative to using the HTML control, I'd be glad to know!
Do You know how to prevent user from select and copy text from mx:HTML component ?
You say that you can load images this way. How? What path do you reference in the image src to bring in images that are in application directory? I've tried:
src="app://images/foo.jpg"
src="app:/images/foo.jpg"
src="/images/foo.jpg"
src="images/foo.jpg"
Thanks!
Andrew,
Any way to create a image from an HTML control using BitmapData?
thanks
Ralph
Is there any way to display long html page in air html control
in pages not using vertical scroll bar i.e. if there is an html page of 1000 words , html control displays it in 4 pages having 500 words per page.
You can hide the scrollbar, but you would need to do the scrolling logic yourself. I think the properties you will want to look at are "verticalScrollPosition" and "maxVerticalScrollPosition".
first-off... great example!
I'm having trouble re-rendering the html page after it initially loads. for instance, if I append "AC_RunActiveContent" javascript code it seems that the content.html page does not run and do the document.write.
It seems that the "RunActive..." code only runs when the page initially loads.
Is there another way to refresh the htmlloader? thanks
None of the HTML controls in AIR dispatch any sort of load progress events/other useful events. If anyone has insight into what object I can get that status from, or of an alternative to using the HTML control, I'd be glad to know.
Matt - club penguin
Hi Andrew,
Thanks large for the article. It's been a big help. Unfortunately, I'm struggling with the same issue as Jared above. I've successfully loaded an html file from within the app package into an mx:html control. However, I can't seem to load any resourced from*within* the HTML file. Namely, I want to load images, CSS, javascript files etc.
I've tried every permutation of url scheme I can think of with no luck. Have you run in to this and if so, do you know how to get it to work?
Thanks!
-Matt Towers