The Molding System

The Molding System is a powerful feature of Bootstrap.jsp that allows you to knock out Components with the same characteristics time and time again just by setting the mold attribute in your JSP page.

The value of the mold attribute can either be the name of a class that extends the org.bootstrapjsp.mold.Mold class, or be resolved into one via the Bootstrap.jsp properties file, or an artibrary mold name whose attributes are defined in the properties file.

Let's define a simple properties based mold for the panel Component as an example. Place the following properties in your WEB-INF/classes/bootstrapjsp_local.properties file:

panel.mold.danger.context=danger
panel.mold.danger.label=Danger!

Now create a panel with 'danger' as the value of the mold attribute:

<b:panel mold="danger">You probably don't want to do that</b:panel>

The context and label attributes are found in the properties file and set on your panel:

<div class="panel panel-danger">
	<div class="panel-heading">
		<h3 class="panel-title">Danger!</h3>
	</div>
	<div class="panel-body">
		You probably don't want to do that
	</div>
</div>

Multiple Inheritance

When working with properties based molds, you can specify more than one mold, allowing multiple inheritance of mold properties. Consider the following mold properties:

alert.mold.dismissable.dismissable=true
alert.mold.danger.context=danger
alert.mold.info.context=info

You can now combine the molds in the following way:

<b:alert mold="danger">Danger</b:alert>
<b:alert mold="info">Info</b:alert>
<b:alert mold="dismissable danger">Dismissable Danger</b:alert>
<b:alert mold="dismissable info">Dismissable Info</b:alert>

The output will be:

<div class="alert alert-danger">
	Danger	
</div>
<div class="alert alert-info">
	Info		
</div>
<div class="alert alert-dismissable alert-danger">
	<span aria-hidden="true" data-dismiss="alert" class="button close" type="button">&times;</span>
	Dismissable Danger	
</div>
<div class="alert alert-dismissable alert-info">
	<span aria-hidden="true" data-dismiss="alert" class="button close" type="button">&times;</span>
	Dismissable Info		
</div>

The Default Mold

All components have a mold called "_default" applied, irrespective of whether any mold is specified in the mold attribute. The default mold gives you enormous power and control over how Bootstrap.jsp renders components.

For example, the <glyphicon> component outputs a span with a class of "glyphicon" and no body. The Accessibility aware of you may not be happy that the span does not have a role="presentation" attribute on it.

To fix this, you could search and replace all of your <glyphicon> tags with <glyphicon role="presentation">, but there are plenty of places within Bootstrap.jsp where icons are added without your declaring a <glyphicon> tag (<button icon="search"> for example).

The default mold lets you add the role attribute throughout the application in one fell swoop. While we're thinking about accessibility, let's make all buttons large so they are nice and visible, and let's make all wells use <section> elements instead of <div> elements, for some semantics:

# Give all icons a role attribute
glyphicon.mold._default.role=presentation
# Make all buttons large
button.mold._default.size=lg
# Make all wells use section elements
well.mold._default.element=section

Implementing a Mold

Properties based molds are quick and easy to use, but you may want to do something more complex with a mold other than defining simple attribute values. In these cases you can implement your own mold by extending the org.bootstrapjsp.mold.Mold class.

As a simple introduction, here is the equivalent mold to above implemented as a class:

import org.bootstrapjsp.mold.Mold;
import org.bootstrapjsp.tags.core.panel.Panel;

public class DangerPanelMold extends Mold<Panel> {

	@Override
	public void apply(Panel panel, String mold) {
		panel.setAttribute("context", "danger");
		panel.setAttribute("label", "Danger!");
	}
	
}

You can either use the class name as the value of your mold attribute, or define a mapping in the Bootstrap.jsp properties file:

panel.mold.danger=DangerPanelMold

<b:panel mold="DangerPanelMold">You probably don't want to do that</b:panel>
<b:panel mold="danger">You probably don't want to do that</b:panel>

See Composite Components for a more complex example of a mold implementation.