Dojo abstracts alot from you when creating widgets.  So how do you see the real source?  The source is important when testing certain types of requirements.  Accessibility is one of those requirements.

Normal code

As an example, I wrote a simple line of code to display a Dojo widget for currency.

<input type="text" id="amount" name="amt" dojoType="dijit.form.CurrencyTextBox" constraints="{fractional:true}" currency="USD" invalidMessage="Invalid amount format." />

When I do a simple “view source”, I see exactly what I have here.  However, I’m interested in the source code the browser is rendering.  I installed the Firefox Web Developer extension to find out.  It was a simple as going to my web page and clicking view source –> view generated source.  The result is at the bottom of this post as it’s a bit long.  [I’m curious what other/better ways there are of seeing the source.  Feel free to add a comment if you have one.]

This is really interesting.  A few things jump out at me:

1. Dojo takes care of quite a bit a code for us!
2. Dojo creates a Dojo input element that does all the work and wraps a hidden input element representing what I actually wrote.  This lets me use the name I specified in my own code while letting Dojo add everything it needs.
3. IBM did a good job adding accessibility support to Dojo.

Error messages

I was also interested in what was generated when validation pops up that you did something wrong.  I was able to use the same steps – enter an invalid amount, tab out and then view source –> view generated source.  Dojo generated a single exra div for that.  It also generated the ARIA/WAI alert roles so a screenreader knows the validation has popped up.

<div role="alert" class="dijitTooltipContainer dijitTooltipContents"
dojoattachpoint="containerNode" wairole="alert">Invalid amount format.</div>

The following is what gets generated for the one line input tag:

<div widgetid="amount" value="NaN" role="presentation" class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox" id="widget_amount" dojoattachevent="onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse" wairole="presentation">
<div style="overflow: hidden;">
<div class="dijitReset dijitValidationIcon"><br></div>
<div class="dijitReset dijitValidationIconText">?</div>
<div class="dijitReset dijitInputField">
<input aria-invalid="false" aria-valuenow="NaN" value="" tabindex="0" id="amount" class="dijitReset"       dojoattachpoint="textbox,focusNode"
dojoattachevent="onfocus:_update,onkeyup:_onkeyup,onblur:_onMouse,onkeypress:_onKeyPress"
autocomplete="off" type="text">
<input name="amt" style="display: none;" value="" type="text">
</div>
</div>
</div>
</div>