📌  相关文章
📜  Flex-应用

📅  最后修改于: 2020-10-25 02:20:45             🧑  作者: Mango

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

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

  • Flex框架库
  • 客户端代码
  • 公共资源（HTML / JS / CSS）
  • 服务器端代码

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

Name Location
Project root HelloWorld/
Flex Framework Libraries Build Path
Public resources html-template
Client-side code table table-bordered/com/tutorialspoint/client
Server-side code table table-bordered/com/tutorialspoint/server

应用程序构建过程

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

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

  • 将源代码编译为HelloWorld.swf文件。

  • 从存储在html-template文件夹中的文件index.template.html编译HelloWorld.html（swf文件的包装文件）

  • 复制目标文件夹bin-debug中的HelloWorld.swf和HelloWorld.html文件。

  • 复制swfobject.js，这是一个JavaScript代码，负责在目标文件夹中的HelloWorld.html中动态加载swf文件，bin-debug

  • 在目标文件夹bin-debug中以名为frameworks_xxx.swf的swf文件的形式复制框架库

  • 在目标文件夹中复制其他弹性模块（.swf文件，例如sparkskins_xxx.swf，textLayout_xxx.swf）。

应用启动过程

  • 打开任何Web浏览器的\ HelloWorld \ bin-debug文件夹中的HelloWorld.html文件。

  • HelloWorld.swf将自动加载，并且应用程序将开始运行。

Flex框架库

以下是有关几个重要框架库的简短详细信息。请注意，Flex库使用.swc表示法表示

Sr.No Nodes & Description
1

playerglobal.swc

This library is specific to FlashPlayer installed on your machine and contains native methods supported by flash player.
2

textlayout.swc

This library supports the text layout related features.
3

framework.swc

This is the flex framework library contains the core features of Flex.
4

mx.swc

This library stores the definitions of mx UI controls.
5

charts.swc

This library supports the charting controls.
6

spark.swc

This library stores the definitions of spark UI controls.
7

sparkskins.swc

This library supports the skinning of spark UI controls.

客户端代码

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

Sr.No Type & Description
1

MXML

MXML is an XML markup language that we’ll use to lay out user interface components. MXML is compiled into ActionScript during build process.
2

ActionScript

ActionScript is an object-oriented procedural programming language and is based on the ECMAScript (ECMA-262) edition 4 draft language specification.

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

  • 使用MXML标签对用户界面组件进行布局

  • 使用MXML声明性地定义应用程序的非可视方面，例如访问服务器上的数据源

  • 使用MXML在服务器上的用户界面组件和数据源之间创建数据绑定。

  • 使用ActionScript在MXML事件属性内定义事件侦听器。

  • 使用添加脚本块

  • 包括外部ActionScript文件。

  • 导入ActionScript类。

  • 创建ActionScript组件。

公共资源

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

Sr.No File Name & Description
1

index.template.html

Host HTML page, with place holders. Flash Builder uses this template to build actual page HelloWorld.html with HelloWorld.swf file.
2

playerProductInstall.swf

This is a flash utility to install Flash Player in express mode.
3

swfobject.js

This is the JavaScript responsible to check version of flash player installed and to load HelloWorld.swf in HelloWorld.html page.
4

html-template/history

This folder contains resources for history management of the application.

HelloWorld.mxml

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

一个示例HelloWorld Entry类将如下所示-

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

Sr.No Node & Description
1

Application

Defines the Application container that is always the root tag of a Flex application.
2

Script

Contains the business logic in ActionScript language.
3

VGroup

Defines a Vertical Grouping Container which can contain Flex UI controls in vertical fashion.
4

Label

Represents a Label control, a very simple user interface component that displays text.
5

Button

Represents a Button control, which can be clicked to do some action.

服务器端代码

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

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