4

I'm trying to modify one of the ArcGIS.com sample maps to add my own buttons, and I'm surprised at how complicated the HTML page is.

Here is the code for the simple "Details" button at the top left of the header:

<span class="dijit dijitReset dijitInline dijitToggleButton dijitToggleButtonChecked dijitChecked" widgetid="detailButton">
<span dojoattachevent="ondijitclick:_onButtonClick" class="dijitReset dijitInline dijitButtonNode">
    <span aria-labelledby="detailButton_label" role="button" dojoattachpoint="titleNode,focusNode" class="dijitReset dijitStretch dijitButtonContents" style="-moz-user-select: none;" id="detailButton" tabindex="0" title="Display Map Details" aria-pressed="true">
        <span dojoattachpoint="iconNode" class="dijitReset dijitInline dijitIcon esriDetailsIcon"></span>
        <span class="dijitReset dijitToggleButtonIconChar">?</span>
        <span dojoattachpoint="containerNode" id="detailButton_label" class="dijitReset dijitInline dijitButtonText">Details</span>
    </span>
</span>
<input type="button" dojoattachpoint="valueNode" tabindex="-1" class="dijitOffScreen" value="">

The image itself is specified in the CSS.

Is all that code really necessary, and is there an easier way to add a button (with tooltip) to the interface of an ArcGIS Server JavaScript API map?

I noted that the Toolbar sample doesn't show tooltips, hence my investigation of the ArcGIS.com samples.

2
4

That's the markup generated by dojo for a specific kind of widget (dijit). You wouldn't actually build that yourself– it's the result of creating a dijit (either declaratively or programmatically).

There are a number of button-style dijits available:

7
  • 1
    ah - so I shouldn't be looking at the HTML page, but instead at the JS code which creates those buttons. That makes sense - thanks Feb 7 '12 at 6:03
  • @StephenLead yep, exactly Feb 7 '12 at 6:55
  • ...and thats why ESRI needs to stop using Dojo.
    – Donny V.
    Feb 7 '12 at 14:38
  • @DonnyV. The markup generated by dojo is optional when using Esri's API. It's up to you whether you use a native html <button>, <input type="button"> or a dijit. The advantage of using dijits is you get buttons that look the same cross-browser. To get a consistent look cross-browser requires additional markup, and that's what dojo generates. You rarely have to worry about working with that markup directly (there are some cases where you might want to tweak some CSS). This is helpful for some background: davidwalsh.name/dojo-widget Full-disclosure: I work for Esri on the JS API team. Feb 7 '12 at 16:11
  • 1
    @DonnyV.very constructive comment. Really added no value. Dojo adds the extra markup to 1 add aria support, which iirc no other js ui language does, and 2 to style the buttons to look the same across browsers like derek said. These extra dom elements are no reason why esri should stop using dojo.
    – Steve
    Feb 7 '12 at 17:57
2

<button onClick=_onButtonClick>?</button>

Most of that code is to make the button 'pretty'. You'll need to use the Dojo dijits stuff to put the map on the page, but you could fall back to plain old HTML a lot of the time.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.