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

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>

1. 对creationComplete事件进行监听，一般在此事件的响应方法中做一些初始化的工作；
2. 在creationComplete事件的响应方法中通过ViewerContainer添加对SEND_MESSAGE_TO_ANOTHER_WIDGET事件的监听；
3. 对SEND_MESSAGE_TO_ANOTHER_WIDGET事件的响应方法；
4. 考虑一下，此处为什么不用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中的数据共享机制。