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.
升级会员 