java marcher

Ajax-ing / jMaki-ing JSR168 Portlet for JES-Portal - Part 2

Last update : 14 Feb 2007 

This blog is the second in a series on How-to develop/deploy JSR168 Portlet for Java ES-Portal.

1. The previous article ( Part 1 :
   How to develop/deploy SAP JSR168 Portlet for JES-Portal ) enlightened the development environment recommended to create/test/deploy easily JSR168 portlet.
   
2. This article (Part 2: Ajax-ing / jMaki-ing JSR168 Portlet for JES-Portal)  will focus mainly on the added values provided by AJAX/jMaki widgets.
   

In the previous article, we have developed a SAP NameFinder JSR168 portlet with a traditional approach that is to say without any AJAX/jMaki widgets.

Behind the scene, the JSR168 portlet is composed of a servlet and 3 JSP pages : view, edit & help pages. The servlet acts as a Controller of a typical MVC model sending a request to SAP, getting in return a huge SAP structures to be displayed in the view.jsp.

As far as the presentation layer is concerned, a great part of the code written for this sample is embedded into the view.jsp.  Browsing this screenshot, it can be noticed some fancies features have been integrated such as a « sorting » mechanism for each column. When you want to implement this sorting mechanism you need a couple of Java statements. Right???

 3. jMaki widget an easy way

Important Note :

YOU HAVE TO  use the Netbeans-jMaki plugin version 1.6.9 or later.

Module Manager for Ajax Module in Netbeans  

Let see how a jMaki widgets can be helpful in this direction. A couple of jMaki widgets can be used as a Dojo Table or a Dojo eTable. Let take the simple one : a Dojo Table.

We got the following results :

In order to make use of a Dojo Table in this sample, we have to :

1. create a  Bean in order to xform the SAP returned data into a JSON Array
2. remove from the view.JSP the Table and all the code required to sort each column
3. insert a Dojo Table in the view.jsp
4. pass to the Dojo Table a JSON string managed by a session bean with the SAP data to be displayed.
   

4. So what / Conclusion

• The GUI design is more or less the same,
• With the  jMaki  version, the column sorting mechanism comes for free : we don't code a single line about this stuff.

About the standard implementation 

The initial JSP is about 600 lines of HTML tags and Java statements. A great part of this JSP code is dedicated the sorting mechanism of the columns. We are talking about 350 lines wrtitten to manage the columns sorting

About the jMaki implementation 

The 350 lines have been remplaced by the following jMaki tag and a Java Bean in charge of the xform of the SAP returned data in a JSONArray to be consumed by the jMaki tag

Sample code required for sorting a column  : X  7 as we have 7 columns

jMaki tag

<!-- Start Employee Number header and Arrow -->              <th align="left" class="TblColHdr" scope="col">         <table class="TblHdrTbl" border="0" cellspacing="0" cellpadding="0">           <% if(sortField==NamefinderDetailComparator.SORT_FIELD_EMP_NUMBER && sortOrder==NamefinderDetailComparator.SORT_ORDER_DESCENDING){ %>           <tbody>             <tr>               <td><a href='<portlet:actionURL>                        <portlet:param name="operation" value="SORT" />                    <portlet:param name="sort_field" value="EMP_NUM" />                    <portlet:param name="sort_order" value="ASC" />                    </portlet:actionURL>' class="TblHdrLnk"                             title='<fmt:message key="SORT_ASCENDING"/>'><fmt:message key="NAMEFINDER_RESULT_EMPNUMBER"/>                    </a>               </td>               <td><a href='<portlet:actionURL>                        <portlet:param name="operation" value="SORT" />                    <portlet:param name="sort_field" value="EMP_NUM" />                    <portlet:param name="sort_order" value="ASC" />                    </portlet:actionURL>' class="TblHdrLnk"                             title='<fmt:message key="SORT_ASCENDING"/>'>                             <img src="<%=renderResponse.encodeURL(renderRequest.getContextPath()+"/images/table/sort_down_sel.gif"%>" alt='<fmt:message key="SORT_ASCENDING"/>' width="27" height="13" border="0" align="top">                    </a>               </td>             </tr>           </tbody>                 <% }else{ %>             <tbody>             <tr>               <td><a href='<portlet:actionURL>                        <portlet:param name="operation" value="SORT" />                    <portlet:param name="sort_field" value="EMP_NUM" />                    <portlet:param name="sort_order" value="DSC" />                    </portlet:actionURL>' class="TblHdrLnk"                             title='<fmt:message key="SORT_DESCENDING"/>'><fmt:message key="NAMEFINDER_RESULT_EMPNUMBER"/>                    </a>               </td>               <td><a href='<portlet:actionURL>                        <portlet:param name="operation" value="SORT" />                    <portlet:param name="sort_field" value="EMP_NUM" />                    <portlet:param name="sort_order" value="DSC" />                    </portlet:actionURL>' class="TblHdrLnk"                             title='<fmt:message key="SORT_DESCENDING"/>'>                             <img src="<%=renderResponse.encodeURL(renderRequest.getContextPath()+"/images/table/sort_up_sel.gif"%>" alt='<fmt:message key="SORT_DESCENDING"/>' width="27" height="13" border="0" align="top">                                               </a>               </td>             </tr>           </tbody>           <%}%>         </table>         </th>         <!-- End Employee Number header and Arrow -->

<a:ajax name="dojo.table"                     value="{columns:                     { 'employeenumber' : 'EmployeeNumber #', 'firstname' : 'FirstName', 'lastname' : 'LastName',                        'roomnumber' : 'RoomNumber', 'building' : 'BuildingNumber', 'extension' : 'Extension',                        'email' : 'eMail'},                     rows:${appBean.namefinderdetail} }" />

Posted at 05:43PM Feb 12, 2007 by patriceg in Sun  |  Comments[5]