cd360 best practices for web dynpro abap -...

Dirk Feeken, Hans-Dieter Geyer, Uwe Klinger, Klaus Keller, Bertram Ganz TIP Core, SAP AG

September 2011

CD360

Best Practices for Web Dynpro ABAP

© 2011 SAP AG. All rights reserved. 2

Disclaimer

This presentation outlines our general product direction and should not be relied on in making a

purchase decision. This presentation is not subject to your license agreement or any other agreement

with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to

develop or release any functionality mentioned in this presentation. This presentation and SAP's

strategy and possible future developments are subject to change and may be changed by SAP at any

time for any reason without notice. This document is provided without a warranty of any kind, either

express or implied, including but not limited to, the implied warranties of merchantability, fitness for a

particular purpose, or non-infringement. SAP assumes no responsibility for errors or omissions in this

document, except if such damages were caused by SAP intentionally or grossly negligent.


Agenda

Web Dynpro ABAP Containers and Layouts

Container UI Elements

Container Layouts

New FormLayout

Web Dynpro ABAP UI Element Positioning

Layouting Metamodel and LayoutData Object

Virtual Container Cells

Layouting Rules

Web Dynpro ABAP UI Element Sizing

100% Height Sizing

Table Sizing

Web Dynpro ABAP UI Performance

General Performance Aspects

UI Price Tags

Efficient Server Push Emulation

Web Dynpro ABAP UI Drag & Drop


Session Abstract CD360

Description Type Audience

Within this lecture you will learn about important concepts and practical

guidelines for building state-of-the-art freestyle Web Dynpro ABAP user

interfaces.

We show which container layouts (including the new form layout) are

appropriate for specific scenarios and provide rules for the horizontal and

vertical sizing of UI element containers, container cells, and UI elements.

We will also cover performance topics and additional UI design aspects like

server push mechanisms and the implementation of drag and drop

scenarios.

4-hours Hands

On

Developers or architects

with knowledge in building

Web Dynpro ABAP user

interfaces

Best-Practices for Designing Web Dynpro ABAP User Interfaces


What this Lecture is all about and What You will Get out of it …

Container UI Elements

Container Layouts

Performance Aspects

UI Price Tags

Virtual Layout Cells

Vertical Alignment

Horizontal Alignment

Relative and Absolute Widths

Widths and Height QuestionsLectu

re C

onte

nt

Containers &

Layouts

Positioning

Sizing

Performance

Lecture Value

What You Get

Better understand Web Dynpro nesting and

layout principles

Improved Web Dynpro ABAP UI development

skills

Realize view layouts from given UI

mock-ups more rapidly

Improve usability for end users

Elastic UIs with 100% width or height

Optimize application UI design

Optimize Rendering Performance

Avoid UI Design pitfalls

Reduce Total Cost of Development

Localizing CD360 in Solution Map for SAP User Interfaces

Your Are Here


Solution Map for SAP User Interfaces

Integration Repositories Infrastructure

UI Solutions Products

User Interface

ClientsDesktop Browser Mobile

Applications

& Content

Applications with

Enhanced User InterfacesPre-Defined Content

Adaptation

Technologies Composition and Orchestration

Develop your own

user interfaces

Extend or tweak

your user interfaces

Adopt latest

UI enhancements

Ad

op

tT

we

ak

De

ve

lop

Configuration PersonalizationCustomizing

Development

All User Interface relevant items at one place

Integration Repositories Infrastructure

UI Solutions Products

User Interface

ClientsDesktop Browser Mobile

Applications

& Content

Applications with

Enhanced User InterfacesPre-Defined Content

Adaptation

Composition and Orchestration

Develop your own

user interfaces

Extend or tweak

your user interfaces

Adopt latest

UI enhancements

Configuration PersonalizationCustomizing

Technologies Development

You Are HereYou Are Here

Web Dynpro ABAP Container UI Elements

and LayoutsContainer UI Elements

Container Layouts

New FormLayout


Web Dynpro ABAP Container UI Elements

Web Dynpro ABAP Containers are UI elements that can contain a number of other arbitrary UI

elements called its children.

Containers have a layout that controls the positioning of child UI elements.

A child UI element that is managed by a layout of its embedding container provides a layout data

carrying individual layout information.

There are 5 kinds of containers available:

TransparentContainer ( class CL_WD_TRANSPARENT_CONTAINER)

Group ( class CL_WD_GROUP)

Tray ( class CL_WD_TRAY)

Panel* ( class CL_WD_PANEL) *new in SAP NetWeaver 7.0 EhP2

ScrollContainer deprecated no longer use it!


Container UI Elements: TransparentContainer

TransparentContainer UI element - a generic container that can contain child UI elements and

control their position on the view.

Used as the default root container (root container type can be changed in SAP NetWeaver 7.0

EhP1)

Example:


Container UI Elements: Group

Group UI element – similar in behavior to the TransparentContainer with added functionality.

Should be used to group UI elements that belong logically together.

Provides a design property to change the coloring of title bar, panel and panel borders.

Includes a group header that describes the functionality of its contained UI elements.

Can include a tool bar with buttons

