Flex “30分でわかるFlex”

Flex
“30分でわかるFlex”
Flexとは?
SWFファイルを作成できる!
Flashよりは開発者向け.
アプリケーション作成に向いている
タイムラインがない
ブラウザ (Flash Player)と
デスクトップ (AIR)で動作する
Flash Player 9
・新仮想マシンと最適化されたコンパイラ
・最高10倍の実行速度
・メモリ消費量の軽減
・ ECMA 4 準拠のActionScript 3.0を採用
・ ECMAScript for XML(E4X)
・名前空間とパッケージによるコード構成の向上
・より多くの画像フォーマットを動的に読み込む
・エラー処理と例外機能の向上
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>
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>
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>
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>
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>
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>
MXMLC Compiler
•MXMLをActionScript 3に変換
•CSSをActionScript 3に変換
•ActionScript 3をバイトコードに変換
•AssetsをSWFに埋め込み
•バイトコードをSWFに変換
•Flash Player 9でSWFを実行
Controls
•
•
•
•
•
•
•
•
•
•
•
•
•
Button
CheckBox
ColorPicker
ComboBox
DataGrid
DateChooser
DateField
HSlider
HorizontalList
Image
Label
LinkButton
List
•NumericStepper
•PopUpButton
•PopUpMenuButton
•ProgressBar
•RadioButton
•RichTextEditor
•Text
•TextArea
•TextInput
•TileList
•Tree
•VSlider
•VideoDisplay
Containers
*(These hold Controls and other Containers)
•
•
•
•
•
•
•
Canvas
ControlBar
Form
FormHeading
Grid
HBox
HDividedBox
•ModuleLoader
•Panel
•Spacer
•Tile
•TitleWindow
•VBox
•VDividedBox
mx:Application
mx:Button
mx:Panel
mx:Button
<?xml version="1.0" ?>
<mx:Application>
<mx:Button width=”100” height=”50”/>
mx:DataGrid
<mx:Panel width=”100%” height=”100%”>
<mx:Button width=”100%”/>
<mx:DataGrid width=”100%” height=”100%”/>
</mx:Panel>
</mx:Application>
<test:MyButton label="ClickMe"/>
package com.test
{
import mx.controls.Button;
public class MyButton extends Button
{
public function MyButton():void
{
super();
}
}
}