FlexでHTTPServiceを使ってWebサーバ上のXMLを取得、利用する方法

2009-04-09
このエントリーをはてなブックマークに追加

HTTPServiceであればそのままバインドしてしまうのが一番簡単なのですが、Flex側で加工して使いたいときもあります。そういうときはハセテツはArrayCollectionに格納してから加工して使います。FlexBuilder3.0、MacOSX、Safari3.2で動作確認しました。

<?xml version=”1.0″ encoding=”utf-8″?>
<response>
<item>
<id>1</id>
<name>hoge1</name>
</item>
<item>
<id>2</id>
<name>hoge2</name>
</item>
<item>
<id>3</id>
<name>hoge3</name>
</item>
<item>
<id>4</id>
<name>hoge4</name>
</item>
</response>

上記がサンプルのXML、これがhttp://localhost.hoge.xmlだとします。

private var list_connect:HTTPService = new HTTPService();
private function init():void
{
list_connect.url = “http://localhost/hoge.xml”;
list_connect.addEventListener(ResultEvent.RESULT,load_data);
list_connect.send();
}
private function load_data(event:ResultEvent):void
{
var modelData:ArrayCollection = new ArrayCollection();
modelData = event.result.response.item as ArrayCollection;
for each(var item:Object in modelData)
{
trace(item.id + ” / ” + item.name);
}
}

見たまんま、HTTPServiceの結果をArrayCollectionに入れてるだけです。簡単なんですけど、意外と手間取ったんですよね。。。

FlexでAccordionの内容を動的に追加/削除する

2009-04-07
このエントリーをはてなブックマークに追加

といっても、addChild/removeChildを使うだけなんですけどね。

複数のパーツを含んだコンテンツを追加する場合、addChildだとコンポーネントにしておかないとめんどくさいです。ので、ハセテツは先にすべてのコンテンツを作成しておいて、必要に応じてremoveChildというやり方です。

var obj:DisplayObject = this.accordion1.getChildByName(“hoge”);
this.accordion1.removeChild(obj);

accordion1にある「hoge」というコンテンツを削除します。

Visibleとかで切り替えられるのかと思っていたら、そう簡単にはいきませんでした。

TabNavigatorのタブ切り替えイベントでStateを切り替える

2009-02-17
このエントリーをはてなブックマークに追加

こんなの「tab_chenge」みたいなイベントがあって、それで制御できるだろうと思い込んでいました。っていうか、もしかしたらあるのかもしれない。例によって正解かどうかわかりませんが、期待通りの動きだと思います。

<mx:TabNavigator id=”tabnavigator1″ change=”tab_change(event)”>
  <mx:Canvas label=”タブ1”>
  </mx:Canvas>
  <mx:Canvas label=”タブ2”>
  </mx:Canvas>
</mx:TabNavigator>

上記がMXML。TabNavigatorに「タブが切り替わったら教えろや」ってイベントを設定しておきます。

private function tab_change(event:Event):void

 switch(tabnavigator1.selectedIndex.toString())
 {
  case ‘3’:
   currentState = “search”;
   break;
  default:
   currentState = “”;
   break;  
 }
}

で、これがAS側。あ、引数のevent使ってないや。上記の例だと、選択されたタブのインデックスが3(当然、0から始まるので4枚目のタブ、っていう意味です)だったら、Stateを「search」に切り替えてくださいという意味です。それ以外のタブがクリックされたら、ベースステートに戻ってくれます。

Canvasにclickイベントを設定しておいても、タブ自体がクリックされたイベントは判定してくれないんですね。タブはタブであって、Canvasではない、ということでしょう。まぁ確かにその通りです。

きっと、もっと美しい書き方があるのでしょう。ご存知の方が教えてくれるとうれしく思います。

AIRでアプリケーション終了の確認ダイアログを表示する

2009-02-13
このエントリーをはてなブックマークに追加

不慣れなActionScript、はじめてのAIR開発とあって、いろんなことでつまづき続けています。

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” applicationComplete=”init()” layout=”absolute”>
<mx:Script>
 <![CDATA[
  import mx.controls.Alert;
  import mx.events.CloseEvent;
  private function init():void
  {
     addEventListener(Event.CLOSING,application_closing);
  }
  private function application_closing(event:Event):void
  {
     event.preventDefault();
     Alert.show(“終了しますか?”,”終了の確認”,Alert.YES | Alert.CANCEL,null,goto_close);
  }
  private function goto_close(event:CloseEvent):void
  {
     if(event.detail==Alert.YES)
     {
      nativeWindow.close();
     }
  }
 ]]>
</mx:Script>
</mx:WindowedApplication>

 

applicationCompleteでイベントリスナーを追加しています。「closingイベントが起こったら呼べや」っていう感じですね。

で、呼ばれた関数の中で、ひとまずclosingイベントをキャンセルしています。確認云々のまえにキャンセルです。問答無用です。そのあと、確認します。キャンセルしておいて確認です。

確認ダイアログは、結果もコールバック関数です。これもはじめは違和感バリバリでした。C#だとそこで1回処理がとまるじゃないですか。基本的にすべてコールバック関数。慣れるまで戸惑いそうです。

確認ダイアログの結果によって、プログラムからアプリケーションを終了します。

正直、これが正しい実装方法なのかはまったくわかりません。こんな泥臭い方法じゃなくて、もっとスマートな記述方法があるのかもしれません。

まぁ、やりたかったことはできているようなのでOKかなと。

AIR 1.5、ActionScript 3.0です。

RIAでいってみよう

2009-02-10
このエントリーをはてなブックマークに追加

いまさら唐突にRIA開発がやってみたくなりました。ホントにいまさらです。選択肢はSilverlight2.0、Flex、Ajaxあたりでしょう。ハセテツのなかで、FlexとFLASHは別物です。タイムラインの概念があるのとないのとでは大違いです。

Ajaxはprototype.js、jquery等便利なライブラリがありますが、それでもコーディング量は多くなりそうな気がしてパス。

Silverlight2.0はC#が使えるということもあり、大本命だったのですがなんとなくFireFoxでの挙動が怪しかったりIEがフリーズ頻発したりでパス。あと、WPFの資料が少なすぎでギブ。Expression Blend 2もあんまり役に立ってくれなかった。コレであの値段って高くない?ターゲットブラウザがIEだけでいいっていうならアリだと思います。

 で、Flex。これはRIAとしてのFlex、インストール型アプリケーションとしてのAIRが含まれます。豊富なTips、便利なFlex Builder、安定したマルチプラットフォーム。大量のリファレンス。決定ですね。Flex Builder3もあの機能であればさほど高価ではないでしょう。

フロントエンドはFlex、AIR。サーバサイドはRoR。しばらくはコレでいってみようと思います。