<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://labs.jboss.com/jbossrichfaces/ui/toolBar" prefix="rich"%>
<html>
<style>
.toolbar_sep{
	padding : 0px 5px 0px 5px;
	}
</style>

<body>
<f:view>

	<h:form>
        <h:selectOneRadio binding="#{skinBean.component}" />
        <h:commandLink action="#{skinBean.change}" value="set skin" />
	</h:form>
	
	<h:form>
	<h:messages style="color:red"/>
	<h:outputText value="Simple richfaces toolBar and toolBarGroup test web application." style="font: 18px;font-weight: bold;" />

			<rich:toolBar id="toolBar_01" width="#{bean.width}" height="#{bean.height}" itemSeparator="line">
					
							<h:outputText value="Exadel style tool bar." />							
					
					<rich:toolBarGroup id="toolBarGroup_01" location="left" itemSeparator="square">
							<h:outputText value="Set width" />							
							<h:inputText value="#{bean.width}"/>							
							<h:commandButton value="Change!"/>							
					</rich:toolBarGroup>
					
					<rich:toolBarGroup id="toolBarGroup_02" location="left" itemSeparator="square">
							<h:outputText value="Set height" />							
							<h:inputText value="#{bean.height}"/>							
							<h:commandButton value="Change!"/>							
					</rich:toolBarGroup>					

					<rich:toolBarGroup id="toolBarGroup_03" location="right" itemSeparator="grid">
							<h:graphicImage url="/images/exadel.gif" style="border-width: 0px;" />
							<h:outputLink value="http://exadel.com">
								<h:outputText value="exadel.com"/>
							</h:outputLink>							
					</rich:toolBarGroup>
					
			</rich:toolBar>
			<br /><br /><br />			
			
			<rich:toolBar id="toolBar_02" width="#{bean.width}" height="#{bean.height}" itemSeparator="line"
				separatorClass="toolbar_sep" styleClass="user_style" style="#{bean.style}" contentStyle="#{bean.contentStyle}">
					
					<h:outputText value="Exadel tool bar with user styles" />
					<h:outputText value="#{bean.label}" />						
										
					<rich:toolBarGroup id="toolBarGroup_05" location="left" itemSeparator="square">
							<h:outputText value="Change label" />							
							<h:inputText value="#{bean.label}" style="height: 18px; font-size : 12px;" />
							<h:commandButton value="Change!" style="height: 18px; font-size : 10px;"/>							
					</rich:toolBarGroup>
					

					<rich:toolBarGroup id="toolBarGroup_06" location="right" itemSeparator="grid">
							<h:graphicImage url="/images/exadel.gif" style="border-width: 0px;" />
							<h:outputLink value="http://exadel.com">
								<h:outputText value="exadel.com" style="color: gold; font: 14px; font-weight: bold;" />
							</h:outputLink>							
					</rich:toolBarGroup>
					
			</rich:toolBar>
			<br />
	
			<h:outputText value="Set some style for this Tool Bar content:" />
			<h:inputText value="#{bean.contentStyle}" size="100" onchange="submit()"/>
			<h:commandButton value="Change!"/>
			<br /><br />
	
			<h:outputText value="Set some style for this Tool Bar borders:" />
			<h:inputText value="#{bean.style}" size="100" onchange="submit()"/>
			<h:commandButton value="Change!"/>
			<br /><br /><br />			
			
			<rich:toolBar id="toolBar_03" width="#{bean.width}" height="30px" itemSeparator="#{bean.separator_type}"
				separatorClass="toolbar_sep">

					<h:outputText value="Third toolbar" />												

					<rich:toolBarGroup id="toolBarGroup_07" location="left" itemSeparator="#{bean.separator_type}">
						<h:outputText value="Various separator types." />												
					</rich:toolBarGroup>
					
					<rich:toolBarGroup id="toolBarGroup_08" location="left">
							<h:outputText value="Separator type:" />
							<h:selectOneMenu  value="#{bean.separator_type}" onchange="submit()">
								<f:selectItem itemLabel="line" itemValue="line" />
								<f:selectItem itemLabel="square" itemValue="square" />
								<f:selectItem itemLabel="disc" itemValue="disc" />
								<f:selectItem itemLabel="grid" itemValue="grid" />								
							</h:selectOneMenu >						
					</rich:toolBarGroup>					

					<rich:toolBarGroup id="toolBarGroup_09" itemSeparator="#{bean.separator_type == 'disc' ? 'grid' : 'disc'}" location="right">
							<h:outputLink value="http://blog.exadel.com" style="color: white;" >
								<h:outputText value="blog" />
							</h:outputLink>							

							<h:outputLink value="http://forum.exadel.com" style="color: white;" >
								<h:outputText value="forum" />
							</h:outputLink>							

							<h:outputLink value="http://exadel.com" style="color: white;" >
								<h:outputText value="exadel.com" />
							</h:outputLink>							
					</rich:toolBarGroup>
					
			</rich:toolBar>		
		

	</h:form>
</f:view>
</body>
</html>
