Flex MXML+as3 VS WPF XAML+c#

Flex MXML+as3 VS WPF XAML+c#

Object-->EventDispatcher-->DisplayObject-->Spirit-->MovieClip

Flex Framework 与 Microsoft WPF是非常像的，都是用各自独有的相关XML语法来表达界面。
WPF的是XAML , 而Flex的是MXML。同样都是XML语法表述。它们都用来表述UI，包含属性，事件，行为，数据绑定，效果等，都有各自的一套相关控件。
Flex开始出来的MXML需要在FlexBuilder环境编译，出来以后就是一个swf文件。

我们看看Flex Framework 的API Package:

  mx.binding.utils
  mx.charts
  mx.charts.chartClasses
  mx.charts.effects
  mx.charts.effects.effectClasses
  mx.charts.events
  mx.charts.renderers
  mx.charts.series
  mx.charts.series.items
  mx.charts.series.renderData

  mx.collections 
  mx.collections.errors
  mx.containers
  mx.containers.accordionClasses

  mx.controls
  mx.controls.dataGridClasses
  mx.controls.listClasses
  mx.controls.menuClasses
  mx.controls.scrollClasses
  mx.controls.sliderClasses
  mx.controls.textClasses
  mx.controls.treeClasses
  mx.controls.videoClasses

  mx.core

  mx.data
  mx.data.errors
  mx.data.events
  mx.data.messages
  mx.data.mxml  
  mx.data.utils 
 
  mx.effects
  mx.effects.easing
  mx.effects.effectClasses

  mx.events 

  mx.formatters

  mx.graphics

  mx.logging  
  mx.logging.errors
  mx.logging.targets

  mx.managers

  mx.messaging
  mx.messaging.channels
  mx.messaging.config
  mx.messaging.errors
  mx.messaging.events
  mx.messaging.management
  mx.messaging.messages

  mx.preloaders
  mx.printing
  mx.resources

  mx.rpc
  mx.rpc.events
  mx.rpc.http
  mx.rpc.http.mxml
  mx.rpc.mxml
  mx.rpc.remoting
  mx.rpc.remoting.mxml
  mx.rpc.soap
  mx.rpc.soap.mxml
  mx.rpc.xml

  mx.skins 
  mx.skins.halo 
  mx.states
  mx.styles

  mx.utils
  mx.validators

 

Flash API package如下：
 flash.accessibility 
 flash.display
 flash.errors
 flash.events
 flash.external
 flash.filters
 flash.geom
 flash.media
 flash.net
 flash.printing
 flash.profiler
 flash.system
 flash.text
 flash.ui
 flash.utils
 flash.xml

 

看下面一段as代码是不是很眼熟，没错，Flash as3语法和java的语法及为相似。是java和c#的综合体感觉，挺好这样，省去了大家开始从头学一门语言的时间。
package{
 import flash.display.Sprite;
 import flash.events.EventDispatcher;
 import flash.events.Event;
 import flash.events.MouseEvent;

 class SXPlayer{
  //保护字段
  protected var mySound:Sound;
 
  //私有字段
  private var positionStart:Number;
  private var positionEnd:Number;
 
  private var isStoped:Boolean;
  private var isPaused:Boolean;
  private var isComplete:Boolean;

  //构造方法
  function SXPlayer(){ 
   isStoped = false;
   isPaused = false;
   mySound = new Sound();
  }
 
  //公共方法
  function Load(filename){
   positionStart = -1 ;
   positionEnd = 0 ;  
  }

  function Pause(){
   if(!isStoped){  
    isStoped = false;   
    if (!isPaused){    
     isPaused = true;
     mySound.stop();
     trace(isPaused);
    }else{
     Resume();
    }
   }
  }

  function FastBack()
  {  
   var step:Number = 10;
   var backPostion:Number = (this.mySound.position/1000)-step;
  
   if(!this.isStoped){ 
    if(this.mySound.position/1000<step){
     mySound.stop();
     if (!isPaused){
      mySound.start(0, 1);
     }
    }else{
     if(backPostion>0){
      mySound.stop();
      if (!isPaused){
       mySound.start(backPostion, 1);
      }
     }
    }
   } 
  }

  //公共属性
  function get LoadedPercent() : Number //加载百分比
  {
   return loadedPercent;
  }

 }
}

 

看看Flash的事件机制:
package {
    import flash.display.Sprite;

    public class ClickExample extends Sprite {
         public function ClickExample() {
            var child:ChildSprite = new ChildSprite();
            addChild(child);
        }
    }
}

import flash.display.Sprite;
import flash.events.MouseEvent;

class ChildSprite extends Sprite {
    public function ChildSprite() {
        graphics.beginFill(0xFF0000);
        graphics.drawRect(0,0,100,100);
        graphics.endFill();
        addEventListener(MouseEvent.CLICK, clickHandler);
    }
}