Example: Group ToolbarGroup Header

Group ChildToolbarPopin Content*

ToolbarPopin TextBar*


Container UI Elements: Tray

Tray UI Element – similar in behavior to Group container with added functionality.

Tray container can have a popup menu

Tray container can be opened or collapsed to save screen space.

Example:

Expanded Tray

CollapsedTray

Popup Menu in Tray

Expand/Collapse Button


Container UI Elements: Panel

Panel UI element – similar in behavior to the Tray container with added functionality.

Unlike a Tray a Panel has a toggle button, which is displayed in the form of a small triangle in the top

left corner

Different to a Tray the height property specifies the full height of Panels including header and ToolBar

Three different toolbar flavors: below header, beside header text, right-side header functions

Example: Toggle Button

Panel Content

Panel HeaderPanel Toolbar

Left Header Toolbar Right Header Toolbar


Container UI Elements: ScrollContainer

No longer use the deprecated ScrollContainer UI Element

Follow the immediacy principle = “there is no need to scroll!”

Make all information visible at a glance: avoid further end user actions to see

information (selection, submit, or scroll)

Avoid Scrolling at all and don‟t use ScrollContainers in Tabs

Inside Tabs: make all contained UI elements directly visible.

For „large Tab UIs‟: don‘t use ScrollContainers or other scrollable container UI

elements but favor UI content separation and navigation to another view layout.

When scrolling is really needed apply the scrollingMode-property of Groups,

Trays, Panels and Transparent-Containers

Don‘t embed ScrollContainers inside containers.

Don‘t add your own ‗custom‘ scroll containers: instead, utilize the inbuilt scrolling

capability of your Web Dynpro client (Browser or NetWeaver Business Client)

✖

✔

✖


Web Dynpro UI Element Container Layouts

Layouts are associated with containers and control how UI elements are

positioned on the view.

You set the layout type by setting the ―Layout‖ property of the UI element container.

There are 5 kinds of layouts:

FlowLayout

RowLayout

MatrixLayout

GridLayout

FormLayout

(new in SAP NetWeaver

7.0 EhP2)

Each container must use

one of these layouts!

MatrixLayout Properties

The Panel Container„s

Layout is of type

‚MatrixLayout„


UI Container Layouts: Flow Layout

FlowLayout – each UI element is shown up on the same row until there is no space left on that

row, a new row is then started.

Is the default layout for your containers.

You cannot define line breaks.

NOTE: Containers inside a flow layout enforce line breaks

(e.g. TransparentContainers, Tabs, Groups …)

Example:

without wrapping

with wrapping

enabled


UI Container Layouts: RowLayout

RowLayout – Like FlowLayout but allows to control line breaks.

Each UI element in a container that is using the RowLayout will have a LayoutData property.

Set this property to ―RowHeadData‖ data to start a new row.

Leave this property set to ―RowData‖ so that it appears on a row that already exists.

There is no control of vertical positioning and no horizontal alignment.

Example:

Row 1

No horizontal alignment of UI elements possible


UI Container Layouts: MatrixLayout

MatrixLayout – is similar to the RowLayout but with the extra functionality of vertical

positioning control.

UI elements are controlled both horizontally by rows and vertically by columns.

Variable number of columns per row

Each UI element in a container that is using the MatrixLayout will have a LayoutData property.

Set this property to ―MatrixHeadData‖ data to start a new row.

Leave this property set to ―MatrixData‖ so that it appears on a row that already exists.

Example

MatrixHeadData MatrixData


UI Container Layouts: GridLayout

GridLayout – is similar to MatrixLayout in that you have both horizontal and vertical

positioning.

Vertical positioning is controlled by columns which is set on the container through the colCount

property.

Fixed number of columns per row

Example

Row

1

Column

1

Column 2

Row

2Row

3Row

4


Prefer the Row Layout to the Grid or Matrix Layout

Prefer the Row Layout to the Grid or Matrix Layout if you don‟t

need horizontal alignment!

The row layout allows you to put an arbitrary number of elements in

each row (it automatically uses a flow layout for each row).

If you need a new row you simple set the property layoutData of the first element of the new row to RowHeadData.

It is also a good idea to use the row layout if you have only one

element per row as it is often used to arrange a screen vertically.

✔


Prefer the Matrix Layout to the Grid Layout!

Prefer the Matrix Layout to the Grid Layout!

Ease of use: no need to set a column count and possibility to put as many

controls into one row as you like.

If you need a new row you simple set the property layoutData of the first element of the new row to MatrixHeadData.

Better achieve consistent layouting:

Other than the grid layout, the matrix layout only allows some predefined values

for the cell padding.

Instead of the properties paddingTop, paddingButtom, paddingLeft and

paddingRight it only offers the property cellDesign with the following predefined

values:

✔


Grid and Matrix Layouts: stretchedHorizontally

Containers that use Grid and Matrix Layouts have an important sizing property called

“stretchedHorizontally”.

If property is set to true, and causes the child UI elements to spread out over the whole width of the

container.

If property is set to false, UI elements will not stretch out. This is the ―design time default‖.

Example

stretchedHorizontally set to true

