运行第一个flex程序(2)

接下来，开始编写程序。添加以下内容：一个Label组件和一个Button组件，再给Button添加点击事件，点击按钮后，修改Label组件的显示文字。

切换到设计视图模式，在组件面板中，分别选择Controls类别下的Button和Label控件，如图2.12所示，拖放到编辑区。

在Button组件上双击鼠标，编辑按钮的显示文本，修改文本为“Click me”。使用同样的方式，再修改Label组件的显示文字为“这是点击前的文字”。接着，依次点选两个组件，在属性面板中，命名为“btn”和“tip_txt”，并将Label组件的字体设置为12，如图2.13所示。

   

图2.12                                                                                         图2.13

然后切换到代码视图模式，这时候程序代码如图2.14所示。可以看到有两个组件以<mx:_* />的形式出现在代码里，它们的位置和属性也被包括在标记中。

代码如下：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Button id="btn" x="51" y="107" label="Click me"/>

    <mx:Label id="tip_txt" x="182" y="109" text="这是点击前的文字"fontSize="12" width="136"/>

</mx:Application>

图2.14

如果你熟悉XML语法，就会发现这是一个标准的XML文件，只不过文件后缀名是“mxml”。

下面我们给按钮添加代码来处理点击事件。在使用键盘输入代码时，光标处出现跟进的代码提示，如图2.15所示。

图2.15

在弹出的代码提示框中，列出了Button组件以字母C开头的所有属性和方法。随着键盘的动作，代码提示框也会自动进行筛选。选择其中的“click”方法，最后的代码如下：   

<mx:Button id="btn" x ="51" y="107" label="Click me" click="tip_txt.text='这是点击后的文字'"/>

click表示侦听鼠标的点击事件。当点击按钮时，click内的代码就会被执行，也就是改变tip_txt对象的显示文字。注意，程序是根据id来识别对象的。一个组件中的每个对象的id属性都是唯一的，是程序操作的入口。