mike chambers | about

AIR Example : HTML Editor with live preview

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"?>
	xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	<!-- 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"
		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()"/>


_ 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

		//close the file

//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