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 toThe 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;
|
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 :
Ads