flex基本控件总结.docx
- 文档编号:9892547
- 上传时间:2023-02-07
- 格式:DOCX
- 页数:34
- 大小:33.59KB
flex基本控件总结.docx
《flex基本控件总结.docx》由会员分享,可在线阅读,更多相关《flex基本控件总结.docx(34页珍藏版)》请在冰豆网上搜索。
flex基本控件总结
Flex基本控件总结
1、flex控件的分类:
文本控件(textcontrols)、数据源控件(dataprovidercontrols)、菜单控件(menucontrols)、按钮控件(buttoncontrols)、Flex控件(flexcontrols)、容器控件。
2、文本控件
a)标签(Label):
标签:
Label/> i.标签控件的特性: 1.用户不能编辑文本,但程序可以改变它。 2.可以使用HTML格式定义文本。 3.可以控制对齐和改变大小。 4.可以定义标签的背景为透明,这样就可以看见容器的背景。 5.标签控件没有边界,就像文本直接写在背景上。 ii.例如: Labelid="lblLable"Text="标签">. iii.Label组件支持html标记。 如果在标签内容中包含html特殊标记,需要使用转换字符: 例如,在标签中显示<符号 Labeltext="<<Prev"/> b)文本(Text): 标签: Text/> i.特性: 1.用户不能编辑文本,但程序可以改变它。 2.控件不支持滚动条。 3.支持HTML格式定义文本。 4.默认的大小足够显示文本。 5.文本背景为透明,这样就可以看见容器的背景。 6.文本控件没有边界,就像文本直接写在背景上。 7.文本在边界会自动转行,而且文本总是排列在文本控件顶部。 ii. Text> text>文本内容 text> Text> c)文本条(TextInput): 标签: TextInput/> i.事件: change、enter。 ii.属性: editable: 是否阻止对文本的编辑,false为是。 displayAsPassword: 将输入的字符显示为*。 将一个变量绑定在文本条上: TextInputText="{myInputText}"/>. restrict(约束、限定): (此输入可省去验证的麻烦) 例如 TextInputid="txt"restrict="0-9">,表示输入框只能输入0到9之间的数字。 maxChars: 限定输入的做多字符. 例如 TextInputid="txt"maxChars="20">,标识输入的字符不能超过20个。 d)文本区域(TextArea): 标签: TextArea/> i.特性: 1.文本可以被编辑。 2.可以可以具有滚动条。 3.支持HTM文本和富文本。 4.可以触发change事件。 5.可定义文本区域控件为禁用状态。 6.可定义为只读属性。 7.可使用displayAsPassword属性将文本显示为*。 8.文本区域控件的字符串最大长度为37440个字符。 ii.如果文本超过界限,同时horizontalScrollPolicy属性设置为true时,就会出现滚动条。 iii.例如: TextAreaid="tarEdit"text="文本区域控件内容"> e)富文本区域(RichTextArea): 标签: RichTextEditor/> i.包含2个子控件: 1.文本区域,用来输入文字。 2.工具条,包含了各类控件,用来改变文本特性。 ii.富文本编辑器控件可以帮助用户定义文本具有不同的字体、颜色、风格、文本的对正、列表或者URL超链接等。 iii.例如: RichTextEditorid="rte"title="富文本编辑器"text="输入富文本的内容"> 3、数据源控件 a)数据表格(DataGrid): 标签: DataGrid/>。 i.是一个可以展示多列数据的列表控件。 是一个格式化的数据表格,可以设置可编辑的单元格,是许多数据驱动应用的基础。 ii.特性: 1.可改变大小;可以排序;用户定义行列的布局,包括隐藏某一列。 2.可选自定义的行和列的标题头。 3.用户可以动态改变列的大小和排序。 4.多种模式的选择(行、列、单元格)和编辑及选择事件。 5.可以在一个单元格使用自定义组件。 6.支持数据翻页。 7.锁定不能滚动的行和列。 iii.属性: 1.sorttableColumns: 设置为false时,将关闭所有的列排序功能。 2.sorttable: 设置为false时,该列将关闭排序功能。 3.showDataTips: 设置为true时,浮现出提示信息。 b)树(Tree): 标签: Tree/>。 i.树结构控件是一个分支和叶节点的继承结构。 ii.树中的每一项称为节点,节点可以是根节点、分支节点和叶节点,根节点可以包含分支节点和叶节点,分支节点也可包含子分支节点和叶节点,而叶节点则是树的一个末端点。 iii.常用事件: change。 iv.方法: 1.addTreeNode(): 向tree添加节点。 2.addTreeNodeAt(): 在tree的特定位置添加节点。 3.getDisplayIndex(): 返回给定节点的显示索引 4.getIsOpen(): 指定节点是打开还是关闭。 5.getNodeDisplayedAt(): 将tree的某个显示索引映射到在给索引出显示的节点。 6.getTreeNodeAt(): 返回在树的根上的节点。 7."refresh"(): 更新树。 8.removeAll(): 从tree中删除所有的节点并刷新tree。 9.setIcon(): 为指定的节点设置图标。 4、菜单控件 a)菜单(Menu): i.菜单控件只能在ActionScript代码中定义。 ii.通过用户的行为来触发,弹出菜单项。 iii.不具有MXML标签。 iv.当菜单打开后就处于可视状态,除非用户选择了其中一项,或者选择了其他的组建或者用一个脚本(script)脚本程序关闭了菜单。 v.createMenu(): 创建menu对象 vi.数据源: Xml、arrayList、model、XmlListCollection。 b)菜单条(MenuBar): 标签: MenuBar/> i.菜单条中控件中的每一项都可以弹出子菜单。 ii.菜单条控件的数据从数据源中获得。 iii.菜单条总保持可视状态,是一个静态的控件。 iv.菜单条可以在MXML中实现。 c)弹出菜单按钮(PopUpMenuButton): 标签: PopUpMenuButton/> i.当用户单击弹出按钮,并在弹出菜单中选择了某个菜单项后,主按钮就会显示所选菜单项的标签和图像。 ii.弹出菜单按钮控件只支持单级的菜单,如果选择了菜单的子菜单,主按钮上的标签或图标将不会改变。 iii.弹出菜单的工作流程: 1.单击下的弹出按钮,即有向下箭头图标的弹出按钮后,控件在按钮下面显示弹出菜单。 2.选择某一菜单项,改变主按钮的标签(不包括菜单中的所有子菜单项)。 同时触发MenuEvent.CHANGE事件。 3.单击主按钮,触发MenuEvent.CHANGE事件和MouseEvent.CLICKS事件。 iv.常用事件: itemClick。 v.常用属性: 1.dataProvider: 数据源。 2.iconField: 要为每个菜单项显示的图标。 3.labelFiled: 要为每个菜单项显示的文本。 vi.例如: PopUpMenuButtonid="popbtn"dataProvider="{数据源}"labelField="@数据源中的label"itemClick="事件"/> 5、按钮控件 a)按钮(Button): 标签 Button> i.常用事件: click(单击)、buttonDown(按钮按下)。 ii.常用状态: up(鼠标不在按钮上,即按钮的原始状态)、down(鼠标按下)、over(鼠标放在按钮上方)、Disable(按钮处于禁用状态)。 iii.常用的属性和方法: 1.Emphasized: 获取或设置一个布尔值,指示当按钮处于弹起状态时,button组建周围是否绘有边框,默认为false。 -属性 2.Label: 按钮上显示的文本。 -属性 3.Icon: 按钮显示的图标。 -属性 4.Click: 按钮的监听单击事件的方法。 其实事件: mouseMove、mouseOver、mouseOut、rollOver、rollOut、mouseDown和mouseUp。 iv.例如: Buttonid="btonButton"lable="按钮"color="red"width="100"icon="@Embed('image/eek.gif')"overIcon="@Embed('image/eek_over.gof')"downIcon="@Embed('image/eek_down.gif')"/>。 b)弹出按钮控件(PopUpButtonControl): 标签 PopUpButton/> i.常用事件: itemclick(选项单击事件). ii.初始化菜单函数: initMenu()。 iii.例如: 定义控件: PopUpButtonid="popB"creationComplete="initMenu();"/> 初始化菜单: importmx.control.*; importmx.events.*; privatevarmyMenu: Menu; privatefunctioninitMenu(): void{ myMenu=newMenui(); vardp: Object=[{label: "目录1"},{label: "目录2"},{label,"目录3"}]; myMenu.dataProvider=dp; myMenu.selectedIndex=0; popB.popUp=myMenu; popB.label="点击弹出按钮"; } c)按钮条(ButtonBar): 标签: ButtonBar/> i.常用事件: itemClick。 ii.整个控件只有一个单一的监听事件(itemClick),当某个按钮被选择时,此事件被触发。 d)链接按钮(LinkButton): 标签: LinkButton/> i.常用事件: click。 ii.例如: LinkButtonlabel="连接1"click="viewStack.selectedIndex=0"/> e)链接条(LinkBar): 标签: LinkBar/> i.常用事件: itemClick。 ii.可通过 datProvider>标签将数据传递到linkBar控件上。 iii.可使用addItem()和removeItem()方法来操作dataProvider属性。 iv.常用属性和事件: 1.dataProvder: 数据源-属性 2.separatorColor: 设置分隔符的颜色-属性 3.Direction: 水平或垂直显示-属性 4.verticalGap: 间隔的宽度,范围“0-20”-属性 5.itemClick: 点击控件中的选项引发-事件 f)复选框(CheckBox): 标签: CheckBox/> i.常用事件: click。 ii.常用状态: 未选、被选、禁用、激活。 iii.标识为被选择,返回true;标识为未被选择,返回false。 iv.checkBox没有属性值value,无法获取。 g)单选按钮(RadioButton): 标签: RadioButton/> i.常用事件: click。 ii.当选按钮是成组使用的,每一组选项都具有相同的组名。 iii.每次只能选择一个选项,当选择了一个未选项,当前被选项就变成未选项。 iv.常用属性: 1.Selected: true为已选定。 v.例如: RadioButtongroupName="amount"id="option1"/> RadioButtongroupName="amount"id="option2"/> h)单选按钮组(RadioButtonGroup): 标签: RadioButtonGroup/> i.常用事件: itemClick。 ii.例如: RadioButtonGroupid="amount"itemClick="handleBtn(event)"/> RadioButtongroupName="amount"id="option1"/> RadioButtongroupName="amount"id="option2"/> iii.遍历radiobuttongroup中的radiobutton控件: 例: privatefunctionforeachGroup(): void{ vararr: Array=[]; varrb: RadioButton; varidx: int; varlen: int=radioGroup.numRadioButton; 2.Dataprovider: 数据源。 3.labelFileld: 在下拉列表中显示的标签。 4.rowCount: 控件列表中可见行数的最大数目。 5.selectedIndex: 下拉列表中所选项目的索引。 6.selectedItem: 对dataprovider中所选项目的引用。 iii.例如: ComboBoxclose="selectedItem=ComboBox(event.target).selectedItem"editable="true"/> iv.如下: 变量selectedItem是用于下拉列表和标签上的变量,定义了当前所选择的列表项。 [Bindable]publicvarselectedItem: Object; c)选色器(ColorPicker): 标签: ColorPicker/>。 i.初始化为小方框,底色为已选择的颜色。 ii.属性: 1.showTextField: 默认为true,用来在一个文本条中显示所选择颜色的标签。 2.Editable: 设置为true,则用户可输入自己所需要颜色的十六进制值。 3.selectedColor: 初始化所选的颜色。 4.selectedIndex: 所选项目的索引 iii.方法: 1.Close(): 隐藏样本面板。 2.Open(): 显示样本面板。 3.Change(): 所选颜色由于用户交互操作而发生更改。 iv.自定义调色板的注意事项: 1.所显示的颜色,要定义调色板中的颜色。 2.文本条中的标签,如果不定义标签,则显示十六进制值。 3.每种颜色的信息。 d)日期选择器(DataChooser): 标签: DataChooser/>。 i.日期选择器控件的界面是一个日历,其中显示了月份、年份和栅格中的日期以及星期标签。 ii.用户可以选择单个的日期。 iii.日期选择器控件可以改变大小以容纳改变日期的格式,可以显示日期的全名。 iv.事件: change v.属性: yearNavigationEnabled: 年份更改。 e)日期条(DataField): 标签: DataField/>. i.日期条控件是由一个文本条和文本条右边一个日历的图标组成。 ii.单击日期控件的任何一部分都会弹出一个日期选器。 iii.日期条控件是日期选择器控件的超集。 f)水平列表(HorizontalList): 标签: HorzontalList/>. i.水平列表的优点是: 只在其显示区域用事例显示对象。 ii.水平列表从左到右显示项目。 iii.通过定义allowMultipleSelection属性来选择单个或多个项目。 iv.绑定数据源和图像文件: 在actionscript中写如下的代码: 数据源: dataProvider. 图像文件: [Bindable] [Embed(source="images/cathead.gif")] publicvarheadImg1: Class; v.常用属性: 1.Dataprovider: 数据源。 2.numChildren: 对象的子项数目。 3.Selectable: 是否将所选项目显示为选中状态。 4.selectedIndex: 所选项目的数据提供程序中的索引。 5.Visible: 显示对象是否可见。 g)水平尺/垂直尺(HRule/VRule): 用于在容器内创建一条分割线 i.标签: 水平尺: HRule/>;垂直尺: VRule/> ii.属性: 水平尺: 如颜色: shadowColor。 垂直尺: 如颜色: strokeColor。 iii.例如: 1.水平尺: HRuleshadowColor="#FF0000"/>(颜色为红色的水平尺)。 2.垂直尺: VRluestrokeColor="#00FF00"/>(颜色为绿色的垂直尺)。 h)水平滑杆/垂直滑杆(HSlider/VSlier): i.标签: 水平滑杆: HSlider/>;垂直滑杆: VSlider/>。 ii.滑杆的5部分: 滑轨、滑块、刻度、标签和数据提示。 iii.滑块的当前值: 由他在滑杆两端之间的相对位置决定。 滑杆两端默认的最小值: 0。 滑杆的最大值: 10。 6.alternatingItemsColors: 指定控件的交互底色。 k)计数器(NumericStepper): 标签: NumericStepper/>。 i.计数器控件由文本条和按钮组成。 ii.计数器右边的按钮是由向上和向下两个按钮组成的。 iii.单击向上、向下的三角形按钮可以递增或递减显示数据,用户也可以直接输入一个合法的数据到文本条中。 iv.计数器默认最小值为0,最大值为10,计数间隔为1. v.常用属性: 1.minimum: 最小值。 2.maximum: 最大值。 3.stepSize: 计数间隔。 4.value: 初始数值。 l)进度条(progressBar): 标签: progressBar/>. i.分类: 1.确定时间(determinate)进度条: 用于线性体现事件在已知总体时间上的进度,以进度所用时间百分比来显示, 2.未定时间(indeterminate)进度条: 用于体现未知整体时间的进程。 ii.进度条控件模式: mode。 操作模式: 1)、事件(event): 使用属性source定义一个发出progress和complete事件的加载进程。 2)、调查(polled): 在使用source属性定义加载时,列出getsBytesLoaded()和getsBytesTotal()方法。 iii.属性: 1.source: 定义其进程是用来进行某种任务的加载过程。 2.Label: 随进度栏显示的文本。 3.Maximum: 最大进度值。 4.Mimimum: 最小进度值。 iv.进度条控件模式: mode。 操作模式: 1.事件(event): 使用属性source定义一个发出progress和complete事件的加载进程。 2.调查(polled): 在使用source属性定义加载进程时,列出getBytesLoaded()和getsBytesTotal()方法。 3.手工(manual): 在使用setProgress()方法过程中定义maximum、minmum和indeterminate属性。 v.事件: 1.Hide: 组件不可见。 2.Show: 组件可见。 3.Complete: 加载完成时。 4.Progress: 加载中。 m)滚动条、水平滚动条、垂直滚动条(ScrollBar、HScrollBar、VScrollBar): i.标签: 水平滚动条: HScrollBar/>、垂直滚动条: VScrollBar/> ii.滚动条的4部分: 两个箭头按钮、一个滑轨、一个滑块。 iii.滚动条根据一下4个参数来显示状态: 1.最小范围值。 2.最大范围值。 3.当前位置,其值必须在最小和最大范围值内。 4.视窗大小,代表了在此显示范围内每次可显示的数据量。 iv.常见属性: minScrollPosition: 最小滚动条位置;maxScrollPosition: 最大滚动条位置;scroll: 滚动时触发的事件。 v.例如: VScrollBarid="bar"minScrollPosition="0"maxScrollPosition="{panel.width-20}"scroll="myScroll(event);"> n)SWF加载器(SWFLoader): 标签: SWFLoader/> i.Swf控件可加载GIF、JPEG、PNG、SVG和SWF格式的文件到应用程序中。 ii.Swf加载器可以加载Flex应用程序。 iii.绑定文件: SWFLoaderid="load"source="@Embed(source='images/image.swf')"/> iv.设置是swfloader任意缩放: maintainAspectRatio=false;scaleContent=false; o)排列列表(TileList): 标签: TileList/> i.优点: 只在显示区域用实例显示对象。 ii.通常包括一个坐标方向的滚动条。 iii.通过定义allowMultipleSelection属性来选择单个或者多个项目。 iv.绑定数据: 在actionscript中的代码如下: PrivatevarlistArray: Array=[{image: "image/img1.gif",data,0},{image: "image/img2.gif",data,1}]; [Bindable]publicvarTileListdp: ArrayCollection=newArrayCollection(listArray); v.属性direction: 控制其子控件的方向。 p)音像(VideoDisplay): 标签: VideoDisplay/>. i.音箱控件用于影像和音响数据。 ii.属性: 1.playheadTime: 定义了当了当前在音像文件中的位置以秒计算。 控件支持volume属性,数值范围为0.0~1.00,从无声到有声,默认值为0.75. 2.miantainAspectRadio、height、width: 用于设定控件大小。 iii.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- flex 基本 控件 总结
![提示](https://static.bdocx.com/images/bang_tan.gif)