Need UI to provide hints for input formats

[Adam Peller]

You're presented with an input for a date or a currency (e.g. DateTextbox?, CurrencyTextbox?). How do you know what to enter? It depends on your locale, and other constraints. For dates, you might be asked for a 'short' date or a 'long' date, and that depends on your locale, as does the prompt itself. Sooo....

the patterns to handle this include:

inline text to prompt the user, e.g. Please enter an amount such as $1,234.56 or greyed out text in the widget, like Jesse's dojo.behavior or perhaps a prompt in some other form, like a tooltip.

Which patterns do we want to support? Do we provide them as examples or code in dijit.*? Can we generate them as simple examples using something like Declaration.js?

[alex]

Milestone 2.0 deleted

[bill]

bumping 1.4 tickets to 1.5, and most 1.3 tickets to 1.4

[liucougar]

patch with test case

[liucougar]

another approach: overlay a span on top of the input

[liucougar]

(In [21631]) fixes #3286: placeholder support on dijit.form.TextBox?

[liucougar]

(In [21641]) refs #3286: lucid needs a bit more css tweek to place the placeholder nicely on top of the input

[liucougar]

(In [21766]) refs #3286: dojo.attr(node,'innerText',...) does not work across browsers use createTextNode instead

[bill]

(In [21780]) fix timeout (this test takes more than 1s), refs #3286.

[bill]

(In [21960]) regression from [21926], placeHolder was appearing in upper/left part of browser window, not inside TextBox?. Refs #10974, #3286.

[bill]

The hint text isn't showing up in IE6 until the field is focused and then blurred.

[bill]

Yah, it's not visible:

> dojo.position(dojo.query(".dijitPlaceHolder")[0])
{x:-2 y:-2 }
> dojo.marginBox(dojo.query(".dijitPlaceHolder")[0])
{l:0 t:0 }

Borrowing from _layoutHackIE7(), this makes it appear (as tested in the console from test_validate.html):

dojo.query(".dijitPlaceHolder")[0].style.filter = "1234"

[liucougar]

(In [22023]) fixes #3286: set style.filter="" on the created placeholder span would fix IE6 layout bug (only do this fix if we detect there is a layout problem)

[liucougar]

(In [22024]) refs #3286: set filter in css is enough to fix this IE6 bug also made sure this fix does work even if the textbox is initially hidden

[bill]

(In [22043]) Changes for easier testing of themes:

• change ComboBox? --> FilteringSelect, to be able to test display of validation icon
• added a few placeHolders (hint strings), specifically to DateTextBox and FilteringSelect
• add dialog with action bar (only currently working for Claro)
• add dialog with loading animation (that happens every time the dialog is opened)
• added "Dialogs" MenuBar item to make it easier to display Dialogs

Refs #10527, #3286, #11034.

[bill]

(In [22254]) remove stray </div>, refs #3286