_WidgetMetadataMixin Version 1.1.3 May 5, 2015

[#1]

This Mixin Class works with most in-panel and on-screen (with icon) Web AppBuilder widgets.

Live Preview Site

Changes in Version 1.1.3

1. Changed all instances of _widgetMetadataMixin* to _WidgetMetadataMixin*.

Changes in Version 1.1.2

1. Modified the Mixin Class to destroy itself when the host widget is destroyed.

Bug Fixes in Version 1.1.1

1. Fixed the Mixin so it would work with FireFox and IE as well as Chrome.
2. Updated the Live Preview Site.

Features:

1. The mixin displays a Message dialog with the Widget version, the Web AppBuilder version, and the Widget description.
2. For an in-panel widget, displays the dialog when the user holds down the Alt button while clicking on the widget panel heading.
3. For an on-screen widget (with an icon), displays the dialog when the user holds down the Alt button while clicking on the icon.
4. This mixin does not work with touch screen devices, but it does no harm.

Download:

_WidgetMetadataMixin-1.1.3-2015-5-5.zip

Larrys Custom WAB Widgets and More

[RobertScheitlin__GISP]

Larry,

    So far I have not been able to get the widget meta info. I am holding the Alt key and clicking on the widgets header and nothing...

Also about every other time visiting your preview site it errors out on me with this in the console:

DOMException [InvalidAccessError: "A parameter or an operation is not supported by the underlying object"

code: 15

nsresult: 0x8053000f

location: http://gis.hamiltoncounty.in.gov/mapviewer/widgets/WelWhatDisHelpAbout/WelWhatDisHelpAbout.js:974] "welWhatDisHelpAbout<._getCSSProperties@http://gis.hamiltoncounty.in.gov/mapviewer/widgets/WelWhatDisHelpAbout/WelWhatDisHelpAbout.js:974:10

welWhatDisHelpAbout<._getWidgetButtonStyles/<@http://gis.hamiltoncounty.in.gov/mapviewer/widgets/WelWhatDisHelpAbout/WelWhatDisHelpAbout.js:811:41

n/<@http://js.arcgis.com/3.13/init.js:228:183

welWhatDisHelpAbout<._getWidgetButtonStyles@http://gis.hamiltoncounty.in.gov/mapviewer/widgets/WelWhatDisHelpAbout/WelWhatDisHelpAbout.js:803:8

welWhatDisHelpAbout<._getWidgetHelpFromThatWidget@http://gis.hamiltoncounty.in.gov/mapviewer/widgets/WelWhatDisHelpAbout/WelWhatDisHelpAbout.js:546:8

welWhatDisHelpAbout<._addWidgetHelpContent/<@http://gis.hamiltoncounty.in.gov/mapviewer/widgets/WelWhatDisHelpAbout/WelWhatDisHelpAbout.js:479:8

.cache["dojo/_base/array"]/</g.forEach@http://js.arcgis.com/3.13/init.js:229:247

welWhatDisHelpAbout<._addWidgetHelpContent@http://gis.hamiltoncounty.in.gov/mapviewer/widgets/WelWhatDisHelpAbout/WelWhatDisHelpAbout.js:478:0

welWhatDisHelpAbout<._getTabContent@http://gis.hamiltoncounty.in.gov/mapviewer/widgets/WelWhatDisHelpAbout/WelWhatDisHelpAbout.js:406:10

welWhatDisHelpAbout<.postCreate/<@http://gis.hamiltoncounty.in.gov/mapviewer/widgets/WelWhatDisHelpAbout/WelWhatDisHelpAbout.js:144:21

.cache["dojo/_base/array"]/</g.forEach@http://js.arcgis.com/3.13/init.js:229:247

welWhatDisHelpAbout<.postCreate@http://gis.hamiltoncounty.in.gov/mapviewer/widgets/WelWhatDisHelpAbout/WelWhatDisHelpAbout.js:140:0

.cache["dijit/_WidgetBase"]/</f<.create@http://js.arcgis.com/3.13/init.js:1123:342

.cache["dijit/_WidgetBase"]/</f<.postscript@http://js.arcgis.com/3.13/init.js:1122:93

d/<@http://js.arcgis.com/3.13/init.js:108:189

clazz<.startup@http://gis.hamiltoncounty.in.gov/mapviewer/widgets/WelWhatDisHelpAbout/Widget.js:75:35

l/</h.around.advice@http://js.arcgis.com/3.13/init.js:244:234

l/</h@http://js.arcgis.com/3.13/init.js:244:29

.loadAllWidgetsInOrder/</<@http://gis.hamiltoncounty.in.gov/mapviewer/jimu.js/BaseWidgetPanel.js:67:10

.cache["dojo/_base/lang"]/</g.hitch/<@http://js.arcgis.com/3.13/init.js:177:293

.cache["dojo/Deferred"]/</k@http://js.arcgis.com/3.13/init.js:199:430

.cache["dojo/Deferred"]/</m@http://js.arcgis.com/3.13/init.js:199:356

.cache["dojo/Deferred"]/</f/this.resolve@http://js.arcgis.com/3.13/init.js:201:440

clazz<.loadWidget/</</<@http://gis.hamiltoncounty.in.gov/mapviewer/jimu.js/WidgetManager.js:110:20

.cache["dojo/_base/lang"]/</g.hitch/<@http://js.arcgis.com/3.13/init.js:177:293

"

[LarryStout]

Robert,

I discovered the _WidgetMetadataMixin is only working in Chrome.  I'm working it now.  Thanks for the error dump.  It looks like there is enough information for me to work that also.  I'll post again when I get these solved.

Since I discovered the problem, I never updated the sample site, so it won't work even in Chrome unless you try my dev site, which is not necessarily stable all of the time.  ArcGIS Web Application .

Larry

[LarryStout]

Robert,

I fixed two issues that affected the mixins in FireFox and IE:

1. They seem to resolve relative paths differently than Chrome.
2. The timing for building the DOM is different.

While using the console in FireFox and IE, I discovered and fixed multiple other assorted minor issues.  Why can't all the browsers just get along?

I've updated the Live Preview site now, so let me know what you think.

I've made a note to investigate the other errors you were getting.  When I was a younger man, I did some things in the WelWhatDisHelpAbout Widget that look very strange to me now.  I'm hoping to rewrite the offending function tomorrow.

Larry

P.S. Thanks for the feedback.  I hate bugs!

[LarryStout]

Thanks to Robert for his support on this.  We've been communicating privately, so I thought I'd write a wrap-up to the problem/solution.

First, the _WidgetMetadataMixin was tricky to get working in all browsers because of three (not two) reasons:

1. Relative paths were being resolved differently by different browsers.  To add confusion, working in WAB Developer Edition created a different pathing issue than any of the browsers running against IIS.
2. The timing for building the DOM is different in different browsers, so there were some asynchronous issues to address.
3. Event handling is different in different browsers.  In Chrome, evt.stopPropagation() was adequate, but in FireFox and IE, evt.preventDefault() was required.  I ended up using evt.preventDefault() and that works in all of the browsers I tested.

Second, in my WelWhatDisHelpAbout Widget, I have created live widget buttons in the Help tab.  If you hover over a widget button in the Help tab, it changed its style just like the real widget button.  If you click on a widget button in the Help tab, it opens the widget.  This is pretty cool, but requires scanning the style sheets to discover the styles to use.  Scanning the style sheets can be a real adventure in different browsers. FireFox throws a "SecurityError" exception if you try to read a style sheet from a different domain (e.g. http://js.arcgis.com/3.13/...).  Once you have the style sheet object, Chrome and IE (9) have both rules and cssRules properties, but FireFox has only a cssRules property.

I could only reproduce the error Robert was getting in the FireFox console if I disconnected from my network, opened Fiddler2, and set the performance in Fiddler2 to "Simulate Modem Speeds".  Even then, the error was intermittent.  If you are old enough to remember dial-up modems, you know how long the debugging took.  Two to three minutes to load the application, which in human time, seems like two to three months.

I ended up rewriting the offending function twice before we got the problem solved.  And the problem was not just the error in the FireFox Console.  It wasn't always reading the style sheets, which means the widget buttons in the Help tab weren't getting styled correctly.

As far as I know, it is working correctly now.  If you find a problem, please let me know.

Larry