By Mike Chambers, Rob Dixon, Jeff Swartz
Book Price: $14.99 USD
£9.99 GBP
PDF Price: $11.99
Cover | Table of Contents
Internet applications are all about reach. The promise of the web is one of content and applications anywhere, regardless of the platform or device. Rich clients must embrace and support all popular desktop operating systems, as well as the broadest range of emerging device platforms such as smart phones, PDAs, set-top boxes, game consoles, and Internet appliances.
Internet applications are all about reach. The promise of the web is one of content and applications anywhere, regardless of the platform or device. Rich clients must embrace and support all popular desktop operating systems, as well as the broadest range of emerging device platforms such as smart phones, PDAs, set-top boxes, game consoles, and Internet appliances.
http://download.macromedia.com/pub/flash/whitepapers/richclient.pdfhttp://www.mozilla.org/projects/tamarin/
http://www.adobe.com/go/apollo
http://www.adobe.com/go/apollo.http://www.adobe.com/go/apollo.http://www.adobe.com/go/apollo
http://www.adobe.com/go/apollo.http://www.adobe.com/go/apollo.http://www.adobe.com/go/apollo.
http://www.adobe.com/go/apollo.adobe.com web site:http://www.adobe.com/products/flex/flexbuilder/
http://www.adobe.com/go/apollo
AddType application/vnd.adobe.apollo-install-package .air
HTML component in your application interface as you would any other Flex UI component.HTMLControl object or Flex HTML component as you would any Sprite or DisplayObject in ActionScript.flash.html.HTMLControl class handles the core HTML loading, rendering, and script execution duties. Based on the HTMLControl class, the new Flex HTML component integrates the same HTML rendering power into the Flex UI framework.HTML component with little or no ActionScript coding. Of course, more complex requirements will call for additional coding in either ActionScript or JavaScript.HTMLControl class uses WebKit (www.webkit.org) as its HTML rendering engine. WebKit is an open source web browser engine that was originally used in the Safari browser.HTMLControl class can render standard HTML 4 or XHTML content. It provides complete support for the CSS 1.0 standard, and nearly complete support for CSS 2.1 and CSS 3. The Document Object Model (DOM) supports the W3C DOM Level 2 standard (www.w3.org/DOM ).HTMLControl class also provides full support for the JavaScript language, based on the ECMAScript 3 standard. Now your Flex, Flash, and ActionScript applications can use JavaScript methods and properties to offer AJAX-style page interaction and even better user experiences.HTMLControl class uses WebKit (www.webkit.org) as its HTML rendering engine. WebKit is an open source web browser engine that was originally used in the Safari browser.HTMLControl class can render standard HTML 4 or XHTML content. It provides complete support for the CSS 1.0 standard, and nearly complete support for CSS 2.1 and CSS 3. The Document Object Model (DOM) supports the W3C DOM Level 2 standard (www.w3.org/DOM ).HTMLControl class also provides full support for the JavaScript language, based on the ECMAScript 3 standard. Now your Flex, Flash, and ActionScript applications can use JavaScript methods and properties to offer AJAX-style page interaction and even better user experiences.HTMLControl class even supports embedded SWF files, meaning you could run a Flash or Flex application within an HTMLControl object in Apollo applications, although this feature is not available in the public Alpha.HTMLControl class nor the Flex HTML component has all the features of a complete web browser. However, you could use either one to build your own customized web browser applications.flash.html.HTMLControl class provides the methods and properties that retrieve, load, and render HTML content. The HTMLControl class is a subclass of the flash.display.DisplayObject class, so it can be manipulated in the display list like any other DisplayObject instance.HTML component presents the HTMLControl class as a UIComponent, giving it all the benefits of the Flex UI framework.HTML component and the HTMLControl class.|
Capabilities
|
Flex HTML component
|
|---|
HTML component offers full HTML support, easy integration into a Flex application, and a programming interface similar to other Flex components.HTML component can be declared in MXML like any other Flex component. Here's an example that sets the HTML component to stretch to fit the height and width of the window:<mx:HTML id="html" width="100%" height="100%" />
HTML component which web page to load by setting its location property to a valid URL string. The following example sets the HTML instance declared above to a specific URL value:html.location = "http://www.adobe.com";
HTMLControl class currently supports. These include some standard protocols, plus three new protocols that specify files found in common directory locations known to the Apollo application:|
Protocol string
|
Description
|
|---|---|
http:
|
Identifies a web resource to load using the standard HyperText Transfer Protocol.
|
https:
|
Identifies a web resource to load using the Transport Layer Security (TLS) or Secure Sockets Layer (SSL) secure communication protocols.
|
file:
|
Specifies a file to load from the local file system.
|
app-storage:
|
Identifies a file to load from the application storage directory.
|
HTML component into your application's user interface and use it to load and browse web pages. However, there might be times when it is easier to work directly with the HTMLControl class in ActionScript.HTMLControl class and the Flex HTML component and discusses some additional features of the HTMLControl class.HTML component, set the location property to a string value that contains a URL.HTMLControl class does things a little differently. Load content into the HTMLControl object from a remote URL by calling the load( ) method, which takes a URLRequest instance as a parameter.load( ) method:var html:HTMLControl = new HTMLControl( ); var str:String = "http://www.oreilly.com/"); var req:URLRequest = new urlRequest(str); html.load(req);
HTMLControl object by calling the loadString( ) method of the object, as in the following:var simpleHtml:String = "<html><body><p>Hello</p></body></html>; var html:HTMLControl = new HTMLControl( ); html.loadString(simpleHtml);
HTML component, the string value can contain text with a few HTML tags, a complete HTML page including <html>, <head>, and <body> tags, or well-formed XHTML content.XML class, and then use the XML.toXMLString( ) method to create a string to pass to the HTMLControl.loadString( ) method.loadString( ) method, like its load( ) method counterpart, executes asynchronously, dispatching a complete event when the string has been loaded and rendered in the HTMLControl object. However, if the HTML string contains no references to outside resources, the loadString( ) method executes synchronously. That means that all of the HTML in the string is loaded and rendered in the HTMLControl object before control returns to the next line of your script. You can check whether the HTML string was loaded synchronously by using the HTMLControl object (or a Flex HTML component) can access ActionScript content from the parent SWF file.Sound or Socket object.complete event. At that point, you can examine and manipulate the DOM.
<html>
<style>
.test { fontFamily:"Arial"; fontSize:"12" }
</style>
<body>
<p id="p1">Hi,
<span id="userName" class="test">
Bob</span>.
</p>
</body>
</html>
HTMLControl object that loads this HTML dispatches the complete event, your application can manipulate the DOM, as shown here:
var html:HTMLControl = new HTMLControl( );
var urlReq:URLRequest = new URLRequest("test.html");
html.load(urlReq);
html.addEventListener(Event.COMPLETE, completeHandler);
private function completeHandler(event:Event):void {
var doc:JavaScriptObject = html.window.document;
doc.getElementById("userName").innerHTML = "Sue";
}
html.window.document property is returned as an instance of the JavaScriptObject class. A JavaScriptObject references a specific object in the HTML page, and it lets your ActionScript code call any method or access any property of that object.File object is a pointer to a file or directory. The File class includes the static property documentsDirectory, which contains a File object that points to the user's documents directory. This is the My Documents directory on Windows, and it is the Documents subdirectory of the user directory on Mac OS, as illustrated in the following code:
trace(File.documentsDirectory.nativePath)
// On Windows:
// C:\Documents and Settings\joe\MyDocuments
// On Mac OS: /Users/joe/Documents
File object to a directory, you can use the resolve( ) method to modify it to point to a file or subdirectory within that directory (or within a subdirectory). For example, the following code creates an Apollo Test subdirectory of the user's documents directory:
var newDir:File = File.documentsDirectory;
newDir = newDir.resolve("ApolloTest");
newDir.createDirectory( );
File object can point to either a file or a directory. Also, a File object may point to a file or directory that does not exist, as in the previous example. This lets you point a File object to a directory location that you wish to create.File class includes the following static properties, which point to commonly used directory locations:|
Property
|
Description
|
|---|---|
|
|
File class (such as File.copyFile( ) and File.copyFileAsync( )) and of the FileStream class have both synchronous and asynchronous versions.copyTo( ) method:
var file1:File = File.documentsDirectory.resolve("ApolloTest/test.txt");
var file2:File = File.documentsDirectory.resolve("ApolloTest/copy of test.txt");
file1.copyTo(file2);
trace("Not output until the file is copied.");
copyToAsync( ) method:
var file1:File = File.documentsDirectory.resolve("ApolloTest/test.txt");
var file2:File = File.documentsDirectory.resolve("ApolloTest/copy of test.txt");
file1.copyToAsync(file2);
file1.addEventListener(Event.COMPLETE, completeHandler);
trace("This line executes before the complete event.");
trace("So does this line.");
private function completeHandler(event:Event):void {
trace("Done.");
}
File class (all of which have synchronous counterparts) and the events that can fire after the method is called:|
Asynchronous File method
|
Events
|
|---|---|
copyToAsync( )
|
complete, ioError
|
deleteDirectoryAsync( )
|
complete, ioError
|
File.listDirectory( ) method returns an array listing of File objects that represent the files and directories contained within the specified directory. For example, the following code lists the contents of the desktop directory:
var directory:File = File.desktopDirectory;
var contents:Array = directory.listDirectory( );
for (var i:uint = 0; i < contents.length; i++) {
if (contents[i].isDirectory) {
trace(contents[i].name);
} else {
trace(contents[i].name,
contents[i].size,
"bytes");
}
}
File.listDirectory( ) method returns only the root level files and directories in a directory. It does not recursively search through subdirectories for their contents. You can, of course, write code to traverse subdirectories, though if you do so, you might want to use the File.listDirectoryAsync( ) method so that other ActionScript-driven processes can continue while the directory listings are being compiled.File class includes a number of properties that contain information about a file or directory.|
Property
|
Description
|
|---|---|
exists
|
States whether the file or directory exists. This is worth checking, for example, before you attempt to read, write, copy, or move a file.
|
isDirectory
|
States whether the
File object points to a directory (true) or a file (false). You will want to check this before attempting directory-specific operations (such as the listDirectory( ) method) or attempting file-specific operations (such as reading a file). |
isHidden
|
States whether the file or directory is hidden.
|
nativePath
|
Notes the operating system-specific path to the file or directory.
|
parent
|
Notes the parent directory of the File instance.
|
url
|
Notes the operating system-independent path to the file or directory.
|
File class also inherits the following useful properties from the FileReference class:|
Property
|
Description
|
|---|---|
creationDate
|
File.copyTo( ) and File.moveTo( ) methods copy or move a file or directory to a specified new location. For example, the following code copies the test.txt file in the Apollo Test subdirectory of the user's documents directory to the User Data subdirectory of the application storage directory:
var file1:File = File.documentsDirectory.resolve("Apollo Test/test.txt");
var destination:File = File.appStorageDirectory.resolve("User Data");
destination.createDirectory( );
var file2:File = destination.resolve("test.txt");
file1.copyTo(file2);
File.createDirectory( ) method, which ensures that the destination directory exists.
var dir1:File = File.documentsDirectory;
dir1 = dir1.resolve("Apollo Test 1");
var dir2:File = File.documentsDirectory;
dir2 = dir2.resolve("Apollo Test 2");
File.copyToAsync( ) and File.moveToAsync( ), if the copy or move operation could take a long time.clobber parameter, which you can set to true to have the operation overwrite existing files. By default, this parameter is set to false.File.createTempFile( ) and File.createTempDirectory( ) static methods of the File class let you create a temporary file or directory. Apollo ensures that the temporary file or directory created by these methods is new and unique. For example, the following code creates a temporary file:var bufferStorage:File = File.createTempFile( );
File.createDirectory( ) method lets you create a directory in the location specified by the File object:
var directory = File.documentsDirectory;
directory = directory.resolve("ApolloTest");
FileStream object with write capabilities then directories are created automatically, if needed. For more information about FileStream objects, see "Reading and Writing Files" later in this chapter.