サンプルアプリケーションを見てみよう(1) | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

第2回 Apollo(パブリックアルファ版)がいよいよ登場!その数々の機能を見てみよう(2)

4 サンプルアプリケーションを見てみよう


実際にサンプルを使って、Apolloパブリックアルファ版の機能を見ていこう。

サンプルには米Adobe Systems社から公開されている「TextEditorFlex」(前々項でにダウンロードした「Documentations and Samples」の「Samples」内)、「apollo_alpha1_docs Example: Creating Window with MXML and ActionScript」(「Docu mentation」内の「Working_with_windows」)、今回著者が作成した「networkDetection」、「HtmlWithinFlashContent」(ともにMdN Interactive上で公開)の4つを使用する。

今回紹介するAPIの詳細は「Documentations and Samples」、もしくはAdobe LabsのDocumentページ内にある「Apollo ActionScript 3.0 API Reference」で参照できる【5】。

【5】Apollo Documentページ

Function機能 1 ローカルファイルにアクセスするためのAPI

flash.filesystemパッケージを使用することで、ファイルやディレクトリの作成や削除、複製、移動ができる機能である。また、OSごとのファイルシステムを意識することなくファイルやフォルダの情報を取得できる。

ここではファイルを操作するAPIとして下記を使用する。

flash.filesystem.File
flash.filesystem.FileStream

サンプル「TextEditorFlex」のMXMLファイルを開く。ソースの88~108行目を見ると、FileStreamオブジェクトを生成して、openAsync()メソッドに書き込みモード「(FileMode.WRITE)」でファイルを開いている。改行コードの変更を行ったあとにwriteUTFBytes()メソッドを利用して、ファイルに文字列を書き込んでいる【6】。こうすることでローカルファイルにアクセスできる【7】。

private function saveFile():void
{
(省略)
stream = new FileStream();
stream.openAsync(currentFile,
FileMode.WRITE);
stream.addEventListener
(IOErrorEvent.IO_ERROR,
writeIOErrorHandler);
(省略)
stream.writeUTFBytes(str);
dataChanged = false;
}
(省略)
}
【6】TextEditor.mxmlの88~108行目のソース。ローカルファイルにアクセスする仕組み

1.FileSteamオブジェクトを生成する。
var fileStream:FileStream = new FileStream();
2.open()メソッドで、ファイルモードを指定してfileオブジェクトを開く。
fileStream.open(file, FileMode.WRITE);
3.writeUTFBytes()メソッドで、fileにオブジェクトを書き出す。
fileStream.writeUTFBytes("hello");
4.close()メソッドを利用してファイルを閉じる。
fileStream.close();
【7】flash.filesystem.FileStreamの使い方

Function機能 3 ウインドウAPI
Function機能 8 部分的なマルチウインドウ機能

3は画像データを利用してアプリケーション固有のウインドウをデザインしたり、位置やサイズなどを定義できる機能だ。また「標準のウインドウ」を指定すると、ソースコードに変更を加えることなく、実行されるOSの標準ウインドウが自動的に生成される。

8はひとつのアプリケーションで複数のウインドウを利用できるという機能。また、作成するウインドウは自由にデザインを変更できる。

ここではウインドウを操作するAPIとして下記を使用する。

flash.display.NativeWindow
flash.display.NativeWindowInitOptions

サンプル「Creating windows with MXML and ActionScript」のソースを見てみると、15~33行目でNativeWindowOptionsオブジェクトを生成し、アプリケーションの標準ウインドウ枠(クローム)の有無と透過性の設定を行っている。次に、オプションを設定しNativeWindowオブジェクトを生成すると、新しい「Window」を作成できる【8】、【9】。

「Creating windows with MXML and ActionScript」で設定されたウインドウ1 「Creating windows with MXML and ActionScript」で設定されたウインドウ2

//create a new window
public function createNewWindow():void {
//create the options
var options:NativeWindowInitOptions
= new NativeWindowInitOptions();
options.transparent = transparentOption.selected;
options.systemChrome = Chrome.selectedValue.to
String();
(省略)
}
//create the window
var newWindow:NativeWindow = new NativeWindow
(false,options);
(省略)
newWindow.height = Number(heightValue.text);
【8】「Creating windows with MXML and ActionScript」の15~33行目のソース

1.NativeWindowInitOptionsを生成して、初期化パラメータを設定する。
var options:NativeWindowInitOptions =
new NativeWindowInitOptions();
options.transparent = “false”;
// 透過させない
options.systemChrome = “standard”;
//OS標準のクロームを利用
2.初期化パラメータを利用して、ウインドウを生成する。
var newWindow:NativeWindow =
new NativeWindow(false,options)
3.ウインドウのサイズを変更する
newWindow.height = “100”;
newWindow.width = “100”;
【9】flash.display.NativeWindowの使い方
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在