Opened 13 years ago

Closed 13 years ago

Last modified 12 years ago

#1262 closed enhancement (fixed)

[patch][cla] RepeaterContainer - implemented

Reported by: joose@… Owned by: dylan
Priority: high Milestone:
Component: Widgets Version: 0.3
Keywords: Form, Repeater, RepeaterContainer Cc: joose@…
Blocked By: Blocking:

Description

I was working on my FormContainer? and I got this idea, which would perhaps make creating Forms easier in dojo in some cases.

Let's call it Repeater for now.

Here is example form: It's a form of a person and it can include it's children in it. So it will have basic info like, name and age.. but then it will also have 0->n children info in it, including, say name and age.

What would developer want, well first of all, "Add new child" button which would add new child to form. And perhaps also "delete child" button to delete some child. And also what would be nice to have "move up/down" buttons. And after that, it would be super cool to just "DnD" those rows to right places. Ok, there is more than few lines to code.

Here is where repeater would come to the rescue. Idea would be something like this:

HTML:

<tr dojoType="Repeater" id="myRepeater" name="children">
  <td>Name:</td><td><input name="name" type="text" /></td>
  <td>Age:</td><td><input name="age" type="text" /></td>
  <td>[image buttons for delete/move up/move down]</td>
</tr>
 <tr>
   <input type="Add new child" name="myChildCreator" />
 </tr>

Javascript:

 var myRepeater=dojo.widget.byId("myRepeater");
 var myRepeaterAddButton=dojo.byId("myChildCreator");
 dojo.event.connect(myRepeaterAddButton,"onClick",myRepeater,"addRow");

Result :

<tr>
  <td>Name:</td><td><input name="children.0.name" type="text" /></td>
  <td>Age:</td><td><input name="children.0.age" type="text" /></td>
  <td>[image buttons for delete/move up/move down]</td>
</tr>
<tr>
  <td>Name:</td><td><input name="children.1.name" type="text" /></td>
  <td>Age:</td><td><input name="children.1.age" type="text" /></td>
  <td>[image buttons for delete/move up/move down]</td>
</tr>
 <tr>
   <input type="Add new child" name="myChildCreator" />
 </tr>

and for more complex stuff, this Javascript:

myFunction: function() {
  ...
  return myHTMLForNewRow;
},
 ...
 var myRepeater=dojo.widget.byId("myRepeater");
 var myRepeaterAddButton=dojo.byId("myChildCreator");
 dojo.event.connect(myRepeater,"addRow",this,"myFunction");
 dojo.event.connect(myRepeaterAddButton,"onClick",myRepeater,"addRow");

And adding info through javascrpit would be easy too:

 var myObject={name: "John Doe", age: "99"};
 dojo.widget.byId("myRepeater").addRow(myObject);

This way it would be easier to create those kind of "repeaters".. Problematic things might be FormWidgets?, like DropDownDatePicker?.

Attachments (7)

RepeaterContainer.js (3.8 KB) - added by joose@… 13 years ago.
RepeaterContainer?
RepeaterContainer.2.js (4.0 KB) - added by joose@… 13 years ago.
Fixed a bug when creating row was done asynchronously
RepeaterContainer.3.js (4.3 KB) - added by joose@… 13 years ago.
RepeaterContainer? made synchronous and dnd optional and index-format is self assigned
RepeaterContainer.4.js (4.1 KB) - added by joose@… 13 years ago.
Fixed a bug and changed it to work in latest trunk without warnings
RepeaterContainer.5.js (4.1 KB) - added by joose@… 13 years ago.
Fixed bugs and made it work with RepeaterContainer? and support for latest trunk syntax.
patch (3.7 KB) - added by joose@… 13 years ago.
Makes small changes. k<3 -> k<elem.length and attribute index renamed to pattern to make it more descriptive
patch.2 (2.3 KB) - added by joose@… 13 years ago.
Makes small changes. k<3 -> k<elem.length and attribute index renamed to pattern to make it more descriptive (now with tabs and not spaces)

Download all attachments as: .zip

Change History (19)

comment:1 Changed 13 years ago by joose@…

Actually, the names of the input-elements should be in form of "children[INDEX]" for easy parsing and perhaps even support for some program languages.

Like:

  <td>Name:</td><td><input name="children[1].name" type="text" /></td>

comment:2 Changed 13 years ago by dylan

Milestone: 0.6
Version: 0.3

comment:3 Changed 13 years ago by joose@…

Ok, so I managed to make somewhat working version. Here is test cases: http://joose.iki.fi/dojo/test-repeater.html (programmaticaly, more complex example too) http://joose.iki.fi/dojo/test-repeater2.html (in html-code)

Source code for this can be found from: http://joose.iki.fi/dojo/trunk/src/widget/RepeaterContainer.js

Current featurus:

- You can use repeatercontainer programmaticaly or by markup
- You can easily bind events to some row-object: ie. <input type="button" rowFunction="onButtonClick" />
- You can easily add predefined actions to some objects (like delete): ie. <input type="button" rowAction="delete" />
- You can DnD rows to change their place/position
- You can DnD rows away from list which is same as delete row

Changed 13 years ago by joose@…

Attachment: RepeaterContainer.js added

comment:4 Changed 13 years ago by joose@…

Keywords: RepeaterContainer added
Summary: Idea for a functionality/widget - RepeaterRepeaterContainer - implemented

comment:5 Changed 13 years ago by joose@…

Milestone: 0.60.5

Changed 13 years ago by joose@…

Attachment: RepeaterContainer.2.js added

Fixed a bug when creating row was done asynchronously

Changed 13 years ago by joose@…

Attachment: RepeaterContainer.3.js added

RepeaterContainer? made synchronous and dnd optional and index-format is self assigned

comment:6 Changed 13 years ago by joose@…

Milestone: 0.50.4

Fixed repeater more:

- creating new row is now synchronous and onAddRow event is called
- index-format is user definable.. so you could have like foo.%{index}.name or foo[%{index}].name or what ever you want
- Dnd now is optional

comment:7 Changed 13 years ago by joose@…

Oh yes, and new format is like this:

<ol dojoType="RepeaterContainer" useDnd="true" index="child.%{index}">
 <li><input type="text" name="child.%{index}.name" /></li>
</ol>

Changed 13 years ago by joose@…

Attachment: RepeaterContainer.4.js added

Fixed a bug and changed it to work in latest trunk without warnings

Changed 13 years ago by joose@…

Attachment: RepeaterContainer.5.js added

Fixed bugs and made it work with RepeaterContainer? and support for latest trunk syntax.

comment:8 Changed 13 years ago by dylan

Owner: changed from bill to dylan
Status: newassigned
Summary: RepeaterContainer - implemented[patch][cla] RepeaterContainer - implemented

comment:9 Changed 13 years ago by dylan

(In [5851]) references #1262, joose's RepeaterContainer? widget, first check-in... we need docs and a testcase, so marking experimental for now

comment:10 Changed 13 years ago by dylan

Resolution: fixed
Status: assignedclosed

Changed 13 years ago by joose@…

Attachment: patch added

Makes small changes. k<3 -> k<elem.length and attribute index renamed to pattern to make it more descriptive

Changed 13 years ago by joose@…

Attachment: patch.2 added

Makes small changes. k<3 -> k<elem.length and attribute index renamed to pattern to make it more descriptive (now with tabs and not spaces)

comment:11 Changed 13 years ago by tk

patch applied r5894

comment:12 Changed 12 years ago by (none)

Milestone: 0.4

Milestone 0.4 deleted

Note: See TracTickets for help on using tickets.