HelloWorldWidget中短短几行代码,却能实现如此cool的一个Widget,这要归功于WidgetTemplate。WidgetTemplate是IWidgetTemplate接口的默认实现,提供组成Widget的各个部分,包括标题栏、内容面板、控制按钮、工具按钮、Widget图标等等。Widget将WidgetTemplate作为UI容器,比如在HelloWorldWidget中,我们将显示信息的Label放在WidgetTemplate中。当然,也可以实现自定义WidgetTemplate,只要实现IWidgetTemplate接口即可。在Flex Viewer2.0以后,WidgetTemplate的外观通过皮肤(Skin)来定义,详见WidgetTemplateSkin代码。要想实现其它风格的WidgetTemplate,自定义一个WidgetTemplateSkin即可。下图是一个自定义WidgetTemplateSkin的效果。
WidgetTemplate定义了三个事件:打开(open)、最小化(minimized)、关闭(closed)。这三个事件分别在Widget打开、最小化和关闭的时候发生。这三个事件在某些特殊业务需求下能发挥很大的作用,比如某个Widget对应的一个GraphicsLayer(见ArcGIS API for Flex),当Widget打开时需要显示,当Widget最小化或者关闭时需要隐藏。此需求可以分别在三个事件的响应方法中实现。在HelloWidgetTemplateWidget中我们分别对三个事件进行响应,每个响应中显示一个弹出框来说明当前所发生的事件类型。窗口打开时的情形如下图所示:
HelloWidgetTemplateWidget代码如下:
<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:viewer="com.esri.viewer.*"
layout="absolute" width="400" height="300"
widgetConfigLoaded="init()">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
private var helloContent:String;
private function init():void{
if (configXML){
helloContent=String(configXML.hellocontent);
}
}
private function openHandler():void{⑤
Alert.show("HelloWidgetTemplateWidget open");
}
private function minimizedHandler():void{⑥
Alert.show("HelloWidgetTemplateWidget minimized");
}
private function closedHandler():void{⑦
Alert.show("HelloWidgetTemplateWidget closed");
}
]]>
</fx:Script>
<viewer:WidgetTemplate open="openHandler()"①
minimized="minimizedHandler()"② closed="closedHandler()"③
skinClass="widgets.FlexViewerInAction.HelloWidgetTemplate.
WidgetTemplateSkin"④>
<s:HGroup width="100%" height="100%"
horizontalAlign="center" verticalAlign="middle">
<s:Label text="{helloContent}"/>
</s:HGroup>
</viewer:WidgetTemplate>
</viewer:BaseWidget>
① 设置open事件的响应方法;
② 设置minimized事件的响应方法;
③ 设置closed事件的响应方法;
④ 设置WidgetTemplate的皮肤;
⑤ 实现open事件的响应方法;
⑥ 实现minimized事件的响应方法;
⑦ 实现closed事件的响应方法。