From e44a7e37b6c7b5961adaffc62b9042b8d442938e Mon Sep 17 00:00:00 2001 From: mensonge Date: Thu, 13 Nov 2008 09:49:11 +0000 Subject: New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f --- includes/js/dijit/tests/form/Form.html | 354 +++++++++++++++++ includes/js/dijit/tests/form/Form.js | 9 + includes/js/dijit/tests/form/images/Alabama.jpg | Bin 0 -> 4585 bytes includes/js/dijit/tests/form/test_Button.html | 286 ++++++++++++++ includes/js/dijit/tests/form/test_CheckBox.html | 127 ++++++ includes/js/dijit/tests/form/test_ComboBox.html | 289 ++++++++++++++ .../js/dijit/tests/form/test_ComboBox_destroy.html | 58 +++ includes/js/dijit/tests/form/test_DateTextBox.html | 156 ++++++++ .../js/dijit/tests/form/test_FilteringSelect.html | 296 ++++++++++++++ .../js/dijit/tests/form/test_Form_onsubmit.html | 87 +++++ includes/js/dijit/tests/form/test_MultiSelect.html | 138 +++++++ .../js/dijit/tests/form/test_SimpleTextarea.html | 62 +++ includes/js/dijit/tests/form/test_Slider.html | 208 ++++++++++ includes/js/dijit/tests/form/test_Spinner.html | 92 +++++ includes/js/dijit/tests/form/test_Textarea.html | 106 +++++ includes/js/dijit/tests/form/test_TimeTextBox.html | 143 +++++++ includes/js/dijit/tests/form/test_validate.html | 428 +++++++++++++++++++++ 17 files changed, 2839 insertions(+) create mode 100644 includes/js/dijit/tests/form/Form.html create mode 100644 includes/js/dijit/tests/form/Form.js create mode 100644 includes/js/dijit/tests/form/images/Alabama.jpg create mode 100644 includes/js/dijit/tests/form/test_Button.html create mode 100644 includes/js/dijit/tests/form/test_CheckBox.html create mode 100644 includes/js/dijit/tests/form/test_ComboBox.html create mode 100644 includes/js/dijit/tests/form/test_ComboBox_destroy.html create mode 100644 includes/js/dijit/tests/form/test_DateTextBox.html create mode 100644 includes/js/dijit/tests/form/test_FilteringSelect.html create mode 100644 includes/js/dijit/tests/form/test_Form_onsubmit.html create mode 100644 includes/js/dijit/tests/form/test_MultiSelect.html create mode 100644 includes/js/dijit/tests/form/test_SimpleTextarea.html create mode 100644 includes/js/dijit/tests/form/test_Slider.html create mode 100644 includes/js/dijit/tests/form/test_Spinner.html create mode 100644 includes/js/dijit/tests/form/test_Textarea.html create mode 100644 includes/js/dijit/tests/form/test_TimeTextBox.html create mode 100644 includes/js/dijit/tests/form/test_validate.html (limited to 'includes/js/dijit/tests/form') diff --git a/includes/js/dijit/tests/form/Form.html b/includes/js/dijit/tests/form/Form.html new file mode 100644 index 0000000..312399a --- /dev/null +++ b/includes/js/dijit/tests/form/Form.html @@ -0,0 +1,354 @@ + + + + + Form unit test + + + + + + + +

Form Widget Unit Test

+

+ The form widget takes data in a form and serializes/deserializes it, so + it can be submitted as a JSON string of nested objects. +

+
Currently only widgets are supported, not raw elements.
+ +
+ + + +

