Flex Viewer 开发教程（5）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);            }              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中的数据共享机制。