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。