Flex Viewer 开发教程(3)Widget与WidgetTemplate
来源:互联网 发布:办公室午睡神器 知乎 编辑:程序博客网 时间:2024/04/29 18:29
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的效果。
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事件的响应方法。
- Flex Viewer 开发教程(3)Widget与WidgetTemplate
- 【Flex Viewer】 开发教程(3)Widget与WidgetTemplate
- Flex Viewer 开发教程(3)Widget与WidgetTemplate
- Flex Viewer 开发教程(3)Widget与WidgetTemplate
- Flex Viewer 开发教程(5)Widget与Widget交互
- Flex Viewer 开发教程(5)Widget与Widget交互
- Flex Viewer 开发教程(5)Widget与Widget交互
- Flex Viewer 开发教程(4)Widget与Map交互
- Flex Viewer 开发教程(6)Widget与共享数据
- Flex Viewer 开发教程(7)Widget与服务器交互
- Flex Viewer 开发教程(4)Widget与Map交互
- Flex Viewer 开发教程(6)Widget与共享数据
- Flex Viewer 开发教程(4)Widget与Map交互
- Flex Viewer 开发教程(6)Widget与共享数据
- Flex Viewer 开发教程(7)Widget与服务器交互
- Flex Viewer 开发教程(2)Widget配置文件
- 【Flex Viewer】 开发教程(2)Widget配置文件
- Flex Viewer 开发教程(2)Widget配置文件
- and,or,order by
- Android开发_推荐一些顶级Android书
- DeepLearning(深度学习)原理与实现(五)
- Flex Viewer 开发教程(2)Widget配置文件
- shell 脚本实现的守护进程
- Flex Viewer 开发教程(3)Widget与WidgetTemplate
- C++语法基础--转换操作符,重载确定
- TCP详解
- Shark Machine Learning Library 安装配置运行
- 处理大并发之五 使用libevent利器bufferevent
- ubuntu 打开无线网卡
- EM算法详解
- Image、BufferImage和ImageIcon关系及用法
- Flex Viewer 开发教程(4)Widget与Map交互