閱讀(10.5k) 書簽贊(1) 我要糾錯(cuò)

Flex 快速指南

2018-01-01 17:55 更新

Flex - 概述

什么是Flex？

Flex是一個(gè)強(qiáng)大的開源應(yīng)用程序框架，允許使用相同的編程模型，工具和代碼庫構(gòu)建針對瀏覽器，移動設(shè)備和桌面的傳統(tǒng)應(yīng)用程序。
Flex提供由Flex類庫(ActionScript類)，F(xiàn)lex編譯器，調(diào)試器，MXML和ActionScript編程語言組成的FLEX SDK以及其他實(shí)用程序，以構(gòu)建富有表現(xiàn)力和交互性的富互聯(lián)網(wǎng)應(yīng)用程序(RIA)
Flex負(fù)責(zé)Web應(yīng)用程序的用戶界面(UI)或客戶端功能。服務(wù)器端功能取決于使用傳統(tǒng)腳本語言(Java / PHP等)編寫的服務(wù)器端組件，
基于Flex的應(yīng)用程序?qū)嶋H上是作為SWF文件提供的，它非常類似于傳統(tǒng)Web應(yīng)用程序的HTML / Javascript部分。
Flex應(yīng)用程序作為SWF文件以及HTML包裝器，CSS文件和任何服務(wù)器端腳本文件(即Java，.CFM，.PHP等)部署到服務(wù)器。像傳統(tǒng)的Web應(yīng)用程序
這些資源使用常規(guī)的HTTP請求/響應(yīng)方式從服務(wù)器傳遞到客戶端瀏覽器，F(xiàn)lash Player在瀏覽器中運(yùn)行應(yīng)用程序。

Flex的優(yōu)點(diǎn)

基于Flash Player的Flex應(yīng)用程序可以訪問設(shè)備功能，如GPS，攝像頭，本地?cái)?shù)據(jù)庫，圖形加速度計(jì)。
Flex應(yīng)用程序可以在Android，BlackBerry Tablet OS，iOS設(shè)備上運(yùn)行。
Flex應(yīng)用程序可以在瀏覽器以及桌面上運(yùn)行。
Flex應(yīng)用程序與平臺無關(guān)。 UI可以是平臺本地的或者可以在每個(gè)平臺上相同。
Flex應(yīng)用程序可以使用行業(yè)標(biāo)準(zhǔn)(如REST，SOAP，JSON，JMS和AMF)與所有主要服務(wù)器端技術(shù)(如Java，Spring，Hibernate，PHP，Ruby，.NET，Adobe ColdFusion和SAP)
Flex應(yīng)用程序開發(fā)通過與應(yīng)用程序直觀交互，在視覺更豐富的界面中呈現(xiàn)信息，確保豐富的用戶體驗(yàn)。
Flex應(yīng)用程序是單頁應(yīng)用程序，其中狀態(tài)可以從一個(gè)狀態(tài)轉(zhuǎn)換到其他狀態(tài)，而無需從服務(wù)器獲取新頁面或刷新瀏覽器。
Flex應(yīng)用程序在很大程度上減少了服務(wù)器上的負(fù)載，因?yàn)樗恍枰祷匾淮螒?yīng)用程序，而不是每當(dāng)用戶更改視圖時(shí)返回一個(gè)新頁面。

Flex的缺點(diǎn)

Flex應(yīng)用程序是單線程應(yīng)用程序，但Flex提供了異步編程模型以減輕此問題。
Flex是基于actionscript和XML的。學(xué)習(xí)這兩個(gè)是Flex必須工作的。

Flex - 環(huán)境設(shè)置

本教程將指導(dǎo)您如何準(zhǔn)備開發(fā)環(huán)境以開始使用Adobe Flex Framework工作。本教程還將教您如何在設(shè)置Flex框架之前在您的機(jī)器上安裝JDK和Adobe Flash Builder:

系統(tǒng)要求

FLEX需要JDK 1.4或更高版本，所以第一個(gè)要求是在您的計(jì)算機(jī)上安裝JDK。

JDK	1.4或以上。
內(nèi)存	沒有最低要求。
磁盤空間	沒有最低要求。
操作系統(tǒng)	沒有最低要求。

按照給定的步驟設(shè)置您的環(huán)境以開始Flex應(yīng)用程序開發(fā)。

步驟1 - 驗(yàn)證計(jì)算機(jī)上的Java安裝

現(xiàn)在打開控制臺并執(zhí)行以下 java 命令。

操作系統(tǒng)	任務(wù)	命令
Windows	打開命令控制臺	c:\> java -version
Linux	打開命令終端	$ java -version
Mac	打開終端	機(jī)器:?joseph $ java -version

讓我們驗(yàn)證所有操作系統(tǒng)的輸出:

操作系統(tǒng)	生成輸出
Windows	java版本“1.6.0_21" Java(TM)SE運(yùn)行時(shí)環(huán)境(build 1.6.0_21-b07) Java HotSpot(TM)客戶端VM(構(gòu)建17.0-b17，混合模式，共享)
Linux	java版本“1.6.0_21" Java(TM)SE運(yùn)行時(shí)環(huán)境(build 1.6.0_21-b07) Java HotSpot(TM)客戶端VM(構(gòu)建17.0-b17，混合模式，共享)
Mac	java版本“1.6.0_21" Java(TM)SE運(yùn)行時(shí)環(huán)境(build 1.6.0_21-b07) Java HotSpot(TM)64位服務(wù)器VM(構(gòu)建17.0-b17，混合模式，共享)

