Flex 应用程序

在我们开始使用 Flash Builder 创建实际的 "HelloWorld" 应用程序之前，让我们看看 Flex 应用程序的实际部分是什么-

Flex 应用程序由以下四个重要部分组成，其中最后一部分是可选的，但前三部分是必需的。

Flex 框架库客户端代码公共资源 (HTML/JS/CSS) 服务端代码

典型的 Flex 应用程序（如 HelloWord）不同部分的示例位置如下所示-

名称	位置
项目根	HelloWorld/
Flex 框架库	构建路径
公共资源	html-模板
客户端代码	table table-bordered/com/lidihuo/client
服务端代码	table table-bordered/com/lidihuo/server

应用程序构建过程

首先，Flex 应用程序需要 Flex 框架库。之后，Flash Builder 会自动将库添加到构建路径中。

当我们使用 Flash builder 构建代码时，Flash builder 将执行以下任务-

将源代码编译为 HelloWorld.swf 文件。从存储在 html-template 文件夹中的文件 index.template.html 编译 HelloWorld.html（swf 文件的包装文件）复制目标文件夹 bin-debug 中的 HelloWorld.swf 和 HelloWorld.html 文件。复制 swfobject.js，一个 JavaScript 代码，负责在目标文件夹中的 HelloWorld.html 中动态加载 swf 文件，bin-debug 将框架库以 swf 文件的形式复制到目标文件夹 bin-debug 中，名为 frameworks_xxx.swf 复制目标文件夹中的其他 flex 模块（.swf 文件，例如 sparkskins_xxx.swf、textLayout_xxx.swf）。

应用启动流程

在任何网络浏览器中打开 \HelloWorld\bin-debug 文件夹中可用的 HelloWorld.html 文件。 HelloWorld.swf 将自动加载，应用程序将开始运行。

Flex 框架库

以下是几个重要框架库的简要细节。请注意，Flex 库使用 .swc 符号表示

Sr.No	节点和描述
1	playerglobal.swc 此库特定于安装在您机器上的 FlashPlayer，包含 Flash Player 支持的本机方法。
2	textlayout.swc 这个库支持与文本布局相关的功能。
3	framework.swc 这是包含 Flex 核心功能的 flex 框架库。
4	mx.swc 这个库存储了 mx UI 控件的定义。
5	charts.swc 这个库支持图表控件。
6	spark.swc 这个库存储了 spark UI 控件的定义。
7	sparkskins.swc 这个库支持 spark UI 控件的皮肤。

客户端代码

Flex 应用程序代码可以用 MXML 和 ActionScript 编写。

Sr.No	类型和描述
1	MXML MXML 是一种 XML 标记语言，我们将使用它来布置用户界面组件。 MXML 在构建过程中被编译成 ActionScript。
2	ActionScript ActionScript 是一种面向对象的过程编程语言，基于 ECMAScript (ECMA-262) 第 4 版草案语言规范。

在 Flex 中，我们可以混合 ActionScript 和 MXML，以执行以下操作-

使用 MXML 标签布局用户界面组件使用 MXML 以声明方式定义应用程序的非视觉方面，例如访问服务器上的数据源使用 MXML 在用户界面组件和服务器上的数据源之间创建数据绑定。使用 ActionScript 在 MXML 事件属性中定义事件侦听器。使用标签。包括外部 ActionScript 文件。导入 ActionScript 类。创建 ActionScript 组件。

公共资源

这些是 Flex 应用程序引用的帮助文件，例如位于 html-template 文件夹下的 Host HTML 页面、CSS 或图像。它包含以下文件-

Sr.No	文件名和描述
1	index.template.html 托管 HTML 页面，带有占位符。 Flash Builder 使用此模板来构建带有 HelloWorld.swf 文件的实际页面 HelloWorld.html。
2	playerProductInstall.swf 这是在快速模式下安装 Flash Player 的 Flash 实用程序。
3	swfobject.js 这是负责检查安装的 Flash Player 版本并在 HelloWorld.html 页面中加载 HelloWorld.swf 的 JavaScript。
4	html-template/history 此文件夹包含应用程序历史管理的资源。

HelloWorld.mxml

这是为实现应用程序的业务逻辑而编写的实际 MXML/AS (ActionScript) 代码，Flex 编译器将其转换为 SWF 文件，该文件将由浏览器中的 Flash 播放器执行。

示例 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>

下表给出了上述代码脚本中使用的所有标签的描述。

Sr.No	节点和描述
1	Application 定义始终是 Flex 应用程序根标记的应用程序容器。
2	Script 包含 ActionScript 语言中的业务逻辑。
3	VGroup 定义一个垂直分组容器，它可以以垂直方式包含 Flex UI 控件。
4	Label 代表一个Label控件，一个非常简单的显示文本的用户界面组件。
5	Button 代表一个Button控件，可以点击它做一些动作。

服务端代码

这是您的应用程序的服务器端部分，它非常可选。如果您没有在您的应用程序中进行任何后端处理，那么您不需要这部分，但是如果后端需要一些处理并且您的客户端应用程序与服务器交互，那么您将必须开发这些组件。

在下一章中，我们将使用上述所有概念，使用 Flash Builder 创建一个 HelloWorld 应用程序。

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< Flex 环境设置 Flex 创建应用程序 >>

昵称：邮箱：