如何使用EXML Egret EDN 开发者中心

在EUI中，EXML是可以运行时加载解析的。您可以把它当做标准的文本文件加载后解析，或者直接将exml文本内容嵌入代码中解析。在下一节我们将详细讲解EXML的语法，这节我们先来看一下如何在代码中使用EXML文件。下面是一个EXML文件内容示例，它描述了一个按钮的皮肤：

<?xml version="1.0" encoding="utf-8" ?>

<e:Skin class="skins.ButtonSkin" states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui">

<e:Image width="100%" height="100%" scale9Grid="1,3,8,8" alpha.disabled="0.5"

source="button_up_png"

source.down="button_down_png"/>

<e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8"

size="20" fontFamily="Tahoma 'Microsoft Yahei'"

verticalAlign="middle" textAlign="center" text="按钮" textColor="0x000000"/>

<e:Image id="iconDisplay" horizontalCenter="0" verticalCenter="0"/>

</e:Skin>

运行时显示结果如下：

直接引用EXML文件

第一种方式也是最简单的方式，因为这个EXML的根节点是Skin，表示这个文件描述的是一个皮肤。在EXML根节点是Skin的情况下，可以直接使用组件的skinName接受EXML文件路径，这通常也是最普遍的使用情景。这里我们假设之前那个EXML文件的路径为:[项目根路径]/resource/skins/ButtonSkin.exml，引用那个ButtonSkin.exml的代码如下：

var button = new eui.Button()

button.skinName = "resource/skins/ButtonSkin.exml"

this.addChild(button)

皮肤文件推荐放在resource目录下。

动态加载EXML文件

上面介绍了EXML根节点是Skin的情况，若不描述的对象不是皮肤，那么我们就得采用更加通用的一种加载解析方式。可以直接使用EXML.load()方法来加载并解析外部的EXML文件，加载完成后，回调函数的参数会传入解析后的类定义，可以把类定义new出来实例化它，或直接赋值给组件的skinName属性（如果EXML根节点是Skin）。下面看个简单例子：

private init():void{

EXML.load("skins/ButtonSkin.exml",this.onLoaded,this)

}

private onLoaded(clazz:any,url:string):void{

var button = new eui.Button()

button.skinName = clazz

this.addChild(button)

}

嵌入EXML到代码

EXML同样也提供了文本的解析方式，这个过程大家可以直接类比对JSON文件的处理，因为几乎是一样的。您可以使用HttpRequest去加载EXML文件的文本内容，然后运行时调用EXML.parse(exmlText)方法去解析即可，会立即返回解析后的类定义。当然，您也可以跳过异步加载，直接在代码中嵌入EXML文本内容：

var exmlText = `<?xml version="1.0" encoding="utf-8" ?>

<e:Skin class="skins.ButtonSkin" states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui">

<e:Image width="100%" height="100%" scale9Grid="1,3,8,8" alpha.disabled="0.5"

source="button_up_png"

source.down="button_down_png"/>

<e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8"

size="20" fontFamily="Tahoma 'Microsoft Yahei'"

verticalAlign="middle" textAlign="center" text="按钮" textColor="0x000000"/>

<e:Image id="iconDisplay" horizontalCenter="0" verticalCenter="0"/>

</e:Skin>`

var button = new eui.Button()

button.skinName = exmlText

this.addChild(button)

注意观察上面的例子，这里有个嵌入多行文本的技巧，您可以不用写一堆的 "n"+ 符号来连接字符串，可以直接使用头尾一对·符号（波浪线那个按键）来包裹多行文本。另外，包含在这对符合之间的文本内容，还可以使用${key}的形式来引用代码中的变量，进行简洁的字符串拼接：

var className = "skins.ButtonSkin"

var exmlText = `<e:Skin class="${className}" states="up,over,down,disabled" xmlns:s="http://ns.egret.com/eui"> ...

</e:Skin>`

/**

* 这是使用URL方法加载。

* Created by 13641 on 2015/11/19.

*/

class SoundControl extends egret.DisplayObjectContainer{

public constructor() {

super()

this.addEventListener(egret.Event.ADDED_TO_STAGE, this.mainFunc, this)

}

private mainFunc():void{

this.loadSound()

}

private loader:egret.URLLoader

private loadSound():void{

//新建一个URLLoader

this.loader= new egret.URLLoader()

this.loader.addEventListener(egret.Event.COMPLETE,this.soundPlayComplete,this)

//新建一个数据表单

this.loader.dataFormat = egret.URLLoaderDataFormat.SOUND

//将声音添加进去

this.loader.load(new egret.URLRequest("resource/assets/Hai.mp3"))

}

private soundPlayComplete(event:egret.Event){

//取得表单数据

var sound:egret.Sound = this.loader.data

sound.play()

//alert("声音播放完毕")

}

}

说学就学，可是第一步就让我感觉很费事~~（哎~菜鸟当久了）。要开始学，得先下个PureMVC框架装上吧。找了半天PureMVC框架，下载下来后，发现是一个压缩包，大小只有几百K（心存怀疑，怎么这么小呀）。解压之后，根据惯性开始寻找一个类似Setup的东东。狂汗，就是找不到这个东西。这下我认定刚才下错东西了。于是，在网上又是一阵狂搜，结果证明自己没下错。-_-!!!

