「Flash Builder 4」で始める「Flex」Part 1

「Flash Builder 4」で始める「Flex」と言うタイトルを付けてしまいましたが、「Flash Builder 4」も「Flex」にも詳しいわけではありません。

では誰が始めるのかと言うと僕が始めるのです。

「Flash Builder 4 Premium Edition」を購入したので、少しずつ学んで行くことにします。
自分のスキルアップに繋がることが目的のエントリーですが、同時に他の方にも参考になれば幸いです。

続けていくことで間違っている部分も出てくるとは思いますが、コメント等で指摘していただけるとありがたいです。
(同じチームメンバーの方も気がついた点があれば、指摘もしくは修正お願いします)

では、始めることとしましょう。

インストールから書いていこうかとも思いましたが、難解な点は何一つないと思いましたので割愛します。

始めると言いながら、実は最大の課題は何を作るかではないでしょうか。
一番最初なので恒例の「Hello world!」にしようかと思いましたが、それではあまりのもありきたいなので・・・

そこで悩んだ結果、「Flash Builder 4」の新機能でもある「データ中心型開発(DCD)」を試してみたいと思います。

「データ中心型開発(DCD)」の初歩ですので、簡単そうなところで今回のサブタイトルを決めました。

「Twitter」の「public_timeline」を取得してみよう。

ようやくここからが本題です。
(前振りが長くてすいません)

ではさっそく「Flash Builder 4」を起動してみましょう。

まず、プロジェクトを作成します。

1. 左上の「パッケージエクスプローラー」で右クリック
2. 「新規」から「Flex プロジェクト」を選択
3. プロジェクト名に「Hello_Twitter」と入力(プロジェクト名は任意)
4. アプリケーションの種類は「Web(Adobe Flash Player で実行)」を選択
5. 今回は他には特に設定はないので、「終了」ボタンを押下

これでプロジェクトが作成されました。

さっそく作って行きましょう。
「Hello_Twitter.mxml」が自動的に開くと思いますので、「デザイン」のボタンを押して「デザイン」ビューに切替えます。

左下の「コンポーネント」から「DataGrid」を画面にドラッグアンドドロップしてみましょう。
位置については任意で構いません。

ここから「データ中心型開発」の機能を使っていきます。
まずは「Twitter」のAPIから「public_timeline」を取得するための「URL」を調べます。
「Twitter REST API Method: statuses public_timeline」を見ると以下の「URL」であることが分かります。
「http://api.twitter.com/1/statuses/public_timeline.xml」

画面中央下の「データとサービス」のタブを選択します。

「データとサービスに接続」をクリックしてください。

「HTTP」を選択して「次へ」ボタンを押下します。

1. 「名前」に「public_timeline」と入力(任意の名前)
2. 「URL」に先程調べた「http://api.twitter.com/1/statuses/public_timeline.xml」を入力
3. 「サービス名」に「Twitter」と入力(任意の名前)
4. 「終了」ボタン押下

設定が完了すると「データとサービス」に「Twitter」と言う名前で「public_timeline() : Object」と言う項目が作成されているはずです。

「デザイン」ビューの「DataGrid」を右クリックして「データにバインド」を選択してみましょう。

このままですと「OK」ボタンが押せませんので、「戻り値の型を設定」をクリックします。

1. 「サンプルデータから戻り値の型を自動検出」が選択されている状態で「次へ」ボタン押下
2. 「パラメータ値を入力して操作を呼び出す」が選択されている状態で「次へ」ボタン押下
3. 「ルートを選択」が「statuses」となっているので、「status」に変更して「終了」ボタン押下
4. 「OK」ボタン押下

「status」にした理由は「status」以下のみあれば今回必要な情報は揃っているからです。

上記の設定が終わると自動的に「DataGrid」のヘッダー部に各要素名が設定されます。

もうこれで最低限は完成しています。
保存して実行してみましょう。

右に長い「DataGrid」が表示されますね。
しかも、これではいまいちよくわかりません。

そこで不要な列を削除しましょう。
再び「Flash Builder 4」に戻って「DataGrid」を右クリックして「列の構成」をクリックします。

1. 「text」と「user」以外を全て削除(順番を「user」「text」と変更)
2. 「user」を選択して、右の「フィールドにバインド」の「user」を「user.screen_name」に変更
3. 「OK」ボタン押下

再び実行してみましょう。

少しよくなりましたが、今度は「text」が見にくいので幅の調整をしてみましょう。

1. 「DataGrid」を選択して、右の「プロパティ」の中の「サイズと位置」を確認
2. 「幅：90%」「高さ：90%」に変更(任意)
3. 「共通」の中の「列の構成」をクリック
4. 「user」の「一般プロパティ」にある「幅」を「150」に設定(任意)

保存して実行

結構良くなったのではないでしょうか。
でも、なんか「Twitter」ぽくないですよね・・・

「ユーザーの画像」が欲しいですよね。
さっそく追加しましょう。

「Twitter」のAPIを見ると「ユーザーの画像」は「user」の中にある「profile_image_url」のようです。

1. 「DataGrid」を選択して、右クリックで「列の構成」をクリック
2. 「追加」ボタンを押下で「フィールドにバインド」の項目に「user.profile_image_url」と入力
3. 「ヘッダーテキスト」に「profile_image」と入力(任意)
4. 「幅」に「100」と入力(任意)
5. 「profile_image」を一番上に変更
6. 「OK」ボタン押下

保存して実行します。

画像が表示されることを期待していましたが、「URL」がそのまま表示されてますね・・・
このままでは残念すぎるので、「画像」が表示されるように変更します。

1. 「DataGrid」を選択して、右クリックで「列の構成」をクリック
2. 「profile_image」を選択して、「アイテムレンダラー」のピンクのボタン押下で「アイテムレンダラーの作成」をクリック
3. 「名前」に「profile_image」を入力(任意)
4. 「終了」ボタン押下
5. 「OK」ボタンを押下

上記の設定が終わると、「パッケージエクスプローラー」に「profile_image.mxml」が作成されているはずです。

「profile_image.mxml」を開いてみましょう。

「デザイン」ビューで見ると小さいのがありますね。
これを「画像」を表示するための「Image」に変更します。

1. 作成時に「Label」が表示されているので削除
2. 「s:MXDataGridItemRenderer」の「レイアウト」を「spark.layouts.VerticalLayout」に変更
3. 「整列」を「center」に変更
4. 左下の「コンポーネント」から任意の位置に「Image」をドラッグアンドドロップ
5. 「Image」コンポーネントを選択した状態で、「プロパティ」から「ID」を「image」に変更
6. 「ソース」を「{data.user.profile_image_url}」に変更
7. 「幅：48」「高さ：48」に変更

保存して実行します。

それっぽくなったのではないでしょうか。

今回はここまでとします。

それなりの見た目にはなったものの「DataGrid」ではそもそも「Twitter」ぽくならない気がします。
次回は「List」に変更して行きたいと思います。

今回の収穫
特にコーディングすることなくここまでできる。

「データ中心型開発」は非常に便利ですね。

しかし、エントリーとしてはかなり長くなってしまいました・・・
次回はもう少し簡潔にまとめられたらと思います。