第二讲flex控件课件

36、“不可能”这个字(法语是一个字)，只在愚人的字典中找得到。--拿破仑。37、不要生气要争气，不要看破要突破，不要嫉妒要欣赏，不要托延要积极，不要心动要行动。38、勤奋，机会，乐观是成功的三要素。(注意：传统观念认为勤奋和机会是成功的要素，但是经过统计学和成功人士的分析得出，乐观是成功的第三要素。39、没有不老的誓言，没有不变的承诺，踏上旅途，义无反顾。40、对时间的价值没有没有深切认识的人，决不会坚韧勤勉。第二讲flex控件第二讲flex控件36、“不可能”这个字(法语是一个字)，只在愚人的字典中找得到。--拿破仑。37、不要生气要争气，不要看破要突破，不要嫉妒要欣赏，不要托延要积极，不要心动要行动。38、勤奋，机会，乐观是成功的三要素。(注意：传统观念认为勤奋和机会是成功的要素，但是经过统计学和成功人士的分析得出，乐观是成功的第三要素。39、没有不老的誓言，没有不变的承诺，踏上旅途，义无反顾。40、对时间的价值没有没有深切认识的人，决不会坚韧勤勉。第二讲flex控件flex控件魏涛本章内容基本控件容器控件数据验证控件特效控件报表控件DateChooserDateChooser控件通常结合DateField一起使用。DateChooser是日历面板，可以选取时间，DateField是将所选取的日期字符串显示在输入框中。比较两个时间，例如： vard1:Number=Date.parse(start_date.selectedDate); vard2:Number=Date.parse(end_date.selectedDate); if(d1>d2){ Alert.show("结束时间必须在开始时间以后","ERROR"); }MenuMenu控件创建可分别选择的选项的弹出菜单，此弹出菜单类似于大多数软件应用程序中的“文件”或“编辑”菜单。弹出菜单可以具有所需的任何数目的子菜单级别。打开Menu控件后，此控件将一直可见，直到通过下列任一操作将其关闭：调用Menu.hide()方法。用户选择已启用的菜单项。用户在Menu控件外部单击。用户选择该应用程序中的其它组件。Menu首先需要数据源，例如：<mx:XMLid="menu_data">

<root>

<menuitemlabel="第一菜单"eventName="item1"> <submenuitemlabel="子菜单一"eventName="subitem1"/>

</menuitem>

<menuitemlabel="第二菜单"eventName="item2"> <submenuitemlabel="子菜单二"eventName="subitem1"/>

</menuitem>

</root></mx:XML>MenuBarMenuBar控件的顶级菜单栏始终可见。此控件不适合用作弹出菜单。当用户使用鼠标或键盘进行选择时，将弹出相应的子菜单。如果选择了某个菜单项，或者用户通过在菜单外单击取消了该菜单，打开的子菜单将会消失。PopUpMenuButtonPopUpMenuButton控件可创建一个PopUpButton控件，带有一个主子按钮和一个辅助子按钮。单击辅助（右）子按钮会下拉一个菜单，可通过dataProvider属性对其填充。与Menu和MenuBar控件不同，PopUpMenuButton控件仅支持单级菜单。这就意味着此菜单不能包含级联子菜单。PopUpMenuButton也可以采用Array赋值方式，例如：vardp: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容器了解盒子容器与CSSBOX模型类型，Flex容器组件有自己的BOX模型。但，区别在于Flex盒子仅有：padding，border，content。而没有CSS盒子中的merginContent内容Padding-toppadding-bottomBerder-topBerder-bottomBerder-rightBerder-leftpadding-leftpadding-rightCSSwidthFlexwidthVBox,HBoxVBox容器将其子项放在同一垂直列上HBox容器在单个水平行中布置其子容器使用clipContent属性如果容器组建的clipContent属性被设置为false，超出容器幅面大小的部分会溢出，并不会显示滚动条GridGrid容器与html表格功能类似，它允许您按单元格的行和列来排列子项，这与HTML表相似。Grid容器包含一行或多行，并且每行可以包含一个或多个单元格或项目。您应使用下列标签来定义Grid控件：

<mx:Grid>标签定义Grid容器。<mx:GridRow>标签定义网格行，其中包含一个或多个单元格。网格行必须是<Grid>标签的子项。<mx:GridItem>标签定义网格单元格，该标签必须是<GridRow>标签的子项。<mx:GridItem>标签可以包含任意数目的子项。PanelPanel容器包括标题栏、标题、边框及其子项的内容区域。通常，您使用Panel容器包围顶级应用程序模块。它也是开发中常用的一种容器。ApplicationControlBarApplicationControlBar容器包含提供全局导航和应用程序命令的组件。例如，编辑器的ApplicationControlBar可以包括用于设置字体权重的Button控件、用于选择字体的ComboBox控件和用于选择编辑模式的MenuBar控件。通常将ApplicationControlBar容器放置在应用程序的顶部。本章内容基本控件容器控件数据验证控件特效控件报表控件了解验证控件一般情况下，程序都必须首先对用户输入的数据是否符合要求进行检验，Flex中也提供了这样一组验证器。所有验证器都有这两个事件：invalid：当验证失败时触发valid：当验证成功时触发我们也可以通过控件的内部方法完成验证失败后的提示消息输出委托按钮触发验证在传统中，验证的触发是在失去焦点时触发。但有些时候，针对一个表单提交，想点击按钮时，在验证应该这么做呢？<mx:Validatorid="but_val"required="true"property="text" source="{val_inps}"valid="handlerValid(event)"invalid="handlerValid(event)"

trigger="{but}"triggerEvent="click"/><mx:TextInputx="130"y="135"id="val_inps"/><mx:Buttonx="298"y="135"label="验证"id="but"click="but_val.validate();"/>数据验证控件NumberValidator控件CurrencyValidator控件PhoneNumberValidator控件StringValidator控件ZipCodeValidator控件DateValidator控件EmailValidator控件EmailValidator任何验证属性，请不要用脑力记忆，请参考文档！为消息添加样式默认情况下，输出结果文字太小(9号)，可以采用以下方法改变输出文字大小。

<mx:Style> .errorTip{ fontSize:12px; }</mx:Style>本章内容基本控件容器控件数据验证控件特效控件报表控件特效控件Flex作为一种前台交互技术，应用领域非常广泛，连"QQ农场"类是的在线游戏，完成都不费吹灰之力。在定义动画中，行为（dehavior）则由一个触发器和一个动画效果组成。在MXML组件中定义行为定义方式共有四种，在这里不一一介绍，我们只用掌握最直观的二种。1：属性绑定 <mx:WipeLeftid="wl"duration="1000"/>

<mx:Buttonlabel="点击我！"mouseDownEffect="{wl}" width="200"height="58"fontSize="30"/>2：代码绑定 functioninitApp():void{ but.setStyle("mouseDownEffect",wl); }动画播放事件所有的效果都继承自mx.effects.Effect类，它定义了以下几种方法来控制动画的播放流程。play()开始播放end()结束播放pause()暂停播放resume()当暂停时，从当前位置继续播放reverse()逆向播放stop()停止播放可触发的属性内建动画效果并发、顺序效果顺序效果：动画效果按某种顺序运行，有先后次序并发效果：动画效果同步运行，没有先后次序它们可以通过使用<mx:parallel>和<mx:sequence>标签引发并行和顺序播放的次序。为数据添加效果<mx:DefaultListEffectid="elf"fadeInDuration="2000"fadeOutDuration="2000"/> <mx:ArrayCollectionid="dp"> <mx:String>Flex</mx:String> <mx:String>J2EE</mx:String></mx:ArrayCollection>

<mx:TileListx="10"y="10"id="lst"dataProvider="{dp}"itemsChangeEffect="{elf}"width="184"></mx:TileList><mx:Buttonx="214"y="11"label="删除项目"

click="dp.removeItemAt(0)"/><mx:Buttonx="214"y="83"label="添加项目"click="dp.addItemAt('.NET',0)"/>本章内容基本控件容器控件数据验证控件特效控件报表控件报表控件PieChartcolumnChartPieChartPieChart控件使用标准的饼图来表示数据系列。数据提供程序的数据确定饼图中每个楔子相对于其它楔子的大小。可使用PieSeries类创建标准的饼图、环形图或堆叠的饼图。

PieChart控件要求其series属性包含PieSeries对象Array。columnChartColumnChart控件将数据表示为一组垂直列，其高度由数据中的值确定。可使