flex in30 mins

18
Flex 快快快快 Product R&D Innovation Team

Upload: fatbear007

Post on 07-Nov-2014

1.512 views

Category:

Technology


7 download

Tags:

DESCRIPTION

FlexIn30Mins

TRANSCRIPT

Page 1: Flex In30 Mins

Flex 快速入门Product R&D Innovation Team

Page 2: Flex In30 Mins

Flex是什么 ?

开发 swf方法的一种 !

为开发人员提供 .

为开发应用程序 :

Web应用 (Flash Player)

桌面应用 (AIR)&

Page 3: Flex In30 Mins

•新的 VM+JIT•极大的性能提升•减小内存消耗•AS3.0 - ECMA 4 兼容•动态& 强类型语言•ECMAScript for XML (E4X)•易于升级 One-click•完全的向后兼容性

Flash Player 9

Page 4: Flex In30 Mins

FlexBuilder

基于 eclipse 的 IDE

集成 Design 、 Debug

动态 help

4J : ant脚本

Page 5: Flex In30 Mins

Flex Framework?visual components

Manager classesRPC/Messaging/Data Service

cUtilities

Page 6: Flex In30 Mins

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

MXML

Page 7: Flex In30 Mins

MXML – 组件

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

Page 8: Flex In30 Mins

MXML - “id”

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

Page 9: Flex In30 Mins

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>

Page 10: Flex In30 Mins

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>

Page 11: Flex In30 Mins

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>

Page 12: Flex In30 Mins

MXMLC 编译器•MXML to AS 3 (-keep-generated-actionscript=true)

•CSS to AS 3

•AS 3 to ByteCode

•Assets to SWF

•ByteCode to SWF

•SWF 运行于 Flash Player 9

Page 13: Flex In30 Mins

• 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

控件

Page 14: Flex In30 Mins

容器控件*(可包含控件及容器控件 )

• Canvas

• ControlBar

• Form

• FormHeading

• Grid

• HBox

• HDividedBox

•ModuleLoader

•Panel

•Spacer

•Tile

•TitleWindow

•VBox

•VDividedBox

Page 15: Flex In30 Mins

mx:Applicationmx:Application

mx:Buttonmx:Button

mx:Panelmx:Panel

mx:DataGridmx:DataGrid

mx:Buttonmx:Button

<?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>

Page 16: Flex In30 Mins

package com.mstc{

import mx.controls.Button;public class MyButton extends Button{

public function MyButton():void{

super();}

}}

<mstc:MyButton label="ClickMe"/>

Page 17: Flex In30 Mins

flex store 、 flex dashbord

资源

flex sdk document

flex component explorer

Page 18: Flex In30 Mins

问题、交流

邮件组:issi_dev_innovation