[patch][cla] RepeaterContainer - implemented

[[email protected]…]

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?.

[[email protected]…]

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>

[[email protected]…]

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

[[email protected]…]

RepeaterContainer?

[[email protected]…]

Fixed a bug when creating row was done asynchronously

[[email protected]…]

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

[[email protected]…]

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

[[email protected]…]

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>

[[email protected]…]

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

[[email protected]…]

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

[dylan]

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

[[email protected]…]

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

[[email protected]…]

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)

[tk]

patch applied r5894

[(none)]

Milestone 0.4 deleted