Reputation: 3509
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> </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
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