Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#8622 closed enhancement (fixed)

[cla][patch] List Input (like "to" field on hotmail)

Reported by: iDo Owned by: Nathan Toone
Priority: high Milestone: 1.4
Component: DojoX Form Version: 1.2.3
Keywords: Cc:
Blocked By: Blocking:

Description

When user enter a value, automatically parse value and generate a list

You can see demo at http://ben.dojotoolkit-fr.org/test_ListInput.html

Attachments (2)

inputlist.zip (4.8 KB) - added by iDo 11 years ago.
list can now be created with or without input box
listinput.zip (8.8 KB) - added by iDo 10 years ago.
new version with all update

Download all attachments as: .zip

Change History (13)

comment:1 Changed 11 years ago by bill

Component: GeneralDojoX Form
Owner: changed from anonymous to dante

Hmm, it's similar to MultiComboBox although with X's to delete each value. Maybe they should be combined into one widget.

comment:2 Changed 11 years ago by iDo

@dante : I will look this. But I'm not sure it's possible to do this without loosing simplicity

Changed 11 years ago by iDo

Attachment: inputlist.zip added

list can now be created with or without input box

comment:3 Changed 11 years ago by dante

Owner: changed from dante to Nathan Toone

I like it, but not sure DojoX is best for this just yet? The styling works, but should make a best attempt to reuse theme icons and overall needs some polish. I'd love for it to be in dojoc for the time being, but don't want to ship anything new without doc pages and whatnot, so that'd all have to be in place.

comment:4 Changed 11 years ago by Nathan Toone

Milestone: tbd1.4

Probably do this post 1.3....

comment:5 Changed 11 years ago by Nathan Toone

I like this - a couple of suggestions to work on the polish, however:

1 - in "Demo 1", add the value onBlur (currently it's on pressing <enter>). 2 - in "Demo 1", it should have more obvious text box when the text box is focused (perhaps make the entire "gray" area look more like a text box itself). 3 - mechanism for editing existing values 4 - pressing <backspace> with no elements gives a javascript error ("item is null") 5 - should reuse the theme-based "close" icons (as was mentioned above)

comment:6 in reply to:  5 Changed 11 years ago by iDo

Hi, I've just released the component with all of these improvements. Thanks for the feedback :)

Replying to toonetown:

I like this - a couple of suggestions to work on the polish, however:

1 - in "Demo 1", add the value onBlur (currently it's on pressing <enter>). 2 - in "Demo 1", it should have more obvious text box when the text box is focused (perhaps make the entire "gray" area look more like a text box itself). 3 - mechanism for editing existing values 4 - pressing <backspace> with no elements gives a javascript error ("item is null") 5 - should reuse the theme-based "close" icons (as was mentioned above)

comment:7 Changed 10 years ago by Nathan Toone

Looking better! :)

Next round of suggestions:

  1. I would suggest naming the widget "ListInput?" - instead of "SimpleManageableList?"
  2. Would it be too much trouble to use English for the test case? I think it's a bit more universally-understood by most dojo developers than French.
  3. We try to have all the dijit (and dojox) form widgets work like "regular" widgets as well. It would be really nice if there were a test case that had an actual form, with a submit button that submitted the form with a "GET" request - so we can see that the widget will post values back to the server correctly.
  4. Perhaps rework the default colors of the items...red, to me, means "Error" - maybe blue or something...I know this can be overridden in the theme - but the default should probably not be red.
  5. Along those lines, the widget should be fully functional and usable if it doesn't use any theme at all...and it should probably ship with at least nihilo, tundra, and soria theming. I would suggest something like using shades of gray for the box when not using any theme, and then picking theme-appropriate coloring for the three themes and including those colors in your css file.
  6. Final styling suggestion: the empty item currently looks disabled, or like a non-editable gray div or something. It would be nice to take some of the stylings from dijit.form.TextBox?, for example, so that it looks a bit more like some kind of input widget.
  7. Documentation! Before we are able to commit any new features into the dojo codebase, we try to have documentation of that functionality written up at http://docs.dojocampus.org - would you please go to http://docs.dojocampus.org/dojox/form/ListInput and create a new page for it documenting it for others to be able to use. This documentation is geared more towards people who would put your widget on their page - not so much geared towards developers...so it's a bit different than the API documentation that is done inline in your widget. You can look at other pages, such as http://docs.dojocampus.org/dijit/form/TextBox or http://docs.dojocampus.org/dijit/form/MultiSelect (or really, any other documentation pages on http://docs.dojocampus.org ) for examples and templates. You just use your dojo account to log in to that site.

And some possible "Future features" - would be nice to have if they are easy to do, but they could come later as the widget gets enhanced:

  1. The backspace key deletes an already-exiting item...it would be nice if the arrow keys would move between items. That is, if you have three items, and your cursor is after the third one, pressing the left arrow would move your cursor between the second and third items.
  2. The ability to specify a "separator" character. Currently, they are comma-separated, but I could see someone wanting to specify <space> or semicolon (;) as separators.
  3. The ability to apply a validation, probably in the form of a regex, to each individual item. For example, in the case of email addresses, it would be nice to apply dojox.validate.isEmailAddress to each item in the list - if one of them fails, don't turn it into a "box" - so that the person entering in the values can know that their values are validated.

Thanks for the great widget, BTW! These are all really quite minor things that I think could get it to be a first-class widget. If you have any questions, you can email me at my dojotoolkit.org address (my trac name at dojotoolkit dot org)

Changed 10 years ago by iDo

Attachment: listinput.zip added

new version with all update

comment:8 Changed 10 years ago by iDo

Hi :) The component is up to date and i have written - a short - documentation on http://docs.dojocampus.org/dojox/form/ListInput

comment:9 Changed 10 years ago by Nathan Toone

Awesome! I'll take a look at it a bit later today. Thanks.

comment:10 Changed 10 years ago by Nathan Toone

Resolution: fixed
Status: newclosed

Checked in at revision [18833] - sorry I missed checking this in earlier.

A couple of issues that probably should be fixed next (you can log them as separate issues if you like): 1 - an empty edit box shows up at the end of the list if you move back between previously-entered widgets 2 - the "validation failed" notification depends on color alone - it is not accessible (there needs to be some kind of icon or something) 3 - At least in FF3, it looked like the remove button was mis-aligned a bit. 4 - I haven't tested in all browsers - but that might be a good idea for finding more issues. 5 - Flesh out the documentation on dojocampus.org a bit

Nice work! Thanks!

comment:11 Changed 10 years ago by ttilley

Perhaps we should combine efforts? I have a themed tokenized input with similar behavior: http://kayla.zomg.us/dojo/ftow/ui/tests/test_TokenizedTextBox.html

Note: See TracTickets for help on using tickets.