<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="ajax"%>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="richfaces"%>

<f:subview id="skinningSubviewID">
	<h:panelGrid columns="2" border="2" >
		<h:outputText value="styleClass"></h:outputText>
		<h:outputText value="components"></h:outputText>

		<h:panelGroup>
			<h:outputText value="commandButton "></h:outputText>
			<h:inputText value="#{skinning.commandButton}" onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:commandButton value="commandButton"
			styleClass="#{skinning.commandButton}"></h:commandButton>

		<h:panelGroup>
			<h:outputText value="commandLink "></h:outputText>
			<h:inputText value="#{skinning.commandLink}" onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:commandLink value="commandLink"
			styleClass="#{skinning.commandLink}"></h:commandLink>

		<h:panelGroup>
			<h:outputText value="dataTable "></h:outputText>
			<h:inputText value="#{skinning.dataTable}" onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:dataTable value="#{dataOrderedList.defaultArr}" var="def"
			styleClass="#{skinning.dataTable}">
			<h:column>
				<h:outputText value="#{def}"></h:outputText>
			</h:column>
		</h:dataTable>

		<h:panelGroup>
			<h:outputText value="inputSecret "></h:outputText>
			<h:inputText value="#{skinning.inputSecret}" onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:inputSecret value="secret" styleClass="#{skinning.inputSecret}"></h:inputSecret>

		<h:panelGroup>
			<h:outputText value="inputText "></h:outputText>
			<h:inputText value="#{skinning.inputText}" onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:inputText value="inputText" styleClass="#{skinning.inputText}"></h:inputText>

		<h:panelGroup>
			<h:outputText value="inputTextarea "></h:outputText>
			<h:inputText value="#{skinning.inputTextarea}" onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:inputTextarea rows="4" cols="5" value="inputTextarea"
			styleClass="#{skinning.inputTextarea}"></h:inputTextarea>

		<h:panelGroup>
			<h:outputText value="outputLink "></h:outputText>
			<h:inputText value="#{skinning.outputLink}" onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:outputLink styleClass="#{skinning.outputLink}"></h:outputLink>

		<h:panelGroup>
			<h:outputText value="outputText "></h:outputText>
			<h:inputText value="#{skinning.outputText}" onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:outputText value="outputText" styleClass="#{skinning.outputText}"></h:outputText>

		<h:panelGroup>
			<h:outputText value="panelGrid "></h:outputText>
			<h:inputText value="#{skinning.outputText}" onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:panelGrid columns="1" styleClass="#{skinning.outputText}">
			<h:panelGroup>
				<h:outputText value="panelGrid"></h:outputText>
			</h:panelGroup>
		</h:panelGrid>

		<h:panelGroup>
			<h:outputText value="selectBooleanCheckbox "></h:outputText>
			<h:inputText value="#{skinning.selectBooleanCheckbox}"
				onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:panelGroup>
			<h:selectBooleanCheckbox value="true"
				styleClass="#{skinning.selectBooleanCheckbox}"></h:selectBooleanCheckbox>
			<h:selectBooleanCheckbox value="false"
				styleClass="#{skinning.selectBooleanCheckbox}"></h:selectBooleanCheckbox>
		</h:panelGroup>

		<h:panelGroup>
			<h:outputText value="selectManyCheckbox "></h:outputText>
			<h:inputText value="#{skinning.selectManyCheckbox}"
				onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:selectManyCheckbox styleClass="#{skinning.selectManyCheckbox}">
			<f:selectItems value="#{combobox.selectItem}" />
		</h:selectManyCheckbox>

		<h:panelGroup>
			<h:outputText value="selectManyMenu "></h:outputText>
			<h:inputText value="#{skinning.selectManyMenu}" onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:selectManyMenu styleClass="#{skinning.selectManyMenu}">
			<f:selectItems value="#{combobox.selectItem}" />
		</h:selectManyMenu>

		<h:panelGroup>
			<h:outputText value="selectOneListbox "></h:outputText>
			<h:inputText value="#{skinning.selectOneListbox}"
				onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:selectOneListbox styleClass="#{skinning.selectOneListbox}">
			<f:selectItems value="#{combobox.selectItem}" />
		</h:selectOneListbox>

		<h:panelGroup>
			<h:outputText value="selectOneMenu "></h:outputText>
			<h:inputText value="#{skinning.selectOneMenu}" onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:selectOneMenu styleClass="#{skinning.selectOneMenu}">
			<f:selectItems value="#{combobox.selectItem}" />
		</h:selectOneMenu>

		<h:panelGroup>
			<h:outputText value="selectOneRadio"></h:outputText>
			<h:inputText value="#{skinning.selectOneRadio}" onchange="submit();"></h:inputText>
		</h:panelGroup>
		<h:selectOneRadio styleClass="#{skinning.selectOneRadio}">
			<f:selectItems value="#{combobox.selectItem}" />
		</h:selectOneRadio>

	</h:panelGrid>
</f:subview>