Htmlb Sample

Customizing HTMLB Table View Component

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 1


Applies to: SAP NetWeaver 2004 SPS15/ SAP Enterprise Portal 6.0 or higher.

Summary SAP has provided a rich set of Tag Library namely HTMLB for building first class web UI with ease. This Article is intended to guide users to customize the HTMLB Table View component, to avail advanced features like sorting, pagination, customized cell rendering. Author: Jithin.R.B Company: HCL Technologies Created on: 27 JULY 2007

Author Bio Jithin.R.B is working as a NetWeaver consultant for HCL Technologies Kolkata.



Table of Contents

...................................................................................................................................... 3 IntroductionPre Requisites ................................................................................................................................. 3 HTMLB Table View Component Overview................................................................................... 3

Scripting Support for HTMLB Table View .................................................................................... 5 Customization for Sorting Functionality ....................................................................................... 5

Implementing a Custom Table Model....................................................................................... 5 Configuring the Tableview Tag................................................................................................. 6 Implementing sort method in JSPDynPage/AbstractPortalComponent ................................... 6 Implementing the JSP Page..................................................................................................... 6

Customization for Pagination Functionality.................................................................................. 7 Appendix.......................................................................................................................................... 8

Appendix A CustomTableModel.java........................................................................................ 8 Appendix B JSPUtil.java ......................................................................................................... 13 Appendix C Sample.jsp........................................................................................................... 14

Related Content............................................................................................................................. 15 Disclaimer and Liability Notice....................................................................................................... 16



Introduction The HTMLB Table view allows users to arrange data - text, images, links, other tables etc. - into rows and columns, that is, in a tabular fashion. Table view rows may be grouped into a header, body and footer section. The table view supplies navigation buttons for scrolling the table. In addition, the table view offers mechanisms for single and multiple selections of rows. There are certain unexplored features of a Table View Component as mentioned below Sorting Functionality Customized Cell Rendering Pagination This Article is mainly intended to guide the readers to accomplish the functionalities mentioned above.

Pre Requisites It is assumed that the reader of this article is well aware of Basic awareness of HTMLB Components Basic awareness of Iview Development using Java Stack It is also assumed that NWDS is installed and user is well aware of development of portal components using NWDS

HTMLB Table View Component Overview Summarized below are some of the important attributes for HTMLB Table View Component

Attribute Req.

Values Default JSP Taglib Classlib

FALSE setCellDisabled(int rowIndex, cellDisabled no TRUE

FALSE int colIndex, boolean state)

CENTER setCellHAlignment(int rowIndex, CHAR int colIndex, CellHAlign.RIGHT) JUSTIFY LEFT

cellHAlignment no

RIGHT

LEFT

FALSE setCellHeaderVisible cellHeaderVisible no TRUE

TRUE (boolean state)

FALSE setCellInvalid(int rowIndex, cellInvalid no TRUE

FALSE int colIndex, boolean state) setCellRenderer cellRenderer no - none (ICellRenderer tabCellRenderer)

BUTTON setCellType(int rowIndex, IMAGE IMAGELINK int colIndex, INPUT TableColumnType.LINK) LINK TEXT

cellType no

USER

TEXT

BASELINE setCellVAlignment(int rowIndex, BOTTOM int colIndex, CellVAlign.TOP) MIDDLE

cellVAlignment no

TOP

MIDDLE

setColspanForCell(int rowIndex, colspanForCell no Numeric 1 int colIndex, int colspan) setColumnAt columnAt no Numeric - (TableColumn col, int colIndex)

columnCount no Numeric 1 setColumnCount(10) CENTER setColumnHAlignment CHAR (int colIndex, CellHAlign.RIGHT) JUSTIFY

columnHAlignment no

LEFT

LEFT



RIGHT setColumnInvisible columnInvisible no String - ("columnName") setColumnName columnName no String - ("columnName", 2)

BUTTON setColumnType IMAGE IMAGELINK (TableColumnType.LINK, 2) INPUT LINK TEXT

