Flex/第1回勉強会「Hello World」が出せるまで +α http://www.ark-web.jp/sandbox/wiki/275.html

Flex/第1回勉強会「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

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

|

tag: 勉強会, Flex

Menu

Movable Type用プラグイン Aシリーズ

ECサイト構築 Zen Cartハイエンド

Tag

最新の20件

2017-05-12

RecentDeleted

2014-04-30

JavaScript/クラス名を後から取得する方法

2013-09-16

ドメイン駆動開発/DDD体験ワークショップに参加しました（PHPカンファレンス2013）

2013-02-21

MenuBar

2012-09-04

2012-04-03

Ruby on Rails/rvm+passenger+mod_proxyの設定

2012-02-29

システム勉強会

2012-02-06

FrontPage

2012-01-19

2011-12-19

ネットワーク/socks5経由でsftp

2011-11-13

wakame/wakame-0.5.1 on Ubuntu-server 10.04 LTS Lucid Lynx

2011-08-08

mysql/groonga on Ubuntu-server 10.04 LTS Lucid Lynx

2011-07-07

2011-02-17

JavaScript/jQuery_Cycle_Pluginでメインビジュアルを作っていくチュートリアル

2010-12-02

paypalの決済の種類とビジネスモデルについて聞いてきました

2010-11-04

jQuery Mobileの使い方と挙動のまとめその１

2010-09-16

jQTouchの使い方とclass指定による挙動のまとめ

ARK-Webビジネスブログの最新記事

2014-01-08

Zen Cartのセキュリティー保守・脆弱性パッチ適用などでお困りなら

2014-01-07

コンテンツ・マーケティング：ダイナミックコンテンツ、スマートコンテンツという潮流

2014-01-06

新年あけましておめでとうございます（2014年最初のご挨拶）

2013-12-13

年末年始の休業期間のお知らせ（2013年～2014年）

2013-12-11

Zen Cartハイエンド版のモジュール：social_buttonsによりコンテンツを共有する

2013-11-29

「Zen Cartのカスタマイズ」ページを公開しました

2013-11-28

Zen Cartハイエンド版のモジュール：am_ajax_addressで郵便番号による住所自動入力をサポート

2013-11-26

北米NGO/NPOの７割はコンテンツマーケティングを去年より強化、第一目的はファンドレイジング、Facebookをよく使う（CMIのレポートから）

2013-11-19

Zen Cart1.3.0.2 EUC-JP版とPHP5.4の組み合わせで日本語（マルチバイト文字）が表示されない障害

2013-10-28

【Movable Type】MT6の最新情報と活用ポイント紹介のセミナーに登壇します

2013-10-18

【消費税増税】Zen Cartで消費税を変更するには：1.3.0.2系と1.5.1系の場合

2013-10-15

【脆弱性対応】A-Form 3.7.7 / A-Member 3.7.7 / A-Reserve 3.7.7をリリースしました。

2013-10-11

【重要なお知らせ】MTプラグインA-Form・A-Member・A-Reserveの脆弱性について（2013年10月11日三版）

2013-09-26

Zen Cartハイエンド版のモジュール：product_csvで商品データの一括インポート・一括エクスポートをする

2013-09-24

NGO、NPOや震災被災企業・団体の方へ：弊社MTプラグインがすべて「無償」になりました

Last-modified: 2007-11-23 (金) 08:31:27 (5999d)

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

サービス

Zen Cartソリューション

Movable Typeソリューション

その他ソリューション

アークウェブのCSR(企業の社会的責任)

アークウェブのCSR指針