Flex mxml + as3 vs wpf xaml + C #
Object --> eventdispatcher --> displayobject --> Spirit --> movieclip
The flex framework and Microsoft WPF are very similar. They all use their own XML syntax to express the interface.
WPF is XAML, while Flex is mxml. They are also expressed in XML syntax. They are all used to express the UI, including attributes, events, behaviors, data binding, and effects. They all have their own set of related controls.
Mxml from Flex needs to be compiled in the flexbuilder environment, and is a SWF file.
Let's take a look at the 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.tar gets
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
The Flash API package is as follows:
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
See the following sectionCodeIs it familiar? Yes, the flash as3 syntax is similar to the Java syntax. It is a combination of Java and C #. This is quite good, saving you time to start learning a language from scratch.
Package {
Import flash. display. Sprite;
Import flash. Events. eventdispatcher;
Import flash. Events. event;
Import flash. Events. mouseevent;
Class sxplayer {
// Protection field
Protected var mysound: sound;
// Private Field
Private var positionstart: number;
Private var positionend: number;
Private var isstoped: Boolean;
Private var ispaused: Boolean;
Private var iscomplete: Boolean;
// Constructor
Function sxplayer (){
Isstoped = false;
Ispaused = false;
Mysound = new sound ();
}
// Public Method
Function load (filename ){
Positionstart =-1;
Positionend = 0;
}
function pause () {
If (! Isstoped) {
isstoped = false;
If (! Ispaused) {
ispaused = true;
mysound. stop ();
trace (ispaused);
}else {
resume ();
}< BR >}
function fastback ()
{< br> var step: Number = 10;
var backpostion: Number = (this. mysound. location/1000)-step;
If (! This. isstoped) {
If (this. mysound. Position/1000 mysound. Stop ();
If (! Ispaused) {
mysound. start (0, 1);
}< BR >}else {
If (backpostion> 0) {
mysound. stop ();
If (! Ispaused) {
mysound. Start (backpostion, 1);
}< BR >}
// Public attributes
Function get loadedpercent (): Number // load percentage
{
Return loadedpercent;
}
}
}
Let's look at the flash event mechanism:
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 );
}
// Standard implementation
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 ";
// If you need to send an event in a method of your class, the example is as follows:
Public Function dosomething (): void {
// Your code .....
// Send events
Dispatchevent (new event (kingdasampledispatcher. Action ));
}
}
Ieventdispatcher needs to implement five interfaces: addeventlistener, haslistener, willtrigger, removeeventlistener, and haseventlistener.
Let's take a look at how the flex mxml syntax describes it:
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 = "maid" 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" 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 = "no." datafield = "col1"/>
<Mx: datagridcolumn headertext = "Qu name" datafield = "label"/>
<Mx: datagridcolumn headertext = "artist" 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>
Well, isn't it familiar? Don't treat it as XAML. It's not WPF, but flex's mxml.