Archive

Archive for April, 2013

Display Tag ajax pagination and Hibernate

April 4, 2013 4 comments

Display Tag ajax

Display tag is one of powerful tools for displaying collection on table template, light weight, customizable, and fully supported for java web application. Read more here for more information and how to implement this tools on web projects.

By default, display tag will automatically create pagination and navigation if data length greater than page size property and act as server side process and run synchronously. This mechanism at some point will reduce performance, especially if the displayed data processed without pagination query and has huge massive data.

In this post, will be explained how to combine display tag, Jquery as powerfull ajax framework, and hibernate for making such light mechanism to populate data, display and boost pagination  performance. this sample using Struts2 framework.

The steps are :

1. Create 2 jsp files, as main page and display tag page.

mainPage.jsp

<%@ include file=”/include/definitions.jsp”%>

<!DOCTYPE html>

<html lang=”id”>

<head>

<title>Persetujuan Permintaan Pengadaan (PR)</title>

 

<script type=”text/javascript”>

if (!display)

var display = {};

display.jwebs = {

onTableLoad : function() {

$(“table#s th.sortable”).each(function() {

$(this).click(function() {

var link = $(this).find(“a”).attr(“href”);

jQuery.facebox(‘<div style=”padding: 17px; font-size: 36px;”>Loading….</div>’);

$(“div#hasil”).load(link, {}, display.jwebs.onTableLoad);

jQuery.facebox.close();

return false;

});

});

 

$(“div#hasil .pagelinks a”).each(function() {

$(this).click(function() {

var link = $(this).attr(“href”);

jQuery.facebox(‘<div style=”padding: 17px; font-size: 36px;”>Loading….</div>’);

$(“div#hasil”).load(link, {}, display.jwebs.onTableLoad);

jQuery.facebox.close();

return false;

});

});

}

};

 

$(document).ready(

function() {

$(“div#hasil”).load(

“${contextPath}/ajax/report/permintaan.jwebs”, {},display.jwebs.onTableLoad);

});

</script>

</head>

<body>

<!– BreadCrumbs –>

<div class=”breadCrumb module”>

<ul>

<li><s:a action=”dashboard”>Home</s:a></li>

</ul>

</div>

<!– End of BreadCrumbs –>

 

<div id=”right”>

<div class=”section”>

<!– Alert –>

<s:if test=”hasActionErrors()”>

<div class=”message red”>

<s:actionerror />

</div>

</s:if>

<s:if test=”hasActionMessages()”>

<div class=”message green”>

<s:actionmessage />

</div>

</s:if>

 

<div class=”box”>

<div class=”title”>

Daftar Permintaan Pengadaan <span class=”hide”></span>

</div>

<div class=”content”>

<div id=”hasil”></div>

</div>

</div>

</div>

</div>

</body>

</html>

 

display.jsp

 

<%@ include file=”/include/definitions.jsp”%>

<s:hidden name=”prcMainHeader.ppmId” id=”ppmId”></s:hidden>

<display:table name=”${listPrcMainHeader }” id=”s” pagesize=”10″

excludedParams=”*” style=”width: 100%;” class=”style1″

requestURIcontext=”true”

requestURI=”${contextPath }/ajax/report/permintaan.jwebs”

size=”resultSize” partialList=”true”>

<display:column title=”No.” style=”width: 20px; text-align: center;”>${s_rowNum}</display:column>

<display:column title=”Permintaan” total=”true” style=”width: 200px;”>

<c:choose>

<c:when test=”${update ==1 }”>

<a href=”${contextPath }/procurement/approval.jwebs?id=${s.ppmId }”>${s.ppmNomorPr

}</a>

</c:when>

<c:otherwise>

${s.ppmNomorPr }

</c:otherwise>

</c:choose>

 

</display:column>

<display:column title=”Nama Permintaan” style=”width: 150px; ”

class=”center”>${s.ppmSubject }</display:column>

<display:column title=”User Skr” style=”width: 150px;” class=”center”>${s.admUserByPpmCurrentUser.completeName }</display:column>

