1、使用 Flex 和 Flash Builder 创建员工目录移动应用实例 2011-07-22 14:53 726 人阅读 评论(0) 收藏 举报 读者在学习本教程时无需使用移动设备，只需使用 Flash Builder 4.5.1 update 中的模拟器来运行、调试应用程序。 员工目录应用可帮助用户： 搜索员工 查看员工详细信息 浏览组织结构图 给员工打电话、发送文本及电子邮件第一节：创建基础移动应用在本节中，用户可以构建简单的移动应用来显示员工列表。第 1 步：创建 Flex 移动项目1. 在 Flash Builder 菜单中选择 FileNewFlex Mobile Project。
2、2. 在 Project Location 标签中，指定项目名称 EmployeeDirectory，点击 Next（参见图1）。图 1：指定项目名称 EmployeeDirectory3. 在 Mobile Settings 标签中，保持默认值不变，点击 Finish（参见图 2）。图 2：Mobile Settings 标签4. 从刚复制的 FlexMobile60Minutes 文件夹下复制 assets 目录，将其粘贴在EmployeeDirectory 项目的 src 目录下。第 2 步：对应用程序编码1. 打开 EmployeeDirectory.mxml：o 注意根节点：View
3、NavigatorApplicationo 参照 EmployeeDirectoryHomeView，注意 VieNavigatorApplication的 firstView 属性2. 打开 EmployeeDirectoryHomeView.mxml，执行下列视图：注： 请务必在 EmployeeDirectoryHomeView.mxml 而非 EmployeeDirectory.mxml中执行上述代码。 请不要忘记将 creationComplete 事件添加到视图中。第 3 步：运行应用程序1. 在 EmployeeDirectory.mxml 的任意位置点击鼠标右键，选择 Run
4、AS Mobile Application。2. 选择 On Desktop，选取模拟设备，如：Apple iPhone 4（参见图 3）。图 3：选取模拟设备3. 点击 Run，测试应用程序。应用程序示例如下（参见图 4）：图 4：应用程序示例第二节：使用移动条目渲染器在本节中，用户可以定义员工列表移动条目渲染器。步骤1. 打开 EmployeeDirectoryHomeView.mxml，定义列表的内联 itemRenderer。条目渲染器的第一行显示员工的姓和名，第二行显示员工的职务。2. 运行、测试应用程序。应用程序示例如下（参见图 5）：图 5： 应用程序示例如下：第三节：浏览视图在
5、本节中，用户可以创建 EmployeeDetails 视图，用以显示列表中所选员工的详细信息。用户还可以学习如何浏览视图和在视图之间传递信息。第 1 步：创建 EmployeeDetails 视图1. 右键单击 EmployeeDirectory 项目中的 views 文件夹，选择 New MXML Component。指定组件名称 EmployeeDetails，单击 Finish（参见图 6）。图 6：指定组件名称 EmployeeDetails2. 执行 EmployeeDetails 如下：第 2 步：打开员工详细信息视图1. 打开 EmployeeDirectoryHomeView.
6、mxml，为列表提供 change 处理器，从而打开所选员工详细信息视图。第 3 步：运行应用程序1. 在列表中选择员工：应出现所选员工的详细信息视图（参见图 7）。图 7.：所选员工的详细信息视图第四节：创建动作条在本节中，用户可以为员工目录设置动作条： 用户可以为应用程序的所有视图设置 Home 按钮，用户点击返回即可回到应用程序的第一个视图。 用户可以为 EmployeeDirectoryHomeView 动作条设置搜索控件来搜索员工。第 1 步：创建 Home 按钮1. 打开 EmployeeDirectory.mxml，定义下列导航条内容（在关闭之前）。2. 运行、测试应用程序。注：
7、由于导航控件是在应用程序级定义的，应用程序的所有视图共用导航控件（参见图 8）。图 8：应用程序的所有视图共用导航控件第 2 步：创建搜索条1. 打开 EmployeeDirectoryHomeView.mxml。2. 添加下列 titleContent 及 actionContent（在 标签关闭后），创建搜索条。在执行初步操作之后，单击搜索按钮，返回所有员工信息（无论用户在搜索框中嵌入的内容如何）。用户可以在第六节中执行搜索功能。3. 由于用户在点击搜索按钮时，我们已发送了数据请求，删除视图中定义的creationComplete 处理器。4. 运行、测试应用程序。注：EmployeeDe
8、tails 和 EmployeeDirectoryHome 视图继承 EmployeeDirectory.mxml 中定义的 Home 按钮。虽然一般来讲，在应用程序的所有视图中设置 Home 按钮的方法很好，但是没有必要为应用程序的 Home 视图都设置 Home 按钮，因为这样可能会造成混淆，参见图 9。图 9：EmployeeDetails 和 EmployeeDirectoryHome 继承 EmployeeDirectory.mxml 中定义的 Home 按钮第 3 步：删除 EmployeeDirectoryHome 中的 Home 按钮1. 打开 EmployeeDirector
9、yHomeView.mxml，在标签前添加一个空的navigatonContent 标签。2. 运行、测试应用程序（参见图 10）。图 10：删除 Home 按钮。注：当用户打开员工详细信息视图后，点击设备的 back 按钮（或应用程序的 home 按钮）返回列表，此时，列表为空。这是因为当另外一个视图被激活后，原先激活的视图自动销毁。当用户点击 back 按钮时，实际上已对上一视图进行实例化操作。第 4 步：保存搜索结果虽然视图未被激活时即被销毁，视图的“数据” 属性仍然存在且被重新分配，此时视图被重新实例化。如果用户想保存平衡数据属性的搜索结果：1. 将结果事件处理器添加到 HTTPSer
10、vice 中，用户可将 HTTP 服务调用的 lastResult 分配到视图的数据属性中。2. 将列表与视图的数据属性绑定在一起。3. 运行、测试应用程序。第五节：整合设备能力在本节中，用户可以在应用程序中对员工打电话、发送文本或邮件。第 1 步：显示动作列表1. 在 EmployeeDetails.mxml 中，将 块添加到opening 标签前。2.在新块中，定义可绑定的 ArrayCollection 控件，以容纳所选员工可用的动作列表。注：确保导入上述代码的 ArrayCollection 类进行编译：3. 定义下列嵌入式图标。用户可在动作列表 itemRenderer 中使用这些图
11、标。4. 替换视图“数据”属性中的 setter，使用基于可用数据的员工动作来填充动作列表。例如，如果手机号码可用，“SMS”动作只能呈现给用户。5. 显示动作列表：在 closing 标签下将 List 组件界限添加到动作列表中。6. 运行、测试应用程序。用户在列表中选择员工后，应该可以看到该员工可用的动作列表（参见图 1）。这些动作目前尚不能运行。用户可以在下一步运行这些动作。图 11：员工可用的动作列表第 2 步：触发动作1. 将 change handler 添加到列表中。2. 执行 list_changeHandler 如下：注：用户一定要导入上述代码的 spark.events.I
12、ndexChangeEvent（非mx.events.IndexChangedEvent）进行编译。3. 运行、测试应用程序。第六节：使用 Local SQLite 数据库在本节中，用户可以改变应用的数据访问逻辑：用户使用设备上可用的 SQLite 数据库而非 HTTPService 来访问数据。步骤1. 从 FlexMobile60Minutes 文件夹下复制 dao 目录，将其粘贴到 EmployeeDirectory 项目的 src 目录下。2. 研究 EmployeeDAO 及 Employee 类的源代码：o EmployeeDAO 类提供了数据访问对象（DAO ）的基本执行方式：对
13、数据访问对象进行封装，创建、更新、删除员工信息。如果数据库中不存在员工表，EmployeeDAO 也包含利用实例数据进行创建、填充的逻辑。o 员工是基本值对象，同样提供延迟加载逻辑来加载员工的管理人员、指导所需的报告。3. 在 EmployeeDirectoryHomeView.mxml 中，采用 EmployeeDAO 实例来替换HTTPService。注：模型命名空间一定要绑定在 mxml 文件顶端的 View 定义中。4. 修改搜索按钮，点击相应的事件处理器。注：在本例中，由于 EmployeeDAO 使用同步版本的数据访问 API，用户可以直接为数据分配 findByName 函数的返
14、回值。5. 打开 EmployeeDirectory-app.xml，向下滚动至文件末尾。在部分，取消下列许可的注释：6. 运行、测试应用程序。第七节：浏览组织结构图在本节中，用户可将“View manager”和“View direct reports”动作添加到 Employee Details 视图中，这样就可以浏览组织结构图。第 1 步：创建 DirectReports 视图1. 在 EmployeeDirectory 项目中右键点击 views 文件夹，选择 NewMXML Component。指定组件名称 DirectReports，单击 Finish（参见图 12）。图 12：指
15、定组件名称 DirectReports，单击 Finish2. 执行 DirectReports.mxml 如下：第 2 步：添加动作，浏览组织结构图1. 在 EmployeeDetails.mxml 中，将两个可能的动作添加到 set data 函数中。2. 在列表变更处理器中，添加两个 case 语句，触发相应的动作。第 3 步：运行应用程序1. 选择作为管理人员的员工（参见图 13），单击“View manager”动作（参见图 14）。图 13：选择作为管理人员的员工图 14：单击“View manager”动作2. 选择负责直接报告的员工（参见图 14），单击“View direct
16、 reports”动作（参见图 15）。图 15：直接报告版下载频道介绍之二上传和下载资源页面介绍 bShare 分享，迅速提升 10 倍流量 运用针对 Flex 的 ArcGIS API 构建安卓和 iOS 移动测图应用 2011-07-22 13:49 378 人阅读 评论(0) 收藏 举报 区位、区位、区位。这不仅是房产经纪人的信条，也是 Google、Facebook、Foursquare及其他众多网络先锋所恪守的信条，他们都将公司区位作为服务提供要素的一部分。随着移动服务在我们的日常生活中变得越来越普及，整合了区位意识、移动性以及测图资产的应用为用户提供了创新的、令人激动的新功能。这
17、种新功能增加了开发成本，尤其对于开发在所有设备上均可运行的移动应用的开发者。对于这些开发者而言，Flex 和 Flash 平台帮助他们实现了较低的成本，并简化了跨平台应用的开发过程，它们能让开发者使用一种单一码基数构建应用，并将其配置到多个设备上。 在本文中，我将向您展示入耳使用针对 Flex 的 ArcGIS API 来构建一个测图应用，该应用可配置到支持安卓和 Apple iOS 的设备上。本文中采用的示范应用是针对 Flex 的 ArcGIS API，以便对 ArcGIS.com 上的美国各州几何图形进行查询，结果将通过各州列表和一张地图的方式展示，该列表用于移动设备在直式定向时展示各州
18、列表，该地图用于在移动设备进行横向定位时高亮显示所选的各州。这一应用听起来可能很简单，但实际没有想象的那么简单。它能展示 Flex Mobile 框架的诸多方面，以及它如何与针对 Flex 的 ArcGIS API进行合作。 测图应用的导入和运行 在下载了说明的范例文件后，打开 Flash Builder 4.5.1，然后按如下步骤操作： 1. 选择文件 导入 Flash Builder Flash Builder Project，点击下一步.2. 选择文件，点击浏览，导航至已下载的 MobileApp.fxp 项目文件。3. 选择导入新项目副本，点击完成。您可采用安卓模拟器运行该应用，或在一
19、台实际的安卓设备上允许该应用。通过运行配置（运行 运行配置），您可以添加一个移动应用，并确定适当的启用方式（见图 1）。图 1. 设置 MobileApp 的运行配置浏览应用 打开 MobileApp.mxml，您可以看到主应用程序的源代码。MobileApp.mxml 该应用的主类是一个 ViewNavigatorApplication 子集。它具有一个 splashScreenImage属性，用于应用启动时展示内置图像。另外，它还用于将应用的初始视图（见图 2）设为一个 QueryView 类范例。 图 2. 应用的初始视图初始视图（或主页视图）可使用户输入一个 SQL where 子句作为一个查询任务的过滤器，其将从 ArcGIS.com 的一个 REST 资源获取美国各州的几何图形与名称。您可以在QueryView.mxml 中获得源代码。 QueryView.mxmlQueryView 是视图的一个子类，其标题属性为“查询”。其子类按垂直设置。在这里，它只有一个子类，一个 TextInput 范例，该范例可使用户键入一个 SQL where 子句。在动作内容区（窗口的右上方）内定义了一个按键范例，其图标属性引用一个内置的放大键图像，并由一个点击事件处理器，可通过文本输入值将一个 QueryExecuteView 范例推到窗口中。
