y - computer memo: May 2007

Apolloランタイムでは、ファイルシステムの参照が可能です。この機能を生かして、ハードディスク内にある画像を表示させるアプリケーションを作成してみよう。

イメージビューアを作成するには、以下のコンポーネントが必要です。

Image (ID="imageContainer")
Button
Label (ID="infoLabel")
FileSystemTree (ID="tree")

上にFileSystemTreeを含みました。今回は、ハードディスク内のイメージを表示させるので、FileSystemTreeというコンポーネントを使用して、エクスプローラーのようなツリー状のスタイルでファイルを選択してイメージを表示させたいと思います。

まず、スクリプト部分は、以下のようになります。

<mx:Script>
<![CDATA[
import flash.filesystem.File;
public function init( ):void {
tree.directory = File.documentsDirectory;
}
public function getDetails( ):void {
var node:File = tree.selectedItem as File;
if(node != null) {
if(node.isDirectory) {
logDirectoryDetails(node);
} else {
logFileDetails(node);
}
}
}
public function logFileDetails(file:File):void {
infoLabel.text = file.nativePath;
imageContainer.source = file.url;
}
public function logDirectoryDetails(dir:File):void {
infoLabel.text = dir.nativePath ;
}
]]>
</mx:Script>

以下の一行でファイルシステムにアクセスできるようにします。

import flash.filesystem.File;

以下の関数では、デフォルトでマイドキュメントのディレクトリを参照する指定を行います。

public function init( ):void {
tree.directory = File.documentsDirectory;
}

以下の関数でImageコンポーネントに画像のファイルのパスを渡す処理を行います。

public function logFileDetails(file:File):void {
infoLabel.text = file.nativePath; //Labelに選択したパスを表示する
imageContainer.source = file.url; //Imageコンポーネントのsourceに表示させるイメージのパスを渡す
}

file.nativePath;は、実際どのようなパスかを表示させます。Traceで
file.nativePath;の値を調べてみると、以下のような値を返します。

C:\Documents and Settings\username\My Documents\My Pictures\Picture\adobe1.jpg

imageContainer.sourceには、表示させたいイメージのパスを渡してあげるのですが、パスの渡し方がちょっと特殊なので、
imageContainer.source = file.nativePath;というようには行きません。イメージのパスを渡す場合は、file.urlを使います。

Traceでfile.urlがどのような値か調べてみると、以下のような値を返します。

file:///C:/Documents%20and%20Settings/username/My%20Documents/My%20Pictures/Picture/adobe1.jpg

イメージを表示させる際に、このパスの渡し方に気をつけましょう。

コード全文

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
applicationComplete="init( )"
>
<mx:Script>
<![CDATA[
import flash.filesystem.File;
public function init( ):void {
tree.directory = File.documentsDirectory;
}
public function getDetails( ):void {
var node:File = tree.selectedItem as File;
if(node != null) {
if(node.isDirectory) {
logDirectoryDetails(node);
} else {
logFileDetails(node);
}
}
}
public function logFileDetails(file:File):void {
infoLabel.text = file.nativePath;
imageContainer.source = file.url;
trace("file.nativepath is: " + file.nativePath);
trace("file.url is: " + file.url);
}
public function logDirectoryDetails(dir:File):void {
infoLabel.text = dir.nativePath ;
}
]]>
</mx:Script>
<mx:Panel
title="Picture Viewr"
width="98%"
height="98%"
verticalCenter="0"
horizontalCenter="0"
>
<mx:HBox
height="100%"
width="100%">

<mx:VBox
width="20%"
height="100%">

<mx:FileSystemTree
id="tree"
height="90%"/>

<mx:Button
label="Load Image"
click="getDetails( )"/>
</mx:VBox>

<mx:VBox
height="100%"
width="80%">

<mx:Image
id="imageContainer"
styleName="picture"
maxWidth="500"
maxHeight="500"
scaleContent="true">
</mx:Image>
<mx:Label
id="infoLabel"
text="Info" />

</mx:VBox>
</mx:HBox>
</mx:Panel>
</mx:ApolloApplication>