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

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 の第2引数で値を渡すことができます。


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(); でリストに戻ります。


[実行構成]を設定します。起動方法をシミュレーターによるデスクトップにする、Android 実機がある場合はデバイスを指定することもできます。


リストを選択すると


選択したテキストを表示することができました。

Flash Catalyst で、View を作成して、Flash Builder でそれらを組み立ててコンテンツをつくっていく方法がモバイルでも主流になりそうな気がします。

HTML5飯