mike chambers | about

AIR Example : HTML Editor with live preview

Tuesday, November 6, 2007

As part of my Flash on the Beach Intro to AIR Session, I built a simple HTML Editor with a live preview. I have added comments to the code, and uploaded it to the on AIR tour google repository.

This example demonstrates:

Here is the code if you just want to glance at it:

** HTMLEditor.mxml **

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
	xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	 viewSourceURL="srcview/index.html">
	<!-- include the code for the main app class -->
	<mx:Script source="HTMLEditorClass.as" />
	
	<!-- TextArea used to type in HTML -->
	<mx:TextArea height="172" top="10" left="10" right="10" 
		change="onTextChange()"
		id="inputField" />
		
	<!-- HTML Control which we use for live preview of HTML -->
	<mx:HTML top="190" left="10" right="10" bottom="41" id="htmlField"/>
	
	<!-- Save button to save the HTML to a file -->
	<mx:Button label="Save" right="10" bottom="10" click="onSaveClick()"/>

</mx:WindowedApplication></pre>

** HTMLEditorClass.as **

import flash.events.Event;
import flash.filesystem.File;

//called when the text / html is changed
private function onTextChange():void
{
	htmlField.htmlText = inputField.text;
}

//Called when the user selects a file to save
//html in.
private function onBrowseForSave(e:Event):void
{
	//get a file reference to the file the user selected
	var f:File = File(e.target);
	
	//create a file stream to write to the file
	var fs:FileStream = new FileStream();
	
		//open the file for writing
		fs.open(f, FileMode.WRITE);
		
		//write string of html to file
		fs.writeUTFBytes(inputField.text);
		
		//close the file
		fs.close();  
}

//called when user presses save button
private function onSaveClick():void
{
	//get a reference to the desktop dir
	//this will be used as the default dir that the dialog
	//will open at
	var f:File = File.desktopDirectory;
	
		//listen for the select event for when the user selects
		//a file to save the html in
		f.addEventListener(Event.SELECT, onBrowseForSave);
		
		//open the browse for save native dialog, and pass in a title
		//for the dialog
		f.browseForSave("Save HTML File");
}

You can grab the code from the on AIR Tour code repository.

twitter github flickr behance