1.Adobe Flex版本简介
2.Flexâ3ä¸Flexâ4çåºå«ï¼
Adobe Flex版本简介
Adobe Flex的系统发展历程从最初的版本开始。Flex Server 1.0和1.5主要针对企业应用开发,源码每个许可证定价约US$,系统且包含五个Flex Builder许可证。源码webbrowser 取源码 随着Flex 2的系统发布,许可模式发生了重大变化,源码"Flex Framework"技术被免费提供。系统新版Flex Builder 2基于Eclipse IDE,源码保留了高级功能如data push和自动测试,系统为企业用户提供持续服务。源码Flex2引入了ActionScript 3,系统摄影接单源码依赖Flash Player 9以上的源码版本运行。 Flex首次被Adobe冠名,系统标志着其身份的源码转变。进入Flex 3,系统新功能包括在线数据库精灵支持多个数据库,驱动源码获取如Derby、PostgreSQL等;视觉编辑增强了移动缩放功能,代码整理增加了变量重命名和项目文件包含;AS的批注支持生成HTML在线版本,方便查询;快速打包为AIR桌面应用,以及整合LiveCycle Data Services,tv源码 java支持服务器端编译。FLEX3在空间和文件体积上有所优化,且Flex框架集成到Flash Player,提升了跨网站的效率。 Flex 4的npm 源码包到来,SDK下载已开放,预计在年发布。值得关注的是,Flex与ColdFusion的结合,Macromedia在ColdFusion MX 7中嵌入了Flex的部分功能,尽管可用于开发RIA,但主要为丰富表单应用设计,非官方全力支持。 开发Flex应用的基本步骤包括:使用预定义组件构建界面,自定义布局,设定样式和主题,添加动态动作以实现应用交互,连接数据服务,最后从源代码生成SWF文件,以便在Flash播放器中运行。扩展资料
Adobe Flex是最初由Macromedia公司在年3月发布的,基于其专有的Macromedia Flash平台,它是涵盖了支持RIA(Rich Internet Applications)的开发和部署的一系列技术组合。Flexâ3ä¸Flexâ4çåºå«ï¼
1. éæAdobe Catalyst
Flex 4çä¸ä¸ªä¸»è¦ç¹æ§å°±æ¯æä¾äºå¯¹Adobe Catalystï¼Adobeæ°çè®¾è®¡å·¥å ·ï¼ç¨äºå建å¯Internetåºç¨èæ éç¼å代ç ï¼éæçæ¯æãCatalystæ¹åäºå¼åè ä¸è®¾è®¡è åä½çæ¹å¼ï¼å 为å®æ¸ æ¥å°ç¥éåºç¨å¼åè ä¸è®¾è®¡è ä¹é´å·¥ä½æ¹å¼çæ¾èå·®å¼ãè¿æ ·å¼åè ä¸è®¾è®¡è é½è½ä¸æ³¨äºèªå·±ææ é¿çé¢åï¼ååCatalystï¼æ 论å¼åè è¿æ¯è®¾è®¡è é½è½æç §èªå·±æä¹ æ¯çæ¹å¼è¿è¡å·¥ä½ãFlex 4ä¸çå¾å¤ååé½æ¯å´ç»çFlexä¸Catalystçéæè¿è¡çã请æ¥çAdobe Catalystç«ç¹ä»¥äºè§£å ¶è¯¦ç»ä¿¡æ¯ã
2. Sparkç»ä»¶æ¶æ
Flexçæ¯ä¸ªçæ¬é½å å«äºå®æ´çç»ä»¶åºï¼å ¶ä¸å«æç¨äºæ建åºç¨çéç¨ç»ä»¶ï¼å¦æ°æ®è¡¨æ ¼ãæé®åå¸å±å®¹å¨ççãFlex 4çåºå±ç»ä»¶æ¶æå为Sparkï¼èå¨Flex 3ä¸åå«åHaloã为äºæ¯æCatalystï¼Flex 4æ´æ°äºåºå±çç»ä»¶æ¨¡å以达å°æ¾è¦åçç®çã
å¨æ°çSparkç»ä»¶æ¨¡åä¸ï¼æ ¸å¿é»è¾ãç®è¤ä»¥åå¸å±é½è¢«åå¼äºï¼è¿æ ·æ们就è½åç¬å¤çå ¶ä¸ä»»æä¸é¨åèåä¸ä¼å½±åå°å ¶ä»é¨åãSparkç»ä»¶æ¨¡åæå»ºäº Haloç»ä»¶æ¨¡åä¹ä¸ï¼è¿æå³çSparkæ©å±äºHaloçæ ¸å¿åºç±»UIComponentï¼è¿æ ·æ们就è½ä»¥å¢éçæ¹å¼ä½¿ç¨Flex 4ï¼åæ¶è¿è½å°Flex 3ç»ä»¶åºç¨å¨Flex 4åºç¨ä¸ã
é¤æ¤ä»¥å¤ï¼Flex 4è¿å¯¹ææï¼effectï¼è¿è¡äºå¢å¼ºãç°å¨å¯ä»¥å°ææåºç¨å¨ä»»æç对象åç±»åä¸ï¼è¿ä¹åæåäºå ¶çµæ´»æ§ãFlex 4çææç±æ°çâspark.effectsâå å®ç°ãå°±åæ°çç»ä»¶åºä¸æ ·ï¼Flex 4çææä¹è¢«éæ°å®ç°äºï¼ä½å´å¹¶æ²¡æ对Flex 3çææè¿è¡ä»»ä½åæ´ï¼è¿ä¹åçç®çæ¯ä¸ºäºä¿æååå ¼å®¹ã请æ¥çChet Haaseæåçå ³äºFlex 4ææçæç« ææ¯å ¶å客以æ´å¤å°äºè§£Gumbo Effectã
请é 读ç½ç®ä¹¦ä»¥æ´å¤å°äºè§£Sparkæ¶æã
3. MXML
MXMLåºäºXMLï¼æ建äºFlash Playeræç¨çç¼ç¨è¯è¨ââActionScript 3ä¹ä¸ãMXMLç¨äºå¯¹ç¨æ·çé¢åæ¯æå·¥å ·ï¼æ¯å¦è¯´IDEï¼ç°å¨æ¯Catalystäºï¼çè§å¾åºåè¿è¡å¸å±ãMXML å å«äºå¤§éæ´æ°ä»¥å¯¹ä¸åçè¡ä¸ºï¼æ ¸å¿ãç®è¤åå¸å±ï¼è¿è¡è§£è¦ï¼åæ¶è¿æä¾äºæ°çç»ä»¶åºãç°å¨Flex 4çç»ä»¶å¨å ¶èªå·±çå ä¸ï¼spark.componentsï¼å¾ä»¥å®ç°ï¼åæ¶å没æ对Flex 3çç»ä»¶è¿è¡ä»»ä½åæ´ï¼ä¸ºæ¤MXML ä¸é¨æä¾äºä¸ä¸ªæ°çå½å空é´ä»¥æä¾æ¯æã
ä¸é¢çåºç¨å£°æ示ä¾å±ç¤ºäºå¦ä½ä½¿ç¨è¯¥å½å空é´ä»¥åå¦ä½ä¸ºSparkåHaloç»ä»¶å®ä¹å½å空é´ï¼
<s:Application
xmlns:fx=" /mxml/"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
è¿æ ·ï¼æ们就å¯ä»¥éè¿ä¸é¢ç代ç 声æFlex 4çButtonï¼
<s:Button label="My Flex 4 Button" />
ä¸é¢ç代ç 声æäºFlex 3çButtonï¼
<mx:Button label="My Flex 3 Button" />
请æµè§MXML è§èä»¥æ·±å ¥äºè§£å ¶ååã
4. 对View Statesçæ¹è¿
Flex 2å°ç¶æï¼statesï¼æ¦å¿µå¼å ¥å°äºFlexæ¡æ¶ä¸ï¼è¿æ ·æ们就å¯ä»¥éè¿ç®åçç¶ææ¹åæ¥ç®¡çè§å¾ç»ä»¶çååãFlex 4æ¹è¿äºè§å¾ç¶æï¼view statesï¼ä»¥ç®åå ¶è¯æ³ï¼è¿æ ·æ们就è½æ´è½»æ¾å°ä½¿ç¨ä»ä»¬äºãæ°è¯è¨å±æ§includeInåexcludeFromå°±æ¯ç®åè¯æ³çä¸ä¸ªä¾åï¼æ们å¯ä»¥è®¾å®ç»ä»¶çè¿ä¸¤ä¸ªå±æ§å¼ä»¥ååºç¶æååï¼åè§ä¸é¢ç代ç 示ä¾ï¼ã
<!-- Given the states A,B,C -->
<m:states>
<m:State name="A"/>
<m:State name="B"/>
<m:State name="C"/>
</m:states>
<!-- This button will appear in only states A and B -->
<Button label="Click Me" includeIn="A, B"/>
<!-- This button will appear in states A and B -->
<Button label="Button C" excludeFrom="C"/>
请ç¹å»è¿é以è¿ä¸æ¥äºè§£View Statesçååã
5. FXGæ¯æ
Flash Playerçæ ¸å¿æ¯ä¸ªç»å¾å¼æãAdobeå¨Flash Player ä¸å¼å ¥äºFXGï¼ç°å¨åå°å ¶å¼å ¥å°äºFlexä¸ãFXGæ¯ä¸ªå£°æå¼çå¾å½¢æ ¼å¼ï¼å¯ä»¥å¨å·¥å ·é´ä¼ éå 容ï¼è¿æå³ç设计è å¯ä»¥å¨CatalystæCS4 Illustratorä¸å建å 容ï¼æ¥ä¸æ¥Flexåºç¨å¼åè å°±å¯ä»¥å°å ¶å¯¼å ¥å¹¶ä½¿ç¨èæ éä¿®æ¹ä»»ä½å 容ã
请é 读FXGè§è以äºè§£æ´å¤ç»èä¿¡æ¯ã
6. ç®è¤å¢å¼º
Sparkç»ä»¶æ¨¡åæ大çååå¨äºå¯¹ç®è¤çé¢ è¦æ§æ¹é ï¼ç°å¨ç®è¤å¯ä»¥æ§å¶ç»ä»¶çææå¯è§åé¨åï¼åæ¶è¿å°é»è¾å°è£ å°äºç»ä»¶æ ¸å¿ä¹å¤ãè¿æ ·æ们就å¯ä»¥å¯¹ç»ä»¶çå¯è§åé¨åè¿è¡ç¬ç«ä¿®æ¹èä¸ä¼å½±åå°åºå±çæ ¸å¿é»è¾ã
æ¥ççPanelSkin.mxmlç®è¤æ件å§ï¼Panel容å¨çé»è®¤ç®è¤ä»£ç å¦ä¸ï¼
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx=" /mxml/" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.default.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Panel")]
]]>
</fx:Metadata>
<fx:Script>
/* Define the skin elements that should not be colorized.
For panel, border and title backround are skinned, but the content area and title text are not. */
static private const exclusions:Array = ["background", "titleField", "contentGroup"];
/**
* @copy spark.skins.SparkSkin#colorizeExclusions
*/
override public function get colorizeExclusions():Array { return exclusions;}
/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
static private const contentFill:Array = ["bgFill"];
/**
* @inheritDoc
*/
override public function get contentItems():Array { return contentFill};
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
. . . . .
<s:Rect left="1" right="1" top="" height="1">
<s:fill>
<s:SolidColor color="0xC0C0C0" />
</s:fill>
</s:Rect>
<!-- layer 5: text -->
<!-- Defines the appearance of the PanelSkin class's title bar. -->
<s:SimpleText id="titleField" lineBreak="explicit"
left="" right="4" top="2" height=""
verticalAlign="middle" fontWeight="bold">
</s:SimpleText>
<s:Group id="contentGroup" left="1" right="1" top="" bottom="1">
</s:Group>
</s:SparkSkin>
ç±äºè¯¥ç®è¤æ件å¯ä¸çä½ç¨å°±æ¯æ§å¶Panel容å¨çå¯è§åå¤è§ï¼å æ¤è®¾è®¡è å¯ä»¥ä¿®æ¹ç»ä»¶çæ ·å¼èæ éç¼è¾å ¶æºä»£ç ï¼ä¹ä¸å¿ äºè§£ç»ä»¶çå é¨è¡ä¸ºãæ´ä¸ºéè¦çæ¯ï¼è®¾è®¡è å¯ä»¥æç §èªå·±çæçæ¹å¼æ¥ä½¿ç¨Catalystã
请ç¹å»è¿éæ·±å ¥äºè§£Gumboçç®è¤ç»ä»¶ã
7. æ´æ°çå¸å±ç»ä»¶
çæFlexå¼åç人å¯è½ä¼æ³¨æå°Flex 3ä¸ç大å¤æ°å®¹å¨é½å·²ç»ä¸å¨Gumboç»ä»¶åºä¸äºãè¿æ¯ç±äºå¸å±å·²ç»è¢«è§£è¦äºï¼ç°å¨æ们éè¦éè¿ä»£çï¼delegtionï¼æ¥å¤çä»ä»¬ãå 为大å¤æ° Flex 3容å¨ä» ä» å°±æ¯ä¸ºäºæä¾ä¸åçå¸å±æ ·å¼ï¼æ¯å¦è¯´ç¨äºæ°´å¹³å¸å±çHBoxï¼ç¨äºåç´å¸å±çVBoxççï¼ï¼å æ¤ç°å¨ä»ä»¬å·²ç»æ²¡ä»ä¹ç¨äºã
ä¸é¢ç示ä¾è¡¨æFlexå¼åè ç°å¨ä¹å¯ä»¥å®ä¹å¸å±äºã该示ä¾å©ç¨Groupç±»æ¥ç®¡çæé®ï¼Groupæ¯ä¸ªæ°çSparkç±»ï¼ç¨äºç®¡çå ¶ä¸çå 容æ¡ç®ãå¸å±çç»æå°±æ¯ä¸¤ä¸ªå¹¶ææ¾ç½®çæé®ï¼å°±åæ¯ä½¿ç¨Flex 3ä¸çHBoxçç»æä¸æ ·ã
<s:Group width="" height="">
<s:layout>
<s:HorizontalLayout paddingLeft="5" paddingTop="5" />
</s:layout>
<s:Button label="Button 1" />
<s:Button label="Button 2" />
</s:Group>
æ¥èªAdobeçRyan Stewart对æ°çå¸å±æºå¶è¿è¡äºæ·±å ¥åæã
8. Flash Builder 4
Flash Builder 4ï¼ä¹åå«åFlex Builderï¼æ¯é¢ååºç¨å¼åè çææ°çEclipse IDEã该æ°çæ¬å¸¦æä¼å¤æ´æ°ï¼å æ¬æ¡ä»¶è°è¯æç¹ãæ´å¤çéæå·¥å ·å¹¶æ¯æFlexUnit 4ãä¸å¦å¾å¸¸ï¼å®è¿å æ¬MXMLãActionScript 3ãå¯è§å设计å¨ä»¥åFlexæ§è½ä¸å ååæå¨ï¼åªæä¸ä¸çææ该æ§è½åæå¨ï¼ã
é¤æ¤ä¹å¤ï¼è¯¥ææ°çè¿æä¾äºé«çº§çæ°æ®ç®¡çç¹æ§ä»¥ç®åæ°æ®ä¸ºä¸å¿åºç¨çå¼åãè¿å æ¬å®¢æ·ç«¯çæ°æ®ç®¡çç¹æ§ï¼å®å¯ä»¥å¤çCRUDæä½ä»¥åå¨å¤§éåä¸è¿è¡æ»å¨ã
请ç¹å»è¿éæ¥æ·±å ¥äºè§£è¯¥IDEã
9. ç¼è¯å¨æ§è½
å ä¹æ¯ä¸ªFlex 3å¼åè å¿ä¸é½æä¸ä¸ªçââç³ç³çç¼è¯å¨æ§è½ãåºäºæ¤ï¼Gumboçä¸ä¸ªä¸»è¦ç®æ å°±æ¯æ¹è¿Flex 4ä¸çç¼è¯å¨æ§è½ãè½ç¶å®æ¹å°æªåå¸æ§è½åºåï¼ä½æ¥èªAdobeçPeter Donovanæ ¹æ®èªå·±æä½çä¸äºè¯éªå¯¹å ¶è¿è¡äºæµè¯ï¼ç»æ表ææ°çç¼è¯å¨æ§è½æåäº%ãä»è¯´è¦æ³å°æ§è½æå3å°4ååªè½è¿è¡éæ°è®¾è®¡ãå½ç¶äºï¼æ¯ä¸ªä¼ä¸çº§Flexåºç¨çå¼åè é½å¸æä»å¹´åºFlex 4æ£å¼åå¸æ¶è½å®ç°è¿ä¸ç¹ã
请é 读Peter Donovançæç« æ¥æ·±å ¥äºè§£ç¸å ³ä¿¡æ¯ã
. æ°çææ¬åè½
Flashåºç¨ï¼æ 论æ¯Flexè¿æ¯éFlexåºç¨ï¼çä¸ä¸ªä¸»è¦è®®é¢å°±æ¯é«æå¤çææ¬çè½åãå¨Flash Player ä¸ï¼Adobeå¼å ¥äºå ¨æ°çææ¬å¼æ以æ¯æRIAçéè¦ï¼å¤è¯è¨ãæå°ä»¥åé®çå¿«æ·é®ççï¼ãGumboå¼å ¥äºå¤§éæ°çææ¬ç±»ï¼RichTextã SimpleTextççï¼ä»¥å¨Flexæ¡æ¶ä¸æä¾æ´å¥å£®çææ¬æ¯æãé¤æ¤ä»¥å¤ï¼Adobeæ£å¨å ¨åå¼åæ°çText Layout Framework以èµäºActionScript 3å¼åè å©ç¨Flash Playerææ¬å¼æçè½åã请ç¹å»è¿éä»¥æ·±å ¥äºè§£Text Layout Frameworkã
å¦ä½ æè§ï¼Flex 4代表äºè¯¥æµè¡çRIAå¹³å°ç巨大è¿æ¥ã请æ¥çMatt Chotinçæç« ãWhat's new in Flex 4 SDK betaãæ¥æ·±å ¥äºè§£Flex 4 SDKçååã