【Flex Viewer】(四)自定义Widget
终于可以实现第一个Widget了,按照惯例,我们通过一个Hello World Widget来说明如何在Flex Viewer中开发、编译、配置、部署和使用自定义Widget。Flex Viewer的源代码中已经包含了一个HelloWorld Widget,我们还是亲手尝试一下吧。
1)
安装Flash Builder,下载Flex Viewer源码,我们使用最新的2.3;
2)
打开Flash Builder,导入Flex Viewer 2.3的源代码;
3)
鼠标放在widgets包上,单击右键,在弹出的菜单中选择New,然后单击MXML Component;
4)
在New MXML Component对话框中,输入包名“widgets.HelloWorld”,填写Widget名称“HelloWorldWidget”,并选择基类BaseWidget,单击Finish;
5)
此时,HelloWorldWidget已经创建完毕,按照Flex Viewer提倡的做法,在其包下新建一个同名xml配置文件,即“HelloWorldWidget.xml”;
6)
此时,HelloWorldWidget不会被编译,因为还未把它加入到Module列表。打开工程的属性窗口,点击Flex Modules,点击Add键,将HelloWorldWidget加入到Module列表中。点击OK,会发现HelloWorldWidget的图标已经和其他的Widget一样;
8)
下面开始实现HelloWorldWidget的业务逻辑,在Widget面板中显示出配置文件中的“Hello,Flex Viewer!”字符串。配置文件内容:
<?xml version="1.0" ?>
<configuration>
<hellocontent>Hello, Flex Viewer!</hellocontent>
</configuration>
HelloWorldWidget代码:
<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
</viewer:BaseWidget>
9)
在config.xml对HelloWorldWidget进行配置,如下:
<widgetcontainer>
<widget label="HelloWorld" icon="assets/images/i_solar.png"
</widgetcontainer>
10)编译,运行!Hello,Flex Viewer!