Tomahawk dataScroller tag

Ads
 

Tomahawk dataScroller tag

The data scroller component of tomahawk is one of the very useful component. This component can take the reference of the UIData component like dataTable, dataList in its "for" attribute. dataScroller tag renders a component that provides the facility to

The data scroller component of tomahawk is one of the very useful component. This component can take the reference of the UIData component like dataTable, dataList in its "for" attribute. dataScroller tag renders a component that provides the facility to

Tomahawk dataScroller tag

        

The data scroller component of tomahawk is one of the very useful component. This component can take the reference of the UIData component like dataTable, dataList in its "for" attribute. dataScroller tag renders a component that provides the facility to navigate the data component by scrolling.


Code Description : In the code below, the data scroller component for a data table has been created that helps to navigate from one set of data to the other by clicking various navigation links. There are three types of  links to move one by one, fast forward and move to the last directly. In this faststep attribute has been set to the value 2 so fast forward link will take you two page ahead directly. paginatorMaxPages attribute sets the number of pages to be shown in the component to navigate directly clicking on them.

<%@ 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:dataScroller example</title>
<style type="text/css">
<!--
body{
margin-top:30;
}
.TableRow1 {
background-color: #D0E6E0;
}

.TableRow2 {
background-color: #E8F7F1;
}
.TableColumn {
text-align: center
}
.TableClass {
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
padding: 2;
border-style: solid;
border-width: 2px;
}
.TableHeader {
color: #000000;
background-color: #F1F1F1;
padding: 3;
text-align: center;
border: none;
}
-->
</style>
</head>
<body ><center>
<f:view>
<h:form id="form1" >
<t:dataTable id="dt1" 
value="#{DataScrollerBean.country_Capital}" var="item" bgcolor="#F1F1F1" 
border="10" cellpadding="5" cellspacing="3" first="0" rows="2" width="50%" 
dir="LTR" frame="hsides" rules="all" 
summary="This is a JSF code to create dataTable." 
rowClasses="TableRow1,TableRow2" columnClasses="TableColumn" 
styleClass="TableClass" headerClass="TableHeader">

<f:facet name="header">
<h:outputText value="Countries and Capitals" />
</f:facet>
<t:column style="color:green; font-weight:bold" 
headerstyle="background-color:#99CCFF;">
<f:facet name="header">
<t:outputText value="Country" />
</f:facet>
<t:outputText value="#{item.country}"></t:outputText>
</t:column>
<t:column headerstyle="background-color:#99CCFF;">
<f:facet name="header">
<t:outputText value="Capital"/>
</f:facet> 
<t:outputText value="#{item.capital}"></t:outputText>
</t:column>
</t:dataTable>

<t:dataScroller id="scroller" for="dt1" paginator="true" fastStep="2" 
paginatorMaxPages="5" 
paginatorActiveColumnStyle="font-size:20px;font-weight:bold;" 
immediate="true">
<f:facet name="first" >
<t:graphicImage url="images/first.gif" border="1" />
</f:facet>
<f:facet name="last">
<t:graphicImage url="images/last.gif" border="1" />
</f:facet>
<f:facet name="previous">
<t:graphicImage url="images/pre1.gif" border="1" />
</f:facet>
<f:facet name="next">
<t:graphicImage url="images/next1.gif" border="1" />
</f:facet>
<f:facet name="fastforward">
<t:graphicImage url="images/next2.gif" border="1" />
</f:facet>
<f:facet name="fastrewind">
<t:graphicImage url="images/pre2.gif" border="1" />
</f:facet>
</t:dataScroller> 
</h:form>
</f:view>
</center></body>
</html>

Rendered Output : 

The figure below shows that when we click on fast forward element then it moves ahead by 2 pages because "fastStep" attribute has been set to the value "2". 

Backing bean :(DataScrollerBean.java)

package net.roseindia.web.ui;
public class DataScrollerBean {

private CountryCapital[] country_Capital = new CountryCapital[]{
  new CountryCapital("India","New Delhi"),
  new CountryCapital("United States","Washington D.C."),
  new CountryCapital("Russia","Moscow"),
  new CountryCapital("United Kingdom","London"),
  new CountryCapital("Mexico","Mexico City"),
  new CountryCapital("Japan","Tokyo"),
  new CountryCapital("Germany","Berlin"),
  new CountryCapital("France","Paris"),
  new CountryCapital("China","Beijing"),
  new CountryCapital("Denmark","Copenhagen"),
  new CountryCapital("Brazil","Brasilia"),
  new CountryCapital("Bangladesh","Dhaka"),
  new CountryCapital("Australia","Canberra"),
  new CountryCapital("Fiji","Suva")

};

public CountryCapital[] getCountry_Capital() {
return country_Capital;
}

public class CountryCapital {
  String country;
  String capital;
  public CountryCapital(String country,String capital) {
  this.country = country;
  this.capital = capital;
  }
  public String getCountry() {
  return country;
  }

