第二节 组件(7)

这个程序的制作步骤如下：

步骤1 创建影片文档

新建一个影片文档，舞台大小设置为300×220，背景颜色设置为灰色。保存这个影片文档，文件名为“TextInput组件应用实例.fla”。

步骤2 引用组件

从【组件】面板拖放三个TextInput组件实例、两个Label组件实例到舞台上，调整它们的位置，效果如图8-3-26所示。

图8-3-26 引用组件

步骤3 定义组件实例属性和参数

先按照图8-3-25所示设置两个Label实例的text参数值。

然后，选择第2个TextInput实例（标签文字为密码的），在【属性】面板定义这个实例的名字为：passwordField。设置【password】参数值为true，其他参数都取默认值。

选择最下边哪个TextInput实例，在【属性】面板定义这个实例的名字为：resultField。在【组件检查器】面板中设置【visiable】参数值为false（这样设置以后，这个实例刚开始在画面上不显示，我们要在程序中用程序代码控制它显示），其他参数都取默认值。

步骤4 编写程序

选择时间轴第1帧，在【动作】面板中定义这一帧的动作脚本为：

textListener = new Object();//定义一个侦听器对象

textListener.handleEvent = function (evt){//定义侦听器对象的handleEvent事件函数

  if (evt.type == "enter"){//判断侦听到的事件类型是不是按下Enter键

      resultField.visible=true;//让resultField实例在页面上显示出来

      if(evt.target.text=="password"){//判断输入到passwordField实例中的文本是否和设置的密码password一致

          resultField.text="用户名和密码正确！";//如果密码输入正确，就在resultField实例中显示正确的反馈信息

      }

      else{//如果密码输入错误，就在resultField实例中显示错误的反馈信息

          resultField.text="密码不对，请重新输入！";

      }

  }

}

passwordField.addEventListener("enter", textListener);// 将passwordField实例注册到textListener侦听器对象，一旦针对passwordField实例发生了按下Enter键的命令，那么就触发textListener侦听器对象相应的事件函数。

按快捷键Ctrl+Enter，测试效果吧！

（13）窗口（Window）组件

无论何时你需要向用户提供信息或最优先的选择时，你都可以在应用程序中使用一个窗口。例如，程序中需要用户填写登录窗口或者发生了更改并需要确认新密码的窗口。

在应用程序中创建窗口对象可以使用窗口（Window）组件。它可以在一个具有标题栏、边框和关闭按钮（可选）的窗口内显示电影剪辑的内容。Window组件支持拖动操作，你可以单击标题栏并将窗口及其内容拖动到另一个位置。

Window组件可以是模式的，也可以是非模式的。模式窗口会防止鼠标和键盘输入转至该窗口之外的其他组件。

将窗口添加到应用程序的方法常用的有两种：一种方法是将窗口组件直接从【组件】面板拖放到舞台上；另一种方法是使用PopUpManager类来创建窗口，这种方法可以创建与舞台上其他对象重叠的模式窗口。

在【属性】面板中可以设置Window组件的参数有：

u       contentPath：指定窗口的内容。这可以是电影剪辑的链接标识符，或者是屏幕、表单或包含窗口内容的幻灯片的元件的名称。它也可以是要加载到窗口的SWF或JPG文件的绝对或相对URL。默认值为 ""。加载的内容会被裁剪，以适合窗口大小。

u       Title：指明窗口的标题。

u       CloseButton：指明是(true)否(false)显示关闭按钮。单击关闭按钮会广播一个click 事件，但并不能关闭窗口。你必须编写调用 Window.deletePopUp() 的处理函数，才能实现关闭窗口。

直接从【组件】面板将window组件拖放到舞台上来创建应用程序中的窗口的方法比较简单，只要设置好相应的组件参数即可。

下面我们用第二种方法，在应用程序中创建一个窗口，并且实现窗口的关闭功能。这个程序的运行情况如图8-3-27所示。

图8-3-27 窗口效果

这个程序的具体制作步骤如下：

步骤1 从【组件】面板拖放一个windows组件实例到场景上，然后删除，这样可以使【库】面板中出现一个名字为“window”的编译剪辑（SWC）。

步骤2 创建一个名字为textMC的影片剪辑元件，在这个元件的编辑场景中输入几行文字，类型为【静态文本】，文字对象的坐标为（0，0），如图8-3-28所示。

图8-3-28 textMC影片剪辑元件

在【库】面板中，用鼠标右键单击textMC元件，选择【链接】命令，弹出【链接】对话框，具体设置如图8-3-29所示，设置完后，单击【确定】。

图8-3-29 定义链接标识符

步骤3 切换到主场景1，利用PopUpManager类的createPopUp函数创建一个窗口实例，并实现关闭功能。选择时间轴第1帧，在【动作】面板中定义这一帧的动作脚本为：

import mx.managers.PopUpManager//动作脚本类命名空间

import mx.containers.Window//引用要创建一个window类

var myTW = PopUpManager.createPopUp(_root, Window, true, {closeButton:true, title: "我的窗口",contentPath:"textMC"});//利用PopUpManager类createPopUp函数创建一个窗口实例myTW，在这个窗口实例中显示链接标识符为textMC的影片剪辑

//以下是利用window类的click事件来实现单击关闭窗口的功能

windowListener = new Object();//定义一个侦听器对象

windowListener.click = function(evt){//定义侦听器对象click事件函数

      _root.myTW.deletePopUp();//删除实例名字为myTW的窗口实例

}

myTW.addEventListener("click", windowListener);//将myTW窗口实例注册到侦听器对象windowListener上，这样，当单击myTW窗口上的关闭按扭时，调用侦听器对象click事件函数进行处理。

设置完后，按快捷键Ctrl+Enter，测试效果吧！