columnType no

USER

TEXT

BASELINE setColumnVAlignment BOTTOM (3, CellValign.TOP) MIDDLE

columnVAlignment

TOP

MIDDLE

STANDARD setDesign ALTERNATING (TableViewDesign.

design no

TRANSPARENT

STANDARD

design="ALTERNATING"

ALTERNATING) setEmptyTableText emptyTableText no String none ("No data available")

FALSE fillUpEmptyRows no TRUE

TRUE fillUpEmptyRows="FALSE"

setFillUpEmptyRows(false)

setFooterRenderer footerRenderer no - - (IFooterRenderer fRenderer)

FALSE footerVisible no TRUE

TRUE footerVisible="FALSE" setFooterVisible(false)

setHeaderCellRenderer headerCellRenderer no - - (IHeaderCellRenderer hRend) setHeaderRenderer headerRenderer no - - (IHeaderRenderer hRenderer)

headerText no String TRUE headerText="SAP training"

setHeaderText("SAP training")

FALSE headerVisible no TRUE

TRUE headerVisible("FALSE") setHeaderVisible(false)

id yes String none id="Trainingscenter" setId("Trainingscenter") keyColumn no Numeric none setKeyColumn(3)

setLinkColumnKey linkColumnKey no - none ("linkRef", 3)

model="myBean.model" setModel model no String none ((TableViewModel) model)

BYPAGE setNavigationMode navigationMode no BYLINE

BYPAGE

navigationMode="BYLINE" (TableNavigationMode.BYLINE)

rowCount no Numeric defined by model

rowCount="5" setRowCount(5)

setRowRenderer rowRenderer no - none (IRowRenderer rRenderer)

FALSE rowSelectable no TRUE

TRUE setRowSelectable(3, false)

setRowSpanForCell rowspanForCell no Numeric none (int rowInd, int colInd, int rSpan)

BASELINE setRowVAlignment BOTTOM (3, CellVAlign.TOP) MIDDLE

rowVAlignment no

TOP

MIDDLE

MULTISELECT setSelectionMode NONE (TableSelectionMode.NONE)

selectionMode no

SINGLESELECT

MULTISELECT

selectionMode="NONE"

BADVALUE_DARK setStyleForCell BADVALUE_ LIGHT (int rowIndex, int colIndex BADVALUE_ MEDIUM TableCellStyle.NEGATIVE) CRITICALVALUE_DARK CRITICALVALUE_LIGHT CRITICALVALUE_MEDIUM GOODVALUE_DARK

styleForCell no

GOODVALUE_LIGHT

STANDARD



GOODVALUE_MEDIUM GROUP_HIGHLIGHTED GROUP_HIGHLIGHTED_LIGHT

GROUP_LEVEL1 GROUP_LEVEL2 GROUP_LEVEL3 KEY_MEDIUM MARKED NEGATIVE POSITIVE STANDARD SUBTOTAL SUBTOTAL_LIGHT TOTAL

summary no String none setSummary("Summary") CENTER setTableHAlignment CHAR (CellHAlign.CENTER) JUSTIFY LEFT

tableHAlignment no

RIGHT

LEFT

setUserTypeCellRenderer userTypeCellRender

er no - none

(ICellRender cRenderer) visibleFirstRow no Numeric 1 visibleFirstRow="5" setVisibleFirstRow(5) visibleRowCount no String defined

by model

visibleRowCount="20" setVisibleRowCount(20)

width no Unit none width="500" setWidth("500")

Scripting Support for HTMLB Table View Events Req. Values Default Case

sens. JSP Taglib Classlib

String onCellClick no

None yes

setOnCellClick(colIndex, "Pr_Cell")

String String String

onClientCellClick no

String

None yes

onNavigate="Pr_NavClick"

setClientCellClick(colIndex, "JavaScript")

onRowSelection no String None yes setOnRowSelection("Pr_Row")

From the above table its clear that HTMLB Table View Offers a rich functionality when used as a Class Lib, but when used as a tag library many of the useful attributes are not supported.

