zoukankan      html  css  js  c++  java
  • flex>MXML语法 小强斋

    1. MXML语法

    MXML语言是专门用于Flex程序中,描述界面表现的一中XML标记语言。我们可以用它来管理程序的整体布局,控制组件的样式和外观,也可以构建非可视化的对象,比如XML数据、与服务器端通信的WebService、组件的数据源等。

    1.1 命名规范

    MXML区分大小写,且文件名和变量标示名都区分大小写。

    MXML文件以mxml作为扩展名,文件名要遵循AS中变量的命名规则。

    所有的MXML都被视为用户自定义的组件,相当于对象,可以使用代码动态创建。

    变量名必须以字母或下划线开始,且只能包含字母、数字和下划线。

    不能命名为applicationapplication 是主程序文件的默认标记,不可再使用。

    程序不能使用“mx”做为目录名,mx 是官方组件库的命名空间。

    2.2 MXML 文件结构

    MXML为标准的XML文件。我们以一个MXML文件来说明:

    Xml代码

    <?xml version="1.0"encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
    <mx:Script>
    <![CDATA[
    internalfunction doClick():void{
    tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
    }
    ]]>
    </mx:Script>
    <mx:Buttonx="41" y="90" label="Hello Flex"click="doClick()"/>
    <mx:Labelid="tip_txt" x="41" y="41" text="你好,Flex"fontSize="12"/>
    </mx:Application>
    

    第一行声明XML文件采用的语法版本version 和编码格式encoding(默认为utf-8)。

    mx:Application:在每个Flex项目中,可能有多个MXML文件,mx:Application为根节点标示程序入口的运行文件。

    xmlns:mx=http://www.adobe.com/2006/mxml :将mx定义为XML的命名空间,对应路径为http://www.adobe.com/2006/mxmlFlex的配置文件中将这个路径定义为一个全局资源标识符,并对应了一个列出mx命名空间下的所有标签的文件。flex-config.xml中配置了命名空间。该文件可在Flex Builder的安装路径下的Flex SDK \frameworks目录中找到。并找到如下代码。

    Xml代码

    <namespaces>
    <!-- Specify a URI to associate with a manifest of components for useas MXML -->
    <!-- elements. -->
    <namespace>
    <uri>http://www.adobe.com/2006/mxml</uri>
    <manifest>mxml-manifest.xml</manifest>
    </namespace>
    </namespaces>

    从上面的配置发现,http://www.adobe.com/2006/mxml 这个URImxml-manifest.xml文件对应,找到该文件,里面列出了所有标签和与标签相关联的类文件路径。

    <?xml version="1.0"?>
    
    <!--
    
    	ADOBE SYSTEMS INCORPORATED
    	Copyright 2005-2007 Adobe Systems Incorporated
    	All Rights Reserved.
    
    	NOTICE: Adobe permits you to use, modify, and distribute this file
    	in accordance with the terms of the license agreement accompanying it.
    
    -->
    
    <componentPackage>
    
    	<!-- airframework -->
        <component id="FileSystemComboBox" class="mx.controls.FileSystemComboBox"/>
        <component id="FileSystemDataGrid" class="mx.controls.FileSystemDataGrid"/>
        <component id="FileSystemHistoryButton" class="mx.controls.FileSystemHistoryButton"/>
        <component id="FileSystemList" class="mx.controls.FileSystemList"/>
        <component id="FileSystemTree" class="mx.controls.FileSystemTree"/>
        <component id="HTML" class="mx.controls.HTML"/>
    	<component id="Window" class="mx.core.Window"/>
        <component id="WindowedApplication" class="mx.core.WindowedApplication"/>
    
    	<!-- charts -->
        <component id="AreaChart" class="mx.charts.AreaChart"/>
        <component id="AreaRenderer" class="mx.charts.renderers.AreaRenderer"/>
        <component id="AreaSeries" class="mx.charts.series.AreaSeries"/>
        <component id="AreaSet" class="mx.charts.series.AreaSet"/>
        <component id="AxisRenderer" class="mx.charts.AxisRenderer"/>
        <component id="BarChart" class="mx.charts.BarChart"/>
        <component id="BarSeries" class="mx.charts.series.BarSeries"/>
        <component id="BarSet" class="mx.charts.series.BarSet"/>
        <component id="BoxItemRenderer" class="mx.charts.renderers.BoxItemRenderer"/>
        <component id="BubbleChart" class="mx.charts.BubbleChart"/>
        <component id="BubbleSeries" class="mx.charts.series.BubbleSeries"/>
        <component id="CandlestickChart" class="mx.charts.CandlestickChart"/>
        <component id="CandlestickItemRenderer" class="mx.charts.renderers.CandlestickItemRenderer"/>
        <component id="CandlestickSeries" class="mx.charts.series.CandlestickSeries"/>
        <component id="CartesianChart" class="mx.charts.chartClasses.CartesianChart"/>
        <component id="CategoryAxis" class="mx.charts.CategoryAxis"/>
        <component id="ChartBase" class="mx.charts.chartClasses.ChartBase"/>
        <component id="CircleItemRenderer" class="mx.charts.renderers.CircleItemRenderer"/>
        <component id="ColumnChart" class="mx.charts.ColumnChart"/>
        <component id="ColumnSeries" class="mx.charts.series.ColumnSeries"/>
        <component id="ColumnSet" class="mx.charts.series.ColumnSet"/>
        <component id="CrossItemRenderer" class="mx.charts.renderers.CrossItemRenderer"/>
        <component id="DateTimeAxis" class="mx.charts.DateTimeAxis"/>
        <component id="DiamondItemRenderer" class="mx.charts.renderers.DiamondItemRenderer"/>
        <component id="GridLines" class="mx.charts.GridLines"/>
        <component id="HLOCChart" class="mx.charts.HLOCChart"/>
        <component id="HLOCItemRenderer" class="mx.charts.renderers.HLOCItemRenderer"/>
        <component id="HLOCSeries" class="mx.charts.series.HLOCSeries"/>
        <component id="Legend" class="mx.charts.Legend"/>
        <component id="LegendItem" class="mx.charts.LegendItem"/>
        <component id="LinearAxis" class="mx.charts.LinearAxis"/>
        <component id="LineChart" class="mx.charts.LineChart"/>
        <component id="LineRenderer" class="mx.charts.renderers.LineRenderer"/>
        <component id="LineSeries" class="mx.charts.series.LineSeries"/>
        <component id="LogAxis" class="mx.charts.LogAxis"/>
        <component id="PieChart" class="mx.charts.PieChart"/>
        <component id="PieSeries" class="mx.charts.series.PieSeries"/>
        <component id="PlotChart" class="mx.charts.PlotChart"/>
        <component id="PlotSeries" class="mx.charts.series.PlotSeries"/>
        <component id="PolarChart" class="mx.charts.chartClasses.PolarChart"/>
        <component id="SeriesEffect" class="mx.charts.effects.SeriesEffect"/>
        <component id="SeriesInterpolate" class="mx.charts.effects.SeriesInterpolate"/>
        <component id="SeriesSlide" class="mx.charts.effects.SeriesSlide"/>
        <component id="SeriesZoom" class="mx.charts.effects.SeriesZoom"/>
        <component id="ShadowBoxItemRenderer" class="mx.charts.renderers.ShadowBoxItemRenderer"/>
        <component id="ShadowLineRenderer" class="mx.charts.renderers.ShadowLineRenderer"/>
        <component id="TriangleItemRenderer" class="mx.charts.renderers.TriangleItemRenderer"/>
        <component id="WedgeItemRenderer" class="mx.charts.renderers.WedgeItemRenderer"/>
    
        <!-- fds -->
        <component id="DataService" class="mx.data.mxml.DataService"/>
    
        <!-- framework -->
    	<component id="Accordion" class="mx.containers.Accordion"/>
        <component id="AddChild" class="mx.states.AddChild"/>
        <component id="AddChildAction" class="mx.effects.AddChildAction"/>
        <component id="AddItemAction" class="mx.effects.AddItemAction"/>
    	<component id="AnimateProperty" class="mx.effects.AnimateProperty"/>
        <component id="Application" class="mx.core.Application"/>
        <component id="ApplicationControlBar" class="mx.containers.ApplicationControlBar"/>
        <component id="Array" class="Array" lookupOnly="true"/>
        <component id="ArrayCollection" class="mx.collections.ArrayCollection"/>
    	<component id="BevelFilter" class="flash.filters.BevelFilter" lookupOnly="true"/>
        <component id="BitmapFill" class="mx.graphics.BitmapFill"/>
        <component id="Blur" class="mx.effects.Blur"/>
    	<component id="BlurFilter" class="flash.filters.BlurFilter" lookupOnly="true"/>
        <component id="Boolean" class="Boolean" lookupOnly="true"/>
        <component id="Box" class="mx.containers.Box"/>
        <component id="Button" class="mx.controls.Button"/>
        <component id="ButtonBar" class="mx.controls.ButtonBar"/>
        <component id="Canvas" class="mx.containers.Canvas"/>
        <component id="CheckBox" class="mx.controls.CheckBox"/>
        <component id="Class" class="Class" lookupOnly="true"/>
    	<component id="ColorMatrixFilter" class="flash.filters.ColorMatrixFilter" lookupOnly="true"/>
        <component id="ColorPicker" class="mx.controls.ColorPicker"/>
        <component id="ComboBox" class="mx.controls.ComboBox"/>
    	<component id="ConstraintColumn" class="mx.containers.utilityClasses.ConstraintColumn"/>
    	<component id="ConstraintRow" class="mx.containers.utilityClasses.ConstraintRow"/>
        <component id="Container" class="mx.core.Container"/>
        <component id="ControlBar" class="mx.containers.ControlBar"/>
    	<component id="ConvolutionFilter" class="flash.filters.ConvolutionFilter" lookupOnly="true"/>
        <component id="CreditCardValidator" class="mx.validators.CreditCardValidator"/>
        <component id="CurrencyFormatter" class="mx.formatters.CurrencyFormatter"/>
        <component id="CurrencyValidator" class="mx.validators.CurrencyValidator"/>
        <component id="DataGrid" class="mx.controls.DataGrid"/>
        <component id="DataGridColumn" class="mx.controls.dataGridClasses.DataGridColumn"/>
        <component id="DataGridItemRenderer" class="mx.controls.dataGridClasses.DataGridItemRenderer"/>
        <component id="Date" class="Date" lookupOnly="true"/>
        <component id="DateChooser" class="mx.controls.DateChooser"/>
        <component id="DateField" class="mx.controls.DateField"/>
        <component id="DateFormatter" class="mx.formatters.DateFormatter"/>
        <component id="DateValidator" class="mx.validators.DateValidator"/>
        <component id="DefaultListEffect" class="mx.effects.DefaultListEffect"/>
        <component id="DefaultTileListEffect" class="mx.effects.DefaultTileListEffect"/>
    	<component id="DisplacementMapFilter" class="flash.filters.DisplacementMapFilter" lookupOnly="true"/>
        <component id="Dissolve" class="mx.effects.Dissolve"/>
        <component id="DividedBox" class="mx.containers.DividedBox"/>
    	<component id="DropShadowFilter" class="flash.filters.DropShadowFilter" lookupOnly="true"/>
    	<component id="EffectTargetFilter" class="mx.effects.EffectTargetFilter"/>
        <component id="EmailValidator" class="mx.validators.EmailValidator"/>
        <component id="Fade" class="mx.effects.Fade"/>
        <component id="Form" class="mx.containers.Form"/>
        <component id="FormHeading" class="mx.containers.FormHeading"/>
        <component id="FormItem" class="mx.containers.FormItem"/>
    	<component id="Function" class="Function" lookupOnly="true"/>
        <component id="Glow" class="mx.effects.Glow"/>
    	<component id="GlowFilter" class="flash.filters.GlowFilter" lookupOnly="true"/>
    	<component id="GradientBevelFilter" class="flash.filters.GradientBevelFilter" lookupOnly="true"/>
        <component id="GradientEntry" class="mx.graphics.GradientEntry"/>
    	<component id="GradientGlowFilter" class="flash.filters.GradientGlowFilter" lookupOnly="true"/>
        <component id="Grid" class="mx.containers.Grid"/>
        <component id="GridItem" class="mx.containers.GridItem"/>
        <component id="GridRow" class="mx.containers.GridRow"/>
        <component id="HBox" class="mx.containers.HBox"/>
        <component id="HDividedBox" class="mx.containers.HDividedBox"/>
        <component id="HorizontalList" class="mx.controls.HorizontalList"/>
        <component id="HRule" class="mx.controls.HRule"/>
        <component id="HScrollBar" class="mx.controls.HScrollBar"/>
        <component id="HSlider" class="mx.controls.HSlider"/>
        <component id="Image" class="mx.controls.Image"/>
        <component id="int" class="int" lookupOnly="true"/>
    	<component id="Iris" class="mx.effects.Iris"/>
        <component id="Label" class="mx.controls.Label"/>
        <component id="LinearGradient" class="mx.graphics.LinearGradient"/>
        <component id="LinearGradientStroke" class="mx.graphics.LinearGradientStroke"/>
        <component id="LinkBar" class="mx.controls.LinkBar"/>
        <component id="LinkButton" class="mx.controls.LinkButton"/>
        <component id="List" class="mx.controls.List"/>
        <component id="ListCollectionView" class="mx.collections.ListCollectionView"/>
    	<component id="MaskEffect" class="mx.effects.MaskEffect"/>
    	<component id="Matrix" class="flash.geom.Matrix" lookupOnly="true"/>
        <component id="MenuBar" class="mx.controls.MenuBar"/>
        <component id="MiniDebugTarget" class="mx.logging.targets.MiniDebugTarget"/>
        <component id="Module" class="mx.modules.Module"/>
        <component id="ModuleLoader" class="mx.modules.ModuleLoader"/>
        <component id="Move" class="mx.effects.Move"/>
        <component id="Number" class="Number" lookupOnly="true"/>
        <component id="NumberFormatter" class="mx.formatters.NumberFormatter"/>
        <component id="NumberValidator" class="mx.validators.NumberValidator"/>
        <component id="NumericStepper" class="mx.controls.NumericStepper"/>
    	<component id="Object" class="Object" lookupOnly="true"/>
        <component id="Panel" class="mx.containers.Panel"/>
        <component id="Parallel" class="mx.effects.Parallel"/>
        <component id="Pause" class="mx.effects.Pause"/>
        <component id="PhoneFormatter" class="mx.formatters.PhoneFormatter"/>
        <component id="PhoneNumberValidator" class="mx.validators.PhoneNumberValidator"/>
    	<component id="Point" class="flash.geom.Point" lookupOnly="true"/>
        <component id="PopUpButton" class="mx.controls.PopUpButton"/>
        <component id="PopUpMenuButton" class="mx.controls.PopUpMenuButton"/>
        <component id="PrintDataGrid" class="mx.printing.PrintDataGrid"/>
        <component id="ProgressBar" class="mx.controls.ProgressBar"/>
        <component id="RadialGradient" class="mx.graphics.RadialGradient"/>
        <component id="RadioButton" class="mx.controls.RadioButton"/>
        <component id="RadioButtonGroup" class="mx.controls.RadioButtonGroup"/>
    	<component id="RegExp" class="RegExp" lookupOnly="true"/>
    	<component id="RegExpValidator" class="mx.validators.RegExpValidator"/>
        <component id="RemoveChild" class="mx.states.RemoveChild"/>
        <component id="RemoveChildAction" class="mx.effects.RemoveChildAction"/>
        <component id="RemoveItemAction" class="mx.effects.RemoveItemAction"/>
        <component id="Repeater" class="mx.core.Repeater"/>
        <component id="Resize" class="mx.effects.Resize"/>
        <component id="RichTextEditor" class="mx.controls.RichTextEditor"/>
    	<component id="Rotate" class="mx.effects.Rotate"/>
        <component id="Sequence" class="mx.effects.Sequence"/>
        <component id="SetEventHandler" class="mx.states.SetEventHandler"/>
        <component id="SetProperty" class="mx.states.SetProperty"/>
        <component id="SetPropertyAction" class="mx.effects.SetPropertyAction"/>
        <component id="SetStyle" class="mx.states.SetStyle"/>
        <component id="SetStyleAction" class="mx.effects.SetStyleAction"/>
        <component id="SocialSecurityValidator" class="mx.validators.SocialSecurityValidator"/>
        <component id="SolidColor" class="mx.graphics.SolidColor"/>
        <component id="Sort" class="mx.collections.Sort"/>
        <component id="SortField" class="mx.collections.SortField"/>
    	<component id="SoundEffect" class="mx.effects.SoundEffect"/>
        <component id="Spacer" class="mx.controls.Spacer"/>
        <component id="Sprite" class="flash.display.Sprite" lookupOnly="true"/>
        <component id="State" class="mx.states.State"/>
        <component id="String" class="String" lookupOnly="true"/>
        <component id="StringValidator" class="mx.validators.StringValidator"/>
        <component id="Stroke" class="mx.graphics.Stroke"/>
        <component id="SWFLoader" class="mx.controls.SWFLoader"/>
        <component id="TabBar" class="mx.controls.TabBar"/>
        <component id="TabNavigator" class="mx.containers.TabNavigator"/>
        <component id="Text" class="mx.controls.Text"/>
        <component id="TextArea" class="mx.controls.TextArea"/>
        <component id="TextInput" class="mx.controls.TextInput"/>
        <component id="Tile" class="mx.containers.Tile"/>
        <component id="TileList" class="mx.controls.TileList"/>
        <component id="TitleWindow" class="mx.containers.TitleWindow"/>
        <component id="ToggleButtonBar" class="mx.controls.ToggleButtonBar"/>
        <component id="ToolBar" class="mx.controls.richTextEditorClasses.ToolBar"/>
        <component id="TraceTarget" class="mx.logging.targets.TraceTarget"/>
    	<component id="Transform" class="geom.filters.Transform" lookupOnly="true"/>
        <component id="Transition" class="mx.states.Transition"/>
        <component id="Tree" class="mx.controls.Tree"/>
        <component id="UIComponent" class="mx.core.UIComponent"/>
        <component id="uint" class="uint" lookupOnly="true"/>
        <component id="VBox" class="mx.containers.VBox"/>
        <component id="VDividedBox" class="mx.containers.VDividedBox"/>
        <component id="VideoDisplay" class="mx.controls.VideoDisplay"/>
        <component id="ViewStack" class="mx.containers.ViewStack"/>
        <component id="VRule" class="mx.controls.VRule"/>
        <component id="VScrollBar" class="mx.controls.VScrollBar"/>
        <component id="VSlider" class="mx.controls.VSlider"/>
        <component id="Validator" class="mx.validators.Validator"/>
        <component id="WipeDown" class="mx.effects.WipeDown"/>
        <component id="WipeLeft" class="mx.effects.WipeLeft"/>
        <component id="WipeRight" class="mx.effects.WipeRight"/>
        <component id="WipeUp" class="mx.effects.WipeUp"/>
        <component id="XMLListCollection" class="mx.collections.XMLListCollection"/>
        <component id="ZipCodeFormatter" class="mx.formatters.ZipCodeFormatter"/>
        <component id="ZipCodeValidator" class="mx.validators.ZipCodeValidator"/>
        <component id="Zoom" class="mx.effects.Zoom"/>
    
    	<!-- rpc -->
        <component id="AMFChannel" class="mx.messaging.channels.AMFChannel"/>
        <component id="CallResponder" class="mx.rpc.CallResponder"/>  
        <component id="ChannelSet" class="mx.messaging.ChannelSet"/>  
        <component id="Consumer" class="mx.messaging.Consumer"/>
        <component id="HTTPChannel" class="mx.messaging.channels.HTTPChannel"/>
        <component id="HTTPService" class="mx.rpc.http.mxml.HTTPService"/>
        <component id="Producer" class="mx.messaging.Producer"/>
        <component id="RemoteObject" class="mx.rpc.remoting.mxml.RemoteObject"/>
        <component id="RemoteObjectOperation" class="mx.rpc.remoting.mxml.Operation"/>
        <component id="RTMPChannel" class="mx.messaging.channels.RTMPChannel"/>
        <component id="SecureAMFChannel" class="mx.messaging.channels.SecureAMFChannel"/>
        <component id="SecureStreamingAMFChannel" class="mx.messaging.channels.SecureStreamingAMFChannel"/>
        <component id="SecureHTTPChannel" class="mx.messaging.channels.SecureHTTPChannel"/>
        <component id="SecureStreamingHTTPChannel" class="mx.messaging.channels.SecureStreamingHTTPChannel"/>
        <component id="SecureRTMPChannel" class="mx.messaging.channels.SecureRTMPChannel"/>
        <component id="StreamingAMFChannel" class="mx.messaging.channels.StreamingAMFChannel"/>
        <component id="StreamingHTTPChannel" class="mx.messaging.channels.StreamingHTTPChannel"/>    
        <component id="WebService" class="mx.rpc.soap.mxml.WebService"/>
        <component id="WebServiceOperation" class="mx.rpc.soap.mxml.Operation"/>
    
    </componentPackage>
    

    中的id代表标签名,class表示类文件路径。

    xmlns:comp="comps.*" 定义一个命名空间,因为使用了通配符“*”,comps目录下的所有MXMLAS类(不包括子目录的文件)都被包括在comp命名空间下。如comps下有Login.mxml,则在程序中可这样调用:

    <comp:Login></comp:Login>

    Application 还有一个属性layout ,定义了该节点下元素的布局方式,也就是程序的总体布局方式。absolute 表示绝对定位,所有子元素将按照各自的xy坐标来定位。

    2. 使用组件

    <mx:Button></mx:Button> 定义一个按钮组件

    如果组件中未包含其他子元素可这样写:<mx:Button />

    组件分类:

    布局类:包括所有的容器组件,如:HBoxPanel等,SpacerHRuleVRule不是容器,但是主要用于布局。

    导航类:菜单条、按钮条等各种导航功能的组件。

    交互类:内容展示、数据交互相关组件,如:按钮、下拉框、图片、视频等。

    IDE中的组件面板列出了所有的可视化组件,可直接拖入编辑区使用。

    通过IDE的代码提示输入<mx:跟进可以列出mx下的所有对象。

    3. 自定义MXML组件

    基于组件开发模式是Flex的一个特色,程序中所有的MXMLAS类文件,都被当作用户自定义的组件。

    我们来建一个MXML组件:

    New->MXML Component

    在弹出的窗口输入组件的文件名Filename,并选择扩展哪一种组件Based on,我们这里选择Image对象。然后Finish

    然后点击Image组件,在属性面板的Source属性设置图片的路径。

    Xml代码

    <?xml version="1.0"encoding="utf-8"?>
    <mx:Imagexmlns:mx="http://www.adobe.com/2006/mxml"source="pic/9.jpg">
    </mx:Image>
    

    然后在程序中就可以使用该自定义的组件,将其从用户面板拖入到编辑区,图片显示正常。

    Xml代码

    <?xml version="1.0"encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute" xmlns:ns1="*">
    <mx:Script>
    <![CDATA[
    internalfunction doClick():void{
    privatefunction _btn_click(event:MouseEvent):void{
    tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
    } }
    ]]>
    </mx:Script>
    
    <mx:Buttonx="41" y="90" label="Hello Flex"click="doClick()"/>
    <mx:Labelid="tip_txt" x="41" y="41" text="你好,Flex"fontSize="12"/>
    <ns1:imageEnbogax="205" y="90"/>
    </mx:Application>
    

    <ns1:imageEnboga x="205"y="90"/>就是我们拖入的自定义组件,程序自动添加了ns1命名空间。我们改变自定义组件的位置放到view文件夹,代码变成:<view:imageEnboga x="205"y="90"/>

    4. 编写ActionScript

    MXML文件经过编译最后也是被转换成AS来执行,在一个Flex程序中,主程序会被转换为Application对象的子类,自定义对象会被转换为父级对象的子类。

    4.1MXML中使用AS

    在组件的事件属性中使用AS来处理事件

    比如Xml代码

    <mx:Button  x="41"  y="90" label="Hello Flex"  click="tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'"/>

    上面代码中的click="tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'"会被编译为

    private function_btn_click(event:MouseEvent):void{
    tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
    }
    

    这个函数被注册为按钮的点击事件侦听器,一旦点击事件触发,函数就会被调用。

    MXML中插入AS

    Xml代码

    <mx:Script>
    <![CDATA[
    //这里是AS代码
    ]]>
    </mx:Script>
    

    此标签可以放在根节点内的任何位置,同时必须用CDATA将代码包起来。CDATA不能嵌套使用。

    AS中的注释是 //单行注释

    MXML中的注释和XML一样<!-- 注释-->

    4.2 创建外部AS文件

    New->ActionScript file 可以创建一个外部AS文件

    Xml代码

    <mx:Script source="my.as"/>在程序中可以使用上面的代码导入。

    4.3 创建AS类文件

    New->ActionScript Class 可以创建一个AS类文件

    Xml代码

    package
    {
    public class Test
    {
    function Test(){
    trace("Test");
    }
    }
    }
    

    上面代码创建了一个Test类,在构造函数Test()中在控制台打印Test

    在主程序中可调用:

    Xml代码

    <?xml version="1.0" encoding="utf-8"?>
    
    <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"applicationComplete="initApp()">
    
    <mx:Script>
    <![CDATA[
    internalfunction initApp():void{
    var myTest:Test = new Test();
    }
    ]]>
    
    </mx:Script>
    </mx:Application>
    

    applicationCompleteApplication对象的一个事件,程序初始化后触发此事件。

    var myTest:Test = new Test()这个代码的作用是创建一个Test对象,创建对象用new关键字。

    5 编辑非可视化对象

    创建数据

    Xml代码

     <fx:Array id="array_data">
       <fx:String>Flexdeveloper</fx:String>
       <fx:String>Flashdeveloper</fx:String>
       <fx:String>Webdeveloper</fx:String>
       <fx:String>Mobiledeveloper</fx:String>
     </fx:Array>

    定义1个包含4个字符串元素的数组,相当于下面的代码

    Xml代码

    <mx:Script>
    <![CDATA[
    publicvar array_data:Array = new Array();
    array_data.push("Flexdeveloper");
    array_data.push("Flashdeveloper");
    array_data.push("Webdeveloper");
    array_data.push("Mobiledeveloper");
    ]]>
    </mx:Script>
    

    定义好数组之后,可以作为List或者其他组件的数据源dataProvider

    <mx:List x="20" y="20" dataProvider="{array_data}"width="180"></mx:List>

    Xml代码

     <fx:XML id="myData">
       <node label="资料">
        <node label="Music">
         <node label="古典"/>
         <node label="摇滚"/>
         <node label="民歌"/>
       </node>
       <node label="Movie">
        <node label="法国"/>
        <node label="美国"/>
       </node>
              </node>
      </fx:XML>

    创建一段XML做为Tree树型组件的数据源。

    <mx:Tree x="20" y="190" labelField="@label" dataProvider="{myData}" width="180"> </mx:Tree>

    MXML语句创建类实例

    <view:Test></view:Test>

    这样就创建了之前定义的Test类的实例。相当于用AS new一个出来

  • 相关阅读:
    比较两个DataTable数据(结构相同),返回新增的,删除的,修改前的,修改后的 DataTable
    通用jig类,用到委托
    网站性能优化之HTTP请求过程简述!
    常见JS效果实现实现之图片减速度滚动
    Firefox中实现的outerHTML
    电子商务网站上的常用的放大镜效果
    div背景半透明,覆盖整个可视区域的遮罩层效果
    Javascript类定义语法,私有成员、受保护成员、静态成员等
    HTML/CSS控制div垂直&&水平居中屏幕
    CSS团队协作开发方式的思考
  • 原文地址:https://www.cnblogs.com/xiaoqiangzhaitai/p/5429504.html
Copyright © 2011-2022 走看看