Matrix/Grid cells get horizontally stretched

stretchedHorizontally set to false


Matrix or Grid Layouts by Default

Do not stretch matrix or grid layouts by default in dynamic view

layout creation scenarios

Notice the different stretchedHorizontally/ Vertically

default values at runtime and design time

✖

Layout Property RUNTIME Default DESIGN TIME Default

stretchedVertically true false

stretchedHorizontally true false


Web Dynpro ABAP UI Container Layouts

FormLayout – Motivation and Limitations of Given Layouts

Long label pushes width

of whole column 1

Definition: A form is a structured display with labeled fields

No horizontal alignment

of form fields across

container or component

borders

You cannot fix this

WITHOUT using new

FormLayout!


UI Container Layouts: FormLayout

Design state-of-the art form UIs with new container layout FormLayout

Automatic column distribution to achieve vertical alignment of form UI elements (labels, from fields)

across form groups

New LayoutData object types: FormData, FormHeadData, FormTopData

New Label behavior in FormLayout: right-alignment, ellipsis, required-asterisk at front

Supported FormLayout variants (number of cols / number of form panels): 8/1, 16/2 and 16/1

Example

new property WDSectionHeader.design = underline

Nested Form UI

with 16/2 layout



Left Panel* with two

Transparent Containers inside 1 16

1 8 1 8

16/2 Form Layout = 2 Panels* with 8/1 (cols/panel) Form Layouts

16/1 Form Layout

Form Layouts are „non-pushing’ =

content does not „push‟ layout cells!

right-

aligned

labels

horizontal alignment



How to Realize a Nested Form UI with 16:2 Layout

UI Element Layout LayoutData LayoutData Property

ROOTUIELEMENTCONTAINER FormLayout - -

TRANSPARENT_CONTAINER_16TO2 FormLayout FormTopData colCount = 16

TRANSPCONT_8TO1FORM_TOPLEFT FormLayout FormTopData colCount = 8

SECTION _HEADER - FormTopData colCount = 8 8/1 panel

TRANSPCONT_8TO1FORM_HEADLEFT FormLayout FormHeadData colSpan = -1 all 8 cols

TRANSPCONT_8TO1FORM_TOPRIGHT FormLayout FormTopData colCount = 8

TRANSPARENT_CONTAINER_16TO1 FormLayout FormHeadData colSpan = -1 all 16

SECTION_HEADER_3 - FormTopData colCount = 16


FormLayout - Template

Support

FormLayout in the

Form Template

within the ABAP

Workbench

New Web Dynpro ABAP Workbench Function

Support new FormLayout in existing Form Template

Define Form Labels using OTR alias browser

Predefine FormLayout variants (number of cells : number of form groups)

8:1 and 16:1

Exercise 1FormLayout


How to Log on

Logon to Windows

User:

Pwd:

Logon to SAP workshop system

System: M53

Client: 100

User: CD360-## (## = group number)

Pwd: teched11

Web Dynpro ABAP UI Element Positioning

Layouting Metamodel and LayoutData Object

Virtual Container Cells

Layouting Rules


UI Element Positioning and the LayoutData Object

UI element positioning is largely controlled by the container layout they belong to. But some things

can be controlled at the UI element level.

The container layout that the UI element belongs to dictates what kind of LayoutData (properties)

that UI element has.

FlowLayout

RowLayout

FormLayout

GridLayout

MatrixLayout


Web Dynpro UI Element Embedding and Layouting Metamodel

UI Element Containers

embed one ore more UI elements

are associated with a specific layout (Grid, Matrix, Form, Row, Flow)

layouts partition the container into virtual cells to position the embedded UI elements inside

UI Elements

are associated with a LayoutData object used to define the layout of its related virtual cell


The Virtual Cells inside Containers used to Layout UI Elements

Layout Grid with Virtual Cells

inside Container

Container Layout

TypeDescripiton

FlowLayout

RowLayout

Container is only split into rows

Cells in different rows are not aligned horizontally

Rows can have different heights

LayoutData of RowLayout refers to whole row

LayoutData of FlowLayout refers to virtual cell

MatrixLayout

GridLayout

Container is split into a grid of rows and columns

Virtual cells can span multiple columns

Cells in different rows are aligned horizontally

Rows can have different heights

FormLayout

Container is split into a grid of rows and …

… equally sized columns

Virtual cell content is non-pushing

Virtual cells can span multiple columns

All virtual cells of same row can span multiple rows

Cells in different rows are aligned horizontally

Rows can not have different heights


UI Element Container with specific Layout

UI Element Container Cell

with Layout Data

Containers, Layouts, Cells and UI Elements

Terminology

Term or Entity Description

UI Element Container Web Dynpro UI element that can embed other UI elements

UI Element Container Layout A container manages the layout of its children using an associated layout manager. The layout

defines how the container is partitioned into cells and how the embedded UI elements are

arranged on these cells.

UI Element Container Cell Cell used to partition a container into rows, columns, or a grid

UI Element Layout Data UI element may carry layout data (with properties) that is used by the layout manager of its

parent container. Defines cell specific layout properties (like width, height or paddings) and

