Flex Viewer 开发教程（5）Widget与Widget交互

发布时间：2020-12-15 04:13:00 所属栏目：百科来源：网络整理

导读：1.????????Widget与Widget交互有些情况下一个特定功能需要多个Widget相互协作共同完成，但是这种协作不能打破Widget彼此之间的独立性。本着简单原则，Widget之间通过事件进行交互。本小节设计了两个Widget来说明Widget之间通过事件进行交互，名为HelloWidge

1.????????Widget与Widget交互

有些情况下一个特定功能需要多个Widget相互协作共同完成，但是这种协作不能打破Widget彼此之间的独立性。本着简单原则，Widget之间通过事件进行交互。本小节设计了两个Widget来说明Widget之间通过事件进行交互，名为HelloWidgetWidgetA和HelloWidgetWidgetB，HelloWidgetWidgetB可以打开、最小化、关闭HelloWidgetWidgetA，如下图所示：

HelloWidgetWidgetA代码如下所示：

<?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.*"

??????????????????????????? ?? width="400"?height="300"

??????????????????????????? ?? creationComplete="init()">①

???????<fx:Script>

????????????? <![CDATA[

?????????????????????import?com.esri.viewer.AppEvent;

?????????????????????import?com.esri.viewer.ViewerContainer;

?????????????????????import?com.esri.viewer.WidgetStates;

private?function?init():void{②?????ViewerContainer.addEventListener(AppEvent.SEND_MESSAGE_TO_ANOTHER_WIDGET,handler);

???????????????????? }

?????????????????????function?handler(event:AppEvent):void{③

????????????????????????????var?action:String=String(event.data);

????????????????????????????switch?(action){

???????????????????????????????????case?"open":

??????????????????????????????????????????//this.setState(WidgetStates.WIDGET_OPENED);

ViewerContainer.dispatchEvent(newAppEvent(AppEvent.WIDGET_RUN,?this.widgetId));④

??????????????????????????????????????????break;

???????????????????????????????????"minimize":

??????????????????????????????????????????this.setState(WidgetStates.WIDGET_MINIMIZED);

??????????????????????????????????????????"close":

??????????????????????????????????????????this.setState(WidgetStates.WIDGET_CLOSED);

??????????????????????????????????????????break;

??????????????????????????? }

???????????????????? }

????????????? ]]>

???????</fx:Script>

???????<viewer:WidgetTemplate?id="wTemplate"/>

</viewer:BaseWidget>

对creationComplete事件进行监听，一般在此事件的响应方法中做一些初始化的工作；
在creationComplete事件的响应方法中通过ViewerContainer添加对SEND_MESSAGE_TO_ANOTHER_WIDGET事件的监听；
对SEND_MESSAGE_TO_ANOTHER_WIDGET事件的响应方法；
考虑一下，此处为什么不用setState()方法呢？

HelloWidgetWidgetB代码如下所示：

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

? ? <viewer:BaseWidget?xmlns:fx="com.esri.viewer.*">

???????import?com.esri.viewer.ViewerContainer;

?????????????????????function?controlWidgetA(action:String):void{①

ViewerContainer.dispatchEvent(new?AppEvent(AppEvent.SEND_MESSAGE_TO_ANOTHER_WIDGET,action));

???????????????????? }

????????????? ]]>

???????</fx:Script>

???????<viewer:WidgetTemplate?width="500"?height="200">

??????????????<s:HGroup?width="100%">

?????????????????????<s:Button?label="Open HelloWidgetA"

?????????????????????????????????? ? click="controlWidgetA('open')"/>

?????????????????????<s:Button?label="Minimize HelloWidgetA"

?????????????????????????????????? ? click="controlWidgetA('minimize')"/>

?????????????????????<s:Button?label="Close HelloWidgetA"

?????????????????????????????????? ? click="controlWidgetA('close')"/>

??????????????</s:HGroup>

???????</viewer:WidgetTemplate>

? ? </viewer:BaseWidget>

①????实现按钮的单击事件响应，派发SEND_MESSAGE_TO_ANOTHER_WIDGET事件。

AppEvent中新添加的事件如下所示:

? ? // add

? ? /**

* event used to test communication between widgets

public?static?const?SEND_MESSAGE_TO_ANOTHER_WIDGET:String =?"sendMessageToAnotherWidget";

? ? // end

需要注意的是，HelloWidgetWidgetA只有在已经打开（通过菜单中的图标）的情况下，才能响应HelloWidgetWidgetB派发的事件，与HelloWidgetWidgetB进行交互。因为Flex Viewer中的Widget采用的是Lazy-Load方式，即只有在第一次打开时才加载。那么，在Widget第一次打开的时候，如何知道在这之前发生的事情呢？找DataManager帮忙！下一节我们看一下Flex Viewer中的数据共享机制。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!