Flex モバイルプロジェクトをためそう

matsumura

Nov 01, 2010

2009
Android
ar
Catalyst
class
event
Event
Flash
Flex
html
ie
kayac
Mobile
png
protected
sdk
sion
this
ui
XML
xml
プロパティ
引数

海賊王をめざす男マツです。こんにちは。

Flash Builder Burrito Preview と Flex SDK "Hero" をつかって、Flex モバイルプロジェクトをためしてみます。

Flex モバイルプロジェクト

[ファイル]_[新規]_[Flex モバイルプロジェクト]

[プロジェクト名]、[プロジェクトの場所]を指定します。

[モバイル設定]をします。

[サーバー設定]をします。アプリケーションサーバーの種類：なし

[ビルドパス]を設定します。メインアプリケーションファイルを変更することもできます。Base.mxml に変更してみます。

コンポーネントパネルをみると現時点で Flex モバイルプロジェクトに使用できるコンポーネントを確認することができます。
正式にリリースされるときにはさらに増えるかもしれません。

サンプル

Base.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					 xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.ListView">
	<fx:Declarations>
	</fx:Declarations>
</s:MobileApplication>

firstView に MXML コンポーネントを指定します。

views.ListView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="麦わら海賊団">
	<fx:Script>
		<![CDATA[
			import spark.events.IndexChangeEvent;
			protected function memberListChange(event:IndexChangeEvent):void
			{
				navigator.pushView(views.MemberView, memberList.selectedItem);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<s:ArrayCollection id="memberArrC">
			<fx:String>ルフィ</fx:String>
			<fx:String>ゾロ</fx:String>
			<fx:String>ナミ</fx:String>
			<fx:String>ウソップ</fx:String>
			<fx:String>サンジ</fx:String>
			<fx:String>チョッパー</fx:String>
			<fx:String>ロビン</fx:String>
			<fx:String>フランキー</fx:String>
			<fx:String>ブルック</fx:String>
		</s:ArrayCollection>
	</fx:Declarations>
	<s:List id="memberList" width="100%" height="100%" change="memberListChange(event)" dataProvider="{memberArrC}">
		<!--
		<s:itemRenderer>
			<fx:Component>
				<s:MobileIconItemRenderer />
			</fx:Component>
		</s:itemRenderer>	
		-->
	</s:List>
</s:View>

今回は簡単なリストなので List コンポーネントの dataProvider に ArrayCollection をセットするだけですが、MobileIconItemRenderer コンポーネントを使用すると iconField, messageField, labelField などのプロパティによってリストの itemRenderer をさっと作成することが可能になっています。
List コンポーネントで忘れていけなのは、height="100%" とすること。これによってリストにスクロールバーが表示されます。
navigator.pushView の第２引数で値を渡すことができます。

MemberView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" title="メンバー" creationComplete="creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				testLabel.text = String(this.data);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
	</fx:Declarations>
	<s:VGroup x="0" y="0" width="100%" gap="10" top="10">
		<s:Label id="testLabel"/>
		<s:Button label="リストに戻る" click="{navigator.popView();}" width="100%" />
	</s:VGroup>
</s:View>

navigator.popView(); でリストに戻ります。