mike chambers | about

Example Code for 360Flex Apollo Session

Friday, March 9, 2007

During my Apollo overview session at 360Flex, I built a simple HTML editor that provided live preview and allowed the HTML to save to the desktop. It is a pretty simple app, but it shows an example of using both the File API in Apollo as well as HTML.

I mentioned in the session that I would post it online, so here it is:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
<![CDATA[
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;
import flash.filesystem.File;

/* Called when the user wants to save the file */
private function onSave():void
{
        //Get a reference to the desktop
        var desktop:File = File.desktopDirectory;
        
        //create a reference to the file on the desktop in which we will save html
        var saveFile:File = desktop.resolve(fileName.text);
        
        //create a FileStream instance to write to the file
        var fs:FileStream = new FileStream();
        
        //open file in WRITE mode
        fs.open(saveFile, FileMode.WRITE);
        
        //write the string to the file
        fs.writeUTFBytes(input.text);
        
        //close the file / file stream
        fs.close();
}

/* called when text in the TextArea changes */
private function onTextChange():void
{
        //pretty simple. Copy text from TextArea into HTML control as HTML
        html.htmlText = input.text;
}
]]>
</mx:Script>

<!-- Used to enter HTML -->
<mx:TextArea right="" left="" id="input" top="" height="139" textInput="onTextChange()"/>

<!-- Save Button -->
<mx:Button label="Save" id="saveButton" bottom="10" right="10" click="onSave()"/>

<!-- File Name on Desktop to save HTML in -->
<mx:TextInput id="fileName" right="72" bottom="10" text="test.html" />

<!-- HTML field to do live preview of HTML -->
<mx:HTML right="" left="" top="147" bottom="40" id="html"/>
</mx:Application>

Post any questions in the comments.

twitter github flickr behance