Flex技術(shù)介紹

1、FLEX技術(shù)介紹1 技術(shù)概述(Tech Reference)1.1 FLEX簡(jiǎn)介 Flex是Adobe公司推出的一系列工具和技術(shù)，使開(kāi)發(fā)人員可以開(kāi)發(fā)和部署可升級(jí)的富互聯(lián)網(wǎng)應(yīng)用程序（RIA）。富互聯(lián)網(wǎng)應(yīng)用程序（RIA）是指像開(kāi)發(fā)Web網(wǎng)頁(yè)一樣的簡(jiǎn)單方式來(lái)部署富客戶端程序。這種程序具有比HTML更加健壯、反應(yīng)更加靈敏和互動(dòng)性更豐富的特點(diǎn)。RIA利用相對(duì)健壯的客戶端描述引擎。這個(gè)引擎能夠提供內(nèi)容密集、響應(yīng)速度快和圖形豐富的用戶界面。并可利用豐富的控件庫(kù)隨時(shí)、快速的構(gòu)建富客戶端程序。RIA的另一個(gè)好處是，數(shù)據(jù)能夠被緩存在客戶端，從而可以實(shí)現(xiàn)一個(gè)比基于HTML的響應(yīng)速度更快且數(shù)據(jù)往返于服務(wù)器次數(shù)更少的用

2、戶界面。1.2 FLEX特點(diǎn)Flex可以在企業(yè)內(nèi)部或在Web上創(chuàng)建富互聯(lián)網(wǎng)應(yīng)用程序（RIA）。它使企業(yè)能夠創(chuàng)建個(gè)性化的豐富多媒體應(yīng)用程序，極大地提高用戶的體驗(yàn)，徹底革新人與Web的交互關(guān)系。包括：增強(qiáng)用戶體驗(yàn)、完善的開(kāi)發(fā)環(huán)境、通用的配置環(huán)境、企業(yè)級(jí)的特征、消除頁(yè)面加載、標(biāo)準(zhǔn)的架構(gòu)、與瀏覽器兼容、AIR應(yīng)用程序、可集成HTML、JavaScript、Ajax。1.3 FLEX開(kāi)發(fā)環(huán)境IDE：Flex Builder3。Flash Player插件：Install Flash Player 9 ActiveX.exe，Install Flash Player 9 Plugin.exe。1.4 FL

3、EX項(xiàng)目結(jié)構(gòu)MXML：MXML是一種XML標(biāo)識(shí)語(yǔ)言，用于進(jìn)行組件布局。MXML中的組件包括了可視組件和非可視組件。非可視組件可以是從服務(wù)器中讀取的數(shù)據(jù)源或用戶組件綁定至服務(wù)器中的數(shù)據(jù)。就像HTML一樣，MXML提供標(biāo)簽來(lái)定義界面。但MXML比HTML更結(jié)構(gòu)化，提供更豐富的標(biāo)簽集。用戶可根據(jù)需要，在MXML組件的基礎(chǔ)上進(jìn)行擴(kuò)展，從而創(chuàng)建自定義組件。MXML與HTML最大不同在于，MXML定義的應(yīng)用程序最終被編譯為SWF文件，由Flash Player來(lái)執(zhí)行。Flash Player下執(zhí)行MXML應(yīng)用程序比HTML應(yīng)用程序更加豐富、動(dòng)感。MXML代碼效果圖ActionScript3.0：Actio

4、nScript3.0是運(yùn)行于Flash Player運(yùn)行環(huán)境的編程語(yǔ)言，使用新的ActionScript虛擬機(jī)AVM2。AVM2使用新的二進(jìn)制指令集，并在性能上有很大改進(jìn)。同時(shí)，ActionScript3.0使用面向?qū)ο竽Ｐ?，擴(kuò)展和提高了應(yīng)用程序接口。ActionScript3.0代碼被FlexBuilder或Flash中的編譯器編譯成二進(jìn)制數(shù)據(jù)。這種二進(jìn)制數(shù)據(jù)被裝入SWF文件中，然后運(yùn)行于Flash Player運(yùn)行環(huán)境中。Flex工程中可有兩種方式使用ActionScript3.0代碼：一種是在MXML文件的<mx:Script>標(biāo)簽下使用，另一種是直接在AS文件中編寫。AS代

