AIR - データグリッドのデータをXMLに書き出すサンプル

前回のサンプルを応用して、データグリッドに読み込んだXMLファイルのデータを編集した後、再びXMLファイルに書き出すサンプルです。ローカルファイルの読み込みもできれば、書き出しも可能です。

今回のポイントは、以下の２点になるかと思います。

• IListを使用して、データグリッドのデータを抽出する
• FileMode.WRITEでファイル書き出しをする

今回のコード：

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="appComplete()">

<mx:Script>

<![CDATA[



import mx.collections.IList;



public var sampleXML:File;

public var stream:FileStream;

public var XMLStr:String;





[Bindable]public var rXML:XML;



public function appComplete():void

{

dg.enabled = false;

nameTxt.enabled = false;

updateBtn.enabled = false;

saveBtn.enabled = false;

}



private function loadSampleXML():void

{



sampleXML = File.documentsDirectory;

sampleXML = sampleXML.resolvePath("sample.xml");





stream = new FileStream();



if(sampleXML.exists)

{

stream.open(sampleXML, FileMode.READ);



rXML = XML(stream.readUTFBytes(stream.bytesAvailable));

stream.close();

}

dg.enabled = true;

}



private function getName():void

{

nameTxt.text = dg.selectedItem.name;

nameTxt.enabled = true;

updateBtn.enabled = true;

}



private function updateName():void

{

dg.selectedItem.name = nameTxt.text;

nameTxt.enabled = false;

updateBtn.enabled = false;

saveBtn.enabled = true;

}

private function saveData():void

{

createXMLData();

writeXMLData();

saveBtn.enabled = false;

}



//-----------------------------------------

private function createXMLData():void

{



XMLStr = "";



var dgLength:Number = dg.dataProvider.length;

var i:Number = 0;

var dgList:IList = IList(dg.dataProvider);



for(i = 0; i<dgLength; i++)

{

XMLStr += "<sample>\n"

+ "<id>"+ dgList.getItemAt(i).id +"</id>\n"

+ "<name>"+ dgList.getItemAt(i).name+"</name>\n"

+ "<age>"+ dgList.getItemAt(i).age +"</age>\n"

+ "</sample>\n";

}

}



private function writeXMLData():void

{

var outputString:String = '<?xml version="1.0" encoding="utf-8"?>\n';

outputString += "<set>\n"

+ XMLStr

+ "</set>";

outputString = outputString.replace(/\n/g, File.lineEnding);



stream = new FileStream();



stream.open(sampleXML, FileMode.WRITE);

stream.writeUTFBytes(outputString);

stream.close();



}



//-----------------------------------------





]]>

</mx:Script>



<mx:VBox x="0" y="0" width="100%" height="100%">

<mx:Button label="Load" click="loadSampleXML();"/>

<mx:DataGrid dataProvider="{rXML.sample}" change="getName();" id="dg">

<mx:columns>

<mx:DataGridColumn headerText="ID" dataField="id"/>

<mx:DataGridColumn headerText="Name" dataField="name"/>

<mx:DataGridColumn headerText="Age" dataField="age"/>

</mx:columns>

</mx:DataGrid>

<mx:TextInput id="nameTxt"/>

<mx:Button label="Update" id="updateBtn" click="updateName();"/>

<mx:Button label="Save" click="saveData();" id="saveBtn"/>

</mx:VBox>



</mx:WindowedApplication>

今回のサンプルはこちらダウンロードできます。

XMLファイルの読み込みは、「File.documentsDirectory;」となっているので、サンプルを実行する前にsample.xmlは、マイドキュメントに保存して置いてください。

ファイルの読み込み、書き出しの基本的な説明は、AIR LiveDocsに記載されています。

AIR - XMLデータをデータグリッドに読み込むサンプル

前回のサンプルに続き、今回は読み込んだXMLデータをデータグリッドに読み込みたいと思います。データグリッドへのXMLデータの読み込み方法はとてもシンプルです。

データグリッドコンポーネントを用意したら、そのデータグリッドのdataProviderを設定し、各カラムのdateFieldをXMLデータと関連付けすれば完了です。

<?xml version="1.0" encoding="utf-8"?>

<set>

<sample>

<id>001</id>

<name>Taro</name>

<age>20</age>

</sample>

<sample>

<id>002</id>

<name>Hanako</name>

<age>22</age>

</sample>

<sample>

<id>003</id>

<name>Jiro</name>

<age>25</age>

</sample>

<sample>

<id>004</id>

<name>Yoshio</name>

<age>21</age>

</sample>

</set>

