在2004的UI组件中有三个组件是非常相似的,分别是List Box、Combo Box和the Grid component。由于它们工作方式相似这里我们将它们合在一起给大家介绍。这个例子你将看出他们的相同点和不同之处。

  1. 开始一个新的文件。

  2. 创建一个新层最上层名为action,下层为formelement。

  3. 分别将combo box,list box,grid componets拖至场景中如上图所示样子放。同时你最好用静态文体在上方标明每个组件的名称。

  4. 使用属性面板分别为三个组件命名,从上到下分别命名为myComboBox,myListBox,myGrid。

Combo box下拉列表框

  combo box是最易使用的组件之一,它允许我们显示一串数据列表。但不是向listbox那样全部显示在屏幕上。它不象listbox组件那样在默认状态下不选 择作何数据。通常在combo box中第一行数据将作为默认选项。而第一行数据通常用来指引用户所要做的操作(如请选择你的国家)。

  我们不用再多说什么了。让我赶快进入看一下简单的combobox如何使用,在本例中我们将手动通过属性面板设置combobox标签。在稍后的例子listbox组件你将看到通过代码如何设置。

  1. 首先确保你已经做完了上面的四步,如果你没做,请先完成上面的步骤。

  2. 单击场景中的combbox组件,选中属性面板中表格中的label双击在对话中输入四个label,现在看起来可能没有什么用,但在下面的程序中你将会看到它的用处。

  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);