第二步，开始安装PureMVC。没有setup，怎么装呢？是不是添加引用就可以了呢？可是又该怎么添加呢？（我用得是FlashDevelop这个编辑AS的软件）网上又是一阵狂搜，可搜到的都是谈论PureMVC的架构怎么样或者pureMVC具体应用怎么写，就是没有介绍刚开始该怎么配置的。“最危险的地方就是最安全的地方”，结果在PureMVC的下载页内找到了“Installation ”字样。其中的大概做法，就是解压，然后将“PureMVC_AS3_2_0_4.swc　”添加到项目的库中。因为，我用的是FlashDevelop，所以添加方法如下：选中项目的lib文件夹-》右键添加存在的文件-》选择PureMVC_AS3_2_0_4.swc-》右键单击添加进来的这个文件-》选择添加到库中（Add To Library）。这样便可以算前期工作全部结束了。

第三步，查找关于PureMVC的介绍，补一下理论知识。这些东西，网上超多，我就不介绍了。

简单的说，PureMVC源于MVC模式，主要就是Model、View、Controller这三层次。但在PureMVC中上述三个都被封装成了三个核心层，并通过单例模式提供给应用程序。开发人员不需要直接使用这三个核心层。PureMVC为了简化开发复杂度，提供了一个Facade类，该类提供了与核心层通信的唯一接口，可以初始化上述三个核心层，并可以访问它们的public方法，同时该类也是以单例模式提供给应用程序。开发人员只需要继承一个Facade类并创建具体的Facade类就可以实现整个MVC模式。除了知道Facade类之外，还需要了解与三个核心层相辅助的三个类：Proxy、Mediator、Command。

Proxy，可以理解为代理，负责 *** 作数据的存取。

Mediator，可以理解为媒介，负责UI层与控制层之间的沟通。

Command，则是用来 *** 作具体的业务逻辑。

为了对这三个核心层尽量的解耦，PureMVC中采用了消息机制，层与层之间的通信通过发送消息(notification)来实现。消息发送者只需要实现发送，不需要知道谁会接收这些消息。消息接收者如果需要接收消息，只需要注册一下对应的消息就可以了。如：registerCommand(START_UP, StartUpCommand)这句话产意思就是注册了一个对应关系，其中START_UP是消息的名称，StartUpCommand则是一个Command，这样当有人发送了START_UP名称的消息后，就会由StartUpCommand进行处理。

第四步，动手写自己的Demo（在我的这个Demo中，实现功能很简单：记录每次鼠标单击时在X方向上的偏移量）。

1）创建一个新的项目，就叫做 "MyFirstPureMvc”　吧。新创建的项目，应该可以看到bin、lib、src这三个文件夹，在src下有一个main.as文件，bin下有一些用于呈现网页的文件（项目中基本不需要用到）。

2）在lib文件夹中添加PureMVC_AS3_2_0_4.swc，并添加到库中。

3）在src文件夹中添加三个子文件夹：Model、View、Controller。Model文件中放置MouseClickProxy.as文件。View中放置StageMediator.as文件。Controller中放置StartUpCommand.as和MouseClickCommand.as这两个文件。具体内容，请看下面。

4）在src文件夹中接着添加ApplicationFacade.as文件，名称可以不一样。这个主要是用来继承Facade类的。如果你了解了基本的PureMVC框架结构之后，应该明白Facade这个类的重要性。

package

{

import org.puremvc.as3.patterns.facade.Facade

import controller.*

/**

* Facade模式来实现统一的接口，对外只提供了startup方法用于启动

* 在该类被创建的时候会自动调用initializeController方法，需要在该方法中对Command进行注册

* 接着，调用startup方法启动（也就是发送一个消息，因为之前已经注册了Command,所以相应的方法会去执行execute进行响应）。

* @author

*/

public class ApplicationFacade extends Facade

{

public static const START_UP:String = "START_UP"

public static const MOUSE_CLICK:String = "MOUSE_CLICK"

public static function getInstance(): ApplicationFacade {

if (instance == null) {

instance = new ApplicationFacade()

}

return instance as ApplicationFacade

}

public function startup(app:Object):void

{

sendNotification(START_UP, app)

}

override protected function initializeController():void {

super.initializeController()

registerCommand(START_UP, StartUpCommand)

registerCommand(MOUSE_CLICK, MouseClickCommand)

}

}

}

上述语句中的initializeController方法中首先初始化了Controller控制器，并建立了Command与消息之间的映射关系。然后调用startup启动整个程序。在sendNotification中，发送了一个名为START_UP的消息。并传递了一个app对象。

根据注册的关系，StartUpCommand类会接收到这个消息。

在这个类中，主要实现了父类的execute方法。在该方法中注册了一个代理和媒介。这两个东东，在随后的程序运行中需要使用，所以要进行一下注册。注册了之后，接下去如果要使用则直接可以从facade中获取。

接着来看下StageMediator.as，这个东东关系到我们的View视图，与我们可以看得到的UI密切相关。我们在UI上触发的一些事件会由这个StageMediator类接收（并进行简单的封装）后发送给控制层去处理。

在mouseClick事件中，又发送了一个通知，通知的消息为MOUSE_CLICK。另一个是鼠标的单击时的X方向上偏移量。看一下ApplicationFacade类中注册的信息，可以找到与消息对应的类是MouseClickCommand。

在这个类中，就输出了X方向上偏移量。

接下来，你只需要ctrl+enter测试就可以了。

是不是很奇怪，从头到尾都没有用过Model层，是的，这可能是我这个DEMO的缺陷，因为我这个Demo中不需要查询数据库或其它数据存储区来获取或写入数据，因此并没有使用到。

上面的整个过程，只起到一个简单的演示作用。如果大家需要深入学习，建议大家参考网上达人们的文章。

---