function clickHandler(event:MouseEvent):void {
    trace("clickHandler detected an event of type: " + event.type);
    trace("the this keyword refers to: " + this);   
}

 

//标准的实现
dispatcher.addEventListener(KingdaSampleDispatcher.ACTION, actionHandler);
dispatcher.doSomething();

import flash.events.EventDispatcher;
import flash.events.Event;

class KingdaSampleDispatcher extends EventDispatcher {
    public static var ACTION:String = "action";

    //如果你需要在自己类中某个方法中发送事件，那么示例如下
 public function doSomething():void {
  //你的代码.....
  
  //发送事件
               dispatchEvent(new Event(KingdaSampleDispatcher.ACTION));
    }
}

IEventDispatcher需要实现5个接口，addEventListener， hasListener, willTrigger,removeEventListener,hasEventListener,那么

 

 

下面来瞧瞧这个Flex MXML语法是如何描述的：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="678" height="616" borderStyle="solid" borderThickness="1" borderColor="#0080c0" backgroundGradientColors="[#d2def0, #ffffff]" initialize="initData()">
<mx:Script>
 <![CDATA[
        import mx.controls.Button;
        import mx.controls.Alert;
        import mx.controls.Image;
        import mx.collections.*;
        import flash.events.*;
        import mx.events.*;

        public var myArray:Array = ["AZ", "MA", "MZ", "MN", "MO", "MS"];
        [Bindable]
        public var myAC:ArrayCollection;
        public function initData():void {
         myAC = new ArrayCollection(myArray);
            }           

         private function handleChange(event:IndexChangedEvent):void {
                var currentIndex:int=event.newIndex;
                Alert.show("You just changed views \nThe new index is "+ event.newIndex);
          }
           
 [Bindable]
 public var myData:XML=
            <catalog>
                <category name="Meat">
                    <product name="Buffalo" cost="4" isOrganic="No"
                        isLowFat="Yes"/>
                    <product name="T Bone Steak" cost="6" isOrganic="No"
                        isLowFat="No"/>
                    <product name="Whole Chicken" cost="1.5" isOrganic="Yes"
                        isLowFat="No"/>
                </category>
            </catalog>;
       
        [Bindable] 
        public var listDP:XMLListCollection = new XMLListCollection(new XMLList());
       
 private var catalog:ArrayCollection;
 private static var cat:Array = [ "001.jpg", "002.jpg","003.jpg", "004.jpg" ];

 private function initCatalog(items:Array):void
 {
                catalog = new ArrayCollection(items);
                myList.dataProvider = catalog;
        }
        ]]>
 </mx:Script>

 <mx:Panel id="pnlSongList" title="歌手列表" x="10" y="10" width="205" height="242" layout="absolute" backgroundAlpha="0.18" backgroundColor="#ffff00">
  <mx:Tree x="10" y="10" height="140" id="myTree" enabled="true" width="165" dataProvider="{myData}" showRoot="false" labelField="@name">
  </mx:Tree>
 </mx:Panel>
 
 <mx:Panel id="pnlMusicList" title="歌曲列表" x="223" y="10" width="315" height="242" layout="absolute">
  <mx:DataGrid x="10" y="10" width="275" dataProvider="myAC00">
   <mx:columns>
    <mx:DataGridColumn headerText="序号" dataField="col1"/>
    <mx:DataGridColumn headerText="曲名" dataField="label"/>
    <mx:DataGridColumn headerText="艺术家" dataField="data"/>
   </mx:columns>
  </mx:DataGrid>
 </mx:Panel>
 
 <mx:Accordion x="10" y="268" width="205" height="336" change="handleChange(event);">
  <mx:Canvas label="001" width="206" height="100%">
  </mx:Canvas>
  <mx:Canvas label="002" width="100%" height="100%">
  </mx:Canvas>
 </mx:Accordion>

 <mx:ComboBox id="myCB" x="232" y="387" rowCount="7" dataProvider="{myAC}" width="117"/>

 <mx:ArrayCollection id="myDP00">
         <mx:source>
              <mx:Object label="AL" data="Montgomery"/>
              <mx:Object label="AK" data="Juneau"/>
              <mx:Object label="AR" data="Little Rock"/>
  </mx:source>
 </mx:ArrayCollection>
  
 <mx:List id="prodList" dataProvider="{myDP00}"  x="484" y="387" width="183" height="217" ></mx:List>
 <mx:HorizontalList id="myList" x="300" y="500" columnWidth="50" rowHeight="50" columnCount="3" itemRenderer="mx.controls.Image" creationComplete="initCatalog(cat)"/>
</mx:Application>

怎么样，是不是也很眼熟阿，别把它当成XAML了，它不是WPF,而是Flex的MXML。