使用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:
2.? 打开EmployeeDirectoryHomeView.mxml,执行下列视图: 注:
第3步:运行应用程序1. ?在EmployeeDirectory.mxml的任意位置点击鼠标右键,选择Run AS> Mobile Application。 2. 选择On Desktop,选取模拟设备,如:Apple iPhone 4(参见图3)。 图3:选取模拟设备 3. 点击Run,测试应用程序。应用程序示例如下(参见图4): 图4:应用程序示例 第二节:使用移动条目渲染器在本节中,用户可以定义员工列表移动条目渲染器。 步骤
2. 运行、测试应用程序。应用程序示例如下(参见图5): ?图5: 应用程序示例如下: 第三节:浏览视图在本节中,用户可以创建EmployeeDetails视图,用以显示列表中所选员工的详细信息。用户还可以学习如何浏览视图和在视图之间传递信息。 第1步:创建EmployeeDetails视图1. 右键单击EmployeeDirectory项目中的views文件夹,选择New> MXML Component。指定组件名称EmployeeDetails,单击Finish(参见图6)。 ? ?? 图6:指定组件名称EmployeeDetails 2.? 执行EmployeeDetails如下: 第2步:打开员工详细信息视图
第3步:运行应用程序1.? 在列表中选择员工:应出现所选员工的详细信息视图(参见图7)。 ?? 图7.:所选员工的详细信息视图 第四节:创建动作条在本节中,用户可以为员工目录设置动作条:
第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类的源代码:
3. 在EmployeeDirectoryHomeView.mxml中,采用EmployeeDAO实例来替换HTTPService。 注:模型命名空间一定要绑定在mxml文件顶端的View定义中。 4. 修改搜索按钮,点击相应的事件处理器。 注:在本例中,由于EmployeeDAO使用同步版本的数据访问API,用户可以直接为数据分配findByName函数的返回值。
6. 运行、测试应用程序。 第七节:浏览组织结构图在本节中,用户可将“View manager”和“View direct reports”动作添加到Employee Details 视图中,这样就可以浏览组织结构图。 第1步:创建DirectReports视图
?图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:直接报告 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |