Kevin
Kevin

Reputation: 3509

JSF select many check box with Rich faces repeat/alignment

I am trying to create a custom Time chart where an activity can be toggled on or off for a specific time.

What I have right now is a table which looks like the following

names | Time1|time2|time3|time4|
______________________________
name1 | box box box box box box 
name2 | box box box box box box

what I want is the boxes to be correctly aligned with the corresponding time. So I wonder if you can break the selectManyCheckBoxes into different Columns?

where the code is

<table>
                        <tr>
                            <th>&nbsp;</th>
                            <th>
                                <table class="times">
                                    <tr>
                                        <td>12:00 AM</td>
                                        <td>01:00 AM</td>
                                        <td>02:00 AM</td>
                                        <td>03:00 AM</td>
                                        <td>04:00 AM</td>
                                        <td>05:00 AM</td>
                                        <td>06:00 AM</td>
                                        <td>07:00 AM</td>
                                        <td>08:00 AM</td>
                                        <td>09:00 AM</td>
                                        <td>10:00 AM</td>
                                        <td>11:00 AM</td>
                                        <td>12:00 PM</td>
                                        <td>01:00 PM</td>
                                        <td>02:00 PM</td>
                                        <td>03:00 PM</td>
                                        <td>04:00 PM</td>
                                        <td>05:00 PM</td>
                                        <td>06:00 PM</td>
                                        <td>07:00 PM</td>
                                        <td>08:00 PM</td>
                                        <td>09:00 PM</td>
                                        <td>10:00 PM</td>
                                        <td>11:00 PM</td>
                                    </tr>
                                </table>
                            </th>
                        </tr>
                        <a4j:repeat value="#{scheduleNames}" var="scheduleName">
                            <tr>
                                <td>
                                    <h:outputText value="#{scheduleName}" />
                                </td>
                                <td>
                                    <h:selectManyCheckbox styleClass="styledGroup" value="#{schedules[scheduleName]}">
                                        <f:selectItem itemLabel="12:00 AM" itemValue="0" />
                                        <f:selectItem itemLabel="01:00 AM" itemValue="1" />
                                        <f:selectItem itemLabel="02:00 AM" itemValue="2" />
                                        <f:selectItem itemLabel="03:00 AM" itemValue="3" />
                                        <f:selectItem itemLabel="04:00 AM" itemValue="4" />
                                        <f:selectItem itemLabel="05:00 AM" itemValue="5" />
                                        <f:selectItem itemLabel="06:00 AM" itemValue="6" />
                                        <f:selectItem itemLabel="07:00 AM" itemValue="7" />
                                        <f:selectItem itemLabel="08:00 AM" itemValue="8" />
                                        <f:selectItem itemLabel="09:00 AM" itemValue="9" />
                                        <f:selectItem itemLabel="10:00 AM" itemValue="10" />
                                        <f:selectItem itemLabel="11:00 AM" itemValue="11" />
                                        <f:selectItem itemLabel="12:00 PM" itemValue="12" />
                                        <f:selectItem itemLabel="01:00 PM" itemValue="13" />
                                        <f:selectItem itemLabel="02:00 PM" itemValue="14" />
                                        <f:selectItem itemLabel="03:00 PM" itemValue="15" />
                                        <f:selectItem itemLabel="04:00 PM" itemValue="16" />
                                        <f:selectItem itemLabel="05:00 PM" itemValue="17" />
                                        <f:selectItem itemLabel="06:00 PM" itemValue="18" />
                                        <f:selectItem itemLabel="07:00 PM" itemValue="19" />
                                        <f:selectItem itemLabel="08:00 PM" itemValue="20" />
                                        <f:selectItem itemLabel="09:00 PM" itemValue="21" />
                                        <f:selectItem itemLabel="10:00 PM" itemValue="22" />
                                        <f:selectItem itemLabel="11:00 PM" itemValue="23" />
                                    </h:selectManyCheckbox>
                                </td>
                            </tr>
                        </a4j:repeat>
                    </table>

and schedule is a Map<String, List<Integer>>.

Upvotes: 1

Views: 3506

Answers (1)

BalusC
BalusC

Reputation: 1108632

The <h:selectManyCheckbox> renders by itself a <table>. So you end up with another <table> in a single <td> instead of having all items in separate <td>s.

Use <h:selectBooleanCheckbox> instead. First change Map<String, List<Integer>> property type to Map<String, Boolean[]> (and make sure that you prepare it with new Boolean[24]!). Then change the view as follows:

<td><label><h:selectBooleanCheckbox value="#{schedules[scheduleName][0]}" /> 12:00AM</label></td>
<td><label><h:selectBooleanCheckbox value="#{schedules[scheduleName][1]}" /> 13:00AM</label></td>
<td><label><h:selectBooleanCheckbox value="#{schedules[scheduleName][2]}" /> 14:00AM</label></td>
<td><label><h:selectBooleanCheckbox value="#{schedules[scheduleName][3]}" /> 15:00AM</label></td>
...

A List<Integer> is unsuitable because the value of <h:selectBooleanCheckbox> must be a Boolean. A List<Boolean> is clumsy because you need to fill it with 24 Boolean.FALSE entries beforehand to prevent ArrayIndexOutOfBounds problems. So, a Boolean[] should do.

schedules.put(scheduleName, new Boolean[24]);
// ...

and you can postprocess it back to List<Integer> as follows:

Boolean[] checkedHours = schedules.get(scheduleName);
List<Integer> hours = new ArrayList<Integer>();

for (int i = 0; i < checkedHours.length; i++) {
    if (checkedHours[i]) {
        hours.add(i);
    }
}

Upvotes: 1

Related Questions