操作系統(tǒng)

生成輸出

Windows

java版本“1.6.0_21"

Java(TM)SE運(yùn)行時(shí)環(huán)境(build 1.6.0_21-b07)

Java HotSpot(TM)客戶端VM(構(gòu)建17.0-b17，混合模式，共享)

Linux

java版本“1.6.0_21"

Java(TM)SE運(yùn)行時(shí)環(huán)境(build 1.6.0_21-b07)

Java HotSpot(TM)客戶端VM(構(gòu)建17.0-b17，混合模式，共享)

Mac

java版本“1.6.0_21"

Java(TM)SE運(yùn)行時(shí)環(huán)境(build 1.6.0_21-b07)

Java HotSpot(TM)64位服務(wù)器VM(構(gòu)建17.0-b17，混合模式，共享)

步驟2 - 安裝Java開發(fā)工具包(JDK):

如果沒有安裝Java，那么您可以從Oracle的Java站點(diǎn)安裝Java軟件開發(fā)工具包(SDK):Java SE Downloads下載。您將在下載的文件中找到安裝JDK的說明，按照給定的說明安裝和配置設(shè)置。最后設(shè)置PATH和JAVA_HOME環(huán)境變量來引用包含java和javac的目錄，通常分別是java_install_dir / bin和java_install_dir。

將 JAVA_HOME 環(huán)境變量設(shè)置為指向計(jì)算機(jī)上安裝Java的基本目錄位置。例如

操作系統(tǒng)	輸出
Windows	將環(huán)境變量JAVA_HOME設(shè)置為C:\\ Program Files \\ Java \\ jdk1.6.0_21
Linux	export JAVA_HOME = / usr / local / java-current
Mac	export JAVA_HOME = / Library / Java / Home

將Java編譯器位置附加到系統(tǒng)路徑。

操作系統(tǒng)	輸出
Windows	將字符串％JAVA_HOME％\\ bin附加到系統(tǒng)變量Path的末尾。
Linux	export PATH = $ PATH:$ JAVA_HOME / bin /
Mac	不需要

步驟3 - 設(shè)置Adobe Flash Builder 4.5

本教程中的所有示例都是使用Adobe Flash Builder 4.5 Profession IDE試用版編寫的。所以我建議您應(yīng)該有最新版本的Adobe Flash Builder在您的操作系統(tǒng)上安裝在您的機(jī)器上。

要安裝Adobe Flash Builder IDE，請從http://www.adobe.com/in/products/flash-builder.html下載安裝后，將二進(jìn)制分發(fā)包解壓到方便的位置。例如在Windows上的C:\\ flash-builder，或Linux / Unix上的/ usr / local / flash-builder，最后恰當(dāng)?shù)卦O(shè)置PATH變量。

Flash Builder可以通過在Windows機(jī)器上執(zhí)行以下命令來啟動，也可以直接雙擊FlashBuilder.exe

 %C:\flash-builder\FlashBuilder.exe

可以通過在Unix(Solaris，Linux等)機(jī)器上執(zhí)行以下命令來啟動Flash Builder:

$/usr/local/flash-builder/FlashBuilder

Adobe Flash Builder試用版可以使用60天。只接受條款和條件，并跳過初始注冊步驟，并繼續(xù)使用IDE。我們正在使用試用版的教學(xué)目的。

成功啟動后，如果一切都很好，那么它應(yīng)該顯示以下結(jié)果:

Adobe Flash Builder預(yù)先配置了FLEX SDK。我們在我們的示例中使用了FLEX SDK 4.5，這些示例隨Adobe Flash Builder 4.5一起提供。

步驟4:設(shè)置Apache Tomcat:

您可以從 http://tomcat.apache.org/下載最新版本的Tomcat 。下載安裝后，將二進(jìn)制分發(fā)包解壓到方便的位置。例如在Windows上的C:\\ apache-tomcat-6.0.33或Linux / Unix上的/usr/local/apache-tomcat-6.0.33，并設(shè)置指向安裝位置的CATALINA_HOME環(huán)境變量。

Tomcat可以通過在Windows機(jī)器上執(zhí)行以下命令來啟動，也可以直接雙擊startup.bat

 %CATALINA_HOME%\bin\startup.bat
 
 or
 
 C:\apache-tomcat-6.0.33\bin\startup.bat

Tomcat可以通過在Unix(Solaris，Linux等)機(jī)器上執(zhí)行以下命令來啟動:

$CATALINA_HOME/bin/startup.sh
 
or
 
/usr/local/apache-tomcat-6.0.33/bin/startup.sh

成功啟動后，Tomcat中包含的默認(rèn)Web應(yīng)用程序?qū)⑼ㄟ^訪問 http:// localhost:8080 / 獲得。如果一切都很好，那么它應(yīng)該顯示以下結(jié)果:

有關(guān)配置和運(yùn)行Tomcat的更多信息，請參見此處包含的文檔以及Tomcat網(wǎng)站:http://tomcat.apache.org

可以通過在Windows機(jī)器上執(zhí)行以下命令來停止Tomcat:

%CATALINA_HOME%\bin\shutdown

or

C:\apache-tomcat-5.5.29\bin\shutdown