The Solution

Customization for Sorting Functionality

Implementing a Custom Table Model Sorting functionality can be implemented by introducing a custom TableViewModel, which has the functionality for sorting its contents. This custom TableViewModel needs to extend DefaultTableViewModel class which HTMLB offers, so that it can be used as a Model for the Customized Table View Component. The customized TableViewModel also implements the comparator interface, so that the Data Comparison logic can be implemented inside the compare method. Now since our model implements comparator interface we can use Collections API of Java to sort the columns vector. The full implementation of Custom Model class is listed under Appendix A



Configuring the Tableview Tag The HTMLB Tableview Tag by default doesnt support sort attribute, but the class lib does. We need to write a scripplet in the JSP page using the Tableview Tag to avail sort functionality as shown below.

Since this scripplet will be redundant in all JSP pages which needs a Sort able Table, we can move this piece of code to a utility class namely JSPUtil. The implementation is defined under setSortTable method of JSPUtil. I addition to the above mentioned fragment of code, additional code can be found in setSortTable method of JSPUtil, which does the trick of toggling the column header status based on the current column sort state. The full implementation of JSPUtil class is listed under Appendix B.

Implementing sort method in JSPDynPage/AbstractPortalComponent When user clicks the header of any column, EPCF triggers sort event (mySortMethod in our case), which is interpreted by the Portal Runtime to invoke the respective method of controller component. The implementation of the controller components sort method is shown below.

CustomTableModel tableModel =(CustomTableModel)request.getComponentSession().getValue("attr_name"); TableHeaderClickEvent tHEvent = (TableHeaderClickEvent)event; model.sortByColumn(tHEvent.getColumn()-1); request.getServletRequest().setAttribute("request_attr",model);

It is to be noted that the model should stored as session attribute by name attr_name (referring to the above snippet), before loading the page which contains the table view. To simplify the sequence which will be performed in real time is listed below

1) The controller receives a fetch request 2) Controller queries the back end system and generates the CustomTableModel 3) CustomTableModel will be stored as a session attribute by name attr_name and the request will be

forwarded to result page with the model as a request attribute. 4) Result Page renders the Sort able Table using the model in the request scope. 5) User Clicks on Header of a column to and the controller sort method is invoked 6) Controller Sort method retrieves the Model From session sorts it and set it back to the session and

forwards to result page with the model as a request attribute

Implementing the JSP Page Code snippet given below depicts the sample usage of the table View in a JSP Page.



navigationMode="BYPAGE" headerText="Sample Table" onNavigate="myNavigate" visibleFirstRow="" visibleRowCount="10" width="730" >

Full implementation of the JSP can be found under Appendix C

Customization for Pagination Functionality Pagination Controller Method can be specified onNavigate attribute of the HTMLB Tableview Tag. The controller method implementation will be as shown below.

String rowCount ="0"; CustomTableModel tableModel =(CustomTableModel)request.getComponentSession().getValue("myModel"); model.setTableModel(tableModel); if(event instanceof TableNavigationEvent){ rowCount=String.valueOf(((TableNavigationEvent)event).getFirstVisibleRowAfter()); } model.setFirstRow(rowCount);

The above code snippet assumes that CustomTableModel will be stored as a session attribute by name my Model, before triggering onNavigate event.



Appendix

