> Flex中文手册 > Flex 快速指南

Flex - 概述

什么是Flex?

  • Flex是一个强大的开源应用程序框架,允许使用相同的编程模型,工具和代码库构建针对浏览器,移动设备和桌面的传统应用程序。

  • Flex提供由Flex类库(ActionScript类),Flex编译器,调试器,MXML和ActionScript编程语言组成的FLEX SDK以及其他实用程序,以构建富有表现力和交互性的富互联网应用程序(RIA)

  • Flex负责Web应用程序的用户界面(UI)或客户端功能。 服务器端功能取决于使用传统脚本语言(Java / PHP等)编写的服务器端组件,

  • 基于Flex的应用程序实际上是作为SWF文件提供的,它非常类似于传统Web应用程序的HTML / Javascript部分。

  • Flex应用程序作为SWF文件以及HTML包装器,CSS文件和任何服务器端脚本文件(即Java,.CFM,.PHP等)部署到服务器。 像传统的Web应用程序

  • 这些资源使用常规的HTTP请求/响应方式从服务器传递到客户端浏览器,Flash Player在浏览器中运行应用程序。

Flex的优点

  • 基于Flash Player的Flex应用程序可以访问设备功能,如GPS,摄像头,本地数据库,图形加速度计。

  • Flex应用程序可以在Android,BlackBerry Tablet OS,iOS设备上运行。

  • Flex应用程序可以在浏览器以及桌面上运行。

  • Flex应用程序与平台无关。 UI可以是平台本地的或者可以在每个平台上相同。

  • Flex应用程序可以使用行业标准(如REST,SOAP,JSON,JMS和AMF)与所有主要服务器端技术(如Java,Spring,Hibernate,PHP,Ruby,.NET,Adobe ColdFusion和SAP)

  • Flex应用程序开发通过与应用程序直观交互,在视觉更丰富的界面中呈现信息,确保丰富的用户体验。

  • Flex应用程序是单页应用程序,其中状态可以从一个状态转换到其他状态,而无需从服务器获取新页面或刷新浏览器。

  • Flex应用程序在很大程度上减少了服务器上的负载,因为它只需要返回一次应用程序,而不是每当用户更改视图时返回一个新页面。

Flex的缺点

  • Flex应用程序是单线程应用程序,但Flex提供了异步编程模型以减轻此问题。

  • Flex是基于actionscript和XML的。 学习这两个是Flex必须工作的。

Flex - 环境设置

本教程将指导您如何准备开发环境以开始使用Adobe Flex Framework工作。 本教程还将教您如何在设置Flex框架之前在您的机器上安装JDK和Adobe Flash Builder:

系统要求

FLEX需要JDK 1.4或更高版本,所以第一个要求是在您的计算机上安装JDK。

JDK 1.4或以上。
内存 没有最低要求。
磁盘空间 没有最低要求。
操作系统 没有最低要求。

按照给定的步骤设置您的环境以开始Flex应用程序开发。

步骤1 - 验证计算机上的Java安装

现在打开控制台并执行以下 java 命令。

操作系统 任务 命令
Windows 打开命令控制台 c:\> java -version
Linux 打开命令终端 $ java -version
Mac 打开终端 机器:〜joseph $ java -version

让我们验证所有操作系统的输出:

操作系统 生成输出
Windows

java版本“1.6.0_21"

Java(TM)SE运行时环境(build 1.6.0_21-b07)

Java HotSpot(TM)客户端VM(构建17.0-b17,混合模式,共享)

Linux

java版本“1.6.0_21"

Java(TM)SE运行时环境(build 1.6.0_21-b07)

Java HotSpot(TM)客户端VM(构建17.0-b17,混合模式,共享)

Mac

java版本“1.6.0_21"

Java(TM)SE运行时环境(build 1.6.0_21-b07)

Java HotSpot(TM)64位服务器VM(构建17.0-b17,混合模式,共享)