通過在Unix(Solaris，Linux等)機(jī)器上執(zhí)行以下命令，可以停止Tomcat:

$CATALINA_HOME/bin/shutdown.sh

or

/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh

Flex - 環(huán)境設(shè)置...

在開始使用Flash Builder創(chuàng)建實(shí)際的 HelloWorld 應(yīng)用程序之前，讓我們看看Flex應(yīng)用程序的實(shí)際部分。 Flex應(yīng)用程序包括以下四個(gè)重要部分，其中最后一部分是可選的，但前三個(gè)部分是強(qiáng)制性的:

Flex框架庫
客戶端代碼
公共資源(HTML / JS / CSS)
服務(wù)器端代碼

典型Flex應(yīng)用程序 HelloWord 的不同部分的示例位置如下所示:

名稱	位置
項(xiàng)目根	HelloWorld/
Flex框架庫	構(gòu)建路徑
公共資源	html-template
客戶端代碼	table table-bordered / com / tutorialspoint / client
服務(wù)器端代碼	table table-bordered / com / tutorialspoint / server

應(yīng)用程序構(gòu)建過程

Flex應(yīng)用程序需要Flex框架庫。 Flash Builder自動將庫添加到構(gòu)建路徑。

當(dāng)我們使用Flash Builder構(gòu)建代碼時(shí)，F(xiàn)lash Builder將執(zhí)行以下任務(wù)

將源代碼編譯為HelloWorld.swf文件。
從存儲在html-template文件夾中的文件index.template.html編譯HelloWorld.html(用于swf文件的包裝文件)
復(fù)制目標(biāo)文件夾中的HelloWorld.swf和HelloWorld.html文件，bin-debug。
復(fù)制swfobject.js，一個(gè)javascript代碼負(fù)責(zé)在目標(biāo)文件夾中的HelloWorld.html中動態(tài)加載swf文件，bin-debug
以目標(biāo)文件夾中的名為frameworks_xxx.swf的swf文件的形式復(fù)制框架庫，bin-debug
在目標(biāo)文件夾中復(fù)制其他flex模塊(.swf文件，如sparkskins_xxx.swf，textLayout_xxx.swf)。

應(yīng)用程序啟動過程

在任何Web瀏覽器中打開\\ HelloWorld \\ bin-debug文件夾中的HelloWorld.html文件。
HelloWorld.swf將自動加載，應(yīng)用程序?qū)㈤_始運(yùn)行。

Flex框架庫

以下是幾個(gè)重要框架庫的簡要細(xì)節(jié)。

在flex庫中使用.swc表示法表示

S.N.	節(jié)點(diǎn)和描述
1	playerglobal.swc 此庫專用于安裝在計(jì)算機(jī)上的Flash Player，并包含F(xiàn)lash Player支持的本機(jī)方法。
2	textlayout.swc 此庫支持文本布局相關(guān)功能。
3	framework.swc 這是flex框架庫包含F(xiàn)lex的核心特性。
4	mx.swc 此庫存儲mx UI控件的定義。
5	charts.swc 此庫支持圖表控件。
6	spark.swc 此庫存儲spark UI控件的定義。
7	sparkskins.swc 這個(gè)庫支持spark UI控件的換膚。

客戶端代碼

Flex application code can be written in MXML and ActionScript.

S.N.	類型和描述
1	MXML MXML是一種XML標(biāo)記語言，我們將用它來布置用戶界面組件.MXML在構(gòu)建過程中被編譯為ActionScript。
2	ActionScript ActionScript是一種面向?qū)ο蟮倪^程化編程語言，基于ECMAScript(ECMA-262)第4版草案語言規(guī)范。

S.N.

類型和描述

MXML

MXML是一種XML標(biāo)記語言，我們將用它來布置用戶界面組件.MXML在構(gòu)建過程中被編譯為ActionScript。

ActionScript

ActionScript是一種面向?qū)ο蟮倪^程化編程語言，基于ECMAScript(ECMA-262)第4版草案語言規(guī)范。

In Flex, we can mix ActionScript and MXML, to do the following:

使用MXML標(biāo)記布置用戶界面組件
使用MXML聲明性地定義應(yīng)用程序的非可視化方面，例如訪問服務(wù)器上的數(shù)據(jù)源
使用MXML在服務(wù)器上的用戶界面組件和數(shù)據(jù)源之間創(chuàng)建數(shù)據(jù)綁定。
使用ActionScript在MXML事件屬性中定義事件偵聽器。
使用< mx:Script>添加腳本塊標(biāo)簽。
包括外部ActionScript文件。
導(dǎo)入ActionScript類。
創(chuàng)建ActionScript組件。

公共資源

這些是Flex應(yīng)用程序引用的輔助文件，例如位于html-template文件夾下的Host HTML頁面，CSS或圖像。它包含以下文件

S.N.	文件名和描述
1	index.template.html 主機(jī)HTML頁面，包含占位符。 Flash Builder使用此模板來使用HelloWorld.swf文件構(gòu)建實(shí)際頁面HelloWorld.html。
2	playerProductInstall.swf 這是一個(gè)Flash實(shí)用程序，用于以快速模式安裝Flash Player。
3	swfobject.js 這是javascript負(fù)責(zé)檢查安裝的Flash Player的版本，并在HelloWorld.html頁面中加載HelloWorld.swf。
4	html-template / history 此文件夾包含用于應(yīng)用程序的歷史記錄管理的資源。

