&pgid;

**ネタ [#j20e7de8]
- [[Flex 2 ヘルプ:http://livedocs.adobe.com/flex/201_jp/html/wwhelp/wwhimpl/js/html/wwhelp.htm]]のファーストステップガイドから、Flex 2とはなにかを見ていき、Hello Worldなプログラムを作ってみる


** 発表者 [#a294e395]
- 志田

** 参加者 [#qd1617b0]
- 志田
- 竹村さん
- 進地さん
- 小沼さん

** 勉強会の動画 [#l9ed5c49]
#html(<iframe width=800 height=645 frameborder="0" scrolling="no" src="http://www.screencast-o-matic.com/embed?sc=ciQ1n4zK&w=800&np=0"></iframe>)

** Flexについて [#l961d5e7]
- [[Flex 2 ファーストステップガイド > Flex の概要 > Flex の概要 > Flex について:http://livedocs.adobe.com/flex/201_jp/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=intro_007_2.html#158620]]
- 次の2つをさす
-- プログラミングモデル
-- 製品群
- Flash9はFlex 2の実行環境だ
- Flex 2 SDK
-- Flex フレームワーク(クラスライブラリ)
-- Flex コンパイラ
-- デバッガ
-- MXML
-- ActionScript プログラミング言語
-- およびその他のユーティリティ
- Flex BuilderはFlexの開発のための統合環境で、当然それを使えば開発が楽だけど
- ''簡単にいえばAction ScriptとMXMLをテキストエディタで書いて、Flex SDKに付属のコマンドラインのコンパイラ mxmlcでコンパイルすればFlex Builderは買わなくても開発できるんだよ。''

** 早く作らせろ [#p803c9a8]
- [[Flex 2 ファーストステップガイド > Flex の基礎 > Flex アプリケーションの構築 > アプリケーションの開発 > アプリケーションモデル:http://livedocs.adobe.com/flex/201_jp/html/anatomy_010_03.html#888810]]
-- コンテナ
コントロールや他のコンテナが格納される、画面上の矩形の領域
-- コントローラー
Button や Text Input フィールドなどのフォームエレメント
- [[Flex 2 ファーストステップガイド > Flex の基礎 > Flex アプリケーションの構築 > Flex プログラミングモデル > Flex クラス階層と MXML および ActionScript との関係:http://livedocs.adobe.com/flex/201_jp/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=anatomy_010_09.html#889164]]
-- 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 を使用したユーザーインターフェイスの定義:http://livedocs.adobe.com/flex/201_jp/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=anatomy_010_12.html#889294]]
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
結構時間かかるよ &sad;
- sample.swfができてるのでそれをブラウザで見てみる。
http://okra.ark-web.jp/~shida/sandbox/flex2/study1/sample1.swf

** ActionScriptを書かせろ [#h7d63684]
-[[Flex 2 ファーストステップガイド > Flex の基礎 > Flex アプリケーションの構築 > Flex プログラミングモデル > Flex アプリケーションへの ActionScript の追加:http://livedocs.adobe.com/flex/201_jp/html/anatomy_010_13.html#889381]]
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

** レッスン [#f337efb3]
- [[Flex 2 ファーストステップガイド > レッスン > リストベースのフォームコントロールの使用 > コントロールの挿入と配置:http://livedocs.adobe.com/flex/201_jp/html/tutorial_controls_019_3.html#714197]]
 <?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
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

アークウェブのサービスやソリューションはこちら

サービス
Zen Cartソリューション
Movable Typeソリューション
その他ソリューション
アークウェブのCSR(企業の社会的責任)