Flex Builder 3を使ってAdobeのチュートリアルを試す #2

Tweet

途中まで読んで、ようやくプロジェクトの作り方からの説明があった。 どうやらここからがチュートリアルのようだ。 ということで、先ほどインポートしたプロジェクトは無視して進めていくことにする。なんという無計画。

プロジェクトの作成

• [ファイル]→[新規]→［Flexプロジェクト］を選択
• プロジェクト名に「FlickrRIA」と入力してOK
• アプリケーションの種類は「Webアプリケーション（Flash Playerで実行）」を選択
• サーバテクノロジは「なし」を選択

そして終了をクリックすると作成される。

画面フォーマット

プロジェクトを作成するとFlickr.mxmlが開かれる。 左上に「ソース」タブと「デザイン」タブがあるが、まずは「ソース」タブを選択肢、修正する。

修正前

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:Application>

修正後

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 backgroundGradientColors="[0xFFFFFF,0xAAAAAA]"
 horizontalAlign="left"
 verticalGap="15" horizontalGap="15" >
</mx:Application>

恐らくデザインの修正なので、仮に失敗しても何とかなるだろう、との気軽な感じで次に進めばいいだろう。

デザインモードで検索フォーム作成

そろそろ面白くなってきた。 左上の「デザイン」タブを押して、検索フォームをグラフィカルに作成していく。

左下の「コンポーネント」というビューには、恐らくあらかじめ準備されているFlashの数々のコンポーネントが列挙されている。 その中のレイアウトの下のHBoxをドラッグ＆ドロップで画面上に持っていくと、ポップアップが現れて表示サイズを聞いてくるので、そのままOKボタン。

たったこれだけ。 まあ、そうだろうなと予測はしていたけど、なんと嬉しいことか。 正直言ってアプリケーション作る時は、大抵頭の中には作りたいものが具体的にあって、その作り方もかなり細かいレベルでイメージしている。 後は手を動かすだけなんだけど、その手を動かす時間が煩わしくてしかたがないわけだ。 思考のスピードに手のスピードがついてくるはずなどないのだけど、こういうGUIビルダーというのは考えうる現実の解の中ではやはり最適だと思う。 ブラウザアプリケーションの世界にももっと普及すべきだ。 僕が知らないだけで普及しているのだろうか？

次はコントロールの下のLabelを先ほど作成したHBoxの領域にドラッグ＆ドロップ。 そのラベルの中をダブルクリックしてラベルの文字列を編集する。 Adobeのチュートリアルではラベルの文字列も英語なので、なんとなくオレ日本語に翻訳してみよう。

同じくコントロールの下のTextInputをHBoxの領域内にドラッグ＆ドロップ。 ラベルの右側に配置する。 さらにその右側に同じくコントロール下のButtonを配置し、ボタンの文字列を「検索」というオレ日本語に変更する。 以下のようになったはずだ。

一度「ソース」タブを選択してどうなったか見てみよう。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
     backgroundGradientColors="[0xFFFFFF,0xAAAAAA]"
     horizontalAlign="left"
     verticalGap="15" horizontalGap="15" >
    <mx:HBox width="100%">
        <mx:Label text="Flickrタグ もしくは検索ワード"/>
        <mx:TextInput/>
        <mx:Button label="検索"/>
    </mx:HBox>
</mx:Application>

mx:HBoxという領域内にmx:Label、mx:TextInput、mx:Buttonが配置されているのがわかるはずだ。デザインのほうでサイズなどを変更すればソース上でwidthなどの属性として反映されるようになっている。適宜画面を見ながら好きなように変更してもよい。

では次回はFlickrに接続する部分の処理を実装していく。