ARCGIS viewer入门（2）两个不同的widget交互

实现不同widget之间的互相调用，特别注意，widgetB是运行先得，而widgetA也必须是该APP种的一个widget

如上图种，print插件就被植入了widgetA的代码，从而被my first widget控制：

  import com.esri.viewer.AppEvent;
   import com.esri.viewer.ViewerContainer;
   import com.esri.viewer.WidgetStates;

（1）my first widget

--------------------------------------

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

 

（2）widgetA代码。该代码需要植入print中

<?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(new AppEvent(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>

（3）特别注意，需要

实现按钮的单击事件响应，派发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

 

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