Flex中的mxml类实现（继承）接口的方法

可以把mxml文件看作一个类，这个类可以实现某一接口，可以继承某一类

示例1，mxml实现接口。在这里示例中，A包含在B中，A是B的一个控件，同时，在设计的时候，让A保存B的一个引用，这样的话，就可在A中调用B的方法等操作

接口文件：

/*
  Modularity - A PureMVC AS3 MultiCore Flex Demo
  Copyright(c) 2008 Cliff Hall <clifford.hall@puremvc.org>
  Your reuse is governed by the Creative Commons Attribution 3.0 License
 */
package org.puremvc.as3.multicore.demos.flex.modularity.interfaces
{
	/**
	 * Interface for a Widget.
	 * <P>
	 * This is the API that must be implemented by a
	 * Widget. What we are calling 'widgets' 
	 * in this demo application are Flex Modules,but they 
	 * could also be Flash based apps using the PureMVC 
	 * AS3 MultiCore framework.</P>
	 */
	public interface IWidget
	{
		/**
		 * Get the Widget's key. 
		 * <P> 
		 * This will be a unique string. Generally created
		 * by adding a unique URI for the widget to the 
		 * id property of the IWidget instance.</P>
		 */
		function getWidgetKey( ):String;
		
		/**
		 * Set the Widget's reference to the WidgetShell.
		 * <P>
		 * The Widget communicates with the rest of the
		 * application via the API exposed by the 
		 * WidgetShell.  
		 */
		function setWidgetShell( shell:IWidgetShell ):void;
	}
}

/*
  Modularity - A PureMVC AS3 MultiCore Flex Demo
  Copyright(c) 2008 Cliff Hall <clifford.hall@puremvc.org>
  Your reuse is governed by the Creative Commons Attribution 3.0 License
 */
package org.puremvc.as3.multicore.demos.flex.modularity.interfaces
{
	import flash.display.DisplayObject;
	
	/**
	 * Interface for the WidgetShell
	 * <P>
	 * This is the API that the WidgetShell
	 * exposes to Widgets for communication.
	 * Through this interface alone the IWidget
	 * is able to communicate its wishes to the
	 * application into which it is loaded.</P>
	 * <P>
	 * Since third-parties may develop widgets
	 * to run inside the app,we want to limit
	 * their access to the application and its
	 * resources.</P>
	 * 
	 */
	public interface IWidgetShell
	{
		
		/**
		 * A widget may add a view component to the canvas.
		 * <P>
		 * Though the display object reference is added to
		 * the view hierarchy of the app,it is still managed
		 * by a mediator running inside the widget itself.</P>
		 * 
		 * @param displayObject to add to the canvas
		 */
		function addComponent( component:DisplayObject ):void;
		
		/**
		 * A widget may remove a view component it added to the canvas.
		 * <P>
		 * 
		 * @param displayObject to add to the canvas
		 */
		function removeComponent( component:DisplayObject ):void;
		
		/**
		 * Allow the Widget to write to the status line
		 */
		function setStatusMessage( message:String ):void;
		
		
	}
}

mxml实现接口

<?xml version="1.0" encoding="utf-8"?>
<!-- 
  Modularity - A PureMVC AS3 MultiCore Flex Demo
  Copyright(c) 2008 Cliff Hall <clifford.hall@puremvc.org>
  Your reuse is governed by the Creative Commons Attribution 3.0 License
 -->
<mx:ApplicationControlBar 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	implements="org.puremvc.as3.multicore.demos.flex.modularity.interfaces.IWidgetShell" //实现接口
	xmlns:widgetmakers="com.widgetmakers.coolwidget.view.components.*" 
	xmlns:widgetworks="com.widgetworks.superwidget.view.components.*"
	verticalAlign="middle" 
	creationComplete="initializeShell()"
	dock="true">
	
	<mx:Metadata>
		[Event('addComponent',org.puremvc.as3.multicore.demos.flex.modularity.view.events.AddComponentEvent)]	
		[Event('removeComponent',org.puremvc.as3.multicore.demos.flex.modularity.view.events.RemoveComponentEvent)]	
	</mx:Metadata>
	
	<mx:Script>
		<![CDATA[
			import org.puremvc.as3.multicore.demos.flex.modularity.view.events.AddComponentEvent;
			import org.puremvc.as3.multicore.demos.flex.modularity.view.events.RemoveComponentEvent;
			
			protected function initializeShell():void
			{
				w1.setWidgetShell( this );//面向接口的编程，实现了方法，并且方法的参数也是一个接口类型的参数
				w2.setWidgetShell( this );
			}
			
			// Add a component to the widget canvas
			public function addComponent( component:DisplayObject ):void
			{
				var event:AddComponentEvent = new AddComponentEvent( component );
				event.component = component;
				this.dispatchEvent( event );
			}
			
			// Remove a component from the widget canvas
			public function removeComponent( component:DisplayObject ):void
			{
				var event:RemoveComponentEvent = new RemoveComponentEvent( component );
				event.component = component;
				this.dispatchEvent( event );
			}
			
			// Set the status message
			public function setStatusMessage( message:String ):void
			{
				statusLine.text = message;	
			}
			
		]]>
	</mx:Script>
	
	<!-- The Widgets -->
	<mx:HBox horizontalAlign="left" verticalAlign="middle" width="50%" height="100%">
		<mx:Text text="Modularity" fontFamily="Verdana" fontSize="22" fontStyle="normal" color="#0559CC"/>
		<widgetmakers:CoolWidget id="w1" />
		<widgetworks:SuperWidget id="w2" />
	</mx:HBox>
	
	<!-- Status Line -->
	<mx:HBox horizontalAlign="right" verticalAlign="middle" width="50%" height="100%">
		<mx:Label id="statusLine" fontWeight="bold" text="PureMVC AS3 MultiCore Demo"/>
	</mx:HBox>
	