5、碼效果圖CSS：控制Flex組件樣式。效果圖1.5 RSL介紹減少應(yīng)用SWF文件大小的一個(gè)方法就是將一些共享的外部資源拆分出去，成為一個(gè)獨(dú)立的文件，這樣可以單獨(dú)地加載緩存到客戶端，這些共享資源可以由多個(gè)應(yīng)用在運(yùn)行時(shí)進(jìn)行加載，但是傳遞到客戶端的動(dòng)作只會(huì)發(fā)生一次，這些共享文件被稱為運(yùn)行時(shí)共享庫(kù)（Runtime Shared Libraries）或簡(jiǎn)寫為RSL。如果你有多個(gè)應(yīng)用而且這些應(yīng)用共享一些核心組件或者類，那么作為RSL，用戶只會(huì)唯一的一次加載這些資源。只要應(yīng)用在同一個(gè)域中，這些應(yīng)用共享同一個(gè)緩存的RSL，這樣應(yīng)用文件的大小就減小了。使用RSL的應(yīng)用越多，效果越好，如果只有一個(gè)應(yīng)用，總的文件大

6、小不但不減小，反而會(huì)增大。操作：在Flex項(xiàng)目目錄上點(diǎn)擊鼠標(biāo)右鍵，選擇Properties，彈出屬性窗口，繼續(xù)選擇Flex Build Path屬性，點(diǎn)擊Library path，把Framework linkage選擇改成Runtime Shared Library（RSL）即可。操作圖1.6 安全沙箱用Flex進(jìn)行URL調(diào)用網(wǎng)頁(yè)(jsp文件放在tomcat下的webapps下)上的數(shù)據(jù)時(shí)，如果Flex生成的程序在工程所在路徑時(shí)沒(méi)有任何問(wèn)題，可如果把程序文件的路徑更改后，就會(huì)報(bào)安全沙箱問(wèn)題，解決方法就是在tomcat的安裝目錄下的%tomcat%/webapps/ROOT/下放置一個(gè)名叫cr

7、ossdomain.xml的文件，記住，名字必須是crossdomain，不然不起作用，crossdomain.xml文件的內(nèi)容是：<?xml version="1.0"?><!DOCTYPE cross-domain-policySYSTEM "<cross-domain-policy><allow-access-from domain="*" /></cross-domain-policy> 然后重新啟動(dòng)tomcat后運(yùn)行程序即可如果要限制訪問(wèn)的網(wǎng)站可以在<allow-a

8、ccess-from domain="*" />中的 *改成網(wǎng)站名，如改成<allow-access-from domain="" />還有一種情況，當(dāng)我們將bin里的程序以及文件拷貝到其他地方時(shí)運(yùn)行報(bào)錯(cuò)，是因?yàn)镕LEX編譯的SWF文件，只能選擇訪問(wèn)本地文件或訪問(wèn)網(wǎng)絡(luò)文件，二者只能取一，而Flex 編譯的默認(rèn)選項(xiàng)是只能訪問(wèn)網(wǎng)絡(luò)文件，所以你將bin里的東西COPY到其他地方就不能讀取了。而你在默認(rèn)的bin目錄下可以讀取得到，是因?yàn)镕LEX認(rèn)為你是在IDE環(huán)境種，這時(shí)是沒(méi)有這個(gè)所謂的安全限制的。 解決辦法就是在編譯時(shí)，加個(gè)參數(shù) -use-n