how a UI element is laid out in its embedding container cell, i.e. on the container grid.

UI Element Properties Certain UI element properties affect the „layout― of UI element itself, not of its associated

container cell(s)

UI Element


UI Element Container = Group / Container Layout = MatrixLayout


Example: Label in MatrixLayout

Cell

UI Element property

LayoutData


with Layout DataUI Element




Cell

LayoutData of UI

element‗s virtual cell



with Layout DataUI Element




with Layout DataUI Element = Label



LayoutData [MatrixData] Properties

width, height vAlign, hAlign

vGutter

colSpan

cellDesign

cellBackgroundDesign

Clearly differentiate between LayoutData

and UI element specific properties! ◄

UI Element Properties layoutData

design

hAlign

width


UI Element Container

UI Element

UI Element

UI Element UI Element


Container Level

Changing a container UI element„s layout

data property affects all its comprised

virtual cells.


UI Element

UI Element



Row Level

Changing a contained UI element„s layout

data property affects all virtual cells in

same row.


UI Element

UI Element



Cell Level

Changing a contained UI element„s layout

data property affects only it„s own virtual

cell.

Range of Effect Levels when Changing Layout and LayoutData Properties at A Glance



Container

Level

Defining Layout Data Properties

Define the UI element container‟s layout properties to adapt the

properties or ALL virtual cells inside the container.

MatrixLayout: stretchedHorizontally, stretchedVertically

FlowLayout: wrapping

Range of Effect Level 1: Container Level


UI Element

UI Element



Container Level

Changing a container UI

element„s layout data

property affects all its

comprised virtual cells

Example

Layout property

cellDesign = lrPad of

Group UI element with

layout =

MatrixLayout affects

cell paddings of all

cells in Group

✔


Row

Level


Range of Effect Level 2: Row Level

Define the UI element‟s layout head or top data properties to adapt

the layout of all virtual cells in same row.

RowHeadData: hAlign, rowBackgroundDesign, rowDesign, vGutter

FormTopData: colCount, rowSpan


UI Element

UI Element



Row Level

Changing a contained UI element„s layout data

property affects all virtual cells in same row

Example

Layout property rowSpan= 2 of Label with

FormHeadData in Group UI element with layout

= FormLayout makes all cells in same row to

span 2 rows

✔


Cell

Level


Define the UI element‟s layout data properties to adapt the

properties of the virtual cell comprising this UI element.

MatrixData: cellBackgroundDesign, cellDesign colSpan, hAlign, height, vAlign,

vGutter, width

GridData: same as MatrixData …, paddingBottom, paddingLeft, paddingRight,

paddingTop

FlowData: cellDesign, vGutter

Form(Top/Head)Data: cellBackgroundDesign,

colSpan, vAlign

Range of Effect Level 3: Cell Level


UI Element

UI Element



Cell Level

Changing a contained UI element„s

layout data property affects only it„s

own virtual cell

Example

Layout property vAlign= top of Label

with Form-Data in Group with layout =

FormLayout makes only this element

top-aligned in cell.

✔


Try to Avoid Complex and Nested Layouts Wherever Possible!

Try to avoid complex and nested layouts wherever

possible!

Nesting has a big impact on browser or client rendering performance!

E.g. nesting TransparentContainers with Matrix or Grid layout inside

other TransparentContainers also using these container layout types.

Instead, try to use a single large Matrix layout with column spans.

Use vertical alignment instead of nesting.

Use RowLayout for one column layouts instead of the MatrixLayout.

✖


Usage of TransparentContainers inside Container UI Elements!

Re-think the usage of TransparentContainers inside

container UI elements (e.g. Groups)!

Containers such as the Group UI element already allow specifying the

layout of their content.

Don‘t add extra TransparentContainer UI elements inside container UI

elements such as Groups – these UI elements already contain a

TransparentContainer.

Use the layout property of the Group instead of placing a

TransparentContainer on it as top child and specifying the layout there.

✔


Abandon Pixel Accurate Arrangement of UI Elements

Abandon Pixel Accurate Arrangement of UI Elements!

Do not "hack― your own view layouts by combining

TransparentContainers and InvisibleElements with absolute sizes.

Instead, utilize Web Dynpro‘s various layout designs and layout

properties for positioning and spacing UI elements in a predefined

way.

✖


Minimize Container Nesting

Exchange default root UI element container

(TransparentContainerUIElement) with other container UI element

(like TabStrip, Table, Group) to minimize container nesting levels

new in SAP NetWeaver 7.0 EhP1

✔

Web Dynpro ABAP UI Element Sizing

100% Height Sizing

Table Sizing


100% Height in Web Dynpro ABAP

Use Case Scenario

An interactive form UI shall take up all the remaining

space (width AND height) on a page left by other

“fixed size” view elements.

It shall further adapt its dimension (horizontal AND

vertical size) whenever the browser resizes.

Henceforth, such view elements are called elastic

view elements

Introduction: Elastic View Elements Spanning Full Remaining Height

‚Elastic„ SAP Inter-active Form by

Adobe spans full remaining height of

browser window and also adapts to the

window„s width AND height!