<display:column title=”Satker” style=”width: 100px;” class=”center”>${s.admDept.deptName }</display:column>

<display:column title=”Tanggal” class=”center” style=”width: 200px;”>

<fmt:formatDate value=”${s.createdDate }”

pattern=”HH:mm:ss, dd MMM yyyy” />

</display:column>

<display:column title=”Aksi” class=”center” style=”width: 200px;”>

<input type=”submit” name=”proses” value=”Proses”

onclick=”setValue(‘${s.ppmId }’);FreezeScreen(‘Data Sedang Di proses’)”

class=”uibutton” />

</display:column>

</display:table>

 

2. create action to populate data.

/**

* main page action

* @return

* @throws Exception

*/

@Action(

results={

@Result(name=SUCCESS,location=”report/mainPage.jsp”),

@Result(name=”ok”,location=”report/pemintaan”, type=”redirectAction”),

},value=”report/permintaan”

)

public String reportPr() throws Exception{

try {

 

} catch (Exception e) {

addActionError(e.getMessage());

return “ok”;

}

return SUCCESS;

}

 

/**

* ajax call action

* @return

* @throws Exception

*/

@Action(

results={

@Result(name=SUCCESS,location=”report/ajax/display.jsp”)

},value=”ajax/report/permintaan”

)

public String ajaxReportPr() throws Exception{

try {

model.setResultSize(prcService.countPrcMainHeaderPR(null));

model.setListPrcMainHeader(prcService.listPrcMainHeaderPR(null,model.getPage(request),size));

} catch (Exception e) {

addActionError(e.getMessage());

}

return SUCCESS;

}

3. Add method getPage(HttpRequest) to filter page data from display tag link navigation

/**

* get page from display tag

*

* @param request

* @return

* @author kusumah

*/

public int getPage(HttpServletRequest request) {

int page = 0;

@SuppressWarnings(“rawtypes”)

Enumeration paramNames = request.getParameterNames();

while (paramNames.hasMoreElements()) {

String name = (String) paramNames.nextElement();

if (name != null && name.startsWith(“d-“) && name.endsWith(“-p”)) {

String pageValue = request.getParameter(name);

if (pageValue != null) {

page = Integer.parseInt(pageValue) – 1;

}

}

}

return page;

}

3. create hibernate query to populate data.

public Object getListByDetachedCiteriaPaging(DetachedCriteria crit,int page, int size){

Session ses = HibernateUtil.getSession();

List<Object> lst = new ArrayList<Object>();

Criteria cr = crit.getExecutableCriteria(ses);

cr.setFirstResult(page*size).setMaxResults(size);

lst =cr.list();

ses.clear();

ses.close();

return lst;

}

 

@Override

public int countPrcMainHeaderPR(Object object) throws Exception {

DetachedCriteria dc = DetachedCriteria.forClass(PrcMainHeader.class);

dc.setResultTransformer(DetachedCriteria.DISTINCT_ROOT_ENTITY);

dc.setProjection(Projections.rowCount());

Object obj = getEntityByDetachedCiteria(dc);

return Integer.valueOf(String.valueOf(obj)).intValue();

}

@SuppressWarnings(“unchecked”)

@Override

public List<PrcMainHeader> listPrcMainHeaderPR(Object object, int page,

int i) throws Exception {

DetachedCriteria dc = DetachedCriteria.forClass(PrcMainHeader.class);

dc.setResultTransformer(DetachedCriteria.DISTINCT_ROOT_ENTITY);

dc.setFetchMode(“admUserByPpmCurrentUser”, FetchMode.JOIN);

dc.setFetchMode(“admDept”, FetchMode.JOIN);

dc.add(Restrictions.isNull(“ppmNomorRfq”));

return (List<PrcMainHeader>) getListByDetachedCiteriaPaging(dc, page, i);

}

 

and voila …

now display tag paging navigation will use ajax mechanism with internal query paging.

 

Thursday, 4 April 2013

Jwebs Tower

 

A. Ahmad Kusumah