HelloWorld.mxml

這是實(shí)際寫入的MXML / AS(ActionScript)代碼，實(shí)現(xiàn)應(yīng)用程序的業(yè)務(wù)邏輯，并且Flex編譯器轉(zhuǎn)換為SWF文件，將由瀏覽器中的Flash播放器執(zhí)行。示例HelloWorld Entry類將如下所示:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%" height="100%"
   minWidth="500" minHeight="500" 
   initialize="application_initializeHandler(event)">

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void
         {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void
         {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   <s:VGroup horizontalAlign="center" width="100%" height="100%" 
   paddingTop="100" gap="50">
      <s:Label id="lblHeader" fontSize="40" color="0x777777"/>
      <s:Button label="Click Me!" id="btnClickMe" 
      click="btnClickMe_clickHandler(event)" />
   </s:VGroup>	
</s:Application>

下表給出了上述代碼腳本中使用的所有標(biāo)簽的描述。

S.N.	節(jié)點(diǎn)和描述
1	應(yīng)用程序定義始終為Flex應(yīng)用程序的根標(biāo)記的應(yīng)用程序容器。
2	腳本包含ActionScript語言中的業(yè)務(wù)邏輯。
3	VGroup 定義可以垂直方式包含F(xiàn)lex UI控件的垂直分組容器。
4	標(biāo)簽表示Label控件，一個(gè)顯示文本的非常簡單的用戶界面組件。
5	按鈕表示Button控件，可以單擊它來執(zhí)行某些操作。

服務(wù)器端代碼

這是應(yīng)用程序的服務(wù)器端部分，非?？蛇x。如果您不在應(yīng)用程序中執(zhí)行任何后端處理，則您不需要此部分，但如果后端需要一些處理，并且您的客戶端應(yīng)用程序與服務(wù)器交互，那么您將必須開發(fā)這些組件。

下一章將使用所有上述概念，使用Flash Builder創(chuàng)建Hello World應(yīng)用程序。

Flex - 創(chuàng)建應(yīng)用程序

我們將使用Flash Builder 4.5創(chuàng)建Flex應(yīng)用程序。讓我們從一個(gè)簡單的 HelloWorld 應(yīng)用程序開始:

步驟1 - 創(chuàng)建項(xiàng)目

第一步是使用Flash Builder IDE創(chuàng)建一個(gè)簡單的Flex項(xiàng)目。使用選項(xiàng)File > New > Flex Project。現(xiàn)在，使用向?qū)Т翱趯⒛捻?xiàng)目命名為 HelloWorld ，如下所示:

如果未選擇，請選擇應(yīng)用程序類型 Web(在Adobe Flash Player中運(yùn)行)，并保留其他默認(rèn)值，然后單擊完成按鈕。項(xiàng)目創(chuàng)建成功后，您的項(xiàng)目資源管理器中將包含以下內(nèi)容:

以下是所有重要文件夾的簡要說明:

夾	位置
表格邊框	源代碼(mxml / as classes)文件。我們已經(jīng)創(chuàng)建了com / tutorialspoint / client文件夾結(jié)構(gòu)，其中包含客戶端特定的，負(fù)責(zé)客戶端UI顯示的java類。
bin-debug	這是輸出部分，它表示實(shí)際可部署的Web應(yīng)用程序。 history文件夾包含F(xiàn)lex應(yīng)用程序的歷史記錄管理的支持文件。 framework_xxx.swf，flex應(yīng)用程序使用的flex框架文件。 HelloWorld.html，用于flex應(yīng)用程序的wrapper / host HTML文件。 HelloWorld.swf，我們的基于flex的應(yīng)用程序。 playerProductInstall.swf，flash player express安裝程序。 spark_xxx.swf，用于spark組件支持的庫。 swfobject.js，javascript負(fù)責(zé)在HelloWorld.html中加載HelloWorld.swf。它檢查Flash Player版本并將初始化參數(shù)傳遞給HelloWorld.swf文件。 textLayout_xxx.swf，用于文本組件支持的庫。
html-template	這表示可配置的Web應(yīng)用程序。 Flash Builder將文件從html-template編譯到bin-debug文件夾。 history文件夾包含F(xiàn)lex應(yīng)用程序的歷史記錄管理的支持文件。 index.template.html，wrapper / host用于具有用于Flash Builder特定配置的占位符的flex應(yīng)用程序的HTML文件。在編譯期間在bin-debug文件夾中編譯為HelloWorld.html。 playerProductInstall.swf，flash player express安裝程序。在構(gòu)建期間復(fù)制到bin-debug文件夾。 swfobject.js，javascript負(fù)責(zé)在HelloWorld.html中加載HelloWorld.swf。它檢查flash播放器版本，并將初始化參數(shù)傳遞給HelloWorld.swf文件。在構(gòu)建期間復(fù)制到bin-debug文件夾。

步驟2 - 創(chuàng)建外部CSS文件

在 html-template 文件夾中為Wrapper HTML頁面創(chuàng)建CSS文件 styles.css 。

html, body  { 
   height:100%;
}
body { 
   margin:0; 
   padding:0; 
   overflow:auto; 
   text-align:center;		
}   
object:focus { 
   outline:none; 
}
#flashContent { 
   display:none;	
}

