how to use scrolling for web dynpro for java tables

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

© 2010 SAP AG 1

How to Use Scrolling for Web

Dynpro for Java Tables

Applies to:

Web Dynpro for Java 7.11 For more information, visit the Web Dynpro Java homepage.

Summary

This tutorial describes the different options available for scrolling in tables. It shows how to implement scroll-tips for vertical scrolling and how to fix table columns in horizontal scrolling. It also discusses the usage of text wrapping inside table cells.

Author: Web Dynpro Java Team

Company: SAP AG

Created on: 29 June 2010

https://www.sdn.sap.com/irj/sdn/nw-wdjava

How to Use Scrolling for Web Dynpro for Java Tables


© 2010 SAP AG 2

Table of Contents

Introduction ................................................................................................................................................... 3

Prerequisites ................................................................................................................................................. 3

Systems, Installed Applications, and Authorizations ................................................................................... 3

Objectives ................................................................................................................................................. 3

The Tutorial Application................................................................................................................................. 4

Vertical Scrolling ........................................................................................................................................... 4

Implementing Custom Scroll Tips .................................................................................................................. 6

Horizontal Scrolling ....................................................................................................................................... 8

Fixed and Scrollable Table Columns ............................................................................................................. 9

Issues with Server-Side Horizontal Scrolling ................................................................................................ 12

Using Column Content Wrapping ............................................................................................................. 13

Using Non-Fixed Table Layout ................................................................................................................. 14

Restrictions ................................................................................................................................................. 15

More Information ......................................................................................................................................... 15

Text Symbols........................................................................................................................................... 16

Copyright .................................................................................................................................................... 17



© 2010 SAP AG 3

Introduction

In this tutorial you will learn how to implement vertical and horizontal scrolling for Web Dynpro tables. You will also learn how to implement scroll tips and how to use fixed and scrollable columns.

For simplicity reasons, the tutorial application does not use a real data model; a plain Java class that manages an extract of the geographical database “GeoNames” is used instead.

The “GeoNames” database is available at http://www.geonames.org/ under a Creative Commons License.

Prerequisites

Systems, Installed Applications, and Authorizations

You need the NetWeaver Developer Studio (Version 7.11 or later) to compile and deploy the tutorial application. The application server used should have the same version as the NWSD or a newer version.

The tutorial application is available as a development component (DC). You need to import the software component HM-WDUIDMKTCNT, which contains the DC tc/wd/tut/table/scrl. The exact steps are

described in a separate document.

Objectives

After working through this tutorial, you should be able to

Understand the vertical and horizontal scrolling capabilities of Web Dynpro tables

Implement custom scroll tips for vertical scrolling

Implement fixed table columns for horizontal scrolling

Understand the usage of the fixedTableLayout property and its effect on the table layout

Understand the advantages and the limitations of server-side table scrolling

http://www.geonames.org/

http://creativecommons.org/licenses/by/3.0/legalcode



© 2010 SAP AG 4

The Tutorial Application

The tutorial application displays a table of cities, together with some geographical information. The city list can be restricted using filters such as city name, country, and region. To start with, all cities in Germany with more than 5000 inhabitants are shown:

The city name column is fixed at the left side, as indicated by the bold column separator; the other five columns can be scrolled horizontally. Four of the five scrollable columns are initially visible.

Vertical Scrolling

As of Web Dynpro Release 7.1, the Table UI element provides a scrollbar for vertical scrolling. Earlier

versions only provided a set of paging buttons in the table footer for scrolling row-wise, page-wise, and to the first or last table row.

Vertical scrolling is performed by dragging the scrollbar thumb to a certain position and dropping it there. During the drag operation generic scroll tips are displayed:



© 2010 SAP AG 5

The generic scroll tip “Row <start> - <end> of <number>” displays the range of rows that will become visible if the scrollbar thumb is dropped at this position. The generic scroll tip does not provide any information on the content of the table. (The letter “M” you see on this scroll tip is provided by a custom scroll tip provider,

which will be described below).

As can be seen in the screenshot, the city table has a rather large number (> 40.000) of rows. For performance reasons, only the visible table rows are sent to the browser. Each scrolling operation triggers a (synchronous) server round-trip to retrieve exactly the data to be displayed at the new scrolling position. The scroll tip is updated by the client during the drag operation.

The client-side table size is independent of the size of the server-side context node that provides the table data.

In our sample application we have just filled the server-side context node with all > 40.000 records that can be shown in the table, but this is generally not necessary. There are techniques available that you can use to load the context node data on demand from the data model. These techniques enable scrolling through large datasets. For more information, see this article published in the SAP Community Network.

Keyboard interactions for vertical scrolling:

Page Up / Page Down Scroll page up / down

CTRL + Home / CTRL + End Scroll to first / last row

https://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/e0d6c30a-c99e-2b10-f09b-c9a00b7e78c6



© 2010 SAP AG 6

Implementing Custom Scroll Tips

The generic scroll tips can be enriched by information derived from the table content. To implement custom

scroll tips, you have to add a ScrollTipProvider to the Table:

A ScrollTipProvider can assign a (localizable) text to ranges of table rows. This is implemented by

binding the dataSource property of the ScrollTipProvider to a context node (cardinality=0:n) that

supplies a context element for each row range. The context element stores the start index and the text for the corresponding row range.

In our sample application we want to provide prefixes for the city names to be shown in the scroll tips. This is the supply function for the data source node ScrollTips:

public void supplyScrollTips(IPrivateTutorialView.IScrollTipsNode node,

IPrivateTutorialView.IContextElement parentElement)



© 2010 SAP AG 7

{

//@@begin supplyScrollTips(IWDNode,IWDNodeElement)

if (wdContext.currentSettingsElement().getComputeScrollTipLength())

{

int optimum = computeScrollTipLength();

wdContext.currentSettingsElement().setScrollTipLength(optimum);

}

int len = wdContext.currentSettingsElement().getScrollTipLength();

String prefix = null;

for (int i = 0; i < wdContext.nodeCities().size(); ++i)

{

String cityName = wdContext.nodeCities().getCitiesElementAt(i).getName();

String cityNamePrefix = (len < cityName.length())

? cityName.substring(0, len)

: cityName;

if ( !cityNamePrefix.equals(prefix) )

{

IScrollTipsElement tip = node.createAndAddScrollTipsElement();

tip.setStartRow(i);

tip.setText(cityNamePrefix);

prefix = cityNamePrefix;

}

}

//@@end

}

This code iterates over the current list of cities and computes the city name prefix for the given length. Every time the prefix changes a new row range is started and a new scroll tip is created.

The scroll tip length can be changed through the “Settings” dialog:

Enter different values for the scroll tip length and press the “Apply” button. Scroll inside the table and observe the changed scroll tip texts. Note how the number of scroll tips increases with the given length.

It is very important to keep the number of scroll tips and their text size at a reasonable value because otherwise the rendering performance may drastically deteriorate! All scroll tips have to be sent to the browser with every rendering of the table, not just those that belong to the currently displayed range of data.



© 2010 SAP AG 8

The tutorial application contains an algorithm that computes an optimum scroll tip length. To enable this functionality, select the “Compute Automatically” checkbox.

Change the city list using filter values and observe how the computed scroll tip length and number change. Scroll around in the table to see the changed scroll tips:

Horizontal Scrolling

The Web Dynpro table also provides server-side horizontal scrolling. For horizontal scrolling, it is not as critical to send only the currently visible data to the browser. However, for tables with a large number of columns or large column content, it might become a performance problem if all columns for the visible rows were sent to the browser at once.

One drawback of server-side scrolling is that it does not work as smoothly as client-side scrolling. You can only scroll complete table columns, and the sizes of the displayed columns have to be adapted to the space provided by the table. We will address this issue again later.



© 2010 SAP AG 9

Fixed and Scrollable Table Columns

The TableColumn UI element has a property named fixedPosition which controls if the column can be

scrolled horizontally or if it gets a fixed position at the left or right side of the table.

In our example, the “City” column is fixed at the left border. This is achieved by setting the value of

fixedPosition to TableColumnFixedPosition.LEFT. You can change the value interactively in the

“Settings” dialog. Note how the table changes for the different values.

Table columns are, by default, horizontally scrollable. The number of scrollable columns visible at a time is controlled by the Table property scrollableColCount.

You can change this value in the “Settings” dialog. Note how the table changes for different values:



© 2010 SAP AG 10

scrollableColCount = 1:




© 2010 SAP AG 11



As can be seen in the screenshots, the scrollable columns get their preferred width as specified in their

width property, but the last column has been clipped.

When you scroll horizontally, a scroll tip appears that indicates the range of columns that will be displayed after scrolling. The column header texts are used to identify the columns:



© 2010 SAP AG 12

Issues with Server-Side Horizontal Scrolling

The Table property fixedTableLayout controls how the table handles the specified width of its columns.

If this property is set, each column gets the space defined by its width property. If there is space left, it is

assigned to the right-most column. If there is not enough space, the column content is clipped and a clipping indicator is rendered. Additionally, the complete column content is displayed in the tooltip for that column.

Scroll the table to the right so that the “Alternative Names” column becomes visible. Have a look at the tooltips that appear:



© 2010 SAP AG 13

Using Column Content Wrapping

One way to avoid clipping of the column content is to enable wrapping. In the “Settings” dialog, you can set

wrapping for the “Alternative Names” column:

When wrapping is enabled, the user can see the complete column content (if the column content cannot be wrapped, clipping will occur nevertheless). If it is important to permanently see the column content, you should use wrapping.

The disadvantage of wrapping is that the table rows get different heights and the height of the table is no longer stable. This makes vertical scrolling more difficult because the position of the scrollbar buttons and the thumb will change after scrolling.



© 2010 SAP AG 14

Using Non-Fixed Table Layout

Another option for avoiding clipping is to set the fixedTableLayout property to false:

In this case, each table column gets the space it needs to render its complete content and the table is resized (“pushed”) to get the required width.

However, this solution has a serious disadvantage. If the table becomes wider than the space available in the table’s container or window, a scrollbar appears that may even hide the table’s own scrollbar:



© 2010 SAP AG 15

Restrictions

As is customary, the described features are only guaranteed to work in browser versions that are officially supported by the described Web Dynpro release.

More Information

SAP Developer Network SDN http://sdn.sap.com

http://sdn.sap.com/

http://sdn.sap.com/



© 2010 SAP AG 17

Copyright

© Copyright 2010 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9,

iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes,

BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.

Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of

Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries.

Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company.

All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable fo r errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the

express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituti ng an

additional warranty.

how to use scrolling for web dynpro for java tables

Documents