  public String getCapital() {
  return capital;
  }
}

}

Html Source Code : 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>t:dataScroller example</title>
<style type="text/css">
<!--
body{
margin-top:30;
}
.TableRow1 {
background-color: #D0E6E0;
}

.TableRow2 {
background-color: #E8F7F1;
}
.TableColumn {
text-align: center
}
.TableClass {
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
padding: 2;
border-style: solid;
border-width: 2px;
}
.TableHeader {
color: #000000;
background-color: #F1F1F1;
padding: 3;
text-align: center;
border: none;
}
-->
</style>
</head>
<body ><center>
<form id="form1" name="form1" method="post" 
action="/tomahawk_tags/pages/dataScroller.jsf" 
enctype="application/x-www-form-urlencoded">
<table id="form1:dt1" bgcolor="#F1F1F1" border="10" cellpadding="5" 
cellspacing="3" frame="hsides" rules="all" 
summary="This is a JSF code to create dataTable." 
width="50%" dir="LTR" class="TableClass">
<thead>
<tr><th scope="colgroup" colspan="2" class="TableHeader">
Countries and Capitals</th></tr>
<tr><th class="TableHeader" style="background-color:#99CCFF;">
Country</th>
<th class="TableHeader" style="background-color:#99CCFF;">
Capital</th></tr></thead>
<tbody id="form1:dt1:tbody_element">
<tr class="TableRow1"><td class="TableColumn" 
style="color:green; font-weight:bold">India</td>
<td class="TableColumn">New Delhi</td></tr>
<tr class="TableRow2"><td class="TableColumn" 
style="color:green; font-weight:bold">United States</td>
<td class="TableColumn">Washington D.C.</td></tr>
</tbody>
</table>
<table><tr><td><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:scroll_1first',
null,[['form1:scroll_1','first']]);" id="form1:scroll_1first">
<img src="images/first.gif" border="1" /></a></td>
<td><a href="#" onclick="return oamSubmitForm('form1',
'form1:scroll_1fastr',null,[['form1:scroll_1','fastr']]);" 
id="form1:scroll_1fastr"><img src="images/pre2.gif" border="1" /></a>
</td><td><a href="#" onclick="return oamSubmitForm
('form1','form1:scroll_1previous',null,[['form1:scroll_1','previous']]);"
id="form1:scroll_1previous"><img src="images/pre1.gif" border="1" /></a></td>
<td><td style="font-size:20px;font-weight:bold;">
<a href="#" onclick="return oamSubmitForm('form1','form1:scroll_1idx1',null,
[['form1:scroll_1','idx1']]);" id="form1:scroll_1idx1">1</a></td>
<td><a href="#" onclick="return oamSubmitForm('form1','form1:scroll_1idx2',null,
[['form1:scroll_1','idx2']]);" id="form1:scroll_1idx2">2</a></td><td>
<a href="#" onclick="return oamSubmitForm('form1','form1:scroll_1idx3',
null,[['form1:scroll_1','idx3']]);" id="form1:scroll_1idx3">3</a></td>
<td><a href="#" onclick="return oamSubmitForm('form1','form1:scroll_1idx4',null,
[['form1:scroll_1','idx4']]);" id="form1:scroll_1idx4">4</a></td><td>
<a href="#" onclick="return oamSubmitForm('form1','form1:scroll_1idx5',null,
[['form1:scroll_1','idx5']]);" id="form1:scroll_1idx5">5</a></td></td><td>
<a href="#" onclick="return oamSubmitForm('form1','form1:scroll_1next',null,
[['form1:scroll_1','next']]);" id="form1:scroll_1next">
<img src="images/next1.gif" border="1" /></a></td>
<td><a href="#" onclick="return oamSubmitForm('form1','form1:scroll_1fastf',
null,[['form1:scroll_1','fastf']]);" id="form1:scroll_1fastf">
<img src="images/next2.gif" border="1" /></a></td>
<td><a href="#" onclick="return oamSubmitForm('form1','form1:scroll_1last',
null,[['form1:scroll_1','last']]);" id="form1:scroll_1last">
<img src="images/last.gif" border="1" /></a></td>
</tr>
</table> 
<input type="hidden" name="form1_SUBMIT" value="1" />
<input type="hidden" name="form1:_link_hidden_" />
<input type="hidden" name="form1:_idcl" />
<input type="hidden" name="form1:scroll_1" />
<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.elements['form1:scroll_1'].value='';
f.target='';
} 
clearFormHiddenParams_form1();
//--></script><input type="hidden" name="javax.faces.ViewState" 
id="javax.faces.ViewState" value="rO0ABXVyABNbTGphdmEubGFuZy5PY
mplY3Q7kM5YnxBzKWwCAAB4cAAAAANzcgBHb3JnLmFwYWNoZS5teWZhY2VzLmFw
cGxpY2F0aW9uLlRyZWVTdHJ1Y3R1cmVNYW5hZ2VyJFRyZWVTdHJ1Y3RDb21wb25
lbnRGWRfYnEr2zwIABFsACV9jaGlsZHJlbnQASltMb3JnL2FwYWNoZS9teWZhY2
VzL2FwcGxpY2F0aW9uL1RyZWVTdHJ1Y3R1cmVNYW5hZ2VyJFRyZWVTdHJ1Y3RDb
.............
............." /></form>
</center><!-- 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.
  • enabledOnUserRole :f the current user has one of the roles listed in the enabledOnUserRole attribute then enabling or disabling of the component is decided on the base of "disabled" attribute. If disabled attribute is set to true then component is disabled otherwise enabled. If the user is not in the above list then the component is rendered disabled.
  • visibleOnUserRole :If the current user has one of the roles listed in the visibleOnUserRole attribute then processing of the component is decided on the base of "rendered" attribute. If the rendered attribute is set to true then component is not rendered otherwise displayed  on the page. On the other hand if the current user is not in the above list then the component is not processed.
  • for: This attribute is used to specify the id of the component for which the data scrolling is to be done.
  • layout : This attribute is used to specify the layout of the scroller component. The default layout is "table". It can also take list, singleList, singleTable. list option renders a paginator as a list.
  • fastStep : This attribute specifies the number of steps for fastforward and fastrewind.
  • pageIndexVar : This attribute specifies the name of the parameter under which the actual page index is set in request scope similar to the var parameter.
  • pageCountVar : This attribute specifies the name of the parameter under which the actual page count is set in request scope similar to the var parameter.
  • rowsCountVar : This attribute specifies the name of the parameter under which the actual rows count is set in request scope similar to the var parameter.
  • displayedRowsCountVar : This attribute specifies the name of the parameter under which the actual displayed rows count is set in request scope similar to the var parameter.
  • firstRowIndexVar : This attribute specifies the name of the parameter under which the actual first displayed row index is set in request scope similar to the var parameter.
  • lastRowIndexVar : This attribute specifies the name of the parameter under which the actual last displayed row index is set in request scope similar to the var parameter.
  • styleClass : This attribute specifies the CSS class used for the component.
  • style : This attribute defines CSS for the component.
  • paginator : This attribute specifies whether to render the paginator.
  • paginatorMaxPages : This attribute specifies the number of pages to be displayed in the paginator.
  • paginatorTableClass :This is used to specify the styleclass for pagingator.
  • paginatorTableStyle : This is used to specify the style for pagingator.
  • paginatorColumnClass : This is used to specify the styleclass for column of the pagingator.
  • paginatorColumnStyle : This is used to specify the style for column of the pagingator.
  • paginatorActiveColumnClass :  This attribute sets the CSS style class to be applied to the current page indicator.
  • paginatorActiveColumnStyle :  This attribute sets the CSS style to be applied to the current page indicator.
  • paginatorRenderLinkForActive : Its default value is true. When it is true it renders a link to the current page indicator.
  • renderFacetsIfSinglePage : This is a boolean attribute with default value true. It, when true, causes the facets of this component to be rendered when the data contained by this component does not exceed one page.
  • nextStyleClass : This attribute sets style class for data Scroller next-element.
  • lastStyleClass : This attribute sets style class for data scroller last-element
  • fastfStyleClass : This attribute sets style class for data scroller fast-forward-element
  • fastrStyleClass : This attribute sets style class for data scroller fast-rewind-element
  • firstStyleClass : This attribute sets style class for data scroller first-element
  • previousStyleClass : This attribute sets style class for data scroller previous-element
  • immediate : When this attribute is set to true the default ActionListener should be executed immediately during Apply Request Values phase of the request processing lifecycle rather than waiting until the Invoke Application phase.
  • actionListener :  The actionListener attribute is used to assign an action listener method from backing bean that performs the specific operation.
  • onclick : It is used for Java Script code 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. 

Ads

Ads