topic Communication between widgets in ArcGIS Viewer for Flex Questions

Communication between widgets

DonCaviness — Tue, 28 Sep 2010 15:07:42 GMT

Does anyone know how I would go about communicating between widgets? I would like to use a button in one widget to call a function in another or change components (label text, visible property, etc) in another widget. Any help will be appreciated.

Re: Communication between widgets

SarthakDatt — Fri, 10 Dec 2021 23:40:06 GMT

Hey Don,

Assuming that you are using Flex Viewer 2.x version, every widget extends the BaseWidget class, which has the addSharedData method. This method internally dispatches the AppEvent.DATA_PUBLISH event which is used for inter-widget communication.

e.g:

Widget 1

 
private function widgetCommunication1():void
{
    addSharedData("your key", shared data(ArrayCollection)); 
}

Widget 2

<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:viewer="com.esri.viewer.*"
                   initialize="basewidget1_initializeHandler(event)"
                   >
    <fx:Script>
        <![CDATA[
            import com.esri.viewer.AppEvent;
           
            import mx.events.FlexEvent;

            protected function basewidget1_initializeHandler(event:FlexEvent):void
            {
                ViewerContainer.addEventListener(AppEvent.DATA_PUBLISH, sharedDataUpdated);
            }
           
            private function sharedDataUpdated(event:AppEvent):void
            {
                var data:Object = event.data;

                if (data.key == "my key") 
                {
                     // do something..     
                }
            }
        ]]>
    </fx:Script>

Hope that helps.

Re: Communication between widgets

DonCaviness — Tue, 28 Sep 2010 19:58:47 GMT

Thank you! That is what I was looking for.

Re: Communication between widgets

BobCarberry — Wed, 29 Sep 2010 11:39:33 GMT

Sarthak,

Do you know of anyway to open a widget from another widget?

Re: Communication between widgets

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:40:09 GMT

Bob,

You have to know your widgets Id number. The widgets id is not a string it is a sequential number that is assigned when the widget is created in FlexViewer.

Here is the code:

ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, yourWidgetsID#));

I added a new function to the ViewerContainer.mxml for the purpose of finding a widgets id #

//Add this new variable at the beginning with the other  private and public vars
public var _configData:ConfigData;

//Add this new function
                        public function getWidgetId(widgetLabel:String):Number
   {
    var id:Number;
    for (var i:Number = 0; i < _configData.widgets.length; i++)
    {
     if (_configData.widgets.label == widgetLabel)
      id = _configData.widgets.id;
    }
    return id;
   }

//Add this to the postConfigHandler function
_configData = event.data as ConfigData;

Then you can do something like this

ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, ViewerContainer.getWidgetId("Search")));

Re: Communication between widgets

DonCaviness — Wed, 29 Sep 2010 13:46:36 GMT

Robert, do you know how I would go about calling a function in the flex viewer using a javascript function in a html page? I have found this example on how to communicate between flex and javascript http://www.switchonthecode.com/tutorials/flex-javascript-basics-using-externalinterface but I am having trouble getting this to work with the 2.1 flex viewer.

Re: Communication between widgets

RobertScheitlin__GISP — Wed, 29 Sep 2010 14:09:09 GMT

Don,

I am looking into it. Can you give me a use case or workflow that you are considering this for?

Re: Communication between widgets

DonCaviness — Wed, 29 Sep 2010 15:23:46 GMT

Here is what I am trying to do. I have a custom wrapper that the flex viewer lives in. On the html page a have a button that fires an JavaScript event that changes some information within the html. In the flex viewer I have a widget that will display data depending what is selected by the user clicking on the button in the html wrapper. In other words, I want to change label text, make components visible or hidden, etc. in the widget when the user fires off a JavaScript function. I was successful in using the code snippet provided in this thread to communicate between wigets, so I was hoping I could communicate with the widget but from outside of flex.

Re: Communication between widgets

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:40:11 GMT

Don,

Took a while to find time for this but here it is:
index.template.html code:

<script type="text/javascript">
            function getFlexApp(appName)
            {
              if (navigator.appName.indexOf ("Microsoft") !=-1)
              {
                return window[appName];
              }
              else
              {
                return document[appName];
              }
            }
            function someFlexFunction()
            {
                getFlexApp('index').flexTalk('Hello World');
            }
        </script>
        <input type="button" id="butFlexTalk" onclick="someFlexFunction()" value="Say Hello" />

index.mxml portion

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:viewer="com.esri.viewer.*"
               xmlns:managers="com.esri.viewer.managers.*"
               pageTitle="ArcGIS Viewer for Flex"
               initialize="initApp()">
               
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function initApp():void
            {
                if (ExternalInterface.available)
                    ExternalInterface.addCallback("flexTalk", flexTalk);     
            }
            
            public function flexTalk(sayThis:String):void
            {
                Alert.show(sayThis);
            }
        ]]>
    </fx:Script>

    <fx:Style source="defaults.css"/>

Of course from here you will have to use some appEvent or something to get from the index.mxml into some widget or what ever you are trying to do.

Re: Communication between widgets

DonCaviness — Mon, 04 Oct 2010 12:22:47 GMT

