第二讲_flex控件.ppt

1、flex控件,魏涛,本章内容,基本控件 容器控件 数据验证控件 特效控件 报表控件,基本控件,Alert控件 DateChooser控件 Menu控件 MenuBar控件 PopUpMenuButton控件,Alert,Alert 控件是一个弹出对话框，可能包含消息、标题、按钮（“确定”、“取消”、“是”和“否”的任意组合）和图标。Alert 控件是模式控件，这意味着在用户将其关闭之前，它将一直保留焦点。 例如： Alert.show(你喜欢FLEX吗？,友情提示,Alert.OK | Alert.CANCEL,this,clickHandler); function clickHandler

2、(event:CloseEvent):void if (event.detail = Alert.OK) but.label=我非常喜欢FLEX!; if (event.detail = Alert.CANCEL) but.label=不，我非常不喜欢FLEX!; ,DateChooser,DateChooser控件通常结合DateField一起使用。DateChooser是日历面板，可以选取时间， DateField是将所选取的日期字符串显示在输入框中。 比较两个时间，例如： var d1:Number = Date.parse(start_date.selectedDate); var d

3、2:Number = Date.parse(end_date.selectedDate); if(d1 d2) Alert.show(结束时间必须在开始时间以后,ERROR); ,Menu,Menu 控件创建可分别选择的选项的弹出菜单，此弹出菜单类似于大多数软件应用程序中的“文件”或“编辑”菜单。弹出菜单可以具有所需的任何数目的子菜单级别。打开 Menu 控件后，此控件将一直可见，直到通过下列任一操作将其关闭： 调用 Menu.hide() 方法。 用户选择已启用的菜单项。 用户在 Menu 控件外部单击。 用户选择该应用程序中的其它组件。,Menu,首先需要数据源，例如： ,MenuBar,

4、MenuBar 控件的顶级菜单栏始终可见。此控件不适合用作弹出菜单。当用户使用鼠标或键盘进行选择时，将弹出相应的子菜单。如果选择了某个菜单项，或者用户通过在菜单外单击取消了该菜单，打开的子菜单将会消失。,PopUpMenuButton,PopUpMenuButton 控件可创建一个 PopUpButton 控件，带有一个主子按钮和一个辅助子按钮。单击辅助（右）子按钮会下拉一个菜单，可通过 dataProvider 属性对其填充。与 Menu 和 MenuBar 控件不同，PopUpMenuButton 控件仅支持单级菜单。这就意味着此菜单不能包含级联子菜单。,PopUpMenuButton,也

5、可以采用Array赋值方式，例如： var dp:Array = label:Flash动画王, data:id_001, label:Flash开发王,data:id_001, label:Flex开发王, data:id_001 ; pmb.dataProvider = dp; pmb.addEventListener(itemClick, showitem);,本章内容,基本控件 容器控件 数据验证控件 特效控件 报表控件,容器控件,VBox, HBox容器 Grid容器 Panel容器 ApplicationControlBar容器,了解盒子容器,与CSS BOX模型类型，Flex容器

6、组件有自己的BOX模型。但，区别在于Flex盒子仅有：padding，border，content。而没有CSS盒子中的mergin,VBox, HBox,VBox 容器将其子项放在同一垂直列上 HBox 容器在单个水平行中布置其子容器 使用clipContent属性 如果容器组建的clipContent属性被设置为false，超出容器幅面大小的部分会溢出，并不会显示滚动条,Grid,Grid 容器与html表格功能类似，它允许您按单元格的行和列来排列子项，这与 HTML 表相似。Grid 容器包含一行或多行，并且每行可以包含一个或多个单元格或项目。您应使用下列标签来定义 Grid 控件： 标

7、签定义 Grid 容器。 标签定义网格行，其中包含一个或多个单元格。网格行必须是 标签的子项。 标签定义网格单元格，该标签必须是 标签的子项。 标签可以包含任意数目的子项。,Panel,Panel 容器包括标题栏、标题、边框及其子项的内容区域。通常，您使用 Panel 容器包围顶级应用程序模块。它也是开发中常用的一种容器。,ApplicationControlBar,ApplicationControlBar 容器包含提供全局导航和应用程序命令的组件。例如，编辑器的 ApplicationControlBar 可以包括用于设置字体权重的 Button 控件、用于选择字体的 ComboBox 控

8、件和用于选择编辑模式的 MenuBar 控件。 通常将 ApplicationControlBar 容器放置在应用程序的顶部。,本章内容,基本控件 容器控件 数据验证控件 特效控件 报表控件,了解验证控件,一般情况下，程序都必须首先对用户输入的数据是否符合要求进行检验，Flex中也提供了这样一组验证器。 所有验证器都有这两个事件： invalid：当验证失败时触发 valid：当验证成功时触发 我们也可以通过控件的内部方法完成验证失败后的提示消息输出,委托按钮触发验证,在传统中，验证的触发是在失去焦点时触发。但有些时候，针对一个表单提交，想点击按钮时，在验证应该这么做呢？ ,数据验证控件,Nu

9、mberValidator控件 CurrencyValidator控件 PhoneNumberValidator控件 StringValidator控件 ZipCodeValidator控件 DateValidator控件 EmailValidator控件,EmailValidator,任何验证属性，请不要用脑力记忆，请参考文档！,为消息添加样式,默认情况下，输出结果文字太小(9号)，可以采用以下方法改变输出文字大小。 .errorTip fontSize:12px; ,本章内容,基本控件 容器控件 数据验证控件 特效控件 报表控件,特效控件,Flex作为一种前台交互技术，应用领域非常广泛，连

10、QQ农场类是的在线游戏，完成都不费吹灰之力。 在定义动画中，行为（dehavior）则由一个触发器和一个动画效果组成。,在MXML组件中定义行为,定义方式共有四种，在这里不一一介绍，我们只用掌握最直观的二种。 1：属性绑定 2：代码绑定 function initApp():void but.setStyle(mouseDownEffect, wl); ,动画播放事件,所有的效果都继承自mx.effects.Effect类，它定义了以下几种方法来控制动画的播放流程。 play()开始播放 end()结束播放 pause()暂停播放 resume()当暂停时，从当前位置继续播放 reverse(

11、)逆向播放 stop()停止播放,可触发的属性,内建动画效果,并发、顺序效果,顺序效果：动画效果按某种顺序运行，有先后次序 并发效果：动画效果同步运行，没有先后次序 它们可以通过使用和标签引发并行和顺序播放的次序。,为数据添加效果, Flex J2EE ,本章内容,基本控件 容器控件 数据验证控件 特效控件 报表控件,报表控件,PieChart columnChart,PieChart,PieChart 控件使用标准的饼图来表示数据系列。数据提供程序的数据确定饼图中每个楔子相对于其它楔子的大小。可使用 PieSeries 类创建标准的饼图、环形图或堆叠的饼图。 PieChart 控件要求其 series 属性包含