<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<style type="text/css">
.text
{
font-size:20px;
}
.spacer
{
background-color: aqua;
}
</style>
<f:subview id="spacerID">

	<h:messages></h:messages>
	<h:form>
		<h:outputText value="Event:"></h:outputText>
		<rich:spacer id="spacerIdEven" rendered="#{spacer.rendered}" style="border: 3px solid red; background: blue;" styleClass="#{spacer.style}"
			width="#{spacer.width}" height="#{spacer.height}" onmousedown="alert('onmousedown')" title="title"></rich:spacer>

		<f:verbatim>
			<br />
		</f:verbatim>

		<h:outputText value="Some text one..." styleClass="text"></h:outputText>
		<rich:spacer id="spacerId" width="#{spacer.width}" height="#{spacer.height}" rendered="#{spacer.rendered}" styleClass="#{spacer.style}">
		</rich:spacer>
		<h:outputText value="Some text two..." styleClass="text"></h:outputText>

		<h:panelGrid columns="2">
			<h:outputText value="Width (px or %):"></h:outputText>
			<h:inputText value="#{spacer.width}">
				<a4j:support event="onchange" reRender="spacerId"></a4j:support>
			</h:inputText>

			<h:outputText value="Height (px or %):"></h:outputText>
			<h:inputText value="#{spacer.height}">
				<a4j:support event="onchange" reRender="spacerId"></a4j:support>
			</h:inputText>

			<h:outputText value="Rendered:"></h:outputText>
			<h:selectBooleanCheckbox value="#{spacer.rendered}" onclick="submit()">
			</h:selectBooleanCheckbox>

		</h:panelGrid>
		<a4j:commandButton id="btn" action="#{spacer.doStyle}" value="#{spacer.btn}" reRender="spacerId, btn"></a4j:commandButton>

		<f:verbatim>
			<br />
		</f:verbatim>

		<h:commandLink value="Back" action="main"></h:commandLink>
	</h:form>
</f:subview>


