Flashmx2004系列教程〈二〉UI组件

来源: BlogBus 原始链接: http://www.blogbus.com:80/blogbus/blog/diary.php?diaryid=84675 存档链接: https://web.archive.org/web/20041103092911id_/http://www.blogbus.com:80/blogbus/blog/diary.php?diaryid=84675

egoldy Flashblog FLASH is my life. <<<Flashmx2004系列教程〈二〉UI组件-Radio compoents | 首页 | FLASH MX 2004工具>>> 04/02/08 Flashmx2004系列教程〈二〉UI组件-The List Box family of Components 在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); 3.测试你的影片结果如下： ++++++++++++++++++++++++++++++++++++++++++++++++++ 源文件下载 egoldy 发表于 04/02/08 21:33 引用Trackback(0) | 编辑评论发表评论最后更新 FLASH相关软件 css样式表的魅力 blog navigator BLOG阅读器 AS2PROGEN v0.8 as2编译生成SWF hello.com AS2Doc Professional 1.0.0 flash8 ball demo video flex 1.5 发布三星SGH-E800