第15章节 Flex 4.pptVIP

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