&pgid();
** 勉強会の内容 [#a8d6f184]
- necoったーのデコレーションメーカーの構築を通じて、Flexアプリの作り方を学ぼう
** ustream [#w220f9df]
http://www.ustream.tv/channel/flex%E5%8B%89%E5%BC%B7%E4%BC%9A
#htmlinsert(study/flex-4.html)
** 今日の内容 [#r6f59237]
- デコレーションメーカーとは([[necoったー:http://neco.tter.jp]]のnecoのサムネイルをユーザーが飾り付けするサービス)
&ref(neco_service_080516.jpg);
の一部をちょっとだけ進めたので、それについて。
- アイテムリスト(リボンやめがねなどが並ぶ場所)
のアイテムリスト(リボンやめがねなどが並ぶ場所)
&ref(item_list.png);
のアイテムをHTTP経由でXMLを取得して、動的に作成する、というのをやります。
の部分で、アイテムをHTTP経由でXMLを取得して、動的に作成する、というのをやります。
#blikimore
** ItemListコンポーネントでASを読み込む [#of8b5a4c]
- as/ItemList.asというファイルを用意して、<Script>タグのsource属性で指定して読み込む。
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script source="as/ItemList.as" />
<mx:Image source="@Embed(source='/assets/item_list.png')" />
</mx:HBox>
- 参考: http://livedocs.adobe.com/flex/3_jp/html/usingas_4.html#626307
** ASの内容 [#pc3b7c0c]
- ItemListコンポーネントに、initメソッドを追加。
public function init() : void
{
log("初期化されましたー");
}
- mxmlカスタムコンポーネントへのメソッドの追加の仕方。
http://livedocs.adobe.com/flex/3_jp/html/mxmlcomponents_advanced_3.html#713552
- ItemListコンポーネントが作成されたときにこのinitが呼ばれるようにする
creationComplete="init()"
- 参考: http://livedocs.adobe.com/flex/3_jp/langref/mx/core/UIComponent.html#event:creationComplete
*** Flexがサーバーとやり取りする方法 [#n30d4011]
-Flexがサーバーとやり取りする方法は3つあります。
-- HTTPService (REST)
-- WebService (SOAP)
-- RemotingObject (RPC)\
- 参考) http://livedocs.adobe.com/flex/3_jp/html/data_intro_2.html#446921
- 今回はHTTPServiceを使います。
- HTTPServiceについてくわしくはここ。
http://livedocs.adobe.com/flex/3_jp/html/data_access_2.html#473538
** creationCompleteで、HTTP経由でXMLファイルをダウンロードする [#f49d5abe]
- HTTPServiceコンポーネントの作成
<mx:HTTPService id="itemListXML" url="item_list.xml"
method="GET" resultFormat='e4x' />
- AS側で、イベントハンドラを定義
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
public function init() : void
{
itemListXML.addEventListener(ResultEvent.RESULT, onResult);
itemListXML.addEventListener(FaultEvent.FAULT, onFault);
itemListXML.send();
}
public function onResult(event:ResultEvent):void {
log(itemListXML.lastResult);
}
public function onFault(event:FaultEvent):void {
log("読み込み失敗です");
}
** XMLをE4Xで処理する [#z59b36c3]
- E4Xとは?
ECMAScript for XML (E4X) 仕様邦訳
http://www.ne.jp/asahi/nanto/moon/specs/ecma-357.html
- くわしくはここ
http://livedocs.adobe.com/flex/2_jp/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001912.html
- コード例
for each (var item:XML in itemListXML.lastResult.item) {
log('名前:' + item.name);
log('画像:' + item.image);
}
** アイテムを作って埋め込む [#j00f1f82]
- 埋め込まれる親タグを用意。
<mx:HBox id='itemListContainer' />
- mx.Imageを作って、addChildすれば埋め込まれる。
import mx.controls.Image;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
public function init() : void
{
itemListXML.addEventListener(ResultEvent.RESULT, onResult);
itemListXML.addEventListener(FaultEvent.FAULT, onFault);
itemListXML.send();
}
public function onResult(event:ResultEvent):void {
for each (var item:XML in itemListXML.lastResult.item) {
var image:Image = new Image();
log('名前:' + item.name);
log('画像:' + item.image);
image.source = item.image;
itemListContainer.addChild(image);
}
}
public function onFault(event:FaultEvent):void {
log("読み込み失敗です");
}
** まとめ [#l5078b0e]
#blikifooter(志田);
#comment
tag: [[Flex>tag/Flex]]