Appendix A CustomTableModel.java public class CustomTableModel extends DefaultTableViewModel implements Comparator { protected int currCol; /** * Vector to Store The State Of the Column */ protected Vector ascendCol; protected Integer one = new Integer(1); protected Integer minusOne = new Integer(-1); protected boolean unOrdered= true; public CustomTableModel() { super(); ascendCol = new Vector(); } public CustomTableModel(Vector vec) { super(vec); ascendCol = new Vector(); } public CustomTableModel(Vector vec,Vector vCols) { super(vec,vCols); ascendCol = new Vector(); setSortOrder(vCols.size()); } public CustomTableModel(Vector vec, Vector vec2, int numberOfColumns) { super(vec, vec2); ascendCol = new Vector(); setSortOrder(numberOfColumns); } /** * This method is the implementation of the Comparator interface. * It is used for sorting the rows */



public int compare(Object v1, Object v2) { // the comparison is between 2 vectors, each representing a row // the comparison is done between 2 objects from the different rows that are in the column that is being sorted int ascending = ((Integer) ascendCol.get(currCol)).intValue(); if (v1 == null && v2 == null) { return 0; } else if (v2 == null) { // Define null less than everything. return 1 * ascending; } else if (v1 == null) { return -1 * ascending; } Object o1 = ((Vector) v1).get(currCol); Object o2 = ((Vector) v2).get(currCol); // If both values are null, return 0. if (o1 == null && o2 == null) { return 0; } else if (o2 == null) { // Define null less than everything. return 1 * ascending; } else if (o1 == null) { return -1 * ascending; } if (o1 instanceof Number && o2 instanceof Number) { Number n1 = (Number) o1; double d1 = n1.doubleValue(); Number n2 = (Number) o2; double d2 = n2.doubleValue(); if (d1 == d2) { return 0; } else if (d1 > d2) { return 1 * ascending; } else { return -1 * ascending; } } else if (o1 instanceof Boolean && o2 instanceof Boolean) {



Boolean bool1 = (Boolean) o1; boolean b1 = bool1.booleanValue(); Boolean bool2 = (Boolean) o2; boolean b2 = bool2.booleanValue(); if (b1 == b2) { return 0; } else if (b1) { return 1 * ascending; } else { return -1 * ascending; } } else { // default case if (o1 instanceof Comparable && o2 instanceof Comparable) { Comparable c1 = (Comparable) o1; Comparable c2 = (Comparable) o2; // superflous cast, no need for it! try { return c1.compareTo(c2) * ascending; } catch (ClassCastException cce) { // forget it... we'll deal with them like 2 normal objects below. } } String s1 = o1.toString(); String s2 = o2.toString(); return s1.compareTo(s2) * ascending; } } /** * This method sorts the rows using Java's Collections class. * After sorting, it changes the state of the column - * if the column was ascending, its new state is descending, and vice versa. * **/ public void sort() { Collections.sort(dataVector, this);



unOrdered = false; Integer val = (Integer) ascendCol.get(currCol); ascendCol.remove(currCol); if (val.equals(one)) // change the state of the column ascendCol.add(currCol, minusOne); else ascendCol.add(currCol, one); System.out.println(ascendCol.toString()); } public void sortByColumn(int column) { this.currCol = column; sort(); } public void setSortOrder(int numberOfColumns) { for (int i = 0; i < numberOfColumns; i++) { ascendCol.add(one); } } public Vector getColumnSortStatus(){ if(!unOrdered){ return ascendCol; }else{ Vector vReturn = new Vector(); for(int i=0;i



} return buffer.toString(); } }



Appendix B JSPUtil.java public class JSPUtil { public static void setSortTable( TableView tableView, Vector columnList,String sortMethod){ tableView.setOnHeaderClick(sortMethod); log.debug("setSortTable ()"+"Header Click Set "); Integer val = new Integer(0); TableSortState state=TableSortState.NONE; if(columnList!=null){ for(int i=0;i



Appendix C Sample.jsp



Related Content HTMLB Reference PRT Reference



Disclaimer and Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

Applies to:SummaryAuthor BioTable of ContentsIntroductionPre RequisitesHTMLB Table View Component OverviewScripting Support for HTMLB Table ViewCustomization for Sorting FunctionalityImplementing a Custom Table ModelConfiguring the Tableview TagImplementing sort method in JSPDynPage/AbstractPortalComponentImplementing the JSP Page

Customization for Pagination Functionality

AppendixAppendix A CustomTableModel.javaAppendix B JSPUtil.javaAppendix C Sample.jsp

Related ContentDisclaimer and Liability Notice

Documents

Htmlb Sample