Golden Rule for Elastic View Elements – Browser Perspective

GOLDEN RULE in General (also from Browser Perspective)

A control can only be vertically elastic if all surrounding controls have 100% height

as well.

Golden

Rule

General

Red Control: NO height set!

Blue Control: height set to 100%!

<html>

<head>

</head>

<body>

<div id = "red" style = "border:10px

solid; border-color: #F00;">

<div id = "blue" style = "background-color: #0FF;

height: 100%">

</div>

</div>

</body>

Example: piece of HTML

Red Control thinks: “I have no height set. Then I„ll apply the

pushing principle: I am as large as the minimum height of my

content.”

Red Control asks Blue control: “What‟s your height? This then

is my own height!”

Blue Control answers: “I have the same full height as You have:

100%!”

Red Control replys: “Mmmhh … no clue! I‟ll ask my browser …”

Browser A: “Ok: I set your height also to 100% of your pushing

content”

Browser B: “Not ok: When You comprise a plugin (blue control) I

give you its minimum height = 0px. Otherwise I give you the

height of its pushing content”

This conflict gets resolved with Golden Rule. Red Control must

also set it‘s height to 100%!



Golden Rule for Elastic View Elements Translated to Web Dynpro

Layouts of containers and their UI

elements are not part of the nesting

Layouts are also part of the nesting!

In practice, layouts are controls that

sit in between a container and its

children and that ...

are transformed into DIVs, TABLEs

and SPANs just like a

Transp.Container or Group

HTML Nesting Perspective

Web Dynpro Nesting Perspective

A control can only be vertically elastic if all surrounding controls have 100% height

as well.

Golden

Rule

Golden Rule must

also be applied to

layout objects!



View elements with 100% height (e.g.

Interactive Forms) are usually embedded

in other view elements that all have to

comply with the Golden Rule. There are

two groups:

UI Element Container:

TransparentContainer, Group, Panel,

ViewContainerUIElement, Tray, Tab, etc.

Layouts: Container layouts, UI element

layouts (layout data)

Golden Rule for Elastic View Elements – Web Dynpro Perspective (1)

GOLDEN RULE (from Web Dynpro Perspective)

A Web Dynpro UI element can only be vertically elastic if all surrounding

containers, their container layouts and the UI element’s own layout (data)

have 100% height as well.

Golden

Rule

Web Dynpro

UI elementUI element„s

LayoutData

Container„s

Layout

Container HTML Nesting

Perspective



Golden Rule for Elastic View Elements – Web Dynpro Perspective (2)

Inner Container„s

LayoutData

UI element

Inner container„s layout

Outer ContainerHTML Nesting

Perspective

This LayoutData object is also part of

the inner container‟s layout!

A More Complex Nesting Example …

GOLDEN RULE (from Web Dynpro Perspective)

A Web Dynpro UI element can only be vertically elastic if all surrounding

containers, their container layouts and the UI element’s own layout (data)

have 100% height as well.

Golden

Rule

Web Dynpro



To develop your own Web Dynpro ABAP applications that are to contain UI

elements with a height of 100% adhere to the following practical rules for ALL

views, layouts and container-type UI elements that contain a UI element with a

height of 100%

Practical Rules: How to Realize UIs with 100% Height View Elements

1 Only use layouts of the type MatrixLayout or GridLayout. Here, set the property stretchedVertically to true.

2 height of container-type UI elements must be set to 100%. This applies especially to the

ROOTUIELEMENTCONTAINER.

3 vAlign of all instances of GridData and Matrix(Head)Data

must be set to top.

4 height of all instances of GridData and Matrix(Head)Data

must be set to 100%.

5 Further adjustments need to be made if a WD ABAP application is embedded in a SAP NetWeaver Portal. Set iView Height Type = FULL_PAGE. In special cases Web Dynpro ABAP Application Parameter WDUSPPORTSFULLHEIGHT

needs to be set to 2.

✔



Example: How to Embed a 100% Height InteractiveForm UI Element

Web Dynpro ABAP Nesting

Perspective

Setting only this single property

to 100% would be too easy …

Also set right properties of all

embedding containers and all their

layouts following Golden Rule!

Based on sizing rules defined above the following properties have to be set:

Exercise 2100% Height in Web Dynpro ABAP


Sizing Web Dynpro ABAP Tables

How to solve Web Dynpro Table Sizing Problems - Introduction

See SAP Note 1253282 - Layout of the table UI element

The width of the table or table columns

is not as intended

Sizing

Problem

The Web Dynpro table is converted into an HTML table for operation in the Web

browser.

Due to the layout properties of this HTML element, undesired effects that are

difficult to understand may occur when the Web Dynpro ABAP Table and

TableColumn UI elements are used inappropriately.

Reason

How do browsers calculate actual table and table column widths?

How do these widths depend on the defined widths values, or on the widths of

column headers or table cell content (like InputField)?

What sizing effects do certain Table UI element properties like fixedTableLayout have?

Questions

https://service.sap.com/sap/support/notes/1253282






Calculation of the Actual Table Column Width in the Browser


Table Layout 1 Table.fixedTableLayout = false