例えば、上のようなXMLデータのsample部分のデータをデータグリッドに読み込みたい場合、データグリッドのdataProviderは次のようになります。

<mx:DataGrid dataProvider="{rXML.sample}">

あとは、各カラムのdataFieldをXMLデータに応じて設定していきます。今回の例では、id、name、ageのデータを読み込みたいので、以下のように設定します。

<mx:DataGridColumn headerText="ID" dataField="id"/>

<mx:DataGridColumn headerText="Name" dataField="name"/>

<mx:DataGridColumn headerText="Age" dataField="age"/>

これで、完了です。

今回のコード：

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

<![CDATA[



public var sampleXML:File;

public var stream:FileStream;

public var loadFile:File;



[Bindable]public var rXML:XML;



private function loadSampleXML():void

{



sampleXML = File.applicationDirectory;

sampleXML = sampleXML.resolvePath("sample.xml");

//loadFile = new File("file:///C:/sample.xml");



stream = new FileStream();



stream.open(sampleXML, FileMode.READ);

//stream.open(loadFile, FileMode.READ);

rXML = XML(stream.readUTFBytes(stream.bytesAvailable));

stream.close();

trace("XML data: "+rXML.sample);

}



]]>

</mx:Script>



<mx:VBox x="0" y="0" width="100%" height="100%">

<mx:Button label="Click Me" click="loadSampleXML();"/>

<mx:DataGrid dataProvider="{rXML.sample}">

<mx:columns>

<mx:DataGridColumn headerText="ID" dataField="id"/>

<mx:DataGridColumn headerText="Name" dataField="name"/>

<mx:DataGridColumn headerText="Age" dataField="age"/>

</mx:columns>

</mx:DataGrid>

</mx:VBox>



</mx:WindowedApplication>

今回のサンプルファイルはこちらからダウンロードできます。

なお、任意のパスからXMLファイルを読み込みたい場合は、以下のような設定になります。

public var loadFile:File;

.

.

.

.

loadFile = new File("file:///C:/sample.xml");

.

.

.

.

stream.open(loadFile, FileMode.READ);

ポイントとしては、

sampleXML = File.applicationDirectory;

sampleXML = sampleXML.resolvePath("sample.xml");

の代わりに任意のパスを指定する

loadFile = new File("file:///C:/sample.xml");

を設定することです。

また、stream.openではsampleXMLの代わりにloadFileを使用すればOKです。

AIR - ローカルXMLを読み込むサンプル

AIRでは、ローカルのXMLファイルデータを読み込むことが可能です。
File、FileStream、XMLのデータタイプを使用してXMLデータを読み込みます。

まずは、以下のようなXMLデータを用意します。

<?xml version="1.0" encoding="utf-8"?>

<set>

<sample>

<data>data1</data>

</sample>

<sample>

<data>data2</data>

</sample>

<sample>

<data>data3</data>

</sample>

<sample>

<data>data4</data>

</sample>

</set>

このXMLデータを「sample.xml」というファイル名で保存します。

次にFlex Builderで新規にプロジェクトを作成し、プロジェクトの「src」というフォルダにフォルダにこのsample.xmlを保存しておきます。

次に以下のコードのMXMLファイルに記述します。

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

<![CDATA[



public var sampleXML:File;

public var stream:FileStream;



[Bindable]public var rXML:XML;



private function loadSampleXML():void

{



sampleXML = File.applicationDirectory;

sampleXML = sampleXML.resolvePath("sample.xml");



stream = new FileStream();



if(sampleXML.exists)

{

stream.open(sampleXML, FileMode.READ);

rXML = XML(stream.readUTFBytes(stream.bytesAvailable));

stream.close();

trace("XML data: "+rXML.sample);

}

}



]]>

</mx:Script>



<mx:VBox x="0" y="0" width="100%" height="100%">

<mx:Button label="Click Me" click="loadSampleXML();"/>

</mx:VBox>



</mx:WindowedApplication>

最後にデバッグモードでテストして、ボタンをクリックするとコンソールに以下のようなXMLデータが出力されます。

XML data: <sample>

<data>data1</data>

</sample>

<sample>

<data>data2</data>

</sample>

<sample>

<data>data3</data>

</sample>

<sample>

<data>data4</data>

</sample>

それでは、どのようにしてXMLデータを読み込んだのか確認してみよう。

まず、このサンプルで使用する変数の宣言をする必要があるので、以下の変数を用意してます。

• public var sampleXML:File;
• public var stream:FileStream;
• [Bindable]public var rXML:XML;

次に

sampleXML = File.applicationDirectory;

でデータが格納されてある場所を指定します。

