How to disable a customer widget?

907
3
Jump to solution
12-12-2014 12:47 AM
LuyiHan
New Contributor

Hi everyone,

I am very new to web application builder, and I am working on building new customer widgets on web application builder.

I have some questions about it, and hope someone could help me.

1. How to disable a customer widget?

For example. I created a widget, after opening it (maybe startup), it will have the function that every time when I click on the map, it will add a new marker on the map point, and center the extent of the map with that marker (the actual widget has more functions than this).

But when I close the widget, I want everything to go back to the default situation, which means do nothing when clicking or dragging the map.

What should I write on the onClose function? destroy the widget?

2. How to disable the widget window?

I want to have a widget which only has the icon button to open and close the widget, or even to be invisible.

The problem is that every time when the widget starts up, the blank window shows up (because I don't need any html code).

What can I do to hide the window of the widget?

Thank you very much!

0 Kudos
1 Solution

Accepted Solutions
JeremieCornet1
Occasional Contributor II

Hy Luyi,

1) you need to use dojo.disconnect. But it requires a reference to the handle.

Add this in your widget :

_widgetEvents:[],

addEvent:function(target_object, event_name, slot_function, hitchToThisWidget){    

    var evt_id = target_object.id + "__" + event_name;

    if(hitchToThisWidget){

        slot_function = lang.hitch(this, slot_function);

        console.log("->hitched");

    }

    this._widgetEvents[evt_id] = this.own(on(this.map, "mouse-move", slot_function));            

},

removeEvents:function(){

    for(var evt_id in this._widgetEvents)

        dojo.disconnect(this._widgetEvents[evt_id]);

    delete(this._widgetEvents);

    this._widgetEvents=[];

},

removeEvent:function(target_object, event_name){

    var evt_id = target_object.id + "__" + event_name;

    dojo.disconnect(this._widgetEvents[evt_id]);

    delete(this._widgetEvents[evt_id]);

},

And then, in onOpen, add events with this.addEvent

this.addEvent(

    this.map,

    'mouse-move',

    function(evt){

        var center = evt.mapPoint;

        this.coordsNode.innerHTML = "X : "+parseInt(center.x).toString()+" ; Y : "+parseInt(center.y).toString();

    },

    true

);

And to remove all events in onClose :

this.removeEvents();

or just one event :

this.removeEvent(this.map; 'mouse-move');

2) I don't think it's possible to have a widget in icons bar (widgetPool) with an icon and without GUI.

You can do a widgetOnScreen (like coordinate widget) and make a simple GUI (just one button with activated/deactivated status) and capture this button changes to activate/deactivate your even

View solution in original post

3 Replies
JeremieCornet1
Occasional Contributor II

Hy Luyi,

1) you need to use dojo.disconnect. But it requires a reference to the handle.

Add this in your widget :

_widgetEvents:[],

addEvent:function(target_object, event_name, slot_function, hitchToThisWidget){    

    var evt_id = target_object.id + "__" + event_name;

    if(hitchToThisWidget){

        slot_function = lang.hitch(this, slot_function);

        console.log("->hitched");

    }

    this._widgetEvents[evt_id] = this.own(on(this.map, "mouse-move", slot_function));            

},

removeEvents:function(){

    for(var evt_id in this._widgetEvents)

        dojo.disconnect(this._widgetEvents[evt_id]);

    delete(this._widgetEvents);

    this._widgetEvents=[];

},

removeEvent:function(target_object, event_name){

    var evt_id = target_object.id + "__" + event_name;

    dojo.disconnect(this._widgetEvents[evt_id]);

    delete(this._widgetEvents[evt_id]);

},

And then, in onOpen, add events with this.addEvent

this.addEvent(

    this.map,

    'mouse-move',

    function(evt){

        var center = evt.mapPoint;

        this.coordsNode.innerHTML = "X : "+parseInt(center.x).toString()+" ; Y : "+parseInt(center.y).toString();

    },

    true

);

And to remove all events in onClose :

this.removeEvents();

or just one event :

this.removeEvent(this.map; 'mouse-move');

2) I don't think it's possible to have a widget in icons bar (widgetPool) with an icon and without GUI.

You can do a widgetOnScreen (like coordinate widget) and make a simple GUI (just one button with activated/deactivated status) and capture this button changes to activate/deactivate your even

LuyiHan
New Contributor

Hi Jeremie,

Thank you so much for your reply.

For the first question, sorry I don't understand it very well. Does this code only for remove the mouse click event I have defined on the widget or it can "kill" all the functions in the widget and set everthing to default.

Dose the first part of the code shoule be put in the widget.js file?

I tried to follow your suggestion, and it seems doesn't work, maybe there is some part of the code I put it in the wrong place.

I checked the introduction of "dojo.disconnect", it is used to disconnect  the previous "dojo.connect" listener, and for me it works, so does this means for every changed made by this widget, I must make sure they have a connect listener, and then create a disconnect event to destroy them?

For the second question, I tried to use off panel widget and configure the position of it in the layout of the theme, but it will still open a blank GUI window by itself. Is there some place/code I could define not to show the GUI window or even get the result like you descibed to have one button with activated/deactivated status, which is actually what I need for some widgets.

Thank you very much!

Luyi

0 Kudos
JeremieCornet1
Occasional Contributor II

Hi,

The code (methods and an attribute to add in the widget) is just fort adding and stopping handlings.

After adding this code, you can call addEvent or removeEvent in any other method of the class like onOpen or onClose.

For the second question, you can watch the code from homeButton widget to see how to do.

It's not exactly what's you want because it use an existing js esri component (HomeButton dijit).

0 Kudos