</mx:ApplicationControlBar>	

<?xml version="1.0" encoding="utf-8"?>
<!-- 
  Modularity - A PureMVC AS3 MultiCore Flex Demo
  Copyright(c) 2008 Cliff Hall <clifford.hall@puremvc.org>
  Your reuse is governed by the Creative Commons Attribution 3.0 License
 -->
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" 
	implements="org.puremvc.as3.multicore.demos.flex.modularity.interfaces.IWidget"
	creationComplete="initializeWidget()"
	layout="absolute">

	<mx:Metadata>
		[Event('prod')]	
	</mx:Metadata>
	
	<mx:Script>
		<![CDATA[
			import org.puremvc.as3.multicore.demos.flex.modularity.interfaces.IWidgetShell;
			import com.widgetmakers.coolwidget.ApplicationFacade;
			
			// URI for this widget. Must be unique
			protected static const WIDGET_URI:String = "http://widgetmakers.com/CoolWidget/";
			
			// Constants for the events this component dispatches.  
			public static const PROD:String='prod';
			
			// This Widget's reference to the WidgetShell 
		 public var widgetShell:IWidgetShell; // Set the Widget Shell,实现了接口中的方法 public function setWidgetShell( shell:IWidgetShell ):void { widgetShell=shell; }
			
			// The unique key for this widget instance
			public function getWidgetKey():String
			{
				return WIDGET_URI+this.id
			}
			
			// Initialize the widget using the multiton key passed in.
			public function initializeWidget( ):void
			{
				ApplicationFacade.getInstance( this.getWidgetKey() ).startup( this );
			}
			
		]]>
	</mx:Script>
	
	<mx:Button label="CoolWidget" click="dispatchEvent(new Event(PROD,true));"/>
	
</mx:Module>