Thank you Robert.

Re: Communication between widgets

MattiasEkström — Fri, 11 Mar 2011 13:09:59 GMT

Hi!
This thread helped me to communicate between widgets, I'm sending a graphic from one widget to another which use the graphic as input to an identifyTask. This works fine as long as both widgets are opened.
If the user haven't opened the second widget yet I want to open that widget and send the graphic.
I can open the widget (but I have to hardcode the widget id, the getWidgetId function doesn't work for me, but that's another question I asked in another thread). But if the widget is just opened it obviously didn't had time to add the eventlister and litsen to the AppEvent.DATA_PUBLISH, so nothing happens, the user has to do the same request again.

Any ideas how to accomplish to open a widget and sending data to it at the same time (or at least without any user input after the widget is loaded??

Re: Communication between widgets

RobertScheitlin__GISP — Fri, 11 Mar 2011 14:01:57 GMT

Mattias,

So are you good on this now based on the other thread?

Re: Communication between widgets

MattiasEkström — Tue, 15 Mar 2011 12:28:38 GMT

Robert,
No I still can't achieve all I want.
If I Have my two widgets open then there is no problem for widget1 to send data to widget2 that uses the data to perform a findtask. But If widgets2 is not loaded it loads but don't perform any findtask. I want it to load and receive the data and perform the findtask.
If widget2 is loaded once and then closed so the state of the widget is closed it works fine, but the problem is when the widget never have been opened/loaded during the session.

I've tried to use some fetchSharedData() code at the creationComplete event for widget2 to see if there is any data with my key in shareddata, but I can't fetch any data, don't know how to use the fetchSharedData.
(I saw another thread about a bug in Datamanager.as, made that change but it didn't changed anything for me).

Re: Communication between widgets

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:40:14 GMT

Mattias,

In the init of widget 2 you need to add an event listener:

ViewerContainer.addEventListener(AppEvent.DATA_SENT, sharedDataUpdated);

            private function sharedDataUpdated(event:AppEvent):void
   {
    var dataTable:Hashtable = event.data as Hashtable;
    if (dataTable.containsKey("ParcelAddress"))
    {
     var recAC:ArrayCollection = dataTable.find("ParcelAddress") as ArrayCollection;
     for (var i:Number = 0; i < recAC.length; i++)
     {
      var obj:Object = recAC;
      var fitm:* = frmLocateAddress.getChildAt(0);
      var tAddress:TextInput = fitm.getChildAt(0) as TextInput;
      tAddress.text = obj.paddress;
      showStateAddress();
     }
     dataTable.remove("ParcelAddress");
    }
   }

Obviously the sharedDataUpdated function is specific to something that I am doing but this gives you and idea. Basically my scenario is if someone uses the search widget for an address and the returned results are empty than I will give them and option to launch the locate widget with that same searched address. So when they click yes they want to use locate then I launch the locate widget with the WIDGET_RUN app event discussed earlier and then because the search widget used the addSharedData function when the widget is launched the code above is used immediately.

Re: Communication between widgets

MattiasEkström — Wed, 16 Mar 2011 07:28:01 GMT

Robert,
I added the event listener to the init of widget2 and the function to that event listener. But still it doesn't work, the function never runs.
My knowledge about AppEvents are limited, but I'm thinking that the event listener is added after the event is dispatched and therefor nothing happens. But if this code work for you, I guess it should work for me to, but it doesn't...

What's the difference between AppEvent.DATA_PUBLISH and AppEvent.DATA_SENT?

The data that is added from addSharedData in widget1 has to be stored somewhere, is there no way to access it from widget2 without any event listeners??

Re: Communication between widgets

RobertScheitlin__GISP — Wed, 16 Mar 2011 12:37:56 GMT

Mattias,

AppEvent.DATA_PUBLISH is what gets dispatched by the BaseWidget when the addSharedData function is invoked. AppEvent.DATA_SENT is what gets dispatched when the BaseWidget is done adding the data to the hashtable. BTW I forgot that I was calling fetchSharedData(); in my locate widget when it is shown. fetchSharedData is a function that forces the data sent to get dispached.

Re: Communication between widgets

MattiasEkström — Thu, 17 Mar 2011 08:12:26 GMT

Thanks for all your help Robert!
After I added the call to fetchSharedData() in widget2 it works great.

Re: Communication between widgets

ShannakaBeveridge — Mon, 21 Mar 2011 06:04:36 GMT

Hi,

I am having the same problem, could you explain where and how you've used fetchSharedData()?

Cheers!

Shannaka

Re: Communication between widgets

MattiasEkström — Mon, 21 Mar 2011 06:47:03 GMT

Shannaka,
I guess normally you could use the fetchSharedData() in the init function, I use it a bit later because I call a few other functions in my init functions that creates some components and set there values based on info in the config file. But the important thing is that you've added the eventlistenter ( ViewerContainer.addEventListener(AppEvent.DATA_SENT, sharedDataUpdated); ) before you call fetchSharedData(), it's used just to trigger that event.

Re: Communication between widgets

ShannakaBeveridge — Tue, 22 Mar 2011 02:53:28 GMT

Thank you! All working now.