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:
- Using the File API to write a string to a file
- Using the HTML Control within an application to render a string of HTML
- Using the File.browseForSave API to open a native save dialog.
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.
Tags: