Example Code for 360Flex Apollo Session

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="0" left="0" id="input" top="0" 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="0" left="0" top="147" bottom="40" id="html"/>
</mx:Application>

Post any questions in the comments.

Related Entries

Comments

  1. Alfio
    March 9, 2007 10:51 AM
    Cool. I look forward to using Apollo when the alpha or even beta for that matter comes out. Still waiting on my Apollo book from Amazon. ;o)
  2. March 9, 2007 11:42 AM
    Me too Alfio.. Mike the "Using the File System API" chapter really got me on fire! I can't wait..
  3. Brent
    March 9, 2007 12:00 PM
    Quick question, is mx:HTML a component available in Flex2? Or is this a demo for Flex3?
  4. mike chambers
    March 9, 2007 12:13 PM
    >Quick question, is mx:HTML a component available in Flex2? Or is this a demo for Flex3? It is included in the Apollo SDK. mike chambers mesh@adobe.com
  5. March 9, 2007 12:31 PM
    Great, really cool. Are we any closer to seeing the Apollo alpha or beta being made available to developers ? Mike
  6. March 9, 2007 5:13 PM
    This is all soooo cool. Like a kid waiting for Christmas morning, I can't wait till the "Apollo" presents arrive. theo
  7. March 10, 2007 12:39 AM
    Hi, Something just crossed my mind whilst looking at the above code. Apollo is meant to be cross-platform. How does "File.desktopDirectory" resolve on a MAC?? Or for instance, how does the runtime engine know to look at the right folder if I were working on a PC and the person next to me works of a MAC? Do I need to use the "flash.system.os" right at the start to determine the required OS? I am sure this was well thought about by the team...any insight on this?
  8. mike chambers
    March 10, 2007 8:32 AM
    >Something just crossed my mind whilst looking at the above code. Apollo is meant to be cross-platform. How does "File.desktopDirectory" resolve on a MAC?? Mac has a concept of a Desktop. So on a Mac File.desktopDirectory resolves to: /Users/USERNAME/Desktop No need to check for OS. Apollo handles this. mike chambers mesh@adobe.com
  9. March 10, 2007 10:29 AM
    Hi vijay.. Take a look here: http://www.oreilly.com/catalog/9780596513917/chapter/ it's really hot!

Post a comment




Remember Me?

(you may use HTML and Quickcode tags for style)