Tomahawk column tag

This tag is used for the columns of the table. It can be used in dataTable tag instead of using h:column. Tomahawk column tag provides many new attributes. It provides many attributes for header and footer of the column which can be used to provide new functionality in the columns. Its sorting capability is really very good. We can sort the columns by clicking the column header if the sorting attribute is set to true. Default sorting can also be applied to get the column sorted automatically when the page is rendered and sorting according to the property can also be applied. Really, the column tag of tomahawk comprises of a large number of new attributes with amazing functionality.

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>t:column example</title>
<style type="text/css">
<!--
body{
margin-top:30;
}
.columnHeader {
	color: green;
   	font-size:20px;
	text-decoration:blink;
	text-transform:uppercase;
}
-->
</style>
</head>
<body >
<f:view>
  <h:form id="form1" >
     <t:dataTable id="dt1" value="#{TableBean.perInfoAll}"
                  var="item" border="5" cellpadding="5"
                  cellspacing="3" first="0" rows="4"
                  width="50%" frame="hsides" rules="all">
	<t:column sortable="true"
                  style="color:green; font-weight:bold"
	          headeronmouseover="this.className='columnHeader'"
                  headeronmouseout="this.className='normal'"
                  headertitle="Sort column by ID"
                  headerstyle="background-color:#99CCFF;">
	    <f:facet name="header">
		 <t:outputText value="id" />
	    </f:facet>
	    <t:outputText value="#{item.id}"></t:outputText>
	</t:column>

        <t:column sortable="true" headercolspan="2"
                  headeronmouseover="this.className='columnHeader'"
	          headeronmouseout="this.className='normal'"
                  headertitle="Sort column by name"
                  headerstyle="background-color:#99CCFF;">
	    <f:facet name="header">
		<t:outputText value="name"/>
	    </f:facet>
		<t:outputText value="#{item.firstname}"></t:outputText>
	</t:column>

	<t:column >
            <t:outputText value="#{item.lastname}"></t:outputText>
	</t:column>

	<t:column sortable="true" 
                  headeronmouseover="this.className='columnHeader'"
	          headeronmouseout="this.className='normal'"
                  headertitle="Sort column by phone no."
                  headerstyle="background-color:#99CCFF;">
	    <f:facet name="header">
		<t:outputText value="phone"/>
	    </f:facet> 
	    <t:outputText value="#{item.phone}"></t:outputText>
	</t:column>

	<t:column sortable="true" width="80"
                  headeronmouseover="this.className='columnHeader'"
	          headeronmouseout="this.className='normal'"
                  headertitle="Sort column by city"
                  headerstyle="background-color:#99CCFF;">
	    <f:facet name="header">
		<t:outputText value="city"/>
	    </f:facet>
	    <t:outputText value="#{item.city}"></t:outputText>
	</t:column>

	<t:column headeronmouseover="this.className='columnHeader'"
                  headeronmouseout="this.className='normal'"
	          headerstyle="background-color:#99CCFF;">
	    <f:facet name="header">
		<t:outputText value="pin"/>
	    </f:facet>
	    <t:outputText value="#{item.pin}"></t:outputText>
	</t:column>
     </t:dataTable>
   </h:form>
</f:view>
</body>
</html>


package net.roseindia.web.ui;

public class TableBean {



private perInfo[] perInfoAll = new perInfo[]{

new perInfo(101, "SUSHIL","KUMAR", "9891444444", "Delhi", 111111),

new perInfo(102, "CHANDAN","KUMAR", "9911666666", "Bombay" ,222222),

new perInfo(103, "RAVI","KANT", "9313888888", "New York", 333333),

new perInfo(104, "ANDY","ROBERTSON", "9911222222", "Florida" , 444444),

new perInfo(105, "SHAUN","MARTIN", "9313999999", "Los Angeles", 555555),

};



public perInfo[] getperInfoAll() {

return perInfoAll;

}



public class perInfo {

int id;

String firstname;

String lastname;

String phone;

String city;

int pin;



public perInfo(int id, String firstname,String lastname,

              
String phone, String city, int pin) {

this.id = id;

this.firstname = firstname;

this.lastname = lastname;

this.phone = phone;

this.city = city;

this.pin= pin;

}



public int getid() {

return id;

}



public String getfirstname() {

return firstname;

}



public String getlastname() {

return lastname;

}



public String getphone() {

return phone;

}



public String getcity() {

return city;

}



public int getpin() {

return pin;

}



}



}

Rendered Output : This is the original output of the code above. Headers of the columns in blue color indicates the sorting capability of the columns i.e. you can sort columns by clicking the header names.

The figure below is the output when we click the "name" header then an arrow appears with the name of the header that indicates that you have clicked this header and sorting has performed. You can now again click to sort in reverse order.

If we add "defaultSorted" attribute and set it to true in city column then the city column is automatically sorted when the page is rendered and the arrow sign appears also with the header "city" indicating column is sorted. You can see the figure below :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>t:column example</title>
<style type="text/css">
<!--
body{
margin-top:30;
}
.columnHeader {
	color: green;
   	font-size:20px;
	text-decoration:blink;
	text-transform:uppercase;
}
-->
</style>
</head>
<body >
  <form id="form1" name="form1" method="post"
        action="/tomahawk_tags/pages/column.jsf"
        enctype="application/x-www-form-urlencoded">
    <table id="form1:dt1" border="5" cellpadding="5"
        cellspacing="3" frame="hsides" rules="all" width="50%">
      <thead>
         <tr>
            <th onmouseover="this.className='columnHeader'"
                onmouseout="this.className='normal'"
                title="Sort column by ID"
                style="background-color:#99CCFF;">
