Flex “30分でわかるFlex”.

Presentation on theme: "Flex “30分でわかるFlex”."— Presentation transcript:

1 Flex “30分でわかるFlex”

2 Flexとは? SWFファイルを作成できる! Flashよりは開発者向け. アプリケーション作成に向いている タイムラインがない
ブラウザ (Flash Player)と デスクトップ (AIR)で動作する

3 Flash Player 9 ・新仮想マシンと最適化されたコンパイラ ・最高10倍の実行速度 ・メモリ消費量の軽減
・ ECMA 4 準拠のActionScript 3.0を採用 ・ ECMAScript for XML（E4X） ・名前空間とパッケージによるコード構成の向上 ・より多くの画像フォーマットを動的に読み込む ・エラー処理と例外機能の向上

4 MXML <Application>
<WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>

5 MXML - Components <Application>
<WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>

6 MXML - “id” <Application>
<WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>

7 MXML - Properties <Application>
<WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>

8 MXML - Events <Application>
<WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>

9 MXML - Bindings <Application>
<WebService id=“ws” wsdl=“catalog.wsdl”/> <Button label=“Get Data” click=“ws.getProducts()”/> <DataGrid dataProvider=“{ws.getProducts.result}”/> <LineChart dataProvider=“{ws.getProducts.result}”/> </Application>

10 MXMLC Compiler MXMLをActionScript 3に変換 CSSをActionScript 3に変換
AssetsをSWFに埋め込み バイトコードをSWFに変換 Flash Player 9でSWFを実行

11 Controls Button CheckBox ColorPicker NumericStepper ComboBox
DataGrid DateChooser DateField HSlider HorizontalList Image Label LinkButton List NumericStepper PopUpButton PopUpMenuButton ProgressBar RadioButton RichTextEditor Text TextArea TextInput TileList Tree VSlider VideoDisplay

12 Containers *(These hold Controls and other Containers)
Canvas ControlBar Form FormHeading Grid HBox HDividedBox ModuleLoader Panel Spacer Tile TitleWindow VBox VDividedBox

13 <mx:Application> <mx:Button width=”100” height=”50”/>
mx:Panel <?xml version="1.0" ?> <mx:Application> <mx:Button width=”100” height=”50”/> <mx:Panel width=”100%” height=”100%”> <mx:Button width=”100%”/> <mx:DataGrid width=”100%” height=”100%”/> </mx:Panel> </mx:Application> mx:Button mx:DataGrid

14 <test:MyButton label="ClickMe"/>
package com.test { import mx.controls.Button; public class MyButton extends Button public function MyButton():void super(); }