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.

Code Description :

<%@ 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>

Backing Bean (TableBean.java) :


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 Source Code :

<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>

This tag contains attributes given below :

id : This is the value which is used to uniquely identify the component within the closest container like form or subview. The main thing to remember is that its value must be a static value.
binding : This attribute is used to specify the property of the backing bean with which this component instance is to be bound.
rendered : Its default value is true. If this attribute is set to true then this component is presented in the page to the user. If false, then this component is not rendered.
dir : It is used to set the direction of the text to be displayed. It can take two values LTR(left to right) and RTL (right to left).
lang : It is used to set the base language of the component when displayed.
style : It is used to set the CSS style definition for the component.
title : It is the standard html attribute. It is used to set the tooltip text for this component.
styleClass : It is used to set the CSS class for the component. It is same as html class attribute.
onclick : Script to be invoked when the element is clicked.
ondblclick : It is used for Java Script code to be invoked when the element is double-clicked.
onmousedown : It is used for Java Script code to be invoked when the pointing device is pressed over this element.
onmouseup : It is used for Java Script code to be invoked when the pointing device is released over this element.
onmouseover : It is used for Java Script code to be invoked when the pointing device is moved into this element.
onmousemove : It is used for Java Script code to be invoked when the pointing device is moved while it is in this element.
onmouseout : It is used for Java Script code to be invoked when the pointing device is moved out of this element.
onkeypress : It is used for Java Script code to be invoked when a key is pressed over this element.
onkeydown : It is used for Java Script code to be invoked when a key is pressed down over this element.
onkeyup : It is used for Java Script code to be invoked when a key is released over this element.
headerdir : This attribute is used to define the direction of the header text. It can take two values "ltr" and "rtl".
headerlang : It is used to set the language of the header of this tag.
headerstyle : It is used to set the CSS style definition for header of this tag.
headertitle : It is used to set the tooltip text for header of this tag.
headercolspan : This attribute is used to apply one header for more than one column.
headerstyleClass : It is used to set the CSS class for the header of the tag.
headeronclick : It is used for Java Script code to be invoked when the header of the tag is clicked.
headerondblclick : It is used for Java Script code to be invoked when the header of the tag is double-clicked.
headeronmousedown : It is used for Java Script code to be invoked when the pointing device is pressed over the header.
headeronmouseup : It is used for Java Script code to be invoked when the pointing device is released over the header.
headeronmouseover : It is used for Java Script code to be invoked when the pointing device is moved into the header.
headeronmousemove : It is used for Java Script code to be invoked when the pointing device is moved while it is in the header.
headeronmouseout : It is used for Java Script code to be invoked when the pointing device is moves out of the header.
headeronkeypress : It is used for Java Script code to be invoked when a key is pressed over the header.
headeronkeydown : It is used for Java Script code to be invoked when a key is pressed down over the header.
headeronkeyup : It is used for Java Script code to be invoked when a key is released over the header.
footerdir : This attribute is used to define the direction of the footer text. It can take two values "ltr" and "rtl".
footerlang : It is used to set the language of the footer of this tag.
footerstyle : It is used to set the CSS style definition for footer of this tag.
footertitle : It is used to set the tooltip text for footer of this tag.
footercolspan : This attribute is used to apply one footer for more than one column.
footerstyleClass : It is used to set the CSS class for the footer of the tag.
footeronclick : It is used for Java Script code to be invoked when the footer of the tag is clicked.
footerondblclick : It is used for Java Script code to be invoked when the footer of the tag is double-clicked.
footeronmousedown : It is used for Java Script code to be invoked when the pointing device is pressed over the footer.
footeronmouseup : It is used for Java Script code to be invoked when the pointing device is released over the footer.
footeronmouseover : It is used for Java Script code to be invoked when the pointing device is moved into the footer.
footeronmousemove : It is used for Java Script code to be invoked when the pointing device is moved while it is in the footer.
footeronmouseout : It is used for Java Script code to be invoked when the pointing device is moved out of the footer.
footeronkeypress : It is used for Java Script code to be invoked when a key is pressed over the footer.
footeronkeydown : It is used for Java Script code to be invoked when a key is pressed down over the footer.
footeronkeyup : It is used for Java Script code to be invoked when a key is released over the footer.
width : This is used to set the width of this component.
colspan : This attribute specifies the colspan attribute for the cell.
groupBy : This attribute is used to group by data in this column
defaultSorted : This is the boolean attribute. When this attribute is set to true for a particular column then that column will be rendered already sorted but this attribute will be effective only when "sorted" attribute is set to true.
sortable : This is a boolean attribute. When this attribute is set to true only then the column sorting gets effective.
sortPropertyName : This attribute specifies the name of the property according to which the sorting of the column is performed.

Tomahawk column tag

Tomahawk column tag

Tomahawk column tag

Tutorials