.pluginHeader {
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   color:#9b1204;
   text-decoration:none;
   font-weight:bold;
}

.pluginInstallText {
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#000000;
   line-height:18px;
   font-style:normal;
}

.pluginText { 
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#000000;
   line-height:18px;
   font-style:normal;
}

步驟3 - 修改包裝HTML頁面模板

在 html-template 文件夾中修改封裝HTML頁面模板 index.template.html 。 Flash Builder將創(chuàng)建一個(gè)默認(rèn)的Wrapper HTML網(wǎng)頁模板 html-template / index.template.html ，它將被編譯為HelloWorld.html。此文件包含F(xiàn)lash Builder在編譯過程中替換的占位符，例如Flash Player版本，應(yīng)用程序名稱等。

讓我們修改此文件以顯示自定義消息，如果沒有安裝flash插件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head>
<title>${title}</title>
<meta name="google" value="notranslate" />         
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css"></link>       
<link rel="stylesheet" type="text/css" href="history/history.css" />
<script type="text/javascript" table table-bordered="history/history.js"></script>
<script type="text/javascript" table table-bordered="swfobject.js"></script>
<script type="text/javascript">
   // For version detection, set to min. required Flash Player version,
   //or 0 (or 0.0.0), for no version detection. 
   var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
   // To use express install, set to playerProductInstall.swf, 
   //otherwise the empty string. 
   var xiSwfUrlStr = "${expressInstallSwf}";
   var flashvars = {};
   var params = {};
   params.quality = "high";
   params.bgcolor = "${bgcolor}";
   params.allowscriptaccess = "sameDomain";
   params.allowfullscreen = "true";
   var attributes = {};
   attributes.id = "${application}";
   attributes.name = "${application}";
   attributes.align = "middle";
   swfobject.embedSWF(
   "${swf}.swf", "flashContent", 
   "${width}", "${height}", 
   swfVersionStr, xiSwfUrlStr, 
   flashvars, params, attributes);
   // JavaScript enabled so display the flashContent div in case 
   //it is not replaced with a swf object.
   swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body>        
<div id="flashContent">
   <p style="margin:100px;">
   <table  width="700" cellpadding="10" cellspacing="2" border="0">
      <tr><td class="pluginHeader">Flash Player Required</td></tr>		  	
      <tr><td class="pluginText">The Adobe Flash Player version 
      10.2.0 or greater is required.</td></tr>			
      <tr><td class = "pluginInstallText" align="left">
         <table border="0" width="100%">
         <tr class = "pluginInstallText" >									
         <td>Click here to download and install Adobe Flash Player:</td>													
         <td> </td>
         <td align="right">	<script type="text/javascript"> 
         var pageHost 
         =((document.location.protocol == "https:") ? "https://" : "http://"); 
         document.write("<a target='_blank'"
         +" href='http://get.adobe.com/flashplayer/'><"
         +"img style='border-style: none' table table-bordered='" 
         +pageHost 
         +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
         +" alt='Get Adobe Flash player' /></a>" ); 
         </script> 
         </td>
         </tr>
         </table>
         </td>	
      </tr>
   </table>                
   </p>          
</div>
<noscript>
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
   width="${width}" height="${height}" id="${application}">
   <param name="movie" value="${swf}.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="${bgcolor}" />
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="allowFullScreen" value="true" />
   <!--[if !IE]>-->
   <object type="application/x-shockwave-flash" data="${swf}.swf" 
   width="${width}" height="${height}">
   <param name="quality" value="high" />
   <param name="bgcolor" value="${bgcolor}" />
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="allowFullScreen" value="true" />
   <!--<![endif]-->
   <!--[if gte IE 6]>-->
   <p> 
      <p style="margin:100px;">
      <table  width="700" cellpadding="10" cellspacing="2" border="0">
      <tr><td class="pluginHeader">Flash Player Required</td></tr>		  	
      <tr><td class="pluginText">The Adobe Flash Player version 
      10.2.0 or greater is required.</td></tr>			
      <tr><td class = "pluginInstallText" align="left">
         <table border="0" width="100%">
         <tr class = "pluginInstallText" >									
         <td>Click here to download and install Adobe Flash Player:</td>													
         <td> </td>
         <td align="right">	<script type="text/javascript"> 
         var pageHost 
         = ((document.location.protocol == "https:") ? "https://" : "http://"); 
         document.write("<a target='_blank'"
         +" href='http://get.adobe.com/flashplayer/'><"
         +"img style='border-style: none' table table-bordered='" 
         +pageHost 
         +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
         +" alt='Get Adobe Flash player' /></a>" ); 
         </script> 
         </td>
         </tr>
         </table>
         </td>	
      </tr>
   </table>                
   </p>             
   </p>
   <!--<![endif]-->
     <p style="margin:100px;">
      <table  width="700" cellpadding="10" cellspacing="2" border="0">
      <tr><td class="pluginHeader">Flash Player Required</td></tr>		  	
      <tr><td class="pluginText">The Adobe Flash Player version 
      10.2.0 or greater is required.</td></tr>			
      <tr><td class = "pluginInstallText" align="left">
         <table border="0" width="100%">
         <tr class = "pluginInstallText" >									
         <td>Click here to download and install Adobe Flash Player:</td>													
         <td> </td>
         <td align="right">	<script type="text/javascript"> 
         var pageHost 
         = ((document.location.protocol == "https:") ? "https://" : "http://"); 
         document.write("<a target='_blank'"
         +" href='http://get.adobe.com/flashplayer/'><"
         +"img style='border-style: none' table table-bordered='" 
         +pageHost 
         +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
         +" alt='Get Adobe Flash player' /></a>" ); 
         </script> 
         </td>
         </tr>
         </table>
         </td>	
      </tr>
   </table>                
   </p>          
   <!--[if !IE]>-->
   </object>
   <!--<![endif]-->
   </object>
