Flex创建用户界面

在该 Test Drive 中，您将创建一个 Flex 应用程序，它将检索、显示和修改数据库记录（请参阅图 1）。Flex 应用程序不会直接连接到远程数据库。而是将它连接到以您的首选 Web 语言（PHP、ColdFusion、Java 或任何其他服务器端 Web 技术）编写的数据服务。您将构建前端 Flex 应用程序；用于读取、添加、编辑和删除数据库记录的数据库和服务器端代码作为 PHP 类、ColdFusion 组件或 Java 类提供给您。 ### Flex 创建用户界面详解 #### 一、Flex与数据库交互机制 在开发Flex应用程序时，一个常见的需求就是能够从远程数据库检索数据，并在用户界面上展示这些数据。然而，Flex本身并不直接支持与数据库的连接，它需要通过中间层来实现这一功能。这通常涉及到一种后端技术，如PHP、ColdFusion、Java等，它们可以充当Flex前端与数据库之间的桥梁。 **Flex不直接连接数据库的原因：** - **安全性：**避免直接暴露数据库接口给客户端，提高系统整体的安全性。 - **灵活性：**通过服务器端逻辑可以更好地控制数据处理流程，如数据验证、事务管理等。 - **性能优化：**服务器端可以根据需要对数据进行预处理，减少传输的数据量，从而提升性能。 #### 二、创建Flex应用程序的步骤 1. **新建Flex项目：** - 在本地应用程序服务器上新建一个Flex项目。 - 安装相应的服务器端文件，这里提供了三种不同的安装方式：PHP、ColdFusion、Java。 2. **安装服务器端文件：** - 根据选择的技术栈安装相应的服务器端文件。 - **PHP的安装：** - 下载并解压提供的ZIP文件。 - 使用文件夹中的`testdrive_db.sql`文件来初始化数据库。 - **ColdFusion的安装：** - 类似于PHP的安装过程，但可能会有特定于ColdFusion的步骤。 - **Java的安装：** - 同样地，按照提供的指南进行安装。 - 注意：如果之前已经为其他Flex应用（如Flex 4.5 Test Drive for Mobile）安装了服务器端文件，则可以跳过此步骤。 3. **创建用户界面：** - 使用Flex提供的MXML标记语言来定义用户界面。 - `<s:Application>`：定义了一个Flex应用的基本结构。 - `<s:Label>` 和 `<s:Button>`：用于创建静态文本和按钮。 - `<s:DataGrid>`：用于展示表格数据。 - `<s:columns>`：定义列的信息。 - `<s:typicalItem>`：指定每一行的数据模型。 - `<s:ArrayList>`：提供初始的数据源。 - 示例代码： ```xml <?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="955" minHeight="600"> <s:Label x="50" y="50" color="maroon" fontSize="20" fontWeight="bold" text="XYZ Corporation Directory"/> <s:Button id="empBtn" x="50" y="100" label="Employees"/> <s:Button id="deptBtn" x="140" y="100" label="Departments"/> <s:DataGrid id="empDg" x="50" y="130" requestedRowCount="4"> <s:columns> <s:ArrayList> <s:GridColumn dataField="dataField1" headerText="Column 1"/> <s:GridColumn dataField="dataField2" headerText="Column 2"/> <s:GridColumn dataField="dataField3" headerText="Column 3"/> </s:ArrayList> </s:columns> <s:typicalItem> <fx:Object dataField1="SampleData" dataField2="SampleData" dataField3="SampleData"/> </s:typicalItem> <s:ArrayList> <fx:Object dataField1="data1" dataField2="data1" dataField3="data1"/> <fx:Object dataField1="data2" dataField2="data2" dataField3="data2"/> <fx:Object dataField1="data3" dataField2="data3" dataField3="data3"/> <fx:Object dataField1="data4" dataField2="data4" dataField3="data4"/> </s:ArrayList> </s:DataGrid> </s:Application> ``` 4. **连接到服务器端数据服务：** - Flex应用程序通过调用服务器端的服务来获取数据。例如，这里提到的`EmployeeService`。 - 这些服务通常是用PHP、ColdFusion或Java编写的，它们负责从数据库中检索数据，并将其格式化为Flex可以理解的形式。 #### 三、Flex与后端技术的集成 - **PHP：** - PHP是一种广泛使用的服务器端脚本语言，非常适合处理动态内容。 - 通过PHP编写的后端服务可以轻松地与Flex前端集成。 - **ColdFusion：** - ColdFusion是一种快速开发Web应用的强大平台。 - 通过ColdFusion编写的组件可以实现复杂的业务逻辑，并且能够很好地与Flex交互。 - **Java：** - Java作为一种成熟的企业级开发语言，可以提供强大的后端支持。 - Java编写的后端服务可以利用其丰富的框架和库来处理复杂的业务逻辑。 通过上述步骤，我们可以创建一个具有基本用户界面的Flex应用程序，该程序能够与后端服务交互，实现数据的检索、显示和修改等功能。这种架构不仅保证了系统的灵活性和可扩展性，还确保了数据的安全性和性能的高效性。