How to make Struts radio tag create a vertical list of radio buttons

Question

I'm using a struts radio tag that is being populated with a list of objects that have two fields:

class MyAction {
     List<MyObject> myList;
     String selectedId
     public String execute() {
         ...
         myList = new ArrayList<MyObject>();
         myList.add(new MyObject("1","first object");
         myList.add(new MyObject("2","second object");
         myList.add(new MyObject("3","second object");
         ...
     }

     // Getters and Setters for myList & selectedId
     ...
}

class MyObject {
    String id;
    String name;

    MyObject(String id, String name) {
         this.id = id;
         this.name = name;
    }
    // Getters and Setters for id & name
    ...
}

Here's what I was using on my page to display the list of radio buttons

<s:radio key="selectedId" list="myList" listKey="id" listValue="name"/>

However, this yields a horizontal list of radio buttons. I tried adding a css style to them:

<style>
    .vertical input { display: block; }
</style>

But this causes the labels and the radio buttons to show up on separate lines as well, instead of the radio button and label on the same line:

first object

second object

third object

what I want is:

first object

second object

third object

Solution 1

its actually simple, i mean use theme simple :)

<s:iterator value="myList"> 
  <s:radio theme="simple" name="someNameToSubmit" list="#{id:name}"/><br>
</s:iterator> 

This will make name as a label and id as the property to submit

Solution 2

after some googling around a bit... I found a few solutions:

1. Modify extend the theme and modify the struts FTL for radio buttons: Instructions here. This seemed overkill for me - or at least I'm too lazy for that :)

2. Use an iterator tag, iterate over each list item, and output one radio button and line break for each list element. Answer came from here

I chose option two (because I'm lazy primarily), although option one would make for a good exercise.

Here's what my struts tag looks like now:

<s:iterator value="myList"> 
    <s:radio key="selectedId" list="{myObject}" listKey="id" listValue="name"/><br/> 
</s:iterator> 

So the iterator works on a List, so you set the list attribute of the radio tag to be a list of containing only the current myObject. The listKey and listValue are then myObject.id and myObject.name

Solution 3

I have a simple solution. In the list, add <br> to each item such as,

first object <br> 

It works though looks like a hack.

Comments

[plainjimbo]

Looks almost like my solution. A couple questions (I'm new to struts)... What does the "simple" theme do? What does the "#" do in the list attribute. I think I understand the "{}" operator.

[Anupam]

@James Reed :THe simple theme will remove the layout of the struts2 tag and it will behave like a simple HTML tag e.g. when you use <s:form> tag,struts2 adds a table around the form with class "wwFormTable".You can see this by looking at the source of the jsp page.Applying simple theme to this form will remove that table code.In our case the radio grouping done by struts2 will be removed and the radio tags will behave as the simple HTML radios.The "#" will make id and name a key-value pair somewhat similar to a hash table