アークウェブWebデザインSandBox

• バックアップ一覧
• ソース を表示
• Flex2/第一回勉強会 「Hello World」が出せるまで +α は削除されています。
  • 1 (2007-09-06 (木) 17:08:50)
  • 2 (2007-09-06 (木) 19:01:06)

Flex2/第一回勉強会 「Hello World」が出せるまで +α?

ネタ †

• Flex 2 ヘルプのファーストステップガイドから、Flex 2とはなにかを見ていき、Hello Worldなプログラムを作ってみる

発表者 †

• 志田

参加者 †

• 志田
• 竹村さん
• 進地さん
• 小沼さん

勉強会の動画 †

Flexについて †

• Flex 2 ファーストステップガイド > Flex の概要 > Flex の概要 > Flex について
• 次の2つをさす
  • プログラミングモデル
  • 製品群
• Flash9はFlex 2の実行環境だ
• Flex 2 SDK
  • Flex フレームワーク(クラスライブラリ)
  • Flex コンパイラ
  • デバッガ
  • MXML
  • ActionScript? プログラミング言語
  • およびその他のユーティリティ
• Flex BuilderはFlexの開発のための統合環境で、当然それを使えば開発が楽だけど
• 簡単にいえばAction ScriptとMXMLをテキストエディタで書いて、Flex SDKに付属のコマンドラインのコンパイラ mxmlcでコンパイルすればFlex Builderは買わなくても開発できるんだよ。

早く作らせろ †

• Flex 2 ファーストステップガイド > Flex の基礎 > Flex アプリケーションの構築 > アプリケーションの開発 > アプリケーションモデル
  • コンテナ
    コントロールや他のコンテナが格納される、画面上の矩形の領域
  • コントローラー
    Button や Text Input フィールドなどのフォームエレメント
• Flex 2 ファーストステップガイド > Flex の基礎 > Flex アプリケーションの構築 > Flex プログラミングモデル > Flex クラス階層と MXML および ActionScript との関係
  • ActionScript? クラスライブラリ
  • コンポーネント (コンテナおよびコントロール)
  • マネージャクラス
  • データサービスクラス
  • およびその他の機能に関するクラス
  • XML タグは、ActionScript? のクラスまたはクラスのプロパティに対応
    　<mx:Button label="Submit"/>
    　↑
    　対応
    　↓
    mx.controls.Buttonクラス
    http://www.adobe.com/support/documentation/jp/flex/1_5/asdocs_jp/mx/controls/Button.html
• Flex 2 ファーストステップガイド > Flex の基礎 > Flex アプリケーションの構築 > Flex プログラミングモデル > アプリケーションのレイアウト > MXML を使用したユーザーインターフェイスの定義
  sample1.mxml

  <?xml version="1.0" encoding="utf-8"?> 
  <!-- ?xml tag must start in line 1 column 1 -->
  
  <!-- MXML root element tag. -->
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  
     <!-- Flex controls exist in a container. Define a Panel container. -->
     <mx:Panel title="My Application">
  
         <!-- TextInput control for user input. -->
         <mx:TextInput id="myInput" width="150" text=""/>
  
         <!-- Output TextArea control. -->
         <mx:TextArea id="myText" text="" width="150"/>
  
         <!-- Button control that triggers the copy. -->
         <mx:Button id="myButton" label="Copy Text"/>
             
     </mx:Panel> 
  </mx:Application>

• Flex SDKをインストールしmxmlcを使えるようにする

  $ cd /usr/local/src
  $ wget Flex SDKのURL
  $ mkdir flex-sdk-2
  $ cd flex-sdk-2
  $ unzip ../flex_sdk_2_hf1.zip
  $ cd ../
  $ mv flex-sdk-2 /usr/share
  $ ln -s /usr/share/flex-sdk-2/bin/mxmlc /usr/bin/mxmlc
  $ export FLEX_HOME=/usr/share/flex-sdk-2

• いよいよコンパイル

  mxmlc sample1.mxml

  結構時間かかるよ
• sample.swfができてるのでそれをブラウザで見てみる。
  http://okra.ark-web.jp/~shida/sandbox/flex2/study1/sample1.swf

ActionScript?を書かせろ †

• Flex 2 ファーストステップガイド > Flex の基礎 > Flex アプリケーションの構築 > Flex プログラミングモデル > Flex アプリケーションへの ActionScript の追加
  sample2.mxml

  <?xml version="1.0" encoding="utf-8"?> 
  <!-- ?xml tag must start in line 1 column 1 -->
  
  <!-- MXML root element tag -->
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  
     <mx:Script>
         <![CDATA[
             
             // Define an ActionScript function.
             private function duplicate():void { 
                 myText.text=myInput.text;
             }
         ]]>
     </mx:Script>
  
     <!-- Flex controls exist in a container. Define a Panel container. -->
     <mx:Panel title="My Application">
  
         <!-- TextInput control for user input. -->
         <mx:TextInput id="myInput" width="150" text=""/>
  
         <!-- Output TextArea control. -->
         <mx:TextArea id="myText" text="" width="150"/>
  
         <!-- Button control that triggers the copy. -->
         <mx:Button id="myButton" label="Copy Text"
             click="duplicate();"/>
             
     </mx:Panel> 
  </mx:Application>

• コンパイルしてみてみる
  http://okra.ark-web.jp/~shida/sandbox/flex2/study1/sample2.swf

レッスン †

• Flex 2 ファーストステップガイド > レッスン > リストベースのフォームコントロールの使用 > コントロールの挿入と配置

  <?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
     <mx:Panel x="10" y="10" width="350" height="200" title="Rate Customer Service">
         <mx:ComboBox id="cbxRating" x="20" y="20" width="100">
             <mx:dataProvider>
                 <mx:Array>
                     <!-- These Object tags replace the String tags. -->
                     <mx:Object label="Satisfied" data="5"/>
                     <mx:Object label="Neutral" data="3"/>
                     <mx:Object label="Dissatisfied" data="1"/>
                 </mx:Array>
             </mx:dataProvider>
         </mx:ComboBox>
         <mx:Button x="140" y="20" label="Send"/>
         <mx:Label x="20" y="120" text="{cbxRating.value}"/>
     </mx:Panel>
  </mx:Application>

  コンパイルしてみてみる
  http://okra.ark-web.jp/~shida/sandbox/flex2/study1/sample3.swf