</noscript>     
</body>
</html>

步驟4 - 創(chuàng)建內(nèi)部CSS文件

在 table table-bordered / com / tutorialspoint 文件夾中為 HelloWorld.mxml 創(chuàng)建CSS文件 Style.css 。 Flex為其UI控件提供了類似的CSS樣式，因?yàn)橛蠬TML UI控件的CSS樣式。

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.heading
{
   fontFamily: Arial, Helvetica, sans-serif;
   fontSize: 17px;
   color: #9b1204;
   textDecoration:none;
   fontWeight:normal;
}

.button {
   fontWeight: bold;			
}

.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

步驟5 - 修改入口級類

Flash Builder將創(chuàng)建一個(gè)默認(rèn)的mxml文件 table table-bordered / com.tutorialspoint / HelloWorld.mxml ，其具有根標(biāo)簽< application> 容器的應(yīng)用程序。讓我們修改這個(gè)文件顯示“Hello，World！":

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%" height="100%"
   minWidth="500" minHeight="500" 
   initialize="application_initializeHandler(event)">
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>
   <fx:Script>
      <![CDATA[
       import mx.controls.Alert;
       import mx.events.FlexEvent;
       protected function btnClickMe_clickHandler(event:MouseEvent):void
       {
          Alert.show("Hello World!");				
       }

       protected function application_initializeHandler(event:FlexEvent):void
       {
          lblHeader.text = "My Hello World Application";				
       }
      ]]>
   </fx:Script>
   <s:BorderContainer width="500" height="500" id="mainContainer" 
      styleName="container">
      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center" 
         verticalAlign="middle">
         <s:Label id="lblHeader" fontSize="40" color="0x777777" 
            styleName="heading"/>
         <s:Button label="Click Me!" id="btnClickMe" 
            click="btnClickMe_clickHandler(event)" styleName="button" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

您可以在同一源目錄中創(chuàng)建更多的mxml或actionscript文件，以定義新應(yīng)用程序或定義輔助程序。

步驟6 - 構(gòu)建應(yīng)用程序

Flash Builder默認(rèn)已選中自動構(gòu)建。只要檢查問題查看是否有任何錯(cuò)誤。完成更改后，您將看不到任何錯(cuò)誤。

步驟7 - 運(yùn)行應(yīng)用程序

現(xiàn)在點(diǎn)擊調(diào)試應(yīng)用程序菜單并選擇 HelloWorld 應(yīng)用程序來調(diào)試應(yīng)用程序。

如果一切正常，應(yīng)用程序?qū)⒃跒g覽器中啟動，您將在Flash Builder控制臺中看到以下調(diào)試日志

[SWF] \HelloWorld\bin-debug\HelloWorld.swf 
- 181,509 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\1 
- 763,122 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\2 
- 1,221,837 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\3 
- 1,136,788 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\4 
- 2,019,570 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\5 
- 318,334 bytes after decompression

應(yīng)用程序啟動后，您將看到對Flash Builder斷點(diǎn)的關(guān)注，因?yàn)槲覀円褜帱c(diǎn)放在application_initializeHandler方法的第一行。

你可以看到被掛起的線程的stacktrace。

您可以查看表達(dá)式的值。

你可以看到放置的斷點(diǎn)列表。

現(xiàn)在繼續(xù)按F6，直到到達(dá)application_initializeHandler()方法的最后一行。作為功能鍵的參考，F(xiàn)6逐行檢查代碼，F(xiàn)5進(jìn)一步向內(nèi)，F(xiàn)8將恢復(fù)應(yīng)用程序。現(xiàn)在你可以看到application_initializeHandler()方法的所有變量的值的列表。

現(xiàn)在你可以看到flex代碼可以調(diào)試與Java應(yīng)用程序可以調(diào)試相同的方式。將斷點(diǎn)放置到任何行，并使用flex的調(diào)試功能。

Flex - 國際化

Flex provides two ways to internationalize a Flex application, We'll demonstrate use of Compile time Internationalization being most commonly used among projects.

技術(shù)	描述
編譯時(shí)間國際化	這種技術(shù)是最普遍的，并且在運(yùn)行時(shí)需要非常少的開銷; 是一種用于翻譯常量和參數(shù)化字符串的非常有效的技術(shù);最簡單的實(shí)現(xiàn)。編譯時(shí)國際化使用標(biāo)準(zhǔn)屬性文件來存儲翻譯的字符串和參數(shù)化消息，這些屬性文件直接在應(yīng)用程序中編譯。
運(yùn)行時(shí)國際化	這種技術(shù)非常靈活，但比靜態(tài)字符串國際化慢。您需要單獨(dú)編譯本地化屬性文件，將它們保留在應(yīng)用程序外部，并在運(yùn)行時(shí)加載它們。

