第15章flex界面设计实战.pptVIP

15.8 小结 本章主要以实例的形式为读者讲解常用的Flex 4.0组件的使用。这些实例中使用的组件既有最常用的组件，如Panel组件、按钮组件、输入框组件等，也有Flex 4.0新增的组件，如FileSystemComboBox组件、FileSystemTree组件等。由于Flex 4.0提供的组件众多，每种组件都有特殊的功能。本章不能一一介绍。但是通过本章的学习，读者可以掌握使用组件的普遍方法。结合实例的学习，能很好地理解组件给程序开发带来的方便。 第30页/共30页 Flex 4.0 RIA开发详解(第2版) 15.1 登录框实例 登录作为检验合法用户身份的有效方法，被广泛应用于Web开发中。Flex作为新的互联网应用程序的开发方法，登录模块也是应用程序必不可少的一部分。本实例将图文并茂地为读者讲解登录框的制作过程。 第1页/共30页 15.1.1 制作登录框界面 登录模块制作的第一步是设计好界面，也就是登录框的外观及其他的组件。本节主要涉及设计组件及组件属性，代码编辑区中查看MXML代码等。 第2页/共30页 15.1.2 使用按钮处理事件 1．处理“登录”事件 2．处理“重置”事件 3．编译运行代码 第3页/共30页 15.1.3 制作校验码 制作校验码的步骤如下。 （1）新建生成校验码函数GenerateCheckCode （2）在程序初始化时调用函数GenerateCheckCode。 第4页/共30页 15.1.4 验证合法用户 合法用户登录的条件有三个：正确的用户名，正确的密码和正确的校验码。本小节在之前的基础上完善登录验证。主要的修改是：在“登录”按钮的事件处理函数中添加对校验码的判断。需要注意的是，用户输入的校验码可能大小与标准的校验码不一致。此时可先将输入的校验码和标准的Ｑ槁攵甲晃⌒矗缓笈卸狭秸呤欠褚恢隆＝址为小写的方法是使用String类的toLowerCase()方法。 第5页/共30页 15.1.5 合法用户进入主程序 合法用户在登录成功以后一般是跳转至“新页面”。Flex 3.0中不能生成新页面，但是可以生成新状态（State）。Flex中的状态类似于Flash中的场景概念。在新状态里用户可以全部或部分地移除之前的组件，也可以再加入新的组件。这样，状态就可看成是Flex中的“新页面”。由于Flex的“新页面”并不是真正的新页面，整个Flex应用程序还是在嵌套在浏览器的一个页面里，所以就不会有页面刷新的问题。从而减小了服务器端的压力。 第6页/共30页 15.2 菜单导航实例 互联网应用程序中常用菜单来实现导航效果。单击菜单中的子项就切换到新的页面。本节主要介绍如何制作菜单导航条。涉及的组件包括MenuBar组件、XMLList组件、State组件、Transition组件等。在切换状态时添加过渡效果。 第7页/共30页 15.2.1 制作菜单 制作菜单主要用到MenuBar组件。MenuBar组件与ComboBox组件一样，属于多值组件，需要数据集来表示菜单的具体项和子项等。 数据集可以由XMLList组件提供。XMLList组件与XML组件几乎相同。不同的地方在于XML组件中必须要有根节点，而XMLList组件中不需要有根节点。XMLList组件可表示的内容是XML组件表示内容的子集。 第8页/共30页 15.2.2 设计状态 菜单导航实例中单击每个菜单项都跳转至相应的状态。在Flex中一个新状态可看做是一个新页面。状态可基于其他的状态，即可保留其父状态的所有组件。用户可根据需要移除一些组件或加入新的组件形成新状态。这种机制可最大限度地提高程序的可重用性。 第9页/共30页 15.2.3 菜单导航 在完成菜单和状态后，接下来要做的是将两者关联起来。当单击不同的菜单项时切换至不同的状态，从而起到导航效果。制作菜单导航的步骤如下所示。 （1）在MenuBar组件中添加change事件。 （2）创建change事件的处理函数。 第10页/共30页 15.2.4 制作状态切换时的过渡效果 用户有时为了美观，需要在状态切换时有过渡效果，如模糊、渐显、扭曲等。在Flex 4.0中核心类中已定义了很多有关效果的类，这些类包含在“mx.effects.*”中。 第11页/共30页 15.3 柱状图实例 Flex 4.0中提供了丰富的统计图形控件，包括柱状图、折线图、饼图等。这些控件功能强大、操作方便且美观，适合做互联网应用程序中的统计部分。本小节以柱状图为例向读者介绍如何制作一个简单的柱状图。实例涉及的内容包括设计数据集、设计柱状图组件的显示方式以及数据绑定。 第12页/共30页 15.3.1 设计数据集 在开始柱状图制作之前需要先设计好数据集。所谓“车马未动，粮草先行