アークウェブWebマーケティングSandBox

• バックアップ一覧
• ソース を表示
• Flex2/第2回勉強会 Flex2開発ガイド第1部 第2章 MXML でのアプリケーション開発 は削除されています。
  • 1 (2007-10-25 (木) 09:32:29)
  • 2 (2007-10-25 (木) 10:57:50)

Flex2/第2回勉強会 Flex2開発ガイド第1部 第2章 MXML でのアプリケーション開発?

ネタ †

flex2_devguide.zipの第1部2章の部分の勉強会やります。

動画 †

2章 MXML でのアプリケーション開発 †

MXMLとは †

• MXMLはXML マークアップ言語
• ユーザーインターフェイスコンポーネントをレイアウトする
• サーバー上のデータソースの間のデータバインディングなど、アプリケーションの非ビジュアルな側面を宣言的に定義する
• MXML で定義されたアプリケーションは SWF ファイルにコンパイルされて Adobe Flash Player でレンダリングされる

単純なアプリケーションの記述、MXML の SWF ファイルへのコンパイル †

"hello.mxml"

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" >
<mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
</mx:Panel>
</mx:Application>

• コンパイル

  $ mxmlc --show-actionscript-warnings=true --strict=true hello.mxml
  設定ファイル "/usr/share/flex-sdk-2/frameworks/flex-config.xml" をロードしています
  /home/staff/shida/public_html/sandbox/flex2/2/hello.swf (131575 bytes)

• 生成されるswf
  http://okra.ark-web.jp/~shida/sandbox/flex2/2/hello.swf

MXML タグと ActionScript クラスの関係 †

• flex2は、MXMLとActionScript言語および、ActionScriptによるクラスライブラリを組み合わせて開発する
• MXML タグは ActionScript クラスまたはクラスのプロパティに対応する
• ActionScript Button クラス ==> <mx:Button label="Submit"/>

コンテナを使用したユーザーインターフェイスのレイアウト †

• コントロール
  • ボタンやテキストフィールド、リストボックスなどのフォームエレメントです。
• コンテナ
  • コントロールや他のコンテナを収めるための、画面上の矩形の領域です。
  • 子コンポーネントを水平にレイアウトするための HBox コンテナ
  • 子コンポーネントを垂直にレイアウトするための VBoxコンテナ
  • 子コンポーネントを行と列にレイアウトするための Grid コンテナ
• ナビゲータコンテナの例
  • タブ付きパネルを作成するための TabNavigator コンテナ
  • 折りたたみ可能なパネルを作成するための Accordion ナビゲータコンテナ
  • パネルを重ねてレイアウトするためのViewStack ナビゲータコンテナ

• 例

  <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
  paddingLeft="10" paddingRight="10">
  <mx:HBox>
  <!-- 3 つのアイテムからなるリスト -->
    <mx:List>
    <mx:dataProvider>
      <mx:Array>
        <mx:String>Item 1</mx:String>
        <mx:String>Item 2</mx:String>
        <mx:String>Item 3</mx:String>
      </mx:Array>
    </mx:dataProvider>
    </mx:List>
    <!-- TabNavigator の 1 番目のペイン -->
    <mx:TabNavigator borderStyle="solid">
    <mx:VBox label="Pane1" width="300" height="150">
      <mx:TextArea text="Hello World"/>
      <mx:Button label="Submit"/>
    </mx:VBox>
    <!-- TabNavigator の 2 番目のペイン -->
    <mx:VBox label="Pane2" width="300" height="150">
    <!-- ストックビューを挿入する -->
    </mx:VBox>
    </mx:TabNavigator>
  </mx:HBox>
  </mx:Panel>
  </mx:Application>

• できるswf
  http://okra.ark-web.jp/~shida/sandbox/flex2/2/container_layout.swf

ユーザーインターフェイスコントロールの追加 †

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:HBox>
<mx:TextInput id="myText"/>
<mx:Button click="storeZipInDatabase(myText.text)"/>
</mx:HBox>
</mx:Application>