Just HTML text

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescriptionNameForm node/widget
DateTextBox inside contentpanefoo.bar.baz.quux +
+ +
+
Layoutcontainer +
+
DateTextBox 1available.from + +
DateTextBox 2available.to + +
ComboBoxplop.combo + +
CheckBox widgetcb2 + 1 + 2 + 3 + 4 +
Radio widgetr2 + 1 + 2 + 3 + 4 +
Multi-selectms1 + +
Hidden inputh1 + +
Auto-sizing textareat1 + +
Fixed size textareast1 + +
Editor widgetrichtext + +
File uploadfilename + +
+ + + + + +
+ + + + diff --git a/includes/js/dijit/tests/form/Form.js b/includes/js/dijit/tests/form/Form.js new file mode 100644 index 0000000..f0f6d8d --- /dev/null +++ b/includes/js/dijit/tests/form/Form.js @@ -0,0 +1,9 @@ +if(!dojo._hasResource["dijit.tests.form.Form"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests.form.Form"] = true; +dojo.provide("dijit.tests.form.Form"); + +if(dojo.isBrowser){ + doh.registerUrl("dijit.tests.form.Form", dojo.moduleUrl("dijit", "tests/form/Form.html")); +} + +} diff --git a/includes/js/dijit/tests/form/images/Alabama.jpg b/includes/js/dijit/tests/form/images/Alabama.jpg new file mode 100644 index 0000000..f2018e6 Binary files /dev/null and b/includes/js/dijit/tests/form/images/Alabama.jpg differ diff --git a/includes/js/dijit/tests/form/test_Button.html b/includes/js/dijit/tests/form/test_Button.html new file mode 100644 index 0000000..7c04f50 --- /dev/null +++ b/includes/js/dijit/tests/form/test_Button.html @@ -0,0 +1,286 @@ + + + + Dojo Button Widget Test + + + + + + + + + +

Dijit Button Test

+

Simple, drop down & combo buttons

+

+ Buttons can do an action, display a menu, or both: +

+
+ + tooltip on button +
+ Edit! +
+
Cut
+
Copy
+
Paste
+
+
+ Submenu + +
+
+
+
+ Color + +
+
+ Save + +
+ +
+
+

Buttons with no text label

+

Buttons have showLabel=false so text is not displayed. Should have title attribute displayed on mouse over

+
+ +
+ Color + +
+
+ Save + +
+
+
+

Toggle buttons

+

The button CSS as well as the icon CSS can change on toggle

+
+ + +
+
+

Sizing

+

Short button, tall buttons, big buttons, small buttons... + These buttons size to their content (just like <button>).

+
+ + + + +
+
+
+

Customized buttons

+

Dojo users can customize styles. Here's an example:

+ +
+ + + +
+
+

Toggling the display test

+

+ (Ticket #403) +

+
+ +
+ +
+

Programatically changing buttons

+

clicking the buttons below will change the buttons above

+ +
+ + + +
+

Button instantiated via javacript:

+
+ +

DropDownButton instantiated via javacript:

+ + + + + + + diff --git a/includes/js/dijit/tests/form/test_CheckBox.html b/includes/js/dijit/tests/form/test_CheckBox.html new file mode 100644 index 0000000..4358270 --- /dev/null +++ b/includes/js/dijit/tests/form/test_CheckBox.html @@ -0,0 +1,127 @@ + + + + CheckBox Widget Demo + + + + + + + + + +

Dijit CheckBox Test

+

+ Here are some checkboxes. Try clicking, and hovering, tabbing, and using the space bar to select: +

+ + +
+ + +
+ + +
+ + + "onChange" handler updates: [] +
+ + +
+ + +
+ + +
+
+ +
+ + + + + + + "onChange" handler updates: [] +
+

+ Here are some radio buttons. Try clicking, and hovering, tabbing, and arrowing +

+

+ Radio group #1: + + + + + + +

+

+ Radio group #2: (no default value, and has breaks)
+ +
+ +
+ +
+ (Note if using keyboard: tab to navigate, and use arrow or space to select) +

+

+ Radio group #3 (native radio buttons): + + + + + + +

+ +
+ + + + diff --git a/includes/js/dijit/tests/form/test_ComboBox.html b/includes/js/dijit/tests/form/test_ComboBox.html new file mode 100644 index 0000000..895a968 --- /dev/null +++ b/includes/js/dijit/tests/form/test_ComboBox.html @@ -0,0 +1,289 @@ + + + + Dojo ComboBox Widget Test + + + + + + + + + + +

Dojo ComboBox Widget Test

+

+A ComboBox is like a text <input> field (ie, you can input any value you want), +but it also has a list of suggested values that you can choose from. +The drop down list is filtered by the data you have already typed in. +

+
+ +

ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30

+ (200% Courier font): + +
onChange: + + + +
+ +
+ +
+ +

ComboBox #2: url, autoComplete=true:

+ (8pt font): + + Value: +
+ (150% font): + + Hey look, this one is kind of useful. +
+ +

ComboBox #3: initially disabled, url, autoComplete=false:

+ + + Value: +
+ +
+
+

ComboBox #4: url, autoComplete=false required=true:

+ + + Value: +
+

A ComboBox with no arrow

+ +
+

A combo created by createWidget

+ +
+

A ComboBox with an initial query. (Limits list to items with type = country.)

+ +
+ + + +
+

+This is some text below the ComboBoxes. It shouldn't get pushed out of the way when search results get returned. +also: adding a simple combo box to test IE bleed through problem: +

+ + +

Some tests:

+
    +
  1. Type in D - dropdown shows Delaware and District of columbia. [Would be nice if it bolded the D's in the dropdown list!]
    2. +
  2. Type in DX - input box shows DX and no dropdown.
    3. +
  3. Open dropdown, click an item, it selects and closes dropdown.
    4. +
  4. Click triangle icon - dropdown shows. Click it again - dropdown goes.
    5. +
  5. Check that you can type in more than required (e.g. alaba for alabama) and it still correctly shows alabama
    6. +
  6. Tab into the combo works, list should not apear.
    7. +
  7. Tab out of the combo works - closes dropdown and goes to next control (focus should not go to the dropdown because tabindex="-1").
    8. +
  8. Do the dropdown and click outside of it - the dropdown disappears.
    9. +
  9. Javascript disabled -> fallback to old style combo?
    10. +
  10. Can you paste in the start of a match? [no]
    11. +
  11. Backspace to start - dropdown shows all all items
    12. +
  12. Backspace deselects last character [Borked: currently you have to backspace twice]
    13. +
  13. Press down key to open dropdown
    14. +
  14. Down and up keys select previous/next in dropdown.
    15. +
  15. Non-alpha keys (F12, ctrl-c, whatever) should not affect dropdown.
    16. +
  16. Press down arrow to highlight an item, pressing enter selects it and closes dropdown.
    17. +
  17. Press down arrow to highlight an item, pressing space selects it and closes dropdown.
    18. +
  18. Check that pressing escape undoes the previous action and closes the dropdown
    19. +
  19. Check that pressing escape again clears the input box.
    20. +
  20. In IE, mouse scroll wheel scrolls through the list. Scrolls by 1 item per click even if user has set mouse to scroll more than 1 in mouse settings. Only scrolls if text input has focus (page scrolling works as normal otherwise)
    21. +
  21. In IE, dropdown list does not go behind the second combo (special code to manage this).
    22. +
  22. Check dropdown is aligned correctly with bottom of the text input
    23. +
  23. Probably should try the combo in a relative div or absolute div and see where the dropdown ends up. (Strongly suspect problems in this area in IE - boo)
    24. +
  24. Try repeatably droppingdown and closing the dropdown. Shouldnt get hung [sometimes flicks closed just after opening due to timers, but not a biggie]
    25. +
  25. Check that default selection of the text makes sense. e.g. text is selected after picking an item, on tabbing in to text input etc)
    26. +
  26. Check that dropdown is smooth [looks uggy on second keypress in FF - hides then shows]
    27. +
  27. Clear the field. Type in A and then tab *very quickly* and see if the results make sense (the dropdown is on a timer - searchTimer)
    28. +
  28. Clear the field and enter an invalid entry and tab out e.g. Qualude. Does that make sense given the combobox setup options?
    29. +
  29. (Add any other tests here)
    30. +
+
+ +
+ + diff --git a/includes/js/dijit/tests/form/test_ComboBox_destroy.html b/includes/js/dijit/tests/form/test_ComboBox_destroy.html new file mode 100644 index 0000000..0713b19 --- /dev/null +++ b/includes/js/dijit/tests/form/test_ComboBox_destroy.html @@ -0,0 +1,58 @@ + + + + Dojo ComboBox Widget Destruction Issue + + + + + + + + + +

Dojo ComboBox Widget Destruction Issue

+

+ ComboBox does not destroy itself properly, leading to a + JavaScript error. Could it have something to do with not disconnecting + events? +

+

+ Steps: +
    +
  1. Pick a state from the combo box below.
    2. +
  2. Click the "killit" button, which calls destroy on the widget.
    3. +
  3. Observe the JavaScript error.
    4. +
+

+
+ + +
+ + diff --git a/includes/js/dijit/tests/form/test_DateTextBox.html b/includes/js/dijit/tests/form/test_DateTextBox.html new file mode 100644 index 0000000..d36ac73 --- /dev/null +++ b/includes/js/dijit/tests/form/test_DateTextBox.html @@ -0,0 +1,156 @@ + + + + Test DateTextBox Widget + + + + + + + + + + +

Test DateTextBox Widget

+ +
+
+ + DateTextBox class, no attributes +
+
+ + onChange: +
+
+ + DateTextBox class, + Attributes: required="true", trim="true", constraints={min:'2004-01-01',max:'2006-12-31',formatLength:'long'}. Works for leap years +
+
+ + onChange: + + +
+
+ + DateTextBox class, + Attributes: lang="en-us", required="true", constraints={min:'2004-01-01',max:'2006-12-31'}. Works for leap years +
+
+ +
+
+ + DateTextBox class, + Attributes: lang="de-de", constraints={min:2004-01-01, max:2006-12-31}. Works for leap years +
+
+ +
+ +
+ + Date, overriding pattern with dd-MM-yyyy +
+
+ +
+ + + + + +
+ +
+
+ From: + To: +
+ +
+ + + +
+
+ + diff --git a/includes/js/dijit/tests/form/test_FilteringSelect.html b/includes/js/dijit/tests/form/test_FilteringSelect.html new file mode 100644 index 0000000..d40af13 --- /dev/null +++ b/includes/js/dijit/tests/form/test_FilteringSelect.html @@ -0,0 +1,296 @@ + + + + Dojo FilteringSelect Widget Test + + + + + + + + + + +

Dojo FilteringSelect Widget Test

+
+
+

The FilteringSelect widget is an enhanced version of HTML's <select> tag.

+

Similar features:

+ +

+ + +

Enhancements over plain HTML version:

+ +

+ +
+ +
+

FilteringSelect #1: inlined data, autoComplete=false:

+ + + onChange: + + +
+ +
+ +

FilteringSelect #2: url, autoComplete=true:

+ + + Value: + +

FilteringSelect #3: url, autoComplete=false:

+ + + Value: +
+

FilteringSelect #5: custom labelFunc (value in textbox should be lower case when onChange is called), autoComplete=true:

+ + +
+
+ +

FilteringSelect #7: Input method editor Chinese characters

+

Using an input method editor (see IME for Windows) try typing 阿 (a) or 把 (ba).

+ + +
+
+

FilteringSelect #8: Japanese

+

Try typing 東、西、北、南 (north, south, east west) and a few choices will pop up.

+ + + Value: +
+

FilteringSelect #9: No data

+

This FilteringSelect has no options to choose from. It should still load.

+ + +
+
+

FilteringSelect #10: hasDownArrow=false:

+ + +
+
+
+

FilteringSelect #11: deep data, initial query of type=country:

+ + +
+
+

FilteringSelect #12: special characters

+

The drop down list should be:

+ + + +
+
+ + +

+ this is some text below the combo boxes. It shouldn't get pushed out of + the way when search results get returned. also: adding a simple combo + box to test IE bleed through problem: +

+ + + + +
+ + diff --git a/includes/js/dijit/tests/form/test_Form_onsubmit.html b/includes/js/dijit/tests/form/test_Form_onsubmit.html new file mode 100644 index 0000000..d8b43fa --- /dev/null +++ b/includes/js/dijit/tests/form/test_Form_onsubmit.html @@ -0,0 +1,87 @@ + + + + + Form unit test + + + + + + +

Form Widget Unit Test

+
+

This form shouldn't submit, nor reset

+ + + +
+ +
+

This form shouldn't submit, nor reset

+ + + +
+ +
+

This form should submit and reset

+ + + +
+ +
+

This form should submit and reset

+ + + +
+ + diff --git a/includes/js/dijit/tests/form/test_MultiSelect.html b/includes/js/dijit/tests/form/test_MultiSelect.html new file mode 100644 index 0000000..9f03d80 --- /dev/null +++ b/includes/js/dijit/tests/form/test_MultiSelect.html @@ -0,0 +1,138 @@ + + + + Testing MultiSelect form widget | The Dojo Toolkit + + + + + + + + + + + +

dijit.form.MultiSelect:

+ +
+ + + + + + + + + + +

+ + + + + +
+ + + +

markup:

+ + + +

+ + + + diff --git a/includes/js/dijit/tests/form/test_SimpleTextarea.html b/includes/js/dijit/tests/form/test_SimpleTextarea.html new file mode 100644 index 0000000..9462447 --- /dev/null +++ b/includes/js/dijit/tests/form/test_SimpleTextarea.html @@ -0,0 +1,62 @@ + + + + Testing SimpleTextArea | The Dojo Toolkit + + + + + + + + + + + + +

SimpleTextarea

+ +

+ This is a simple text area that doesn't automatically size itself according to it's content. + It can be used inside layout containers. +

+ +

Plain textarea (rows=5, cols=50)

+ + +

In a BorderContainer

+ +
+ + + + + +
+ + diff --git a/includes/js/dijit/tests/form/test_Slider.html b/includes/js/dijit/tests/form/test_Slider.html new file mode 100644 index 0000000..f1d0442 --- /dev/null +++ b/includes/js/dijit/tests/form/test_Slider.html @@ -0,0 +1,208 @@ + + + + Dojo Slider Widget Demo + + + + + + + + + + +

Slider

+ Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider. +
+ +
+
initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately
+ +
+
    +
    +
    +
      +
    1. lowest
      2. +
    2. normal
      3. +
    3. highest
      4. +
    +
    + + Slider1 Value: +
    + + +
    +
    initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away
    +
    +
      +
    1. 0
      2. +
    2. 100
      3. +
    +
    +
    +
      +
      + Slider2 Value: +

      Fancy HTML labels (no slide animation):

      +
      +
      +
        +

      1. small
        2. +

      2. medium
        3. +

      3. large
        4. +
      +
      + +

      Standalone ruler example:

      + +
      +
      +
      +
      +
      +
        +
      1. +
      2. 1
        3. +
      3. 2
        4. +
      +
      + +

      horizontal, with buttons, disabled (to show styling):

      + +
      +
        +
        +
        +
          +
        1. lowest
          2. +
        2. normal
          3. +
        3. highest
          4. +
        +
        + + +

        Completely Programatic VerticalSlider and VerticalRule

        +

        min:1000, max:3000, 11 discrete values, no animation

        + +
        + Programmatic Value: + + + +
        + + +
        + +
        + + diff --git a/includes/js/dijit/tests/form/test_Spinner.html b/includes/js/dijit/tests/form/test_Spinner.html new file mode 100644 index 0000000..e9af53c --- /dev/null +++ b/includes/js/dijit/tests/form/test_Spinner.html @@ -0,0 +1,92 @@ + + + + Dojo Spinner Widget Test + + + + + + + + + + +

        Dijit Spinner Test

        + Try typing values, and use the up/down arrow keys and/or the arrow push + buttons to spin +
        +
        +

        number spinner

        +
        + initial value=900, no delta specified, no min specified, max=1550, onChange captured
        +
        + + onChange: +
        +
        + initial value=1000, delta=10, min=9 max=1550
        + + +
        +
        + initial value not specified, delta not specified, min not specified, max not specified, signed not specified, separator not specified
        + [verify no line break just after this text] + + [verify no line break just before this text] +
        +
        + Move the cursor left and right within the input field to see the effect on the spinner. +
        + initial value=+1.0, delta=0.1, min=-10.9, max=155, places=1, maxLength=20
        +
        + +
        + + +
        + + +
        + +
        + + diff --git a/includes/js/dijit/tests/form/test_Textarea.html b/includes/js/dijit/tests/form/test_Textarea.html new file mode 100644 index 0000000..c885aa6 --- /dev/null +++ b/includes/js/dijit/tests/form/test_Textarea.html @@ -0,0 +1,106 @@ + + + + Dojo Textarea Widget Demo + + + + + + + + + +

        Test Auto-sizing Textarea Widget

        + + +
        + +
        + +
        this is a very simple resizable text area
        + onChange: +
        + + + + +
        + + +
        + + +
        + +
        + + diff --git a/includes/js/dijit/tests/form/test_TimeTextBox.html b/includes/js/dijit/tests/form/test_TimeTextBox.html new file mode 100644 index 0000000..f68a28d --- /dev/null +++ b/includes/js/dijit/tests/form/test_TimeTextBox.html @@ -0,0 +1,143 @@ + + + + Test TimeTextBox Widget + + + + + + + + + + +

        Test TimeTextBox Widget

        + +
        + +
        + + TimeTextBox class, + Attributes: {formatLength:'medium'} +
        +
        + + onChange: +
        + +
        + + TimeTextBox class, + Attributes: {formatLength:'short'} +
        +
        + +
        + +
        + + TimeTextBox class, + Attributes: {timePattern:'h:mm:ss a'} +
        +
        + +
        + +
        + + TimeTextBox class, + Attributes: {timePattern:'HH:mm:ss'} +
        +
        + +
        + +
        + + TimeTextBox class, + Attributes: {timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'} +
        +
        + +
        + + + +
        + + +
        + +
        + + diff --git a/includes/js/dijit/tests/form/test_validate.html b/includes/js/dijit/tests/form/test_validate.html new file mode 100644 index 0000000..f6d1cde --- /dev/null +++ b/includes/js/dijit/tests/form/test_validate.html @@ -0,0 +1,428 @@ + + + + Test TextBox Validation Widgets + + + + + + + + + + +

        Dijit Validation Widgets

        + +
        + +
        + + TextBox class, tabIndex=2, Attributes: {trim: true, propercase: true, style: 'width:700px'}, First letter of each word is upper case. +
        +
        + +
        onChange: +
        + +
        + + TextBox class, Attributes: {trim: true, uppercase: true, class: 'verylong'}, all letters converted to upper case. +
        +
        + +
        + +
        + + NumberTextBox class, tabIndex=1, Attributes: {trim: true}, no initial value specified, tooltipPosition=[above, below] +
        +
        + +
        + +
        + + ValidationTextBox class, + Attributes: {lowercase: true, required: true, class: verylong, style: font-size: 15pt;}. Displays a prompt message if field is missing. +
        +
        + +
        + +
        + + IntegerTextBox class, + Attributes: {required: true, min:-20000, max:+20000 }, Enter feet above sea level with a sign. +
        +
        + + onChange: +
        + + + +
        + + CurrencyTextBox class, + Attributes: {fractional: true}. Enter whole and cents. Currency symbol is optional. +
        + +
        + USD +  onChange: +
        + +
        + euro currency (local format) fractional part is optional: + EUR + + + +
        + + +
        + euro currency (fixed lang: de-de) programmatically created, fractional part is optional: EUR +
        + + + + +
        + + RegexpTextBox class, + Attributes: {required: true} +
        +
        + +
        + +
        + + (just a test that type attribute is obeyed) +
        +
        + +
        + +
        + + value: null should show up as empty +
        +
        + +
        + + + +
        + + a test that readOnly is understood +
        +
        + + + +
        + + + +
        + + +
        + +
        +

        Tooltip positioning

        +

        + These buttons switch the positions searched to try to place the validation error tooltips. + Note that setting tooltip positioning to "above" or "below" is dangerous if + you have a node with a dropdown, but the drop down might overlap the tooltip. +

        + + + + -- cgit v1.2.3-54-g00ecf