使Flex應(yīng)用程序國際化的工作流程

步驟1:創(chuàng)建文件夾結(jié)構(gòu)

在Flex項(xiàng)目的src文件夾下創(chuàng)建一個(gè)locale文件夾。這將是應(yīng)用程序?qū)⒅С值恼Z言環(huán)境的所有屬性文件的父目錄。在區(qū)域設(shè)置文件夾中，創(chuàng)建子文件夾，每個(gè)應(yīng)用程序的區(qū)域設(shè)置支持一個(gè)。命名語言環(huán)境的約定是

{language}_{country code}

例如，en_US表示美國的英語。區(qū)域設(shè)置de_DE表示德語。示例應(yīng)用程序?qū)⒅С謨煞N常用語言:英語和德語

步驟2:創(chuàng)建屬性文件

創(chuàng)建包含要在應(yīng)用程序中使用的消息的屬性文件。我們在 src > locale > en_US下創(chuàng)建了一個(gè) HelloWorldMessages.properties 文件。

enterName=Enter your name
clickMe=Click Me
applicationTitle=Application Internationalization Demonstration
greeting=Hello {0}

創(chuàng)建包含特定于語言環(huán)境的翻譯值的屬性文件。我們在src > locale > de_DE下創(chuàng)建了一個(gè) HelloWorldMessages.properties 文件。此文件包含德語的翻譯。 _de指定德語區(qū)域設(shè)置，我們將在我們的應(yīng)用程序中支持德語。

如果要使用Flash Builder創(chuàng)建屬性文件，請將文件的編碼更改為UTF-8。選擇該文件，然后右鍵單擊以打開其屬性窗口。選擇文本文件編碼為其他UTF-8。應(yīng)用并保存更改。

enterName=Geben Sie Ihren Namen
clickMe=Klick mich
applicationTitle=Anwendung Internationalisierung Demonstration
greeting=Hallo {0}

步驟3:指定編譯器選項(xiàng)

右鍵單擊項(xiàng)目并選擇屬性。
選擇Flex編譯器，并將以下內(nèi)容添加到“其他編譯器參數(shù)"設(shè)置中:

-locale en_US de_DE

右鍵單擊項(xiàng)目并選擇屬性。
選擇Flex構(gòu)建路徑，然后將以下內(nèi)容添加到源路徑設(shè)置:

src\locale\{locale}

內(nèi)部化示例

現(xiàn)在讓我們按照以下步驟來測試Flex應(yīng)用程序中的內(nèi)部化技術(shù):

步步驟	描述
1	在 Flex - 創(chuàng)建應(yīng)用程序章節(jié)中所述，在包 com.tutorialspoint.client 下創(chuàng)建名為 HelloWorld 的項(xiàng)目。
2	修改 HelloWorld.mxml ，如下所述。保持文件的其余部分不變。
3	編譯并運(yùn)行應(yīng)用程序，以確保業(yè)務(wù)邏輯按照要求工作。

以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.mxml 的內(nèi)容。

<?xml version="1.0" encoding="utf-8"?>
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx" 
   minWidth="500" minHeight="500">
   <fx:Metadata>
      [ResourceBundle("HelloWorldMessages")]
   </fx:Metadata> 
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         [Bindable]
         private var locales:Array = [{label:"English", locale:"en_US"},
            {label:"German", locale:"de_DE"}];

         private function comboChangeHandler():void
         {
           resourceManager.localeChain = [localeComboBox.selectedItem.locale];
         }

         protected function clickMe_clickHandler(event:MouseEvent):void
         {
            var name:String = txtName.text;
            var inputArray:Array = new Array();
            inputArray.push(name);
            Alert.show(resourceManager.getString('HelloWorldMessages'
            ,'greeting',inputArray));
         }
      ]]>
   </fx:Script>
   <s:BorderContainer width="500" height="500" id="mainContainer" 
      styleName="container">
      <s:VGroup width="100%" height="100%" gap="50" 
	  horizontalAlign="center" verticalAlign="middle">
         <s:Label id="lblHeader" fontSize="40" 
            color="0x777777" 
            text ="{resourceManager.getString('HelloWorldMessages'
            ,'applicationTitle')}"
            styleName="heading" width="90%" height="150"/>
         <s:Panel width="300" height="150">
            <s:layout>
               <s:VerticalLayout paddingTop="10" paddingLeft="10" />
            </s:layout>
            <s:HGroup >
               <s:Label 
               text="{resourceManager.getString('HelloWorldMessages'
               ,'enterName')}" 
               paddingTop="2"/>			
               <s:TextInput id="txtName"/>
            </s:HGroup>
            <s:Button 
            label="{resourceManager.getString('HelloWorldMessages','clickMe')}" 
            click="clickMe_clickHandler(event)" right="10" />	
         </s:Panel>
         <mx:ComboBox id="localeComboBox" 
         dataProvider="{locales}" change="comboChangeHandler()"/>
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

準(zhǔn)備好所有更改后，讓我們以正常模式編譯和運(yùn)行應(yīng)用程序，就像在 Flex - 創(chuàng)建應(yīng)用程序中一樣章節(jié)。如果一切順利，您的應(yīng)用程序，這將產(chǎn)生以下結(jié)果:[在線試用]

使用語言下拉菜單更改語言并查看結(jié)果。

Flex - 打印支持