Actual Table Column Width = Maximum width of …(1) width of the content

This is the maximum width required to display the content of all of the visible cells in a column without truncating them.

(2) TableColumn.width(3) proportion of the entire table

If the specified width of a table is greater than the total of the specified or required widths of all individual columns, the remaining space is distributed to the individual columns.







Calculation of the Actual Table Column Width in the Browser


Table Layout 2 Table.fixedTableLayout = true

Actual Table Column

Width =

Minimum width of …

(1) TableColumn.width

(2) Width still available

The table is filled with columns from the left-hand side to the right-

hand side until the specified width of the table is reached.

The last column for which there is still space is truncated at the end

of the table. None of the columns that follow are displayed.







Table.fixedTableLayout = false causes Table Flickering

horizontal

column

scrolling

vertical

table

scrolling

Horizontal or vertical scrolling

causes „table flickering‟

(variable column and table sizes)

due to ‗pushing table content‘



Best Practices: How to Specify the Table Column Width


In general, we recommend that you maintain the table column

width, that is, the property TableColumn.width, for each

column.

For TableCellEditors of the type InputField, DropDownByKey, and

DropDownByIndex, the "width of the content" is determined by the

current content. Due to an error in Internet Explorer, the width is

calculated only until a special character, such as "ü", "ä", "ö", or "ß"

occurs.

You should always maintain the table column width for these

elements.

✔







Best Practices: How to Specify the Table Column Width – Scenario 1

See also SAP Note 1253282 - Layout of the table UI element

Table with a fixed width Scenario1

Setting a fixed table width

You must specify a fixed value for the property Table.width.

You can use percentage specifications or absolute specifications to control the

proportion of individual table columns.

Option 1

Setting fixed column widths

You should specify a fixed value for all table columns.

The table width results from the total of the column widths.

To avoid problems in Firefox, you should set the width of the table to 1px.

Option 2







Best Practices: How to Specify the Table Column Width – Scenario 2

See also SAP Note 1253282 - Layout of the table UI element

Table is to use the available width of the screen Scenario2

You must set the property Table.width to 100%

For all columns that should have a fixed size, you should also specify an

absolute width.

For all columns whose size is to be variable, you should specify a percentage

value. The total of all percentage values of a table should be 100%.






NetWeaver 7.02 Web Dynpro ABAP EnhancementsWeb Dynpro ABAP Table Enhancements

New Table Header Design

Advanced filtering and sorting menu UI

replaces former table filter row

Multiple Cell

Editor Support

Client-Side Column Scrolling

Table width keeps stable and does not stretch

the embedding container. (NOTE: cannot be

combined with fixed columns)

New Column Resize Behavior

resizing one column doesn't

affect other columns, instead

table expands or shrinks

sap-nwbc://https:/ldciqw3.wdf.sap.corp:44307/sap/bc/nwbc


NetWeaver 7.02 Web Dynpro ABAP Enhancements

Client-Side Table Column Scrolling (smooth horizontal Scrolling)

While horizontally moving the

scrollbar the full table content

smoothly scrolls to right or left side

All column data of visible table

rows already available on client

side no server roundtrip

needed to fetch ‚invisible„ column

data while scrolling

Table width keeps stable but does

not PUSH the embedding

container or the browser‟s scroll

container!

Horizontal Table Scrollbar


Expand Browser width

NetWeaver 7.02 Web Dynpro ABAP EnhancementsClient-Side Table Column Scrolling (smooth horizontal Scrolling)

100% width table gets

smoothly stretched with full

table content while

expanding the browser

width. More table columns

get visible.


Web Dynpro ABAP Table Sizing

New: Fixed Table Columns and Server-Side Horizontal Scrolling

With Table.fixedTableLayout = false the

Table content pushes table width.

Table with fixed columns: these columns keep

visible while horizontally scrolling other columns.

This horizontal scrolling mode requires a server-

roundtrip to fetch data of newly visible columns.

NOTE: Columns cannot be fixed when applying

new smooth horizontal scrolling behavior!

Web Dynpro ABAP UI Performance

General Performance Aspects

UI Price Tags

Efficient Server Push Emulation


Web Dynpro

Context Node Infos & RTTIs

UI Elements

Configuration

Server rendering (only for visible screen)

Components / controller instances

Application

Data within context elements

Data at controller attributes....

Internal Mode Memory: Who Eats my Memory?

YOUR CODE and DECLARATIONs affect this!


End2End Time: Who Eats my Time?

Web Dynpro

Browser rendering (for each user interaction)

Server rendering (for each user interaction)

Component / Controller instantiation

Create UI elements

Create node infos

Load configuration

Application

WdDoInit

WdDoModifyView

Action handlersYOUR CODE and

DECLARATIONs affect this!


Web Dynpro ABAP Performance Monitor

parameter sap-wd-perfmonitor=X

or shortcut Ctrl-Alt-Shift-P


Web Dynpro ABAP Performance Monitor

Delivers rough first estimates, not exact figures!

Click to create memory snapshot

Activate Performance Monitor in Web

Dynpro Trace Tool (transaction

wd_trace_tool)


