使用Flex和Flash Builder创建员工目录移动应用实例

 读者在学习本教程时无需使用移动设备，只需使用Flash Builder 4.5.1 update中的模拟器来运行、调试应用程序。

员工目录应用可帮助用户：

• 搜索员工
• 查看员工详细信息
• 浏览组织结构图
• 给员工打电话、发送文本及电子邮件

第一节：创建基础移动应用

在本节中，用户可以构建简单的移动应用来显示员工列表。

第1步：创建Flex移动项目

1. 在Flash Builder菜单中选择File>New>Flex Mobile Project。

2. 在Project Location标签中，指定项目名称EmployeeDirectory，点击Next（参见图1）。

  图1：指定项目名称EmployeeDirectory

3. 在Mobile Settings标签中，保持默认值不变，点击Finish（参见图2）。

 

  图2：Mobile Settings 标签

4. 从刚复制的FlexMobile60Minutes文件夹下复制assets目录，将其粘贴在EmployeeDirectory项目的src目录下。

第2步：对应用程序编码

1. 打开EmployeeDirectory.mxml：

1. • 注意根节点：ViewNavigatorApplication
   • 参照EmployeeDirectoryHomeView，注意VieNavigatorApplication的firstView属性

2.  打开EmployeeDirectoryHomeView.mxml，执行下列视图：

注：

• 请务必在EmployeeDirectoryHomeView.mxml而非EmployeeDirectory.mxml中执行上述代码。
• 请不要忘记将creationComplete事件添加到视图中。

第3步：运行应用程序

1.  在EmployeeDirectory.mxml的任意位置点击鼠标右键，选择Run AS> Mobile Application。

2. 选择On Desktop，选取模拟设备，如：Apple iPhone 4（参见图3）。

图3：选取模拟设备

3. 点击Run，测试应用程序。应用程序示例如下（参见图4）：

图4：应用程序示例

第二节：使用移动条目渲染器

在本节中，用户可以定义员工列表移动条目渲染器。

步骤

1. 打开EmployeeDirectoryHomeView.mxml，定义列表的内联itemRenderer。条目渲染器的第一行显示员工的姓和名，第二行显示员工的职务。

2. 运行、测试应用程序。应用程序示例如下（参见图5）：

 图5： 应用程序示例如下：

第三节：浏览视图

在本节中，用户可以创建EmployeeDetails视图，用以显示列表中所选员工的详细信息。用户还可以学习如何浏览视图和在视图之间传递信息。

第1步：创建EmployeeDetails视图

1. 右键单击EmployeeDirectory项目中的views文件夹，选择New> MXML Component。指定组件名称EmployeeDetails，单击Finish（参见图6）。

 

   图6：指定组件名称EmployeeDetails

2.  执行EmployeeDetails如下：

第2步：打开员工详细信息视图

1. 打开EmployeeDirectoryHomeView.mxml，为列表提供change 处理器，从而打开所选员工详细信息视图。

第3步：运行应用程序

1.  在列表中选择员工：应出现所选员工的详细信息视图（参见图7）。

   图7.：所选员工的详细信息视图

第四节：创建动作条

在本节中，用户可以为员工目录设置动作条：

• 用户可以为应用程序的所有视图设置Home按钮，用户点击返回即可回到应用程序的第一个视图。
• 用户可以为EmployeeDirectoryHomeView动作条设置搜索控件来搜索员工。

第1步：创建Home按钮

1. 打开EmployeeDirectory.mxml，定义下列导航条内容（在</s:ViewNavigatorApplication>关闭之前）。

 

2. 运行、测试应用程序。注：由于导航控件是在应用程序级定义的，应用程序的所有视图共用导航控件（参见图8）。

 

 图8：应用程序的所有视图共用导航控件

第2步：创建搜索条

1.  打开EmployeeDirectoryHomeView.mxml。

2. 添加下列titleContent及actionContent（在</fx:Declarations>标签关闭后），创建搜索条。

在执行初步操作之后，单击搜索按钮，返回所有员工信息（无论用户在搜索框中嵌入的内容如何）。用户可以在第六节中执行搜索功能。

3. 由于用户在点击搜索按钮时，我们已发送了数据请求，删除视图中定义的creationComplete 处理器。

4. 运行、测试应用程序。

注：EmployeeDetails和EmployeeDirectoryHome视图继承EmployeeDirectory.mxml中定义的Home按钮。虽然一般来讲，在应用程序的所有视图中设置Home按钮的方法很好，但是没有必要为应用程序的Home视图都设置Home按钮，因为这样可能会造成混淆，参见图9。

 

