This week’s snippet discusses two methods of adding items to a list.

First we create a list with some inline binding rules. For this example we are using a list with mode=”check” and mode=”radio” set. The mode sets the behaviour of the list, “check” to function as a list of checkboxes, “radio” to function as a list of radiobuttons.

<j:list id="lstExample1"
    mode     = "check"
    model    = "mdlData:question1"
    caption  = "text()"
    traverse = "item" />
<j:list id="lstExample2"
    mode     = "radio"
    model    = "mdlData:question2"
    caption  = "text()"
    traverse = "item" />

We can now add the model to our application:

<j:model id="mdlData">
    <questions>
        <question1>
            <choice>Football</choice>
            <choice>Basketball</choice>
            <choice>Hockey</choice>
            <choice>Baseball</choice>
            <choice>Swimming</choice>
            <choice>Skating</choice>
            <choice>Snowboarding</choice>
        </question1>

        <question2>
            <choice>Europe</choice>
            <choice>Africa</choice>
            <choice>North America</choice>
            <choice>South America</choice>
            <choice>Asia</choice>
            <choice>Middle East</choice>
            <choice>Oceanie</choice>
        </question2>
    </questions>
</j:model>

The first method
The first method involves a button that calls the add method. To call the add
method we need to setup an add action and hook it to the lists. The actions element contains rules which determines what happens when an action within a widget occurs:

<j:actions id="actChoice">
    <j:rename />
    <j:add>
        <choice />
    </j:add>
</j:actions>

<j:list actions="actChoice" ... />

Then we add the buttons:

<j:button onclick="lstExample1.add();">Add list1</j:button>
<j:button onclick="lstExample2.add();">Add list2</j:button>

The second method
The second method uses the “more” feature of the list. This method will show a button inside the list container that adds an item when pressed. It makes sure there are only items with a unique name added. You don’t need to add an add action to the list, more takes care of this. Add more to the list like this:

<j:list more="caption:add an item" ... />

And then you are done. Click here for an example of the first method and the second method.

—–

If you are new to Javeline Platform don’t hesitate to try it out. The new ajax.org website contains the downloads and reference guide which will get your started.