UI Price Tags in Web Dynpro ABAP

Performance is a very important non-functional quality criteria of software:

End users expect software to be fast.

A Fast end-to-end response time per UI dialog step (in scenario average) is < 1sec

Task orientated classification of end-to-end response time ranges for UI events and related

tasks according to literature and refined by SAP User Experience PeP (perceived performance).



Our Focus: simple tasks as they occur most frequently in most applications

What “UI price tags” do Web Dynpro ABAP UI elements have regarding their

performance impact on overall client CPU rendering time?

Knowing Web Dynpro ABAP UI element price tags empowers UI developers and

designers to get an understanding how UI elements affect rendering performance.

Classification of UI Element Price Tags

Classification of UI Element Price Tags



Overview of Client Rendering CPU Time for Web Dynpro UI Elements



The User Interface shows the highest optimization potential with respect to

performance (based on the ratio of end-to-end response time split of 70/30 for

client/server).

Therefore we recommend to optimize the appropriate type and

number of Web Dynpro ABAP UI elements by …

Quality: different UI elements take different times to get displayed (UI

price tags)

Quantity: think about the total number of UI elements that are really

needed on a particular Web Dynpro ABAP screen

UI Optimization Potential

✔

Source: Fabian Schlarmann, SAP TD CoE Performance, “UI Price Tags for Web Dynpro ABAP”, 10/2009, SAP Internal



Sample: How Screen Complexity Impacts Rendering Performance (1)

Remove PhaseIndicator

UI Element2

Reduce number of

displayed table line

items from 22 entries

to 10 in a first step

1



Sample: How Screen Complexity Impacts Rendering Performance (2)

Removed PhaseIndicator UI Element :

Saves 255ms client CPU time (16%

from initial 1600ms)

2

Number of displayed table lines

reduced from 22 to 10:

Saves 475ms client CPU time (30%

from initial 1600ms)

1

Total Performance Improvement of Steps 1 and 2

Nearly 50% client CPU rendering time reduction

from 1600ms to 870ms.


Example: Rendering in TabStrip

Content of Tabs:

Instantiated on server Server CPU & memory

Rendered on client Client rendering time

Default regardless if Tab is visible!

Client side switch Fast local Tab Switch

Optimization: Create only content for visible Tab

Navigate to „empty view“ for invisible tabs

Render only what really is needed!


Navigate to Empty Views for Invisible Tab

TabStrip Event

OnSelect

If Tab1

Fire_Plug(Show1)

Fire_Plug(Hide2)

ElseIf Tab2

Fire_Plug(Show2)

Fire_Plug(Hide1)

EndIf

TestWindow

Main View

TabStrip

Tab 1 Tab 2

ViewCont 1 ViewCont 2

View 1 View 2

ININ

Empty View

IN

Empty View

IN

Show 1

Show 2

Hide 1

Hide 2

View 1

Empty View

Show 1

Hide 2

Tab 1 is

selected


Usage of Tabs

Think about the typical usage of Tabs in your application!

If there‘s a main tab with the most important data and users will click

the other tabs only occasionally: Use navigation to Empty Views for the

hidden tabs. Set the lifetime of views to ―if visible‖

Don‘t just switch the content of hidden tabs to invisible since the UI

elements and its data will be instantiated at the server nevertheless.

If users typically click through all tabs in your application (especially

back and forth between tabs several times) instantiate the content of

the regularly used tabs at once, allowing to switch between tabs without

a server roundtrip.

✔

Exercise 3Rendering in Tabs


SAP System

Server Push (Emulation)

User needs to be informed

about events by the server

Messenger like applications

State change of work lists

Results of asynchronous

functions

Notifications

Alerts, warnings,…

Web applications typically

require a request response

cycle

Refresh button

Polling (JavaScript)

SAP System

User A types a

message

User B gets

message

directly


Server Push (Emulation)

Timed Trigger UI Element

Triggers regularly a roundtrip and

fires each time an action in the

Web Dynpro ABAP runtime

Calculating state based on

changing conditions (ex. Progress

bar)

WD ABAP Notification Service

Triggers a roundtrip which

checks, if there has been an

update before ABAP runtime is

called

Checks if something has

happened (ex. Inbox, alerts)

ICMan

ABAB Roll Area?

ICMan

ABAP Application

Server

Poll

request

something

happened?

Event on

server

changes

cache

Notif.

Cache

Notif.

Cache


Example of delayed display

Example:

Purchase Order List and Details

are displayed

Data directly available

Amount by Business Partner

Needs exchange rates which

might take some seconds

Display available data as quickly

as possible – don„t wait for the last

view

Exercise 4Server Push Emulation

Web Dynpro ABAP Drag and Drop

Drag and Drop inside Components

Drag and Drop across Components


Drag and Drop

Rearrangement

of UI element

Groups within a

GridLayout

Rearrangement of Rows and

Columns in Tables

Browse & Collect Pattern

With ItemListBox, Table and

Tree

Moving of table entries to

other tables or drop targets

UI Elements and

Events

To Support Drag

and Drop


Drag & Drop: How To Switch It On

Use of the

DragSource and