sampleXML = sampleXML.resolvePath("sample.xml");

で実際のXMLファイルを読み込みます。

stream = new FileStream();

で新しくFileStreamオブジェクトを用意し、ファイルの取り扱い準備をします。

今回はXMLデータを読み込むので、以下のように.openのFileMode.READを使用します。

stream.open(sampleXML, FileMode.READ);

rXML = XML(stream.readUTFBytes(stream.bytesAvailable));

読み込み処理後は、stream.close();でクローズします。

XMLデータ内の<sample>の部分を取得したいので、

trace("XML data: "+rXML.sample);

と、.sampleがsampleタグ内のデータを引っ張り出してくることになります。

もっと深く細かく指定したデータを取得したい場合、例えば、今回のXMLデータで、Sampleのデータ部分のみを取得したいのであれば、rXML.sample.dataを指定することになります。

次回は、任意のパスのXMLデータを取得する方法および取得したXMLデータをデータグリッドに読み込ませるサンプルを紹介したいと思います。

イメージビューアを作ってみよう

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>

---

リファレンスサイト

Apolloポケットガイド邦訳Wiki - ファイルブラウザを作る

TextInputに入力した文字をLabelに渡してみよう

今回は、TextInputコンポーネントに入力した値をLabelコンポーネントに渡してみたいと思います。
前回のマウスイベントの取得を応用して、ボタンをクリックした際にTextInputに入力してある値をLabelに表示させます。

用意するコンポーネントは、

• TextInput
• Label
• Button

今回は、ボタンをクリックしたタイミングでTextInputのテキストをLabelのテキストに代入する処理を行います。この処理を行うには、以下のようなコードを記述します。

public function clickHandler(event:Event):void {
resultString.text = inputString.text;
}

前回同様にクリックのイベントが発生したら、inputString.textをresultString.textに代入します。

resultStringは、TextInputのIDです。
inputStringは、LabelのIDです。

---

コード全文

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
width="300"
height="150"
layout="absolute"
backgroundColor="#334455"
creationComplete="createListener(event);"
>
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
import mx.events.FlexEvent;
public function createListener(event:FlexEvent):void {
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
}
public function clickHandler(event:Event):void {
resultString.text = inputString.text;
}
]]>
</mx:Script>
<mx:Panel
title="TextInput to Label"
width="90%"
height="90%"
horizontalCenter="0"
verticalCenter="0"
paddingLeft="10"
paddingTop="10"
paddingRight="10"
paddingBottom="10"
layout="vertical"
backgroundAlpha="30"
>
<mx:HBox width="100%" height="100%">
<mx:Label
text="Input:"
/>
<mx:TextInput
id="inputString"
width="100%" text=""
/>
<mx:Button
id="myButton"
label="OK"
/>
</mx:HBox>
<mx:HBox width="100%" height="100%">
<mx:Label text="Result:" />
<mx:Label
id="resultString"
width="100%"
/>
</mx:HBox>
</mx:Panel>
</mx:ApolloApplication>

マウスイベントを取得してみよう

Apolloのアプリケーションと言っても記述するコードの中身はFlexのMXMLおよびActionScriptになります。今回は、各マウスのイベントを取得してみましょう。

マウスイベントを取得するにはいくつか方法があるかと思いますが、イベントについて、FlexのLiveDocsに説明が書いてあります。

イベントの使用

今回は、マウスをクリックした時、マウスをボタン上にロールオーバーした時、マウスをボタンからロールアウトした時のイベントを取得します。

まず、マウスをクリックした時のイベントを取得するには、

MouseEvent.CLICK

また、ロールオーバー、ロールアウトには、

MouseEvent.ROLL_OVER //ロールオーバー
MouseEvent.ROLL_OUT //ロールアウト

を使用します。

このマウスイベントを取得するには、イベントリスナーが必要となります。イベントリスナーはイベントが発生したことを監視するaddEventListenerという監視役が必要です。そこで、今回はボタンにイベントリスナーを適用するので、以下のような感じになります。

myButton.addEventListener (MouseEvent.CLICK, clickHandler);

また、発生したイベントに応じて、何らかの処理を実行したいので、addEventListenerの第二引数の名前の関数を以下のように用意します。

private function clickHandler ( event:Event ):void {
//ここに実行したい処理を記述
}

今回の場合は、マウスをクリックした際に、myLabelに「Mouse Click」という文字を表示させたいので、以下のような記述になります。

private function clickHandler ( event:Event ):void
{
myLabel.text = "Mouse Click";
}

