List of improvements:
1. new look with Bootstrap 3
2. add final/first page
3. no. of rows
List of softwares:
1. Bootstrap 3, http://getbootstrap.com/getting-started/
2. Previous example, http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/JSFTablePagination/JSFTablePagination.html
Step:
1. Install jquery and bootstrap 3 libraries to Netbeans.
2. At jsf page, I created a new form (shown at the end).
3. At PaginationHelper, modify and add as follows:
public PaginationHelper(int pageSize, int page) {
this.pageSize = pageSize;
this.page=page;
}
//current page
public int getCurrentPage() {
return page;
}
public int getFinalPage(){
int count =getItemsCount();
return count % pageSize ==0 ? (count/pageSize)-1 : count/pageSize;
}
public void setFinalPages(){
this.page=getFinalPage();
}
4. At DvDLibraryBean, modify and add:
private int pageSize;
private int [] page;
//getter and setter
@PostConstruct
public void postConstruct() {
page =new int[]{5, 10,15,20,30, 50};
pageSize=10;
}
public PaginationHelper getPagination() {
if (pagination == null) {
pagination = new PaginationHelper(this.pageSize, 0) {
@Override
...
}
//go to the 1st page
public String firstPage() {
pagination=null; //reset pagination to null or setting to page=0;
recreateModel();
return "home";
}
//go to the last page
public String lastPage() {
getPagination().setFinalPages();
recreateModel();
return "home";
}
public String recreatePageSize(AjaxBehaviorEvent e) {
pagination=null;
recreateModel();
return "home";
}
5. Modify faces-config.xml with referring to list_Bootstrap.xhtml
Here are codes of list_Bootstrap.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jsf='http://xmlns.jcp.org/jsf'
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head id='head_t'>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width initial-scale=1.0"/>
<link rel="stylesheet" href="#{request.contextPath}/faces/js/libs/bootstrap/css/bootstrap.css"/>
<h:outputScript library="js" name="jquery.js" />
<h:outputScript library="js" name="bootstrap.js" />
</h:head>
<body >
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">JSF 2.2</a>
</div>
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<br/>
<h2><h:outputFormat value="#{msg.welcome}">
<f:param value="#{empty login.username ? 'Guest' : login.username}"/>
</h:outputFormat>
!</h2>
<h:outputFormat value="#{msg.welcome_list}">
<f:param value="#{dvd.size}"/>
</h:outputFormat>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-sm-3">
<h:form>
<h4> <h:commandLink value="#{msg.goToList_library}" action="list_Bootstrap"/></h4>
<p style="color:gray ">#{msg.goToAdd_dvd}</p>
<p style="color:gray ">#{msg.goToSet_prefs}</p>
<hr/>
<p style="color:gray ">#{msg.loginBtnTxt}</p>
</h:form>
</div>
<div class="col-sm-9">
<div class="panel-group">
<div class="panel panel-info">
<div class="panel-heading">List of DvDs
</div>
<h:form id="listF1">
<h:outputText escape="false" value="#{msg.ListCustomerEmpty}" rendered="#{dvd.dtmdl.rowCount == 0}"/>
<h:panelGroup rendered="#{dvd.dtmdl.rowCount > 0}">    
<h:outputText value="#{dvd.pagination.pageFirstItem + 1}..#{dvd.pagination.pageLastItem + 1}/#{dvd.pagination.itemsCount}"/>
<h:commandLink action="#{dvd.previous}" value="#{msg.Previous} #{dvd.pagination.pageSize}" rendered="#{dvd.pagination.hasPreviousPage}"/>
<h:commandLink action="#{dvd.next}" value="#{msg.Next} #{dvd.pagination.pageSize}" rendered="#{dvd.pagination.hasNextPage}"/>
<h:dataTable value="#{dvd.dtmdl}" var="item" class="table table-responsive table-bordered table-striped"
>
<h:column>
<f:facet name="header">#{msg.column_Title}</f:facet>
#{item.title}
</h:column>
<h:column>
<f:facet name="header">#{msg.column_Year}</f:facet>
#{item.releaseyear}
</h:column>
<h:column>
<f:facet name="header">#{msg.column_Genre}</f:facet>
#{item.genre}
</h:column>
</h:dataTable>
</h:panelGroup>
<div class="container-fluid">
<div class="col-xs-12">
<button class="btn btn-default btn-sm" jsf:action="#{dvd.firstPage()}"
jsf:disabled="#{dvd.pagination.currentPage eq 0}">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
<button class="btn btn-default btn-sm" jsf:action="#{dvd.previous}"
jsf:disabled="#{not dvd.pagination.hasPreviousPage}">
<span class="glyphicon glyphicon-backward"></span>
</button>
 
<span class="text-primary">#{dvd.pagination.currentPage+1}</span>
 
<button class="btn btn-default btn-sm" jsf:disabled="#{not dvd.pagination.hasNextPage}"
jsf:action="#{dvd.next()}" >
<span class="glyphicon glyphicon-forward"></span>
</button>
<button class="btn btn-default btn-sm" jsf:action="#{dvd.lastPage()}"
jsf:disabled="#{dvd.pagination.currentPage eq dvd.pagination.finalPage}">
<span class="glyphicon glyphicon-step-forward"></span>
</button>
 
<h:selectOneMenu class=" btn" value="#{dvd.pageSize}"
>
<f:selectItems value="#{dvd.page}" var="pg"
itemLabel="#{pg}"
itemValue="#{pg}"/>
<f:ajax listener="#{dvd.recreatePageSize}" render="listF1"/>
</h:selectOneMenu>
</div>
</div>
<p/>
</h:form>
</div>
</div>
</div>
</div>
<hr/>
<footer>
<p>JSF 2.2 Pagination with Bootstrap</p>
</footer>
</div> <!-- /container -->
</body>
</html>
could you please provide fully working exmple
ReplyDeleteNow you can access at https://drive.google.com/file/d/0B6VCcx4qYgCZMWcwMDd5UnY4NTQ/view?pli=1
ReplyDelete