DropTarget

To Enable Drag

and Drop


Drag & Drop: Table

DragSourceInfo determines drag-behavior of all table rows

DropTargetInfo determines how to insert objects between any two rows

DropTarget

The Table

Supports Drag and

Drop of Its Rows

Within Itself and

to Other Drop

Targets


Example: Drag and Drop from Table into Drop Area

List of suppliers is displayed in

table

Data of up to four suppliers

should be compared

Select and click “Add to

coparison” button

Drag and drop onto

comparison area


Drag and Drop example inside Component

Source View

Source Controller Target Controller

Component Controller

ContextContext

method onactiondrop_supplier .

if data = 'SUPPLIERS'.

" DnD from table

try.

supplier_key_from = wd_comp_controller->get_selected_supplier( ).

endtry.

wd_comp_controller->set_slot( slot_element = context_element

supplier_key = supplier_key_from ).

endif.

...

endmethod.

Exercise 5Drag and Drop in Component


Drag and Drop Example Cross Component

Source View

DragSource Comp.Target Controller

D&D Service Class

ObjectRef Callback DragSource

Key

1SUPPLIERS

method

get_drag_data

Get_drag_data

„SUPPLIERS“

2

3

method onactiondrop_supplier .

if data = ‚DDSub'.

" DnD from table

try.

supplier_key_from = DnD_service_class->get_drag_data( data ).

endtry.

...

wd_comp_controller->set_slot( slot_element = context_element

supplier_key = supplier_key_from ).

endif.

...

endmethod.

Object Ref.


Further Information

SAP Public Web:

SAP Developer Network (SDN):

Web Dynpro ABAP: http://www.sdn.sap.com/irj/sdn/nw-wdabap

Web Dynpro eLearning: http://www.sdn.sap.com/irj/scn/webdynpro-elearning

Floorplan Manager for Web Dynpro ABAP: http://tinyurl.com/fpm-wd-abap

Islands: http://www.sdn.sap.com/irj/sdn/adobe-flash-islands

NWBC: http://www.sdn.sap.com/irj/sdn/adobe-flash-islands

SAP Guidelines for Best-Built Applications That Integrate with SAP Business Suite, Chapter 5

User Interface and User Experience Guidelines for Best-Built Applications:

http://bestbuiltapps.sap.com

http://www.sdn.sap.com/irj/sdn/nw-ui



http://www.sdn.sap.com/irj/scn/webdynpro-elearning



http://tinyurl.com/fpm-wd-abap





http://www.sdn.sap.com/irj/sdn/adobe-flash-islands










http://bestbuiltapps.sap.com/


Further Information

Related Workshops/Lectures at SAP TechEd 2011

CD102, How to Use SAP Interactive Forms by Adobe, Hands-On

CD105, NetWeaver Business Client at a Glance, Lecture,

CD106, When to Use What: Comparing the Different Page Builders SAP Offers, Lecture

CD161, Web Dynpro ABAP for Beginners

CD162, Create Beautiful User Interfaces with Floorplan Manager and WDA, Hands-On

CD163, Creating Home Pages with the Page Builder for Web Dynpro ABAP, Hands-On

CD203, Configuration and Adaptation of Applications with the Floorplan Manager, Lecture

CD260, SAP NetWeaver Business Client - Enhancing SAP GUI Transactions with Side Panel, Hands-On

CD269, Update ABAP Skills: Layered Development and Powerful Frameworks, Hands-On

CD360, Best Practices for Web Dynpro ABAP, Hands-On

TEC260, SAP Technology: Putting it All Together, Hands-On

TEC203, User Interface Strategy and Roadmap, Lecture


Further Information

Related SAP Education and Certification Opportunities

http://www.sap.com/education/

NET310: 5-day introductory classroom training on Web Dynpro ABAP

NET311: 3-day classroom training on advanced Web Dynpro ABAP

NET312: 4-day classroom training on UI Development with Web Dynpro ABAP

NET313: 4-day classroom training on Floorplan Manager for Web Dynpro ABAP

NWBC10 (new in Q4/2011): classroom training on NetWeaver Business Client

DWD702 (new in Q1/2012): classroom training on new features in Web Dynpro ABAP (AS

ABAP 7.0 EhP2 vs. AS ABAP 7.0)

BC481: 2-day classroom training on SAP Interactive Forms by Adobe in the ABAP Environmt.

http://www.sap.com/education/

FeedbackPlease complete your session evaluation.

Be courteous — deposit your trash,

and do not take the handouts for the following session.


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 and Java are registered trademarks of Oracle and/or its affiliates.

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.

© 2011 SAP AG. All rights reserved.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World

Wide Web Consortium, Massachusetts Institute of Technology.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer,

StreamWork, 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 Software Ltd. Business Objects is an

SAP company.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase

products and services mentioned herein as well as their respective logos are trademarks or

registered trademarks of Sybase, Inc. Sybase 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.

The information in this document is proprietary to SAP. No part of this document may be

reproduced, copied, or transmitted in any form or for any purpose without the express prior

written permission of SAP AG.

cd360 best practices for web dynpro abap -...

Documents