Flex提供了一個(gè)特殊的類 FlexPrintJob 來打印flex對象。

FlexPrintJob可用于打印一個(gè)或多個(gè)Flex對象，例如Form或VBox容器。
FlexPrintJob打印對象及其包含的所有對象。
對象可以是顯示的界面的全部或部分。
對象可以是格式化用于打印的數(shù)據(jù)的組件。
FlexPrintJob類允許您縮放輸出以適應(yīng)頁面。
FlexPrintJob類自動使用多個(gè)頁面來打印不適合單個(gè)頁面的對象。
FlexPrintJob類使操作系統(tǒng)顯示“打印"對話框。如果沒有某些用戶操作，則無法打印。

準(zhǔn)備并發(fā)送打印作業(yè)

FlexPrintJob類使操作系統(tǒng)顯示“打印"對話框。如果沒有某些用戶操作，則無法打印。...

var printJob:FlexPrintJob = new FlexPrintJob();

開始打印作業(yè)

printJob.start();

Flex將使操作系統(tǒng)顯示“打印"對話框。將一個(gè)或多個(gè)對象添加到打印作業(yè)，并指定如何縮放它們

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);

每個(gè)對象從一個(gè)新頁面開始。將打印作業(yè)發(fā)送到打印機(jī)

printJob.send();

打印示例

描述	描述
1	在 Flex - 創(chuàng)建應(yīng)用程序章節(jié)中所述，在包 com.tutorialspoint.client 下創(chuàng)建名為 HelloWorld 的項(xiàng)目。
2	修改 HelloWorld.mxml ，如下所述。保持文件的其余部分不變。
3	編譯并運(yùn)行應(yīng)用程序，以確保業(yè)務(wù)邏輯按照要求工作。

以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.mxml 的內(nèi)容。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%" height="100%"
   minWidth="500" minHeight="500" 
   initialize="application_initializeHandler(event)">
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>
   <fx:Script>
     <![CDATA[
        import mx.controls.Alert;
        import mx.events.FlexEvent;
        import mx.printing.FlexPrintJob;
        import mx.printing.FlexPrintJobScaleType;
        protected function btnClickMe_clickHandler(event:MouseEvent):void
        {
            // Create an instance of the FlexPrintJob class.
            var printJob:FlexPrintJob = new FlexPrintJob();
         
            // Start the print job.
            if (printJob.start() != true) return;

            // Add the object to print. Do not scale it.
            printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);

            // Send the job to the printer.
            printJob.send();
        }

        protected function application_initializeHandler(event:FlexEvent):void
        {
            lblHeader.text = "My Hello World Application";				
        }
     ]]>
   </fx:Script>
   <s:BorderContainer width="500" height="500" id="mainContainer" 
      styleName="container">
      <s:VGroup width="100%" height="100%" gap="50"
         horizontalAlign="center" 
         verticalAlign="middle">
         <s:Label id="lblHeader" fontSize="40" color="0x777777" 
            styleName="heading"/>
         <mx:DataGrid id="myDataGrid" width="300">
            <mx:dataProvider>
               <fx:Object Product="Flex" Code="1000"/>
               <fx:Object Product="GWT" Code="2000"/>
               <fx:Object Product="JAVA" Code="3000"/>
               <fx:Object Product="JUnit" Code="4000"/>
            </mx:dataProvider>
         </mx:DataGrid>
         <s:Button label="Print Me!" id="btnClickMe" 
            click="btnClickMe_clickHandler(event)" 
            styleName="button" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

點(diǎn)擊打印我按鈕，您可以看到數(shù)據(jù)網(wǎng)格的打印輸出如下所示。

以上內(nèi)容是否對您有幫助：

← Flex 打印支持

Flex 相關(guān)資源 →

寫筆記

我要補(bǔ)充

Flex 快速指南

Flex - 概述

什么是Flex？

Flex的優(yōu)點(diǎn)

Flex的缺點(diǎn)

Flex - 環(huán)境設(shè)置

系統(tǒng)要求

步驟1 - 驗(yàn)證計(jì)算機(jī)上的Java安裝

步驟2 - 安裝Java開發(fā)工具包(JDK):

步驟3 - 設(shè)置Adobe Flash Builder 4.5

步驟4:設(shè)置Apache Tomcat:

Flex - 環(huán)境設(shè)置...

應(yīng)用程序構(gòu)建過程

應(yīng)用程序啟動過程

Flex框架庫

客戶端代碼

公共資源

HelloWorld.mxml

服務(wù)器端代碼

Flex - 創(chuàng)建應(yīng)用程序

步驟1 - 創(chuàng)建項(xiàng)目

步驟2 - 創(chuàng)建外部CSS文件

步驟3 - 修改包裝HTML頁面模板

步驟4 - 創(chuàng)建內(nèi)部CSS文件

步驟5 - 修改入口級類

步驟6 - 構(gòu)建應(yīng)用程序

步驟7 - 運(yùn)行應(yīng)用程序

Flex - 國際化

使Flex應(yīng)用程序國際化的工作流程

步驟1:創(chuàng)建文件夾結(jié)構(gòu)

步驟2:創(chuàng)建屬性文件

步驟3:指定編譯器選項(xiàng)

內(nèi)部化示例

Flex - 打印支持

準(zhǔn)備并發(fā)送打印作業(yè)

打印示例

推薦文章

推薦教程

推薦課程