さて、これらのコードですが、MXMLファイルのどこにでも記述して良いわけではないので、あるタグで囲ってあげる必要があります。スクリプトの処理を行う場合は、<mx:Script> から始まるタグの中にさらに<![CDATA[の中でスクリプトの処理を行う必要があります。また、]]></mx:Script>で閉じる必要があるのでお忘れなく。

<mx:Script>
<![CDATA[

]]>
</mx:Script>

実際、今回の処理をこのタグに入れると以下のような感じになります。

<mx:Script>
<![CDATA[

public function createListener():void {
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
myButton.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
myButton.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
}

public function clickHandler(event:Event):void {
myLabel.text = "Mouse Click";
}
public function rollOverHandler(event:Event):void {
myLabel.text = "Roll Over";
}
public function rollOutHandler(event:Event):void {
myLabel.text = "Roll Out";
}
]]>
</mx:Script>

public function createListener():void

なお、上の関数を使用しているで、<mx:ApolloApplication内にcreationComplete="createListener();"を追加しておきましょう。

スクリプトの部分は上記で完了です。さて、スクリプトの処理を実行する元となるボタンなどの設定は、以下の通りです。

<mx:Panel
title="My Application"
horizontalCenter="0"
verticalCenter="0"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
>

<mx:Label
id="myLabel"
width="230"
fontWeight="bold"
fontSize="24"
/>

<mx:Button
id="myButton"
label="Button"
/>

</mx:Panel>

スクリプト部分で、myButton.addEventListenerと記述してあります。この部分のmyButtonは、ボタンコンポーネントのIDを示しているので、<mx:Buttonでid="myButton"という感じでスクリプト内で使用している名前に統一しておきましょう。ラベルコンポーネントも同様です。

---

コード全文

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="350" height="200"
creationComplete="createListener();"
>

<mx:Script>
<![CDATA[
public function createListener():void {
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
myButton.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
myButton.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
}

public function clickHandler(event:Event):void {
myLabel.text = "Mouse Click";
}
public function rollOverHandler(event:Event):void {
myLabel.text = "Roll Over";
}
public function rollOutHandler(event:Event):void {
myLabel.text = "Roll Out";
}
]]>
</mx:Script>
<mx:Panel
title="My Application"
horizontalCenter="0"
verticalCenter="0"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
>

<mx:Label
id="myLabel"
width="230"
fontWeight="bold"
fontSize="24"
/>

<mx:Button
id="myButton"
label="Button"
/>

</mx:Panel>
</mx:ApolloApplication>

---

リファレンスサイト

Class MouseEvent

Flex クイックスタート：イベントの処理

Flex BuilderでHello Worldアプリケーションを作成しよう

はじめてアプリケーションを作成する際の定番として、「Hello World」という文字を表示させることからはじめてみましょう。

Flex BuilderでApolloアプリケーションを作成する場合、主にMXMLとActionScriptが必要となってきます。

今回は、「Hello World」という文字を表示させるだけなので、FlexのMXMLだけを使用します。

まず、Flex Builder 2を起動して、[File]-[New]-[Apollo Project]を選択すると下のようなダイアログボックスが表示されるのでデフォルトで選択されている「Basic」のまま「Next」をクリックして次に進みます。


次にApolloアプリケーションのプロジェクト名を入力します。

今回は「HelloWorld」というプロジェクト名にします。プロジェクト名を入力後に「Finish」をクリックします。

プロジェクト名の設定が完了すると上の図のように、「HelloWorld.mxml」がデフォルトで開いています。また、あらかじめ、以下のようなコードが入っています。

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

</mx:ApolloApplication>

このコードに「Hello World」の文字を表示させるため以下のようにコードを記述します。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label text="Hello World!" />
</mx:ApolloApplication>

今回は、MXMLのmx:Labelを使い、以下の一行を追加して「Hello World!」を表示させます。

<mx:Label text="Hello World!" />

上記のコードを記述後、[Run]-[Run HelloWorld Ctr+F11]を選択して、アプリケーションを実行するか、もしくは、「Ctrl + F11」を押す、再生ボタンのアイコンをクリックしてアプリケーションを実行することができます。



アプリケーションを実行すると上のようなウィンドウが表示されます。「Hello World!」という文字が左上端に表示されました。しかし、この位置だと分かるにくいので、文字をウィンドウの中心に持って行きましょう。

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label text="Hello World!" horizontalCenter="0" verticalCenter="0" />
</mx:ApolloApplication>

以下の２行を追加することで文字をウィンドウの中心に持っていくことができました。

horizontalCenter="0"
verticalCenter="0"

---

コード全文

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label text="Hello World!" horizontalCenter="0" verticalCenter="0" />
</mx:ApolloApplication>