论文部分内容阅读
Flash 8 UI组件是基于 Macromedia Component Architecture 第 2 版设计的，设计这些组件的目的是为了让开发人员重复使用和共享代码，封装复杂功能，使设计人员无需编写 ActionScript 就能够使用和自定义这些功能。使用Flash 8中的UI组件建构交互性数学积件，能加快积件的开发速度，统一积件的风格和样式。本文以“近似值”为例，探讨UI组件的应用。
“近似值”积件的制作灵活地运用了Alert、Button、ComboBox等多种UI组件（以下简称组件），积件的功能都由这些组件来完成。基于这些组件搭建的“近似值”积件如图1所示。
我们发现Alert组件和Window并不在界面中，这是因为这两个组件是在积件运行的过程中才呈现的。要使用这些组件，关键是设置好组件实例的三个方面：参数设置（组件最基本的设置）、样式设置（修改字体大小或颜色等等）和事件设置（用于响应用户的交互），但并不是每一个组件实例都需要这三方面的设置，可以根据具体情况而定。
一、Window组件
Window 组件是一个具有标题栏、边框和关闭按钮的窗口，可以用其向用户显示比较复杂的信息。在“近似值”积件中，笔者使用了一个Window组件以向用户提示该积件的使用方法和特点等信息，如图2所示。
1．参数设置
将Window组件布局到场景中，在“属性”检查器（或“组件”检查器）中设置该组件实例的参数：closeButton＝true（显示关闭按钮）；contentPath＝ts_mc（Window组件显示的内容是ts_mc影片，ts_mc是库里元件1的链接标识符）；title＝提示：（标题为“提示：”）。将该组件命名为ts_w。
2．样式设置
在as图层第一帧关键帧（如图3）里输入：
//设置字体大小：
ts_w.fontSize = 18;
//设置字体颜色：
ts_w.color = 0xff0000;
//设置字体粗细：
ts_w.fontWeight = "bold";
//设置实例大小：
ts_w.setSize(430, 200);
//设置实例的位置：
ts_w._x = 17;
ts_w._y = 54;
3．事件设置
当用户点击Window组件实例的关闭按钮时，隐藏Window组件实例，同时将焦点传给输入文本框。
on (click) {
this._visible = false;
Selection.setFocus("_root.shr_txt");
}
到此，Window组件实例已基本设置完毕。
二、元件
下面制作元件1，放进Window组件实例中用于显示。在元件1的场景中输入需要显示的内容，注意文本在场景中是左上对齐的。
设置元件1的链接标识符为“ts_mc”（要与Window组件实例的contenPath参数一致）。
（一）ComboBox组件
ComboBox组件是一个组合框，用户可以从下拉列表中选择一个数值或自己输入一个数值。在“近似值”积件中，笔者使用一个ComboBox组件实例供用户选择要保留的小数位数，如图4所示。
1．参数设置
将ComboBox组件布局到场景中，在“属性”检查器（或“组件”检查器）中设置该组件实例的参数：editable＝true（确保ComboBox组件是可编辑的）；其他参数保留默认。将该组件命名为my_cb。
2．样式设置
在as图层第一帧关键帧里输入：
//设置字体大小：
my_cb.fontSize = 16;
//设置字体为粗细：
my_cb.fontWeight = "bold";
//只允许数字输入：
my_cb.restrict = "0-9";
//设置列表数据，每项数据包含一个标签和一个与标签关联的数值：
my_cb.dataProvider = [{data:0, label:0}, {data:1, label:1}, {data:2, label:2}, {data:3, label:3}, {data:4, label:4}, {data:5, label:5}, {data:6, label:6}, {data:7, label:7}, {data:8, label:8}, {data:9, label:9}];
3．事件设置
在本例中，不需要设置ComboBox组件的用户交互事件，关于ComboBox组件的事件细则，可参考Flash8帮助文件。
（二）DataGrid组件
DataGrid 组件能够创建强大的显示数据的应用程序，在“近似值”积件中，用一个DataGrid组件实例来显示原数、保留小数数位和近似值列表，如图5所示。
1．参数设置
先将DataGrid组件布局到场景中，并调整其大小。在“属性”检查器（或“组件”检查器）设置该组件实例名为my_dg，其他参数保留默认。
2．样式设置
//取消第一列、第三列数据的排序功能，只保留第二列可以排序（点击第二列标题即可）：
my_dg.getColumnAt(0).sortOnHeaderRelease = false;
my_dg.getColumnAt(2).sortOnHeaderRelease = false;
因为数据比较多，字体不宜太大，所以字体大小、颜色等都采取默认。
3．事件设置
DataGrid组件实例的功能就是显示数据，所以当用户点击“确定”按钮时，DataGrid组件实例要更新数据列表，而数据列表是用数组填充的，所以在“确定”按钮（qd_btn）的点击事件中，加入如下代码：
//定义一个空对象my_obj作为数组的元素：
var my_obj:Object = {};
//将输入文本框（shr_txt）中的数据转变为数字并传给m变量：
var m:Number = Number(shr_txt.text);
//将组合文本框(my_cb)中的数据转变为数字并传给n变量：
var n:Number = Number(my_cb.text);
//将函数js_fc返回的函数值传给js变量（js_fc是一个自定义函数，由原数m和保留小数位数n确定近似值）：
var js:String = js_fc(m, n);
//将js赋值给my_obj的“近似值”属性:
my_obj.近似值 = js;
//将n赋值给my_obj的“保留小数位数”属性:
my_obj.保留小数位数 = n;
//将m赋值给my_obj的“原数”属性:
my_obj.原数 = m;
//将my_obj存入dg_array数组最后一个位置： dg_array.push(my_obj);
//更新DataGrid组件实例的数据列表：
my_dg.dataProvider = dg_array;
到此为止，我们探讨了Window组件、ComboBox组件和DataGrid组件的使用方法。由于篇幅有限，其他组件的使用这里就不再赘述了。
我们可以看到，应用组件通过简单的设置就可以构造出功能强大的交互性积件。熟练掌握Flash8的UI组件，将使我们在制作积件或课件中受益无穷。
参考文献
[1]Flash8 Professional帮助文件.
[2]http://space.flash8.net/bbs/forum-10-1.html.
“近似值”积件的制作灵活地运用了Alert、Button、ComboBox等多种UI组件（以下简称组件），积件的功能都由这些组件来完成。基于这些组件搭建的“近似值”积件如图1所示。
我们发现Alert组件和Window并不在界面中，这是因为这两个组件是在积件运行的过程中才呈现的。要使用这些组件，关键是设置好组件实例的三个方面：参数设置（组件最基本的设置）、样式设置（修改字体大小或颜色等等）和事件设置（用于响应用户的交互），但并不是每一个组件实例都需要这三方面的设置，可以根据具体情况而定。
一、Window组件
Window 组件是一个具有标题栏、边框和关闭按钮的窗口，可以用其向用户显示比较复杂的信息。在“近似值”积件中，笔者使用了一个Window组件以向用户提示该积件的使用方法和特点等信息，如图2所示。
1．参数设置
将Window组件布局到场景中，在“属性”检查器（或“组件”检查器）中设置该组件实例的参数：closeButton＝true（显示关闭按钮）；contentPath＝ts_mc（Window组件显示的内容是ts_mc影片，ts_mc是库里元件1的链接标识符）；title＝提示：（标题为“提示：”）。将该组件命名为ts_w。
2．样式设置
在as图层第一帧关键帧（如图3）里输入：
//设置字体大小：
ts_w.fontSize = 18;
//设置字体颜色：
ts_w.color = 0xff0000;
//设置字体粗细：
ts_w.fontWeight = "bold";
//设置实例大小：
ts_w.setSize(430, 200);
//设置实例的位置：
ts_w._x = 17;
ts_w._y = 54;
3．事件设置
当用户点击Window组件实例的关闭按钮时，隐藏Window组件实例，同时将焦点传给输入文本框。
on (click) {
this._visible = false;
Selection.setFocus("_root.shr_txt");
}
到此，Window组件实例已基本设置完毕。
二、元件
下面制作元件1，放进Window组件实例中用于显示。在元件1的场景中输入需要显示的内容，注意文本在场景中是左上对齐的。
设置元件1的链接标识符为“ts_mc”（要与Window组件实例的contenPath参数一致）。
（一）ComboBox组件
ComboBox组件是一个组合框，用户可以从下拉列表中选择一个数值或自己输入一个数值。在“近似值”积件中，笔者使用一个ComboBox组件实例供用户选择要保留的小数位数，如图4所示。
1．参数设置
将ComboBox组件布局到场景中，在“属性”检查器（或“组件”检查器）中设置该组件实例的参数：editable＝true（确保ComboBox组件是可编辑的）；其他参数保留默认。将该组件命名为my_cb。
2．样式设置
在as图层第一帧关键帧里输入：
//设置字体大小：
my_cb.fontSize = 16;
//设置字体为粗细：
my_cb.fontWeight = "bold";
//只允许数字输入：
my_cb.restrict = "0-9";
//设置列表数据，每项数据包含一个标签和一个与标签关联的数值：
my_cb.dataProvider = [{data:0, label:0}, {data:1, label:1}, {data:2, label:2}, {data:3, label:3}, {data:4, label:4}, {data:5, label:5}, {data:6, label:6}, {data:7, label:7}, {data:8, label:8}, {data:9, label:9}];
3．事件设置
在本例中，不需要设置ComboBox组件的用户交互事件，关于ComboBox组件的事件细则，可参考Flash8帮助文件。
（二）DataGrid组件
DataGrid 组件能够创建强大的显示数据的应用程序，在“近似值”积件中，用一个DataGrid组件实例来显示原数、保留小数数位和近似值列表，如图5所示。
1．参数设置
先将DataGrid组件布局到场景中，并调整其大小。在“属性”检查器（或“组件”检查器）设置该组件实例名为my_dg，其他参数保留默认。
2．样式设置
//取消第一列、第三列数据的排序功能，只保留第二列可以排序（点击第二列标题即可）：
my_dg.getColumnAt(0).sortOnHeaderRelease = false;
my_dg.getColumnAt(2).sortOnHeaderRelease = false;
因为数据比较多，字体不宜太大，所以字体大小、颜色等都采取默认。
3．事件设置
DataGrid组件实例的功能就是显示数据，所以当用户点击“确定”按钮时，DataGrid组件实例要更新数据列表，而数据列表是用数组填充的，所以在“确定”按钮（qd_btn）的点击事件中，加入如下代码：
//定义一个空对象my_obj作为数组的元素：
var my_obj:Object = {};
//将输入文本框（shr_txt）中的数据转变为数字并传给m变量：
var m:Number = Number(shr_txt.text);
//将组合文本框(my_cb)中的数据转变为数字并传给n变量：
var n:Number = Number(my_cb.text);
//将函数js_fc返回的函数值传给js变量（js_fc是一个自定义函数，由原数m和保留小数位数n确定近似值）：
var js:String = js_fc(m, n);
//将js赋值给my_obj的“近似值”属性:
my_obj.近似值 = js;
//将n赋值给my_obj的“保留小数位数”属性:
my_obj.保留小数位数 = n;
//将m赋值给my_obj的“原数”属性:
my_obj.原数 = m;
//将my_obj存入dg_array数组最后一个位置： dg_array.push(my_obj);
//更新DataGrid组件实例的数据列表：
my_dg.dataProvider = dg_array;
到此为止，我们探讨了Window组件、ComboBox组件和DataGrid组件的使用方法。由于篇幅有限，其他组件的使用这里就不再赘述了。
我们可以看到，应用组件通过简单的设置就可以构造出功能强大的交互性积件。熟练掌握Flash8的UI组件，将使我们在制作积件或课件中受益无穷。
参考文献
[1]Flash8 Professional帮助文件.
[2]http://space.flash8.net/bbs/forum-10-1.html.