步骤2 - 安装Java开发工具包(JDK):

如果没有安装Java,那么您可以从Oracle的Java站点安装Java软件开发工具包(SDK):Java SE Downloads下载 您将在下载的文件中找到安装JDK的说明,按照给定的说明安装和配置设置。 最后设置PATH和JAVA_HOME环境变量来引用包含java和javac的目录,通常分别是java_install_dir / bin和java_install_dir。

JAVA_HOME 环境变量设置为指向计算机上安装Java的基本目录位置。 例如

操作系统 输出
Windows 将环境变量JAVA_HOME设置为C:\\ Program Files \\ Java \\ jdk1.6.0_21
Linux export JAVA_HOME = / usr / local / java-current
Mac export JAVA_HOME = / Library / Java / Home

将Java编译器位置附加到系统路径。

操作系统 输出
Windows 将字符串%JAVA_HOME%\\ bin附加到系统变量Path的末尾。
Linux export PATH = $ PATH:$ JAVA_HOME / bin /
Mac 不需要

步骤3 - 设置Adobe Flash Builder 4.5

本教程中的所有示例都是使用Adobe Flash Builder 4.5 Profession IDE试用版编写的。 所以我建议您应该有最新版本的Adobe Flash Builder在您的操作系统上安装在您的机器上。

要安装Adobe Flash Builder IDE,请从http://www.adobe.com/in/products/flash-builder.html下载安装后,将二进制分发包解压到方便的位置。 例如在Windows上的C:\\ flash-builder,或Linux / Unix上的/ usr / local / flash-builder,最后恰当地设置PATH变量。

Flash Builder可以通过在Windows机器上执行以下命令来启动,也可以直接双击FlashBuilder.exe

 %C:\flash-builder\FlashBuilder.exe

可以通过在Unix(Solaris,Linux等)机器上执行以下命令来启动Flash Builder:

$/usr/local/flash-builder/FlashBuilder

Adobe Flash Builder试用版可以使用60天。 只接受条款和条件,并跳过初始注册步骤,并继续使用IDE。 我们正在使用试用版的教学目的。

成功启动后,如果一切都很好,那么它应该显示以下结果:

Flex 快速指南调试应用程序菜单并选择 HelloWorld 应用程序来调试应用程序。

Flex 快速指南

如果一切正常,应用程序将在浏览器中启动,您将在Flash Builder控制台中看到以下调试日志

