Helper: CycleHelper
Uses
A common use of the cycle helper is to provide zebra striping on html tables or list elements. Zebra striping means that each table row or list item will alternate backgrounds, typically between a lighter and darker shade. This makes it easier to associate data with the specific row or item.
Another use could be to apply a different class name to columns or tabs.
Constructors
CycleHelper(cycles)
Parameters: String[]
Creates a new instance of the CycleHelper, setting the cycle values without any special treatment of the first row.
value - a String[] containing the values for each cycle iteration.
Example
Create a new CycleHelper that will be used to apply a class to a list item:
CycleHelper cycleHelper = new CycleHelper(new String[]{"odd", "even"});
CycleHelper(cycles, options)
Parameters: String[], int
Creates a new instance of the CycleHelper, setting the cycle values and any options to specifically treat the first row differently than the other rows.
value - a String[] containing the values for each cycle iteration.
options - an integer value indicating the desired option. Currently there are two supported options:
- SKIP_FIRST_CYCLE (1) - skips the first row in the cycle, and applied the first cycle element to the second row in the cycle.
- ONLY_FIRST_CYCLE (2) - applies the first cycle element to only the first row in the cycle. All other rows are skipped.
Example
Create a new CycleHelper that applies the cycle only to the first row:
CycleHelper cycleHelper = new CycleHelper(new String[]{"first"}, CycleHelper.ONLY_FIRST_CYCLE);
Example
Create a new CycleHelper that skips the first row, possibly because the first row is a header row:
CycleHelper cycleHelper = new CycleHelper(new String[]{"odd", "even"}, CycleHelper.SKIP_FIRST_CYCLE);
CycleHelper(value, options)
Parameters: String, int
Creates a new instance of the CycleHelper, setting a single cycle value and any options to specifically treat the first row differently than the other rows.
value - the value to use for each cycle iteration. An example would be: "closedRequest". This could be used to set the class name of each iteration of a collection representing closed user requests.
options - an integer value indicating the desired option. Currently there are two supported options:
- SKIP_FIRST_CYCLE (1) - skips the first row in the cycle, and applied the first cycle element to the second row in the cycle.
- ONLY_FIRST_CYCLE (2) - applies the first cycle element to only the first row in the cycle. All other rows are skipped.
Example
Create a new CycleHelper that applies the cycle only to the first row:
CycleHelper cycleHelper = new CycleHelper("first", CycleHelper.ONLY_FIRST_CYCLE);
Example
Create a new CycleHelper that skips the first row, possibly because the first row is a header row:
CycleHelper cycleHelper = new CycleHelper("after-first", CycleHelper.SKIP_FIRST_CYCLE);
Methods
cycle()
Parameters:
Returns: String
Calculates the next value in the options array, and returns the value. If the last value is currently used, then the cycle helper automatically resets and uses the first index value.
Example
This example uses a cycle helper to apply alternating odd/even class names to list item elements. The example creates a CycleHelper instance with two class names "odd" and "even". Then it an unordered list with five list items, applying class names that alternate between odd and even to each list item element.
<%
CycleHelper cycleHelper = new CycleHelper(new String[] {"odd", "even"});
String cycleValue;
%>
<ul>
<% for (int i = 0; i < 5; i++) {
cycleValue = cycleHelper.cycle(); %>
<li class="<%=cycleValue%>"><%=cycleValue%></li>
<% } %>
</ul>
This code produces the following generated HTML:
<DOCTYPE html>
<html>
<head>
<style type="text/css">
.odd { background-color: #fefefe; }
.even { background-color: #efefef; }
</style>
</head>
<body id='body'>
<ul>
<li class="odd">odd</li>
<li class="even">even</li>
<li class="odd">odd</li>
<li class="even">even</li>
<li class="odd">odd</li>
</ul>
</body>
</html>
The rendered HTML would look something like the following:
reset()
Returns:
Sets the current index to 0 to restart at the first row.
Example
This example uses a cycle helper to apply alternating odd/even class names to two lists. To ensure the cycle helper starts at the first value on the second list, the reset() method is called before starting the second list.
<%
CycleHelper cycleHelper = new CycleHelper(new String[] {"odd", "even"});
String cycleValue;
%>
<ul class="firstList">
<% for (int i = 0; i < 5; i++) {
cycleValue = cycleHelper.cycle(); %>
<li class="<%=cycleValue%>"><%=cycleValue%></li>
<% } %>
</ul>
<%
// reset the cycle helper to ensure it starts at the beginning
cycleHelper.reset();
%>
<ul class="secondList">
<% for (int i = 0; i < 5; i++) {
cycleValue = cycleHelper.cycle(); %>
<li class="<%=cycleValue%>"><%=cycleValue%></li>
<% } %>
</ul>
This code produces the following generated HTML:
<DOCTYPE html>
<html>
<head>
<style type="text/css">
.firstList .odd { background-color: #eeeeee; }
.firstList .even { background-color: #ffeeff; }
.secondList .odd { background-color: #eeeeff; }
.secondList .even { background-color: #eeffee; }
</style>
</head>
<body id='body'>
<ul class="firstList">
<li class="odd">odd</li>
<li class="even">even</li>
<li class="odd">odd</li>
<li class="even">even</li>
<li class="odd">odd</li>
</ul>
<ul class="SecondList">
<li class="odd">odd</li>
<li class="even">even</li>
<li class="odd">odd</li>
<li class="even">even</li>
<li class="odd">odd</li>
</ul></body>
</html>
The rendered HTML would look something like the following:
