Skip to main content
Kinetic Community

Helper: CycleHelper

 

Helpers are essentially Java classes that can be used in JSP pages.  The CycleHelper is a core helper (meaning that it rarely, if ever be modified).  It includes helper methods to loop through a list of elements, and then start over again at the beginning.

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:

  1. SKIP_FIRST_CYCLE (1) - skips the first row in the cycle, and applied the first cycle element to the second row in the cycle.
  2. 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:

  1. SKIP_FIRST_CYCLE (1) - skips the first row in the cycle, and applied the first cycle element to the second row in the cycle.
  2. 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:

cycle.jpeg

reset()

Parameters:

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:

cycle2.jpeg