• TextInputがコントロール
  • プロパティ
    • id
    • width
    • height
    • fontSize
    • colorなど
  • イベントリスナー
    • click
    • change など
  • エフェクトトリガ
    • showEffect
    • rollOverEffectなど

MXML タグの id プロパティの使用 †

• id="myText"で定義すると、 myText.textのように参照できる

  <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  ...
  <mx:VBox>
  <mx:TextInput id="myText" text="Hello World!" />
  <mx:Button id="mybutton" label="Get Weather" click="writeToLog();"/>
  </mx:VBox>
  <mx:Script>
  <![CDATA[
    private function writeToLog():void {
      trace(myText.text);
    }
  ]]>
  </mx:Script>
  </mx:Application>

XML 名前空間の使用 †

• 自作したカスタムコンポーネント(mxmlタグであらわされるクラスのこと?)をmxmlに記述する場合は、名前空間を追加読み込みする。
• containers/boxes/CustomBox.as として新しくCustomBoxコンポーネントを追加した場合

  <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                  xmlns:MyComps="containers.boxes.*">
  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
  paddingLeft="10" paddingRight="10">
  <MyComps:CustomBox/>
  </mx:Panel>
  </mx:Application>

MXML を使用したランタイムコードのトリガ †

• Buttonのclickイベントで、textarea1のtextプロパティに「Hello World」を設定する例

  <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
  paddingLeft="10" paddingRight="10">
  <mx:TextArea id="textarea1"/>
  <mx:Button label="Submit" click="textarea1.text='Hello World';"/>
  </mx:Panel>
  </mx:Application>

• <mx:Script> タグ内の ActionScript 関数でイベントリスナーを指定したアプリケーションのコード。

  <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
  <![CDATA[
    private function hello():void {
      textarea1.text="Hello World";
    }
  ]]>
  </mx:Script>
  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
  paddingLeft="10" paddingRight="10" >
  <mx:TextArea id="textarea1"/>
  <mx:Button label="Submit" click="hello();"/>
  </mx:Panel>
  </mx:Application>

コンポーネント間でのデータのバインディング †

• コンポーネント間のプロパティ値がリンクする

  <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
  paddingLeft="10" paddingRight="10" >
  <mx:TextInput id="textinput1" text="Hello"/>
  <mx:TextArea id="textarea1" text="{textinput1.text}"/>
  <mx:Button label="Submit" click="textinput1.text='Goodbye';"/>
  </mx:Panel>
  </mx:Application>

RPC サービスの使用 †

• WebService は、SOAP ベースの Web サービスへのアクセスを提供します。
• HTTPService は、データを返す HTTP URL へのアクセスを提供します。
• RemoteObject は、AMF プロトコルを使用して Java オブジェクトへのアクセスを提供します
• Webサービス(SOAP)にZIPコードを渡し、結果がテキストエリアに表示される例

  <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <!-- Web サービスへの接続を定義する
  ( 指定されている WSDL URL は架空のもの) -->
  <mx:WebService id="WeatherService"
  wsdl="http:/example.com/ws/WeatherService?wsdl" useProxy="false">
  <!-- TextInput コントロールに入力された ZIP コードの値を
  GetWeather 処理の ZipCode パラメータにバインドする -->
  <mx:operation name="GetWeather">
  <mx:request>
  <ZipCode>{zip.text}</ZipCode>
  </mx:request>
  </mx:operation>
  </mx:WebService>
  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
  paddingLeft="10" paddingRight="10" >
  <!-- ZIP コードを TextInput コントロールに入力する -->
  <mx:TextInput id="zip" width="200" text="Zipcode please?"/>
  <!-- Button のクリックにより、Web サービス処理を呼び出す -->
  <mx:Button width="60" label="Get Weather"
  click="WeatherService.GetWeather.send();"/>
  <!-- 指定された ZIP コードに対応する地域を表示する -->
  <mx:Label text="Location:"/>
  <mx:TextArea text="{WeatherService.GetWeather.lastResult.Location}"/>
  <!-- 指定された ZIP コードに対応する地域の現在の気温を表示する -->
  <mx:Label text="Temperature:"/>
  <mx:TextArea
  text="{WeatherService.GetWeather.lastResult.CurrentTemp}"/>
  </mx:Panel>
  </mx:Application>

