|
サイトマップ
|
更新日: 14/04/16
yFiles FLEX の開発環境のインストールと動作確認 (3)
Flash WEB-アプリケーション(Twitterビューワー) の作成
1) Flex プロジェクトを作成する
"
Adobe Flash Builder 4.5
" を起動します。
「
Flash Builder 体験版
」の画面が表示されるので、[
体験版の使用を続行する
]を押します。
「
Flash Builder の作業
」の画面が表示されるので、
"
ファイル(F)
->
新規(N)
->
Flexプロジェクト
" を選択します。
--> [
新規 Flex プロジェクト
] ダイアログが表示されます。
プロジェクト名に [
myTwitterViewer
] と記述します。
アプリケーションの種類は、"
Web (Adobe Flash Player で実行)(W)
" を選択します。
[
終了(F)
] を押します。
2) [データとサービスに接続]の設定を行う
「
Flash Builder の作業
」画面の下方にある[
データとサービスに接続
]をクリックします。
--> [
myTwitterViewer のデータとサービスに接続
] ダイアログが表示されるので、
[
HTTP
]を選択して[
次へ
]をクリックします。
[
HTTP サービスを設定
] ダイアログが表示されるので、
"
操作
->
URL
" に
[
http://api.twitter.com/1/statuses/public_timeline.xml
] を記述します。
"
パラメータ
->
サービスの詳細
->
サービス名
" に
[
Twitter
] を設定した後、
[
終了(F)
] を押します。
[
データとサービス
]パネル欄に「
Twitter
」という接続名が表示されたのがわかります。
この中の「
Operation1():Object
」にカーソルを合わせて
右クリック
し、
[
戻り値の型を設定...
]をクリックします。
[
戻り値の型を設定
] ダイアログが表示されるので、
[
サンプルデータから戻り値の型を自動検出
]を選択し、[
次へ(N)>
] を押します。
[
パラメーター値を入力して操作を呼び出す
]を選択し、[
次へ(N)>
] を押します。
下記のように Twitter の API の結果が出力されるので、[
ルートを選択
]の一覧メニューより「
status
」を選択します。これにより、パブリックタイムラインの発言一覧を取得することができます。[
終了
]ボタンを押して、データの設定は完了です。
3) Twitter 一覧を出力するためのテーブル(表)を作成する
[
コンポーネント
]パネルを開き、「
DataGrid
」(データグリッド) をドラッグ&ドロップし、「
Flash Builder の作業
」の画面に置きます。
次に、データグリッド上で
右クリック
し、コンテキストメニューを表示させ、
[
データにバインド
]を選択します。
--> [
バインド操作
] ダイアログが表示されることがあるので、その場合は [
OK
] を押します。
[
データにバインド
]ダイアログにて、[
新規サービスの呼び出し
]を選択し、[
OK
] を押します。
再び[
ソース
]モードに戻してみると、ソースコードが増えているのがわかります。
続いて再度データグリッドを選択し、
右クリック
でコンテキストメニューを表示させ、
[
列の構成
]を選択します。
[
列の構成
]ダイアログにて、「
created_at
」「
text
」「
user
」のみを残して、その他の項目を削除します。
また、それぞれのカラムの横幅を指定していきます。
まず、
created_at
の[
幅
]を
200
ピクセルに設定します。
text
は、[
幅
]を
500
ピクセルに設定します。
user
は、[
幅
]を
200
ピクセルに設定しますが、加えて、ユーザー名を表示するため[
フィールドにバインド
]のエリアを「
user
」から「
user.name
」に変更します。
[
OK
] を押します。
4) プログラムを実行する
画面上部にある[
実行
]メニューより[
実行
]を選んで実行します。
--> [
保管して起動
] ダイアログが表示されるので、[
OK
] を押します。
--> Webブラウザが開き、最新のパブリックタイムラインが表示されるのがわかります。