在MXML中使用ActionScript3
<P34>
在MXML标签中使用事件处理
<?xml version="1.0"?>
<!-- usingas/HelloWorldAS.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Panel title="My Application" height="128" x="226" y="24">
<s:TextArea id="textarea1" width="155" x="0" y="0"/>
<s:Button label="Click Me"
click="textarea1.text='Hello World';"
width="92"
x="31.5" y="56"/>
</s:Panel>
</s:Application>
<!-- usingas/HelloWorldAS.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Panel title="My Application" height="128" x="226" y="24">
<s:TextArea id="textarea1" width="155" x="0" y="0"/>
<s:Button label="Click Me"
click="textarea1.text='Hello World';"
width="92"
x="31.5" y="56"/>
</s:Panel>
</s:Application>
在此例中,你包含ActionScript代码在使用Button控件中。MXML编译器采用属性click="..."并产生如下事件处理方法:
public function __myButton_click(event:MouseEvent):void {
textarea1.text='Hello World';
}
当用户单击button时,此代码设置TextArea控件文本属性的值为"Hello World"。在绝大多数情况下,你不需要查看生成的代码。
但是这对于理解当你内联事件处理方法时发生了什么是有帮助的。
为了查看生成的代码,须使编译器选项keep-generated-actionscript设为true。编译器储存*.as文件在generated目录下,此目录
位于SWF文件所在子目录下。
me:mxmlc -keep-generated-actionscript=true HelloWorldAS.mxml
me:文件分布如下图
/**
* Generated by mxmlc 4.0
*
* Package:
* Class: HelloWorldAS
* Source: E:\flex_sdk_4.6\bin\HelloWorldAS.mxml
* Template: flex2/compiler/mxml/gen/ClassDef.vm
* Time: 2012.05.29 21:43:13 CST
*/
package
{
import flash.accessibility.*;
import flash.debugger.*;
import flash.display.*;
import flash.errors.*;
import flash.events.*;
import flash.events.MouseEvent;
import flash.external.*;
import flash.geom.*;
import flash.media.*;
import flash.net.*;
import flash.printing.*;
import flash.profiler.*;
import flash.system.*;
import flash.text.*;
import flash.ui.*;
import flash.utils.*;
import flash.xml.*;
import mx.binding.*;
import mx.core.ClassFactory;
import mx.core.DeferredInstanceFromClass;
import mx.core.DeferredInstanceFromFunction;
import mx.core.IDeferredInstance;
import mx.core.IFactory;
import mx.core.IFlexModuleFactory;
import mx.core.IPropertyChangeNotifier;
import mx.core.mx_internal;
import mx.filters.*;
import mx.styles.*;
import spark.components.Application;
import spark.components.Button;
import spark.components.Panel;
import spark.components.TextArea;
import spark.layouts.BasicLayout;
[Frame(extraClass="_HelloWorldAS_FlexInit")]
[Frame(factoryClass="_HelloWorldAS_mx_managers_SystemManager")]
public class HelloWorldAS
extends spark.components.Application
{
[Bindable]
/**
* @private
**/
public var textarea1 : spark.components.TextArea;
/**
* @private
**/
public function HelloWorldAS()
{
super();
mx_internal::_document = this;
// layer initializers
// properties
this.layout = _HelloWorldAS_BasicLayout1_c();
this.mxmlContentFactory = new mx.core.DeferredInstanceFromFunction(_HelloWorldAS_Array1_c);
// events
}
/**
* @private
**/
private var __moduleFactoryInitialized:Boolean = false;
/**
* @private
* Override the module factory so we can defer setting style declarations
* until a module factory is set. Without the correct module factory set
* the style declaration will end up in the wrong style manager.
**/
override public function set moduleFactory(factory:IFlexModuleFactory):void
{
super.moduleFactory = factory;
if (__moduleFactoryInitialized)
return;
__moduleFactoryInitialized = true;
// our style settings
// ambient styles
mx_internal::_HelloWorldAS_StylesInit();
}
/**
* @private
**/
override public function initialize():void
{
super.initialize();
}
// supporting function definitions for properties, events, styles, effects
private function _HelloWorldAS_BasicLayout1_c() : spark.layouts.BasicLayout
{
var temp : spark.layouts.BasicLayout = new spark.layouts.BasicLayout();
return temp;
}
private function _HelloWorldAS_Array1_c() : Array
{
var temp : Array = [_HelloWorldAS_Panel1_c()];
return temp;
}
private function _HelloWorldAS_Panel1_c() : spark.components.Panel
{
var temp : spark.components.Panel = new spark.components.Panel();
temp.title = "My Application";
temp.height = 128;
temp.x = 226;
temp.y = 24;
temp.mxmlContentFactory = new mx.core.DeferredInstanceFromFunction(_HelloWorldAS_Array2_c);
if (!temp.document) temp.document = this;
return temp;
}
private function _HelloWorldAS_Array2_c() : Array
{
var temp : Array = [_HelloWorldAS_TextArea1_i(), _HelloWorldAS_Button1_c()];
return temp;
}
private function _HelloWorldAS_TextArea1_i() : spark.components.TextArea
{
var temp : spark.components.TextArea = new spark.components.TextArea();
temp.width = 155;
temp.x = 0;
temp.y = 0;
temp.id = "textarea1";
if (!temp.document) temp.document = this;
textarea1 = temp;
mx.binding.BindingManager.executeBindings(this, "textarea1", textarea1);
return temp;
}
private function _HelloWorldAS_Button1_c() : spark.components.Button
{
var temp : spark.components.Button = new spark.components.Button();
temp.label = "Click Me";
temp.width = 92;
temp.x = 31.5;
temp.y = 56;
temp.addEventListener("click", ___HelloWorldAS_Button1_click);
if (!temp.document) temp.document = this;
return temp;
}
/**
* @private
**/
public function ___HelloWorldAS_Button1_click(event:flash.events.MouseEvent):void
{
textarea1.text='Hello World';
}
mx_internal var _HelloWorldAS_StylesInit_done:Boolean = false;
mx_internal function _HelloWorldAS_StylesInit():void
{
// only add our style defs to the style manager once
if (mx_internal::_HelloWorldAS_StylesInit_done)
return;
else
mx_internal::_HelloWorldAS_StylesInit_done = true;
var style:CSSStyleDeclaration;
var effects:Array;
var conditions:Array;
var condition:CSSCondition;
var selector:CSSSelector;
styleManager.initProtoChainRoots();
}
}
}
*
* Package:
* Class: HelloWorldAS
* Source: E:\flex_sdk_4.6\bin\HelloWorldAS.mxml
* Template: flex2/compiler/mxml/gen/ClassDef.vm
* Time: 2012.05.29 21:43:13 CST
*/
package
{
import flash.accessibility.*;
import flash.debugger.*;
import flash.display.*;
import flash.errors.*;
import flash.events.*;
import flash.events.MouseEvent;
import flash.external.*;
import flash.geom.*;
import flash.media.*;
import flash.net.*;
import flash.printing.*;
import flash.profiler.*;
import flash.system.*;
import flash.text.*;
import flash.ui.*;
import flash.utils.*;
import flash.xml.*;
import mx.binding.*;
import mx.core.ClassFactory;
import mx.core.DeferredInstanceFromClass;
import mx.core.DeferredInstanceFromFunction;
import mx.core.IDeferredInstance;
import mx.core.IFactory;
import mx.core.IFlexModuleFactory;
import mx.core.IPropertyChangeNotifier;
import mx.core.mx_internal;
import mx.filters.*;
import mx.styles.*;
import spark.components.Application;
import spark.components.Button;
import spark.components.Panel;
import spark.components.TextArea;
import spark.layouts.BasicLayout;
[Frame(extraClass="_HelloWorldAS_FlexInit")]
[Frame(factoryClass="_HelloWorldAS_mx_managers_SystemManager")]
public class HelloWorldAS
extends spark.components.Application
{
[Bindable]
/**
* @private
**/
public var textarea1 : spark.components.TextArea;
/**
* @private
**/
public function HelloWorldAS()
{
super();
mx_internal::_document = this;
// layer initializers
// properties
this.layout = _HelloWorldAS_BasicLayout1_c();
this.mxmlContentFactory = new mx.core.DeferredInstanceFromFunction(_HelloWorldAS_Array1_c);
// events
}
/**
* @private
**/
private var __moduleFactoryInitialized:Boolean = false;
/**
* @private
* Override the module factory so we can defer setting style declarations
* until a module factory is set. Without the correct module factory set
* the style declaration will end up in the wrong style manager.
**/
override public function set moduleFactory(factory:IFlexModuleFactory):void
{
super.moduleFactory = factory;
if (__moduleFactoryInitialized)
return;
__moduleFactoryInitialized = true;
// our style settings
// ambient styles
mx_internal::_HelloWorldAS_StylesInit();
}
/**
* @private
**/
override public function initialize():void
{
super.initialize();
}
// supporting function definitions for properties, events, styles, effects
private function _HelloWorldAS_BasicLayout1_c() : spark.layouts.BasicLayout
{
var temp : spark.layouts.BasicLayout = new spark.layouts.BasicLayout();
return temp;
}
private function _HelloWorldAS_Array1_c() : Array
{
var temp : Array = [_HelloWorldAS_Panel1_c()];
return temp;
}
private function _HelloWorldAS_Panel1_c() : spark.components.Panel
{
var temp : spark.components.Panel = new spark.components.Panel();
temp.title = "My Application";
temp.height = 128;
temp.x = 226;
temp.y = 24;
temp.mxmlContentFactory = new mx.core.DeferredInstanceFromFunction(_HelloWorldAS_Array2_c);
if (!temp.document) temp.document = this;
return temp;
}
private function _HelloWorldAS_Array2_c() : Array
{
var temp : Array = [_HelloWorldAS_TextArea1_i(), _HelloWorldAS_Button1_c()];
return temp;
}
private function _HelloWorldAS_TextArea1_i() : spark.components.TextArea
{
var temp : spark.components.TextArea = new spark.components.TextArea();
temp.width = 155;
temp.x = 0;
temp.y = 0;
temp.id = "textarea1";
if (!temp.document) temp.document = this;
textarea1 = temp;
mx.binding.BindingManager.executeBindings(this, "textarea1", textarea1);
return temp;
}
private function _HelloWorldAS_Button1_c() : spark.components.Button
{
var temp : spark.components.Button = new spark.components.Button();
temp.label = "Click Me";
temp.width = 92;
temp.x = 31.5;
temp.y = 56;
temp.addEventListener("click", ___HelloWorldAS_Button1_click);
if (!temp.document) temp.document = this;
return temp;
}
/**
* @private
**/
public function ___HelloWorldAS_Button1_click(event:flash.events.MouseEvent):void
{
textarea1.text='Hello World';
}
mx_internal var _HelloWorldAS_StylesInit_done:Boolean = false;
mx_internal function _HelloWorldAS_StylesInit():void
{
// only add our style defs to the style manager once
if (mx_internal::_HelloWorldAS_StylesInit_done)
return;
else
mx_internal::_HelloWorldAS_StylesInit_done = true;
var style:CSSStyleDeclaration;
var effects:Array;
var conditions:Array;
var condition:CSSCondition;
var selector:CSSSelector;
styleManager.initProtoChainRoots();
}
}
}
</P34>
<P35>
语句和表达式仅允许放在函数内,你不能在<fx:Script>块中定义新的类和接口。
多数 ActionScript语句必须在位于<fx:script>中的函数中。下面的语句可在函数外:
import
var
include
const
namespace
use namespace
当使用<fx:script>块时,你可以封闭内容在CDAT结构中。它阻止编译器解释此块中中的内容。
<fx:Script>
<![CDATA[
...
]]>
</fx:Script>
</P35>
Flex不解析在CDATA之中的文本,这意味着你可以使用XML使用的字符,如"<"、">"、"&"。看如下例子:
浙公网安备 33010602011771号