データモデルへのデータの格納 †

• データモデルを使用すると、アプリケーション固有のデータを格納できる
• メソッドを必要としない単純なデータモデル
  • <mx:Model> タグ
  • <mx:XML> タグ
  • <mx:XMLList> タグ
• 電話番号などがModelデータモデルに格納される例

  <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <!-- データモデル "contact" に連絡先情報を格納します。 
  上記の各 TextInput コントロールの text プロパティが
  データモデルのフィールドに渡される -->
  <mx:Model id="contact">
    <info>
    <homePhone>{homePhoneInput.text}</homePhone>
    <cellPhone>{cellPhoneInput.text}</cellPhone>
    <email>{emailInput.text}</email>
    </info>
  </mx:Model>
  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
  paddingLeft="10" paddingRight="10" >
  
  <!-- ユーザーが TextInput コントロールに連絡先情報を入力する -->
  <mx:TextInput id="homePhoneInput"
  text="This isn't a valid phone number."/>
  <mx:TextInput id="cellPhoneInput" text="(999)999-999"/>
  <mx:TextInput id="emailInput" text="me@somewhere.net"/>
  </mx:Panel>
  </mx:Application>

データ検証 †

• バリデータコンポーネントを使用すると、データモデルまたは Flex ユーザーインターフェイスコンポーネントに格納されているデータを検証できる

  <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <!-- データモデル "contact" に連絡先情報を格納する
  上記の各 TextInput コントロールの text プロパティが
  データモデルのフィールドに渡される -->
  <mx:Model id="contact">
    <info>
      <homePhone>{homePhoneInput.text}</homePhone>
      <cellPhone>{cellPhoneInput.text}</cellPhone>
      <email>{emailInput.text}</email>
    </info>
  </mx:Model>
  
  <!-- TextInput コントロールに入力されたデータをバリデータコンポーネントで検証する -->
  <mx:PhoneNumberValidator id="pnV" source="{homePhoneInput}" property="text"/>
  <mx:PhoneNumberValidator id="pnV2" source="{cellPhoneInput}" property="text"/>
  <mx:EmailValidator id="emV" source="{emailInput}" property="text" />
  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
  paddingLeft="10" paddingRight="10" >
  
  <!-- ユーザーが TextInput コントロールに連絡先情報を入力する -->
  <mx:TextInput id="homePhoneInput"
  text="This isn't a valid phone number."/>
  <mx:TextInput id="cellPhoneInput" text="(999)999-999"/>
  <mx:TextInput id="emailInput" text="me@somewhere.net"/>
  </mx:Panel>
  </mx:Application>

• 生成されたswf
  http://okra.ark-web.jp/~shida/sandbox/flex2/2/validator_component.swf

データのフォーマット †

• フォーマッタコンポーネントは、生のデータを一方向に変換してフォーマットされたストリングを生成する ActionScript コンポーネント
• 123456789が12345-6789と表示される例

  <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  
  <!-- ZipCodeFormatter を宣言し、パラメータを定義する -->
  <mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####-####" />
  
  <mx:Script>
    <![CDATA[
    private var storedZipCode:Number=123456789;
    ]]>
  </mx:Script>
  
  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
  paddingLeft="10" paddingRight="10" >
  <!-- フォーマッタをトリガし、ストリングにデータを読み込む -->
  <mx:TextInput text="{ZipCodeDisplay.format(storedZipCode)}" />
  </mx:Panel>
  </mx:Application>

