Edibuild

前回から間が開いてしまいましたが、Flex事始めの1発目、行きましょう。
ほかのFlex系のチュートリアルを見ていると、まずはmxmlを組みそこにasを書いて行っていますが、このブログではいきなりasを別ファイルにした上で画面に組み込んでいきます。

まずは作業をしてみましょう。Flex Builderを立ち上げてください。

起動画面は人によってそれぞれだと思うので割愛。

新規にプロジェクトを作成します。操作はこちら。

プロジェクト名は kotohajime_01 、アプリケーション種類はWebアプリケーションにします。

と、ビルダーの画面はこんな感じになると思います。

今回作るのはプログラム事始めの基本、「Hello World」。

画面上に配置されたテキストボックスの内容を Hello World に書き換えます。

画面の詳細やコードの解説は次に譲るとして、ガシガシと作っていきます。

画面上部の【デザイン】と言うボタンを押してデザインモードに切り替え、

画面上にテキストボックスを配置しましょう。

ちなみに、配置したテキストボックスを選択した上で、右下のレイアウトパネルの制約を図のように変更すると、ブラウザのサイズに関わらず必ず画面の真ん中に配置されます。

この時点で1度、テスト起動してみましょう。

キーボードの【F11】キーを押してみてください。Macの場合は【Command】＋【F11】。

デバッグビルドが開始され、ブラウザが立ち上がり、こんな画面が出ているはずです。

確認したらブラウザは1度閉じて下さい。

続いてasファイルの準備です。まずはasファイルを入れるフォルダーを作ります。

Flex ナビゲーターパネルの【src】フォルダーを右クリックして【新規】->【フォルダー】を選択。

フォルダー名は ori_as

フォルダーが出来たら、その中にasファイルを作ります。
【ori_as】フォルダーを右クリックして【新規】->【ActionScript クラス】を選択。

ファイル名は Com_kotohajime 、OKを押す前に一作業必要です。

インターフェイスの【追加】ボタンをクリックし、必要な記述を自動入力してもらいます。

追加するインターフェイスは IMXMLObject 。実際の操作は画像と同じようにしてみて下さい。

asファイルに必要なコードを追加します。

こんな感じ。

package ori_as
{
 import mx.core.IMXMLObject;

 //↓追加
 import mx.events.FlexEvent;
 //↑追加

 public class Com_kotohajime implements IMXMLObject
 {

 //↓追加
 public var view:kotohajime_01;
 //↑追加

 public function Com_kotohajime()
 {
 }

 public function initialized(document:Object, id:String):void
 {

 //↓追加
  view = document as kotohajime_01;
  view.addEventListener(FlexEvent.CREATION_COMPLETE , CreationComplete_View);
 //↑追加

 }

 //↓追加
 public function CreationComplete_View(e:FlexEvent):void
 {

 }
 //↑追加

 }
}

まだまだ未完成ですが、先にmxmlの方を仕上げます。

kotohajime_01.mxml に戻り、【ソース】ボタンを押してソース編集モードに切り替えてから、mxmlの編集を行います。

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

	<controller:Com_kotohajime id="viewController"/>

	<mx:Text text="文字" horizontalCenter="0" verticalCenter="0" id="txtTarget"/>

</mx:Application>

変更点としては

・mx:Application タグに xmlns:controller=”ori_as.*” と言う属性を追加

・<controller:Com_kotohajime id=”viewController”/> タグを追加

・mx:Text タグに id=”txtTarget” と言う属性を追加

となります。

ここまで来たら Com_kotohajime.as に戻って、テキスト変換の記述を追加します。

package ori_as
{
 import mx.core.IMXMLObject;

 //↓追加
 import mx.events.FlexEvent;
 //↑追加

 public class Com_kotohajime implements IMXMLObject
 {

 //↓追加
 public var view:kotohajime_01;
 //↑追加

 public function Com_kotohajime()
 {
 }

 public function initialized(document:Object, id:String):void
 {

 //↓追加
  view = document as kotohajime_01;
  view.addEventListener(FlexEvent.CREATION_COMPLETE , CreationComplete_View);
 //↑追加

 }

 //↓追加
 public function CreationComplete_View(e:FlexEvent):void
 {

 view.txtTarget.text = "Hello World";

 }
 //↑追加

 }
}

変更点としては、

・CreationComplete_View の中に view.txtTarget.text = “Hello World”; を追加

という感じです。

さあ、実際に起動してみましょう！

キーボードの【F11】キーを押してみてください。

先ほど「文字」としか表示されていたのが、

今回は「Hello World」に書き換わっているはずです。

とりあえず作業としてはこんな感じ。

解説は長くなるので、次のエントリーに続きます。

今回のプロジェクトファイルはこちら