Bootstrap Progress Bar Component for Tapestry 5

Here is a quick and dirty bootstrap progress bar component designed to be used with the tapestry-bootstrap project. The component provides a re-usable wrapper around bootstrap’s CSS3 progress bars.

First up is the Java source:


// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package ca.jeshurun.blog.components;

import java.util.Arrays;
import java.util.List;

import org.apache.tapestry5.BindingConstants;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.annotations.SetupRender;

/**
 * 
 * @author Jeshurun Daniel
 *
 */
public class Progressbar {
	
	@Parameter
	private boolean striped;
	
	@Parameter
	private boolean active;
	
	@Parameter(defaultPrefix=BindingConstants.LITERAL)
	private String widths;
	
	@Parameter(defaultPrefix=BindingConstants.LITERAL, value="danger,warning,info,success", allowNull=false)
	private String ordering;
	
	@Property
	private int index;
	
	@Parameter(defaultPrefix=BindingConstants.PROP)
	private String[] widthsArray;
	
	@SetupRender
	void setup() {
		if(widthsArray == null && widths != null) {
			widthsArray = widths.split(",");
		}
	}
	
	public List getBars() {
		return Arrays.asList(ordering.split(","));
	}
	
	public String getStriped() {
		return striped || active ? "progress-striped" : "";
	}
	
	public String getActive() {
		return active ? "active" : "";
	}
	
	public String getWidth() {
		if(widthsArray == null || widthsArray.length <= index) return "0";
		return widthsArray[index].trim().isEmpty() ? "0" : widthsArray[index];
	}
}

followed by the xml component template:

And here is how you would use it:


Which should give you something like this:
progressbar

The parameters you can pass in are:

  • widths The widths of each bar. The corresponding bar will be blank when omitted or 0
  • widthsArray Pass the widths as a prop array instead of as a literal string
  • striped Adds the progress-striped class to the progress bar
  • active Adds the active class. Implies progress-striped.
  • ordering The ordering of colours in the progress bar. Default values are danger,warning,info,success. You can change the ordering of the bars by changing the order of the values, or you can define your own progress-custom class and apply your own custom styles to it.

Leave a Reply

Your email address will not be published. Required fields are marked *

20 − thirteen =