Exanpe Skin

Description
This page displays the core Tapestry components skinned with the Exanpe graphic style.
These components are not working properly. Just here to show their look.
So easy to set up :
  • Add a HTML tag with class="exanpe-skin" anywhere around the component to skin
  • Import our CSS stylesheet in the Page you want to reskin : @Import(stylesheet = "$ {exanpe.asset-base}/css/exanpe-t5-lib-skin.css")
  • No conflict ! Skin only what you want to skin



In Action
Grid :
First Name[Sortable]Last Name[Sortable]Age[Sortable]
First Name 0Name 020
First Name 1Name 121
First Name 2Name 222
First Name 3Name 323
First Name 4Name 424
First Name 5Name 525
First Name 6Name 626
First Name 7Name 727
First Name 8Name 828
First Name 9Name 929

Autocomplete :
Type in a country name:

Palette :
Available
Selected

Bean Editform :



TML Source code

		<div class="exanpe-skin">
			 <b>Grid :</b><br/>	
			 
			 <div class="gridExampleWrapper">
			 	<t:grid source="users" row="iteUser" rowsPerPage="10" pagerPosition="bottom" />
			 </div>
			 <hr/>
			 
			 <b>Autocomplete :</b><br/>	
			 <t:form>
				Type in a country name:
				<input t:id="countryName" t:type="TextField" t:mixins="autocomplete" t:value="country"/>
			</t:form>
			<hr/>
			
			<b>Palette :</b><br/>	
			<t:form>
				<t:palette t:id="handling" 
					         encoder="countryEncoder" model="countryModel" selected="selected"
			 	           select="asset:classpath:fr/exanpe/t5/lib/components/img/t5/select.png" 
			 	           deselect="asset:classpath:fr/exanpe/t5/lib/components/img/t5/deselect.png"/>
			</t:form>
			<hr/>
			
			<b>Bean Editform :</b><br/>	
			<t:beaneditform t:id="user" object="userEdit"/>
		</div>