[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

应用程序启动后,您将看到对Flash Builder断点的关注,因为我们已将断点放在application_initializeHandler方法的第一行。

Flex 快速指南

你可以看到被挂起的线程的stacktrace。

Flex 快速指南

您可以查看表达式的值。

Flex 快速指南

你可以看到放置的断点列表。

Flex 快速指南

现在继续按F6,直到到达application_initializeHandler()方法的最后一行。 作为功能键的参考,F6逐行检查代码,F5进一步向内,F8将恢复应用程序。 现在你可以看到application_initializeHandler()方法的所有变量的值的列表。

Flex 快速指南

现在你可以看到flex代码可以调试与Java应用程序可以调试相同的方式。 将断点放置到任何行,并使用flex的调试功能。

Flex - 国际化

Flex provides two ways to internationalize a Flex application, We'll demonstrate use of Compile time Internationalization being most commonly used among projects.
技术 描述
编译时间国际化 这种技术是最普遍的,并且在运行时需要非常少的开销; 是一种用于翻译常量和参数化字符串的非常有效的技术;最简单的实现。 编译时国际化使用标准属性文件来存储翻译的字符串和参数化消息,这些属性文件直接在应用程序中编译。
运行时国际化 这种技术非常灵活,但比静态字符串国际化慢。 您需要单独编译本地化属性文件,将它们保留在应用程序外部,并在运行时加载它们。

使Flex应用程序国际化的工作流程

步骤1:创建文件夹结构

在Flex项目的src文件夹下创建一个locale文件夹。这将是应用程序将支持的语言环境的所有属性文件的父目录。 在区域设置文件夹中,创建子文件夹,每个应用程序的区域设置支持一个。 命名语言环境的约定是

{language}_{country code}

例如,en_US表示美国的英语。 区域设置de_DE表示德语。 示例应用程序将支持两种常用语言:英语和德语

步骤2:创建属性文件

创建包含要在应用程序中使用的消息的属性文件。 我们在 src locale > en_US下创建了一个 HelloWorldMessages.properties 文件

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

创建包含特定于语言环境的翻译值的属性文件。 我们在src locale > de_DE下创建了一个 HelloWorldMessages.properties 文件 此文件包含德语的翻译。 _de指定德语区域设置,我们将在我们的应用程序中支持德语。

如果要使用Flash Builder创建属性文件,请将文件的编码更改为UTF-8。选择该文件,然后右键单击以打开其属性窗口。选择文本文件编码为其他UTF-8 应用并保存更改。

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

步骤3:指定编译器选项

  • 右键单击项目并选择属性。

  • 选择Flex编译器,并将以下内容添加到“其他编译器参数"设置中:

-locale en_US de_DE
  • 右键单击项目并选择属性。

  • 选择Flex构建路径,然后将以下内容添加到源路径设置:

src\locale\{locale}

内部化示例

现在让我们按照以下步骤来测试Flex应用程序中的内部化技术:

步步骤 描述
1 Flex - 创建应用程序章节中所述,在包 com.tutorialspoint.client 下创建名为 HelloWorld 的项目。
2 修改 HelloWorld.mxml ,如下所述。 保持文件的其余部分不变。
3 编译并运行应用程序,以确保业务逻辑按照要求工作。

以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.mxml 的内容。

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

准备好所有更改后,让我们以正常模式编译和运行应用程序,就像在 Flex - 创建应用程序中一样 章节。 如果一切顺利,您的应用程序,这将产生以下结果:[在线试用]

Flex 快速指南

使用语言下拉菜单更改语言并查看结果。

Flex 快速指南

Flex - 打印支持

Flex提供了一个特殊的类 FlexPrintJob 来打印flex对象。

  • FlexPrintJob可用于打印一个或多个Flex对象,例如Form或VBox容器。

  • FlexPrintJob打印对象及其包含的所有对象。

  • 对象可以是显示的界面的全部或部分。

  • 对象可以是格式化用于打印的数据的组件。

  • FlexPrintJob类允许您缩放输出以适应页面。

  • FlexPrintJob类自动使用多个页面来打印不适合单个页面的对象。

  • FlexPrintJob类使操作系统显示“打印"对话框。 如果没有某些用户操作,则无法打印。

准备并发送打印作业

FlexPrintJob类使操作系统显示“打印"对话框。 如果没有某些用户操作,则无法打印。...

var printJob:FlexPrintJob = new FlexPrintJob();

开始打印作业

printJob.start(); 

Flex将使操作系统显示“打印"对话框。 将一个或多个对象添加到打印作业,并指定如何缩放它们

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH); 

每个对象从一个新页面开始。 将打印作业发送到打印机

printJob.send(); 

打印示例

描述 描述
1 Flex - 创建应用程序章节中所述,在包 com.tutorialspoint.client 下创建名为 HelloWorld 的项目。
2 修改 HelloWorld.mxml ,如下所述。 保持文件的其余部分不变。
3 编译并运行应用程序,以确保业务逻辑按照要求工作。

以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.mxml 的内容。

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

准备好所有更改后,让我们以正常模式编译和运行应用程序,就像在 Flex - 创建应用程序中一样 章节。 如果一切顺利,您的应用程序,这将产生以下结果:[在线试用]

Flex 快速指南

点击打印我按钮,您可以看到数据网格的打印输出如下所示。

Flex 快速指南
下一篇: