View
223
Download
3
Category
Preview:
DESCRIPTION
ABAP BSP HTMLB
Citation preview
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 1
Customizing HTMLB Table View Component
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.
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 2
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
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 3
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
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 4
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
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 5
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
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 6
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.
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 7
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.
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 8
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 */
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 9
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) {
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 10
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);
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 11
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
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 12
} return buffer.toString(); } }
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 13
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
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 14
Appendix C Sample.jsp
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 15
Related Content HTMLB Reference PRT Reference
Customizing HTMLB Table View Component
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2006 SAP AG 16
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
Recommended