Introduction

There are many use cases that involve a multi-step workflow, such as online shopping that consists of steps like selecting goods, filling out delivery information and completing the payment. In ZK 9, we are glad to introduce a new component – Stepbar that facilitates this kind of user navigation.

Demo

ZUL

<zk>
   <stepbar id="stepbar" onChange="desc.setValue(self.activeStep.title)">
      <step title="Aperitif"/>
      <step title="Appetizer"/>
      <step title="Soup"/>
      <step title="Salad"/>
      <step title="Main course"/>
      <step title="Dessert, Beverage"/>
   </stepbar>
   <separator/>
   <div>Current Menu:
      <label id="desc" value="Aperitif"/>
   </div>
   <separator/>
   <hlayout>
      <button label="Back" onClick="stepbar.back()"/>
      <button label="Next" onClick="stepbar.next()"/>
   </hlayout>
</zk>

Stepbar Properties

We provide several API methods/ Event for the Stepbar:

• back() and next()
  Activate next/previous step if possible.
• setActiveIndex(int)
  Sets the index of the active step. (Default: 0).
• setActiveStep(Step)
  Sets the active step object. (Default: first Step)
• setLinear(boolean)
  Sets whether the steps in this stepbar are displayed in order.
  Non-linear means that users can toggle any active steps easily by clicking the said step. In linear mode, they can only activate the next step when the previous one is completed.
• setModel(StepModel<E>)
  The step model associated with this stepbar.
  An existing ListModelList can be wrapped into a DefaultStepModel for Stepbar to use.
• setStepRenderer(StepRenderer<E>)
  The renderer used to render each step.
  Implement your own StepRenderer to handle how data renders to a Step object.
• setWrappedLabels(boolean)
  Setd whether the labels in children steps are wrapped. (Default: false)
• onChange
  Represents the activeIndex change.

Step Properties

For displaying information in each Step, we can use the following API methods:

• setComplete(boolean)
  Sets whether this step is completed. (Default: false)
• setError(boolean)
  Sets whether this step is in error. (Default: false)
• setIconSclass(String)
  Sets the icon sclass to apply custom icons.
  By applying this property, the complete and error icons are changed to the custom defined icons.
• setTitle(String)
  Sets the title (label) of each step. (Default: empty).

This component will be available in ZK 9.0. You can already try them out using the 9.0 RC or freshly (nightly) builds. I hope you find this component interesting. Please let us know how you like it!

For further information, please check out component reference – Stepbar and component reference – Step.

Downloads

The runnable demo project is available on Github – Stepbar Demo.