图9：EmployeeDetails和EmployeeDirectoryHome继承EmployeeDirectory.mxml中定义的Home按钮

第3步：删除EmployeeDirectoryHome中的Home按钮

1. 打开EmployeeDirectoryHomeView.mxml，在<s:titleContent>标签前添加一个空的navigatonContent标签。

2. 运行、测试应用程序（参见图10）。

图10：删除Home按钮。

注：当用户打开员工详细信息视图后，点击设备的back按钮（或应用程序的home按钮）返回列表，此时，列表为空。这是因为当另外一个视图被激活后，原先激活的视图自动销毁。当用户点击back按钮时，实际上已对上一视图进行实例化操作。

第4步：保存搜索结果

虽然视图未被激活时即被销毁，视图的“数据”属性仍然存在且被重新分配，此时视图被重新实例化。

如果用户想保存平衡数据属性的搜索结果：

1. 将结果事件处理器添加到HTTPService中，用户可将HTTP服务调用的lastResult分配到视图的数据属性中。

 

2. 将列表与视图的数据属性绑定在一起。

3. 运行、测试应用程序。

第五节：整合设备能力

在本节中，用户可以在应用程序中对员工打电话、发送文本或邮件。

第1步：显示动作列表

1. 在EmployeeDetails.mxml中，将<fx:Script> 块添加到<s:HGoup>opening 标签前。

2.在新<fx:Script>块中，定义可绑定的ArrayCollection控件，以容纳所选员工可用的动作列表。

注：确保导入上述代码的ArrayCollection类进行编译：

3. 定义下列嵌入式图标。用户可在动作列表itemRenderer中使用这些图标。

4. 替换视图“数据”属性中的setter，使用基于可用数据的员工动作来填充动作列表。例如，如果手机号码可用，“SMS”动作只能呈现给用户。

5. 显示动作列表：在closing </s:HGroup>标签下将List组件界限添加到动作列表中。

6. 运行、测试应用程序。

用户在列表中选择员工后，应该可以看到该员工可用的动作列表（参见图1）。这些动作目前尚不能运行。用户可以在下一步运行这些动作。

   图11：员工可用的动作列表

第2步：触发动作

1. 将change handler添加到列表中。

2. 执行list_changeHandler如下：

注：用户一定要导入上述代码的spark.events.IndexChangeEvent（非mx.events.IndexChangedEvent）进行编译。

3. 运行、测试应用程序。

第六节：使用Local SQLite数据库

在本节中，用户可以改变应用的数据访问逻辑：用户使用设备上可用的SQLite数据库而非HTTPService来访问数据。

步骤

1.  从FlexMobile60Minutes文件夹下复制dao目录，将其粘贴到EmployeeDirectory项目的src目录下。

2. 研究EmployeeDAO及Employee类的源代码：

1. • EmployeeDAO类提供了数据访问对象（DAO）的基本执行方式：对数据访问对象进行封装，创建、更新、删除员工信息。如果数据库中不存在员工表，EmployeeDAO也包含利用实例数据进行创建、填充的逻辑。
   • 员工是基本值对象，同样提供延迟加载逻辑来加载员工的管理人员、指导所需的报告。

3. 在EmployeeDirectoryHomeView.mxml中，采用EmployeeDAO实例来替换HTTPService。

注：模型命名空间一定要绑定在mxml文件顶端的View定义中。

4. 修改搜索按钮，点击相应的事件处理器。

注：在本例中，由于EmployeeDAO使用同步版本的数据访问API，用户可以直接为数据分配findByName函数的返回值。

5. 打开EmployeeDirectory-app.xml，向下滚动至文件末尾。在<android><manifestAdditions>部分，取消下列许可的注释：

6. 运行、测试应用程序。

第七节：浏览组织结构图

在本节中，用户可将“View manager”和“View direct reports”动作添加到Employee Details 视图中，这样就可以浏览组织结构图。

第1步：创建DirectReports视图

1. 在EmployeeDirectory项目中右键点击views文件夹，选择New>MXML Component。指定组件名称DirectReports，单击Finish（参见图12）。

 图12：指定组件名称DirectReports，单击Finish

2. 执行DirectReports.mxml如下：

 

第2步：添加动作，浏览组织结构图

1. 在EmployeeDetails.mxml中，将两个可能的动作添加到set data函数中。

2. 在列表变更处理器中，添加两个case语句，触发相应的动作。

第3步：运行应用程序

1. 选择作为管理人员的员工（参见图13），单击“View manager”动作（参见图14）。

 图13：选择作为管理人员的员工

 图14：单击“View manager”动作

2. 选择负责直接报告的员工（参见图14），单击“View direct reports”动作（参见图15）。

 图15：直接报告