アークウェブシステム開発SandBox

• 追加された行はこの色です。
• 削除された行はこの色です。
• Flex/第4回勉強会 HTTPServiceとE4Xの利用 へ行く。
• Flex/第4回勉強会 HTTPServiceとE4Xの利用 の差分を削除

 &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]]