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

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

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

有些情况下一个特定功能需要多个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);

?????????? }

?????????? private 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;

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

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

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

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

??? <fx:Script>

?????? <![CDATA[

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

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

?????????? private 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中的数据共享机制。

（编辑：李大同）

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