Composite Components

Composite Components are custom components that comprise a number of standard components to make a new component that you can invoke from your JSP page.

Using Tag Files

The simplest way to make a composite is to use a JSP tag file. As an example, let's build a composite formgroup with a text control and a dropdown button, as shown in the Bootstrap documentation. We'll call this composite a "dropdowninput".

Firstly, we need to create a tag file in WEB-INF/tags/ called dropdowninput.tag (the path is irrelevant but the filename is not):

<%@ taglib uri="http://bootstrapjsp.org/" prefix="b" %>
<%@ attribute name="label" %>
<%@ attribute name="name" %>
<%@ attribute name="value" %>
<b:inputgroup>
	<b:formcontrol name="${name}" value="${value}"/>
	<b:inputgroupbutton>
		<b:button mold="dropdown" label="${label}"/>
		<b:dropdownmenu>
			<jsp:doBody/>
		</b:dropdownmenu>
	</b:inputgroupbutton>
</b:inputgroup>

Now it can be referenced from a JSP page using a taglib directive (I've used an "ex" prefix for "example", or "extra"). Note how the menu items are added to the menu because of where the <jsp:doBody> tag is in the tag file:

<%@ taglib uri="http://bootstrapjsp.org/" prefix="b" %>
<%@ taglib prefix="ex" tagdir="/WEB-INF/tags" %>
<ex:dropdowninput name="name" value="value" label="Click Me">
	<b:menuitem>An Action</b:menuitem>
	<b:menuitem>Another Action</b:menuitem>
</ex:dropdowninput>

The trouble with this though is that only the label, name and value attributes are supported. What if I wanted, for example to add a class attribute to my composite from my JSP page? I could of course add the attribute to the tag file, but then if I needed to add an id attribute later, I'd be going back to add yet another attribute.

Fortunately, Bootstrap.jsp components allow you to set a number of attributes at once by passing a Map of name/value pairs in the attributes attribute. Fortunate, because a Map is how dynamic attributes are handled by JSP tag files.

Amending the tag file to the following will allow me to add any attribute I want to my new composite:

<%@ tag dynamic-attributes="attributes" %>
<%@ taglib uri="http://bootstrapjsp.org/" prefix="b" %>
<%@ attribute name="label" %>
<%@ attribute name="name" %>
<%@ attribute name="value" %>
<b:inputgroup attributes="${attributes}">
	<b:formcontrol name="${name}" value="${value}"/>
	<b:inputgroupbutton>
		<b:button mold="dropdown" label="${label}"/>
		<b:dropdownmenu>
			<jsp:doBody/>
		</b:dropdownmenu>
	</b:inputgroupbutton>
</b:inputgroup>

<%@ taglib uri="http://bootstrapjsp.org/" prefix="b" %>
<%@ taglib prefix="ex" tagdir="/WEB-INF/tags" %>
<ex:dropdowninput name="name" value="value" label="Click Me" class="dropdowninput" id="input1">
	<b:menuitem>An Action</b:menuitem>
	<b:menuitem>Another Action</b:menuitem>
</ex:dropdowninput>

Using Molds

All Components can be instantiated and appended to each other in Java, so you can build Composites using the Molding System to append child Components.