75 lines
4.2 KiB
Markdown
75 lines
4.2 KiB
Markdown
|
在EUI中，EXML是可以运行时加载解析的。可以把它当做标准的文本文件加载后解析，或者直接将exml文本内容嵌入代码中解析。在下一节我们将详细讲解EXML的语法，这节我们先来看一下如何在代码中使用EXML文件。下面是一个EXML文件内容示例，它描述了一个按钮的皮肤：
|
|||
|
|
|
|||
|
|
~~~ typescript
|
|||
|
|
<?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="按钮" andtextColor="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的代码如下：
|
|||
|
|
|
|||
|
|
~~~ typescript
|
|||
|
|
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）。下面看个简单例子：
|
|||
|
|
|
|||
|
|
~~~ typescript
|
|||
|
|
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文本内容：
|
|||
|
|
|
|||
|
|
~~~ typescript
|
|||
|
|
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);
|
|||
|
|
~~~
|
|||
|
|
注意观察上面的例子，您可以使用[模板字面量](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings)（`template literals`）进行多行字符串的嵌入，从而避免了用 `"n"+` 符号来进行字符串连接。您可以直接使用头尾一对 `·` 符号（波浪线那个按键）来包裹多行文本。另外，包含在模板字面量中的文本内容，还可以使用 `${key}` 等嵌入的表达式来引用代码中的变量，进行简洁的字符串拼接：
|
|||
|
|
|
|||
|
|
~~~ typescript
|
|||
|
|
var className = "skins.ButtonSkin";
|
|||
|
|
var exmlText = `<e:Skin class="${className}" states="up,over,down,disabled" xmlns:s="http://ns.egret.com/eui"> ...
|
|||
|
|
</e:Skin>`;
|
|||
|
|
~~~
|