第一种，实现某个接口，如下mxml类实现了IDataRenderer接口，推荐使用。在Flex中，DataRenderer和IDataRenderer很方面使用。

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          clipAndEnableScrolling="true"
          creationComplete="creationCompleteHandler()"
          implements="mx.core.IDataRenderer">
   <--
     在mxml中继承mx.core.IDataRenderer,实现IdataRenderer中的方法
    -->
    ?<!--
       This is used by the InfoSymbolWithStates sample.
    -->

    <fx:Script>
        <![CDATA[
            private var _data:Object;

            [Bindable]
            // implement IDataRenderer。这里可以学习怎么样进行实现继承的接口
            public function get data():Object
            {
                return _data;
            }

            public function set data(value:Object):void
            {
                _data = value;
            }

            private function creationCompleteHandler():void
            {
                addEventListener(MouseEvent.ROLL_OVER,rollOverHandler);
                addEventListener(MouseEvent.ROLL_OUT,rollOutHandler);
            }

            private function rollOverHandler(event:MouseEvent):void
            {
                if (currentState == "normal")
                {
                    currentState = "titleState";
                }
            }

            private function rollOutHandler(event:MouseEvent):void
            {
                if (currentState == "titleState")
                {
                    currentState = "normal";
                }
            }

            private function expandButton_clickHandler():void
            {
                currentState = "detailState";
            }

            private function closeButton_clickHandler():void
            {
                currentState = "normal";
            }

            private function effectStartHandler():void
            {
                removeEventListener(MouseEvent.ROLL_OVER,rollOverHandler);
            }

            private function effectEndHandler():void
            {
                addEventListener(MouseEvent.ROLL_OVER,rollOverHandler);
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal"/>
        <s:State name="titleState"/>
        <s:State name="detailState"/>
    </s:states>

    <s:transitions>
        <s:Transition fromState="*" toState="*">
            <s:Resize duration="250"
                      effectEnd="effectEndHandler()"
                      effectStart="effectStartHandler()"
                      target="{this}"/>
        </s:Transition>
    </s:transitions>

    <s:HGroup id="titleBar"
              width="100%"
              verticalAlign="middle">
        <s:Image width="18" height="18"
                 source="@Embed(source='/assets/skins.swf',symbol='Icon_airport')"/>
        <s:Label id="titleLabel"
                 fontWeight="bold"
                 includeIn="titleState,detailState"
                 rollOut="{Label(event.currentTarget).setStyle('textDecoration','none');}"
                 rollOver="{Label(event.currentTarget).setStyle('textDecoration','underline');}"
                 text="{data.theName}"/>

        <s:Button id="expandButton"
                  width="18" height="18"
                  click="expandButton_clickHandler()"
                  includeIn="titleState"
                  skinClass="com.esri.ags.samples.skins.InfoExpandButtonSkin"/>
        <s:Button id="closeButton"
                  width="18" height="18"
                  click="closeButton_clickHandler()"
                  includeIn="detailState"
                  skinClass="com.esri.ags.samples.skins.InfoCloseButtonSkin"/>
    </s:HGroup>
    <s:Label id="line1Label"
             includeIn="detailState"
             text="{data.thePlaceName}"/>
</s:VGroup>

第二种，在mxml中实现子类

<?xml version="1.0" encoding="utf-8"?>
<s:DataRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark" implements="mx.core.IFactory"
				xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:supportClasses="com.esri.ags.skins.supportClasses.*"
				creationComplete="datarenderer1_creationCompleteHandler(event)" styleName="InfoSymbolstyle">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import com.depth.viewer.facade.IocAppFacade;
			import com.esri.ags.Graphic;
			import com.esri.ags.layers.FeatureLayer;
			import com.xcsw.flex.facade.ConstFacade;
			
			import flashx.textLayout.formats.Float;
			
			import mx.events.FlexEvent;
			protected function linkbutton2_clickHandler(event:MouseEvent):void
			{
				if(!data)//由渲染器使用者提供
					return;
				var feature:Graphic = data.feature as Graphic;//注意此处的data.feature在什么地方赋值的？？？
				var fl:FeatureLayer = feature.graphicsLayer as FeatureLayer;
				//var fId:String = feature.attributes[fl.layerDetails.objectIdField];
				var fId:String = feature.attributes["ID"];
				IocAppFacade.sendNotification(ConstFacade.STAT_MONITOR_DATA,{station:data.station,fId:fId,lId:fl.layerDetails.name});
				//在MonitorManagerWidgetMediator响应消息，弹出统计框
			}
			public function newInstance():*{
				return new MonitorInfoSymbolRenderer();
			}

			protected function linkbutton3_clickHandler(event:MouseEvent):void
			{
				
				if(!data)//由渲染器使用者提供
					return;
				//雨量信息警戒水位参数设置
				IocAppFacade.getInstance().sendNotification(IocAppFacade.LOAD_WIDGET,{id:"TriggerlevelWidget",runingParams:data});
			}
			
			protected function btnExpandButton_clickHandler(event:MouseEvent):void
			{
				if (currentState == "minState")
				{
					currentState = "normal";
				}
			}
			
			protected function btnCloseButton_clickHandler(event:MouseEvent):void
			{
				if (currentState != "minState")
				{
					currentState = "minState";
				} 
			}


			protected function datarenderer1_creationCompleteHandler(event:FlexEvent):void
			{
				for each (var name:String in data.fieldNames){
					switch (name){
						case "RainFall":
						if (data[name] && data[name].Time){
							if (data[name].offset < 0){
								rainExceedWarn.visible = false;
								rainExceedWarn.includeInLayout =false;
							}
						}else{
							RainFall.visible=false;
							RainFall.includeInLayout=false;
						}
						break;
						case "WaterLevel":
						if (data.WaterLevel && data.WaterLevel.Time){
							if (data[name].offset < 0){
								waterExceedWarn.visible = false;
								waterExceedWarn.includeInLayout = false;
							}
						}else{
							WaterLevel.visible=false;
							WaterLevel.includeInLayout=false;
						}
						break;
						case "FloodgateHeight":
						if ( data.FloodgateHeight && data.FloodgateHeight.Time){
							if (data[name].offset < 0){
								floodExceedWarn.visible=false;
								floodExceedWarn.includeInLayout =false;
							}
						}else{
							FloodgateHeight.visible=false;
							FloodgateHeight.includeInLayout=false;
						}
						break;
					}
				}
		   }
		]]>
	</fx:Script>
	
	<s:states>
		<s:State name="normal"/>
		<s:State name="minState"/>
	</s:states>
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		.InfoExpandButton {
			disabledSkin: Embed(source="/assets/swf/skins.swf",symbol="Callout_expandButtonDisabledSkin");
			downSkin: Embed(source="/assets/swf/skins.swf",symbol="Callout_expandButtonDownSkin");
			overSkin: Embed(source="/assets/swf/skins.swf",symbol="Callout_expandButtonOverSkin");
			upSkin: Embed(source="/assets/swf/skins.swf",symbol="Callout_expandButtonUpSkin");
		}
		
		.InfoCloseButton {
			disabledSkin: Embed(source="/assets/swf/skins.swf",symbol="Callout_closeButtonDisabledSkin");
			downSkin: Embed(source="/assets/swf/skins.swf",symbol="Callout_closeButtonDownSkin");
			overSkin: Embed(source="/assets/swf/skins.swf",symbol="Callout_closeButtonOverSkin");
			upSkin: Embed(source="/assets/swf/skins.swf",symbol="Callout_closeButtonUpSkin");
		}
		.InfoSymbolstyle
		{
		   /*  backgroundAlpha: 0.9;  */
			backgroundColor: #FCFCFC;
			borderColor: #6E7C9C;
			borderThickness: 3;
			/* color: #0000ff; */
			/* chrome-color: #0000ff;
			back-color: #0000ff;
			color: #ff0000; */
		}
	</fx:Style>
	
	<s:VGroup width="100%" gap="5"  paddingLeft="3">
		<s:HGroup verticalAlign="middle">
			<s:Label text="站名：{data.station}   " color="#4D4D4D" fontSize="15" fontWeight="bold"/>
			<mx:Button id="btnExpandButton"
					   width="18" height="18"
					   click="btnExpandButton_clickHandler(event)"
					   includeIn="minState"
					   styleName="InfoExpandButton"/>
			<mx:Button id="btnCloseButton" 
					   width="18" height="18"
					   includeIn="normal"
					   click="btnCloseButton_clickHandler(event)" 
					   styleName="InfoCloseButton" toolTip="关闭"/>
		</s:HGroup>
		<s:Line width="100%" height="1" includeIn="normal">   
			<s:stroke>   
				<s:SolidColorStroke color="#C7C7C7" weight="2"/>   
			</s:stroke>   
		</s:Line>
		<s:VGroup id="RainFall" gap="5" includeIn="normal">
			<s:Label id="rainValue" color="#0673E2" fontSize="15" fontWeight="bold"
					 text="雨量： {data.RainFall.RainFall} 毫米" />
			<s:Label id="rainExceedWarn"  color="0xff0000" fontSize="15" fontWeight="bold"
					 text="状态： 己超过警戒雨量:  {data.RainFall.offset} 毫米" />
		</s:VGroup>
		
		<s:VGroup id="WaterLevel" includeIn="normal" >
			<s:Label id="waterValue" color="#0673E2" fontSize="15" fontWeight="bold"
					 text="水位： {data.WaterLevel.value} 米" />
			<s:Label id="waterExceedWarn"   color="0xff0000" fontSize="15" fontWeight="bold"			 
					 text="状态： 己超过警戒水位:  {data.WaterLevel.offset} 米" />
		</s:VGroup>

		<s:VGroup id="FloodgateHeight" includeIn="normal">
			<s:Label id="gateValue" color="#0673E2" fontSize="15" fontWeight="bold"
					 text="闸门高： {data.FloodgateHeight.value} 米"/>
			<s:Label id="floodExceedWarn"  color="0xff0000" fontSize="15" fontWeight="bold"				 
					 text="状态： 己超过警戒闸门高:  {data.FloodgateHeight.offset} 米" />
		</s:VGroup>
		
		<s:HGroup includeIn="normal" width="100%" horizontalAlign="right" gap="3">
			<mx:LinkButton label="详细信息" color="#0673E2" click="linkbutton2_clickHandler(event)"/>
			<mx:LinkButton label="参数设置" color="#0673E2" click="linkbutton3_clickHandler(event)"/>
		</s:HGroup>
	</s:VGroup>
</s:DataRenderer>

===============================

DataRenderer的使用举例。

    <!--
         Basic example of an infosymbol containing a vbox with an image and a label.
         The image url is read from the attributes of the graphic.
    -->
    <fx:Declarations>
        <esri:InfoSymbol id="infoSymbol1">
            <esri:infoRenderer>
                <fx:Component>
                    <s:DataRenderer>
                        <s:layout>
                            <s:VerticalLayout/>
                        </s:layout>
                        <mx:Image source="{data.myImageURL}"/>
                        <s:Label text="{data.myTitle}"/>
                    </s:DataRenderer>
                </fx:Component>
            </esri:infoRenderer>
        </esri:InfoSymbol>
    </fx:Declarations>

在DataRenderer的data属性是数据源，重要，需注意。在这里，只要给Graphic赋值 attributes 即可将属性信息给data