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

最新推荐文章于 2022-01-11 14:23:12 发布

原创最新推荐文章于 2022-01-11 14:23:12 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

GIS 同时被 2 个专栏收录

27 篇文章

订阅专栏

flex

25 篇文章

订阅专栏

本文详细阐述了如何在应用程序中实现不同widget之间的互相调用与管理，包括导入必要的类，定义事件和监听机制，以及在widget之间传递消息。通过实例展示了如何创建并控制widgetA和widgetB之间的交互，特别是强调了lazy-load机制下，widget的启动与状态变化。文章还讨论了如何利用Data Manager来解决首次加载时的历史操作问题。

实现不同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中的数据共享机制。