CSS ( カスケーディングスタイルシート) の使用 †

• CSSを使用して、コンポーネントにスタイルを宣言できます。
• MXML の <mx:Style> タグに、
  • インラインスタイル定義
  • スタイル定義が格納されている外部ファイルへの参照を記述
• class名「myClass」に、色「赤」を設定、「Button」タグに「フォントサイズ: 18pt」を設定する例

  <?xml version="1.0"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
    .myClass { color: Red } /* クラスセレクタ */
    Button { font-size: 18pt} /* タイプセレクタ */
  </mx:Style>
  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
  paddingLeft="10" paddingRight="10" >
  <mx:Button styleName="myClass" label="This is red 18 point text."/>
  </mx:Panel>
  </mx:Application>

• 生成されたswf
  http://okra.ark-web.jp/~shida/sandbox/flex2/2/css.swf

スキンの使用 †

• スキニング
  • コンポーネントのグラフィックエレメントを修正または置換することで外観を変更する処理です。
• グラフィックエレメント
  • シンボルで構成される
• シンボル
  • イメージ
  • 描画 API メソッドの出力
• スキンは、Flex コンポーネントの機能に変更を加えることなく交換できます。
• スキンを格納するファイルを" テーマ" と呼びます。
• スキン
  • グラフィカルスキン
  • プログラムスキン
• グラフィカルスキン
  • Adobe オーサリング環境から Adobe Flash Professional 8 で直接変更できる Adobe Flash シンボル (= イメージ?)
• プログラムスキン
  • ActionScript ステートメントを使用して描画するスキンで、クラスファイルの中に定義します( = 描画 API メソッドの出力?)

エフェクトの使用 †

• エフェクト
  • 短い時間内にコンポーネントに変化を与えること
  • フェーディング
  • サイズ変更
  • 移動
• トリガ
  • コンポーネント上でマウスがクリックされた
  • コンポーネントがフォーカスを受け取った
  • コンポーネントが可視状態になった
• ビヘイビア
  • エフェクトとトリガを組み合わせることで発生

    <?xml version="1.0"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- エフェクトを定義する -->
    <mx:WipeLeft id="myWL" duration="1000"/>
    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
    paddingLeft="10" paddingRight="10" >
    <!-- エフェクトをターゲットに割り当てる -->
    <mx:Button id="myButton" rollOverEffect="{myWL}"/>
    </mx:Panel>
    </mx:Application>

カスタム MXML コンポーネントの定義 †

• カスタムMXMLコンポーネント
  • 既存のコンポーネントをカプセル化および拡張
• MXMLコンポーネントファイル
  • カスタム MXML コンポーネントを使用するためにユーザーが作成する MXML ファイル
  • - MXML タグと ActionScript コードの組み合わせを記述できる
  • MXML ファイルの名前がクラス名となる
  • この名前で他の MXML ファイル内からコンポーネントを参照する。
• containers/boxes/MyComboBox.mxmlで作成したカスタムコンポーネントをcustom_component.mxmlから参照する例
  • カスタムコンポーネントファイル containers/boxes/MyComboBox.mxml

    <?xml version="1.0"?>
    <!-- MyComboBox.mxml -->
    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:ComboBox >
      <mx:dataProvider>
        <mx:String>Dogs</mx:String>
        <mx:String>Cats</mx:String>
        <mx:String>Mice</mx:String>
      </mx:dataProvider>
    </mx:ComboBox>
    </mx:VBox>

  • カスタムコンポーネントを使う例 custom_component.mxml

    <?xml version="1.0"?>
    <!-- MyApplication.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:MyComps="containers.boxes.*">
    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
    paddingLeft="10" paddingRight="10" >
    <MyComps:MyComboBox/>
    </mx:Panel>
    </mx:Application>

• 生成されたSWF
  http://okra.ark-web.jp/~shida/sandbox/flex2/2/custom_component.swf

投稿者志田 | パーマリンク?

|

tag: Flex2