当前页面位置: » 丰搜网 » 文档中心 » 详细内容
flashmx2004系列教程〈二〉ui组件-the list box family of components
在2004的ui组件中有三个组件是非常相似的，分别是list box, combo box 和the grid component.由于它们工作方式相似这里我们将它们合在一起给大家介绍。这个例子你将看出他们的相同点和不同之处。
740)this.width=740" border=undefined twffan="done">
1.开始一个新的文件。
2.创建一个新层最上层名为action.下层为formelement。
3.分别将combo box,list box,grid comp.nets拖至场景中如上图所示样子放。同时你最好用静态文体在上方标明每个组件的名称。
4.使用属性面板分别为三个组件命名，从上到下分别命名为mycombobox,mylistbox,mygrid.
combo box下拉列表框
combo box是最易使用的组件之一，它允许我们显示一串数据列表。但不是向listbox那样全部显示在屏幕上。它不象listbox组件那样在默认状态下不选择作何数据。通常在combo box中第一行数据将作为默认选项。而第一行数据通常用来指引用户所要做的操作（如请选择你的国家）。
我们不用再多说什么了。让我赶快进入看一下简单的combobox如何使用，在本例中我们将手动通过属性面板设置combobox标签。在稍后的例子listbox组件你将看到通过代码如何设置。
1。首先确保你已经做完了上面的四步，如果你没做，请先完成上面的步骤。
2.单击场景中的combbox组件，选中属性面板中表格中的label双击在对话中输入四个label，现在看起来可能没有什么用，但在下面的程序中你将会看到它的用处。
740)this.width=740" border=undefined twffan="done">
3.在第一帧中输入如下代码：
mycomboboxlistener = new object();
mycomboboxlistener.change = function(eventobj)
{
var eventsource = eventobj.target;
var theselecteditem = eventsource.selecteditem;
var theselecteditemlabel = theselecteditem.label;
trace ( "you selected "+theselecteditemlabel+".");
}
mycombobox.addeventlistener ("change", mycomboboxlistener);
4.测试影片我们发现输出窗口中输出了我们想向中的值。
在本例中你设置一个侦听器用来侦听combobox组件的改变事件。无论何时用户改变设置时侦听器将获得这个改变，尽管它很容易使用，实际上combobox组件具有很强大的功能，包含了无数事件和方法可以用来回应来自组件的输入信息。
list box列表组件
在上面的combobox的例子中你已经看到了如何获得数据列表，上例中我们是通过属性面板用手动的方式输入的。而实际上通常我们需要从远程的服程的服务器载入数据来动态设置combobox中的数据，那么下面我们就通过listbox 组件看一下如何来实现。
1.确保你已经完成了最上方的四个步骤。
2.在第一帧上加入如下代码：
//创建项目列表
var item1 = {label: "organic cotton underwear", data: 7.25};
var item2 = {label: "organic t-shirt", data: 15};
var item3 = {label: "recycled office paper", data: 6.99};
var item4 = {label: "organic cola", data: 1.25};
//将列表加入listbox组件
mylistbox.additem(item1);
mylistbox.additem(item2);
mylistbox.additem(item3);
mylistbox.additem(item4);
mylistboxlistener=new object();
mylistboxlistener.change=function(eventobj){
var eventsource = eventobj.target;
var theselecteditem = eventsource.selecteditem;
var theselecteditemlabel = theselecteditem.label;
trace ( "you selected "+theselecteditemlabel+".");
}
mylistbox.addeventlistener("change",mylistboxlistener);
3.测试影片，查看在窗口中的输出内容。
the grid
在所有这三个组件中最复杂的要算是这个grid组件了。你可以所它想象成是多个listbox组成的。实际上这才是真正的组件架构。在grid组件中不象listbox和combobox组件那样只有label和data两个属性，它可能有任意多个。下面我们看一下如何使用它。
1.仍然是你要确保已经做过了最上面的四个步骤。
2.在第一帧上加入如下代码：
var item1 = {product: "underwear", price: 7.25, quantity: 3};
var item2 = {product: "t-shirt", price: 15, quantity: 1};
var item3 = {product: "paper", price: 6.99, quantity: 7};
var item4 = {product: "cola", price: 1.25, quantity: 24};
// 加入列表项目
mygrid.additem(item1);
mygrid.additem(item2);
mygrid.additem(item3);
mygrid.additem(item4);
// 设置表头的文字
mygrid.getcolumnat(0).headertext = "product name";
mygrid.getcolumnat(1).headertext = "price";
mygrid.getcolumnat(2).headertext = "quantity left";
mygridlistener = new object();
mygridlistener.change = function ( eventobj )
{
var eventsource = eventobj.target;
var theselecteditem = eventsource.selecteditem;
var theselecteditemname = theselecteditem.product;
var theselecteditemprice = theselecteditem.price;
var theselecteditemquantity = theselecteditem.quantity;
trace
(
theselecteditemname
+ " costs £" + theselecteditemprice
+ " (" + theselecteditemquantity + " left in stock)"
);
}
mygrid.addeventlistener("change", mygridlistener);