<script type="text/javascript">
<!--
  function oamSetHiddenInput(formname, name, value){
	var form = document.forms[formname];
	if(typeof form.elements[name]=='undefined'){
		var newInput = document.createElement('input');
		newInput.setAttribute('type','hidden');
		newInput.setAttribute('name',name);
		newInput.setAttribute('value',value);
		form.appendChild(newInput);
	}
	else{
		form.elements[name].value=value;
	}
   }
  function oamClearHiddenInput(formname, name, value){
	var form = document.forms[formname];
	if(typeof form.elements[name]!='undefined'){
		form.elements[name].value=null;
	}
   }
  function oamSubmitForm(formName, linkId, target, params){
	var clearFn = 'clearFormHiddenParams_'+
            formName.replace(/-/g, '\$:').replace(/:/g,'_');
	if(typeof eval('window.'+clearFn)!='undefined'){
		eval('window.'+clearFn+'(formName)');
	}
	var oldTarget = '';
	if((typeof target!='undefined') && target != null){
		oldTarget=document.forms[formName].target;
		document.forms[formName].target=target;
	}
	if((typeof params!='undefined') && params != null){
		for(var i=0; i<params.length; i++){
		   oamSetHiddenInput(formName,params[i][0], params[i][1]);
		}
	}
	oamSetHiddenInput(formName,formName +':'+'_idcl',linkId);
	if(document.forms[formName].onsubmit){
		var result=document.forms[formName].onsubmit();
		if((typeof result=='undefined')||result){
			document.forms[formName].submit();
		}
	}
	else {
		document.forms[formName].submit();
	}
	if(oldTarget==null) oldTarget='';
	document.forms[formName].target=oldTarget;
	if((typeof params!='undefined') && params != null){
		for(var i=0; i<params.length; i++){
		  oamClearHiddenInput(formName,params[i][0], params[i][1]);
		}
	}
	oamClearHiddenInput(formName,formName +':'+'_idcl',linkId);
        return false;
}
//-->
</script>
<a href="#" onclick="return oamSubmitForm('form1','form1:dt1:_id0');" 
id="form1:dt1:_id0">id</a>
</th>
<th onmouseover="this.className='columnHeader'" 
    onmouseout="this.className='normal'" title="Sort column by name"
    colspan="2" style="background-color:#99CCFF;">
<a href="#" onclick="return oamSubmitForm('form1','form1:dt1:_id1');"
   id="form1:dt1:_id1">name</a>
</th>
<th onmouseover="this.className='columnHeader'"
    onmouseout="this.className='normal'" title="Sort column by phone no."
    style="background-color:#99CCFF;">
<a href="#" onclick="return oamSubmitForm('form1','form1:dt1:_id2');"
   id="form1:dt1:_id2">phone</a>
</th>
<th onmouseover="this.className='columnHeader'"
    onmouseout="this.className='normal'"
    title="Sort column by city" style="background-color:#99CCFF;"
    width="80">
<a href="#" onclick="return oamSubmitForm('form1','form1:dt1:_id3');"
   id="form1:dt1:_id3">city</a>
</th>
<th onmouseover="this.className='columnHeader'"
    onmouseout="this.className='normal'"
    style="background-color:#99CCFF;">pin
</th>
</tr>
</thead>
<tbody id="form1:dt1:tbody_element">
  <tr>
    <td style="color:green; font-weight:bold">101</td>
    <td>SUSHIL</td><td>KUMAR</td><td>9891444444</td>
    <td width="80">Delhi</td><td>111111</td>
  </tr>
  <tr>
    <td style="color:green; font-weight:bold">102</td>
    <td>CHANDAN</td><td>KUMAR</td><td>9911666666</td>
    <td width="80">Bombay</td><td>222222</td>
  </tr>
  <tr>
    <td style="color:green; font-weight:bold">103</td>
    <td>RAVI</td><td>KANT</td><td>9313888888</td>
    <td width="80">New York</td><td>333333</td>
  </tr>
  <tr>
    <td style="color:green; font-weight:bold">104</td>
    <td>ANDY</td><td>ROBERTSON</td><td>9911222222</td>
    <td width="80">Florida</td><td>444444</td>
  </tr>
</tbody>
</table>
<input type="hidden" name="form1_SUBMIT" value="1" />
<input type="hidden" name="form1:_link_hidden_" />
<input type="hidden" name="form1:_idcl" />

<script type="text/javascript">
<!--
	function clear_form1(){
		clearFormHiddenParams_form1('form1');
	}
	
	function clearFormHiddenParams_form1(currFormName)
	{
		var f = document.forms['form1'];
		f.elements['form1:_link_hidden_'].value='';
		f.elements['form1:_idcl'].value='';
		f.target='';
	}
	
	clearFormHiddenParams_form1();
//--></script>
<input type="hidden" name="javax.faces.ViewState"
       id="javax.faces.ViewState"
        value="rO0ABXVyABNbTGphdmEubGFuZy5PYmplY3Q7kM5YnxBzKWwCAA
               B4cAAAAAN0AAEycHQAES9wYWdlcy9jb2x1bW4uanNw" />
</form>
<!-- MYFACES JAVASCRIPT -->
</body>
</html>