tag:www.insideria.com,2009://34/tag:www.insideria.com,2008://34.24417- 2009-11-05T20:04:19Z Comments for AIR: Tricks with mx:HTML (http://www.insideria.com/2008/07/air-tricks-with-mxhtml.html) Movable Type 4.21-en tag:www.insideria.com,2008://34.24417 2008-07-14T01:27:34Z 2008-07-14T17:25:41Z AIR: Tricks with mx:HTML 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. Andrew Trice
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>
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: 

<?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, "&lt;" );
             content = content.replace( />/g, "&gt;" );
             
             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>
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: 

<mx:HTML 
	id="htmlContent"
	location="content.html" 
	paintsDefaultBackground="false"  
	backgroundAlpha="0"
	bottom="10" top="40" left="10" right="10"/>
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. 

private function appendToHTMLContent() : void
{
 	var content : String = textInput.text;
 	
 	content = content.replace( /</g, "&lt;" );
 	content = content.replace( />/g, "&gt;" );
 	
 	content = "<div>" + content + "</div>";
 	
 	htmlContent.htmlLoader.window.appendContent( content );
 	
 	textInput.text = "";
}
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 ]]> tag:www.insideria.com,2008://34.24417-comment:2020401 Comment from Evan Mullins on 2008-08-06 Evan Mullins http://blog.circlecube.com Thanks! This helped me out. It'd be nice to see the working example...

]]> 2008-08-06T20:15:03Z tag:www.insideria.com,2008://34.24417-comment:2041969 Comment from Matt Braun on 2008-08-28 Matt Braun http://codehinting.com 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!

]]> 2008-08-28T18:43:02Z tag:www.insideria.com,2008://34.24417-comment:2045048 Comment from Dante on 2008-10-29 Dante http://ceoblog.pl Do You know how to prevent user from select and copy text from mx:HTML component ?

]]> 2008-10-29T20:58:55Z tag:www.insideria.com,2008://34.24417-comment:2047625 Comment from Jared on 2008-11-29 Jared 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!

]]> 2008-11-29T13:01:02Z tag:www.insideria.com,2008://34.24417-comment:2047741 Comment from Ralph Krausse on 2008-11-30 Ralph Krausse Andrew,

Any way to create a image from an HTML control using BitmapData?

thanks
Ralph

]]> 2008-11-30T13:50:45Z tag:www.insideria.com,2008://34.24417-comment:2057076 Comment from Amit Batra on 2009-04-06 Amit Batra 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.

]]> 2009-04-06T11:00:49Z tag:www.insideria.com,2008://34.24417-comment:2057077 Comment from Andrew Trice on 2009-04-06 Andrew Trice http://www.tricedesigns.com 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".

]]> 2009-04-06T12:32:36Z tag:www.insideria.com,2008://34.24417-comment:2057479 Comment from Bob White on 2009-04-13 Bob White 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

]]> 2009-04-13T21:42:05Z tag:www.insideria.com,2008://34.24417-comment:2065893 Comment from Korn Matt on 2009-06-09 Korn Matt 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

]]> 2009-06-10T01:42:00Z tag:www.insideria.com,2008://34.24417-comment:2068682 Comment from Matt towe on 2009-07-20 Matt towe http://www.typidee.com 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

]]> 2009-07-21T01:59:01Z