9、etwork=false 就OK了 (FB里,選菜單Project>Properties>Flex Compiler輸入這個(gè)參數(shù)) 但這樣做的話,你的SWF就不能讀取網(wǎng)絡(luò)的數(shù)據(jù)了。1.7 圖形報(bào)表設(shè)計(jì)以柱狀圖為例，下圖為MXML與AS代碼。MXML組件標(biāo)簽：MXML代碼ActionSctipt實(shí)現(xiàn)代碼：AS代碼效果圖1.8 FLEX開(kāi)發(fā)技巧MXML設(shè)計(jì)技巧：可以點(diǎn)擊Design對(duì)其進(jìn)行設(shè)計(jì)，在FB左邊的Components庫(kù)中顯示了所有的組件模型，開(kāi)發(fā)人員可以通過(guò)拖拽的方式把相應(yīng)的組件放到MXML文件中，再點(diǎn)擊Source會(huì)發(fā)現(xiàn)已生成MXML標(biāo)簽。在FB右邊是對(duì)組件的樣式設(shè)置，使用

10、起來(lái)跟Dreamweaver一樣。效果圖CSS設(shè)計(jì)技巧：同樣是點(diǎn)擊Design按鈕，改變Style選擇，選擇你需要修改的組件，在FB右邊可見(jiàn)相應(yīng)組件樣式設(shè)置選項(xiàng)，開(kāi)發(fā)人員可隨意定制樣式。下圖以Button組件為例：效果圖2 Java開(kāi)發(fā)模型(Application Development)2.1 開(kāi)發(fā)模型圖表組件架構(gòu)邏輯視圖實(shí)現(xiàn)圖2.2 數(shù)據(jù)封裝API2.2.1 數(shù)據(jù)模型請(qǐng)先看XML格式，有助于更好的理解數(shù)據(jù)模型的設(shè)計(jì)原理。 數(shù)據(jù)模型類定義. Graph. Chart. DataSet. Item 層次結(jié)構(gòu) 具體類分析2.2.2 XML模板2.2.2.

11、1 實(shí)現(xiàn)類定義com.handlewell.chart.util. ChartUtils 分析/ 按Graph的內(nèi)容直接輸出xml數(shù)據(jù)給圖形控件public static void render(HttpServletResponse resp,Graph bean) / 把XML內(nèi)容直接給圖形控件public static void render(HttpServletResponse resp,String xml) / 把Graph解析成XML，輸出到指定的流中public static void render(OutputStream out,Graph bean) /

12、把XML內(nèi)容直接輸出到指定流中public static void render(OutputStream out,String xml) 模板：. graph.ftl2.2.3 圖形報(bào)表封裝 類定義com.handlewell.chart.service. ChartManager 分析3 FLEX與開(kāi)發(fā)框架整合及實(shí)例演示3.1 View層把編譯后的Flex文件引入頁(yè)面，如圖：3.2 Control層在Servlet或Action中，引入ChartManager對(duì)象，使用其提供的接口，生成Flex程序所需的XML流。如圖：3.3 實(shí)例 3.3.1 A

13、ction拼裝XMLList<DataSet> datasets = new ArrayList();/ 數(shù)據(jù)源集合List<Chart> charts = new ArrayList();/ 圖形報(bào)表集合String hql = "select id,item from Table"List list = beanManager.find(hql);DataSet dataset = chartManager.createDataSet(list, "Name", "*.do");/ 創(chuàng)建數(shù)據(jù)源dataset

14、s.add(dataset);Chart chart = chartManager.createPieChart(datasets);/ 創(chuàng)建柱狀圖報(bào)表樣式charts.add(chart);String xhql = "select item from Table"List xlist = beanManager.find(xhql);List xaxis = chartManager.createXaxis(xlist);/ 橫坐標(biāo)集合chartManager.createGraph(response, charts, xaxis, "橫坐標(biāo)", "縱坐標(biāo)", "");3.3.2 Flex Object對(duì)象指定U