cd203 wdfa bestpractices ui

SAP TechEd 2010

1

SAP TechEd 2010

2

SAP TechEd 2010

SAP TechEd 2010

4

SAP TechEd 2010

5

SAP TechEd 2010

A container manages its children using an instance of Layout. The layout defines how the children are arranged in their container. All non-container UI elements must be placed in a container. Containers can also contain sub containers.The size of the container is specified using the attributes width and height. Width and height may be specified by CSS (cascading-style-sheet) size values. This is a percentage value like "50%", a pixel value like "100px" or a relative font size value like "1.5em" or "1ex".

Root UI Elements of ViewsYou can use the following UI elements as the root element of a view using the Switch Root Element function in the context menu:ContextualPanel, FlashIsland, Group, PageHeader, PageLayout, Panel, PanelStack, SilverlightIsland, Table, TabStrip, TransparentContainer, Tray, Tree, ViewContainerUIElement

Note: ScrollContainer ( class CL_WD_SCROLL_CONTAINER) UI element is deprecated. Instead use TransparentContainer.

Special UI Element ContainersThere are special UI elements like the TabStrip or PanelStack UI element. They can be considered containers, but unlike a UI element container can only contain certain sub-elements. A TabStrip UI element, for example, can only contain Tab sub-elements. Each Tab sub-element can contain a title (Caption UI element), a toolbar and additional UI elements to display a content.

http://help.sap.com/saphelp_nw70ehp1/helpdata/en/67/aa884118aa1709e10000000a155106/content.htm

SAP TechEd 2010

What the property isLayoutContainer means

The initial value of the TransparentContainer‟s isLayoutContainer property is

true.

The property determines whether this transparent container is used purely for

layouting. The alternative is a container used for grouping e.g. input fields and

labels in order to create a "form" in a way that has meaning to the end user.

Such a grouping container needs an accessibility description (which a pure

layouting container does not need) and will allow keyboard navigation

(skipping).

NOTE: Do not carelessly mark containers as non-layouting!

SAP TechEd 2010

*New in SAP NetWeaver 7.0 EhP1: Toolbars in Tray, Group and Panel

containers can have a ToolBarPopin with TextBar and Content

NOTE:

The above screenshot of a „Group Container UI element sample‟ highlights

„technically‟ possible design and function aspects of the Web Dynpro ABAP

Group UI element. It does not visualize a realistic „user centric‟ UI following

proven User Interface design principles.

SAP TechEd 2010

Popup menu in Tray Toolbar and ToolBarPopin with TextBar and content are new

in SAP NetWeaver 7.0 EhP1 (SAP ERP 6.0 EhP4, SAP Business Suite 7)

Also possible but seldom used:

Toolbars in Tray containers can have a ToolBarPopin with TextBar and Content

NOTE:

The above screenshot of a „Group Container UI element sample‟ highlights

„technically‟ possible design and function aspects of the Web Dynpro ABAP Group

UI element. It does not visualize a realistic „user centric‟ UI following proven User

Interface design principles.

SAP TechEd 2010

*New in SAP NetWeaver 7.0 EhP1: Toolbars in Tray, Group and Panel

containers can have a ToolBarPopin with TextBar and Content

Notes:

Do not mix Trays and Panel on same screen to avoid confusion for end

users.

With its three different toolbar flavors the new Panel UI element container is

powerful enough to replace Trays and Groups.

SAP TechEd 2010

The ScrollContainer UI element is the same as the TransparentContainer with

the additional functionality in that it can have vertical and horizontal scroll

bars.

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

To fulfill the immediacy principle within a Tab all its UI elements should be

directly visible without the necessity to scroll. When the size of embedded UI

elements gets too large don‟t use ScrollContainers or other scrollable

container UI elements but reconsider your UI design or view composition in

terms of Web Dynpro by separating content to another view and to display it

via navigation.

SAP TechEd 2010

Dynamic UI Programming AspectsThe layout specifies the arrangement of the UI elements in their UI element container. An object of the type CL_WD_LAYOUT can be added to each container. To each child object contained in this container, an appropriate object of the type CL_WD_LAYOUT_DATA can be added. This CL_WD_LAYOUT_DATA object specifies the layout properties of the corresponding child - for example, the position in a coordinate system defined by the layout.In SAP NetWeaver 7.0 EhP2 the CL_WD_LAYOUT_DATA class is extended by the following subclasses:

• CL_WD_FORM_DATA*

• CL_WD_FORM_HEAD_DATA*

• CL_WD_FORM_TOP_DATA*

• CL_WD_FLOW_DATA

• CL_WD_GRID_DATA

• CL_WD_MATRIX_DATA

• CL_WD_MATRIX_HEAD_DATA

• CL_WD_ROW_DATA

• CL_WD_ROW_HEAD_DATA

• CL_WD_MELTINGGROUP_DATA

* New in SAP NetWeaver 7.0 EhP2

SAP TechEd 2010

Technically in HTML: <span>

The final appearance depends on the client technology and the size of the browser window.

SAP TechEd 2010

Row Layout

A RowLayout has a similar behavior to the MatrixLayout. However, it

sequentially assigns the UI elements to exactly one column.

Once a UI Element in the container sets this property to RowHeadData, all

proceeding UI elements will appear behind it on the same row, until a UI

Element is encountered with this property set to RowHeadData, in which case a

new row will then be started.

In the above example the Root TransparentContainer is set to RowLayout. All

Label UI Elements have the property layoutdata set to RowHeadData. The

button as well is set to RowHeadData so that is shows up on its own row.

Notice that there is no control of vertical spacing.

It is a great advantage of the RowLayout that you can easily create consistent

layout structures using the predefined cell classes, which are also provided in

the MatrixLayout.

NOTE: Choose the row layout over the grid or matrix layout if you don‟t

need horizontal alignment (one column layouts).

RowLayout technically in HTML: <div> <span>

SAP TechEd 2010

MatrixLayout

A MatrixLayout arranges the container children in a tabular format, similar to

the GridLayout.

You can use the properties stretchedHorizontally and stretchedVertically to

specify whether or not the UI elements match the container size. You cannot

explicitly define the number of columns, for example, which you can do when

using the GridLayout. Instead you assign a MatrixHeadData object to a UI

element so this UI element is wrapped.

It is a great advantage of the MatrixLayout over the GridLayout that you can

easily create consistent layout structures using the provided cell classes.

SAP TechEd 2010

NOTE: Instead of the GridLayout, use the MatrixLayout whenever possible.

A GridLayout arranges the container children in a two-dimensional grid with a

defined column number and any number of rows. Line breaks can be defined.

Line breaks are automatically inserted when a UI element is too long to be

displayed within one row.

SAP TechEd 2010

When the RowLayout is implemented in an application, performance is better than if a MatrixLayout were used, but the layout flexibility is not compromised. For this reason,

you should structure the view and container in horizontal areas as early as possible,

using the RowLayout.

SAP TechEd 2010

Based on its flexibility and its ease of use you should favor the use of the MatrixLayout. This won‟t enhance the performance, but we think it is easier for the

application developer to work with it.

Additionally the MatrixLayout provides the properties hAlign, vAlign to specify the horizontal and vertical alignment of the contained UI elements as well as the vGutter-

property for horizontal distances between the cell contents.

Avoid Using the GridLayout

The GridLayout should not be used in new view layouts any longer. This recommendation is based on the fact that the GridLayout cannot be laid out with

predefined (like “rPad”), but with any combination of values (with CSS-sizes) for the

different padding properties.

SAP TechEd 2010

Note: The stretchedVertically property works in the same manner, but vertical

of course. Generally you don‟t run into this problem as often since most don‟t

oversize vertically, but none the less this is good to remember.

SAP TechEd 2010

Runtime – For dynamic view layouts programmatically created at runtime

in hook method WDDOMODIFYVIEW( ):

When dynamically creating matrix or grid layout object instances

(CL_WD_MATRIX_LAYOUT, CL_WD_GRID_LAYOUT) inside a container UI

element the layout properties stretchedHorizontally and stretchedVertically

are set false by default.

But these default settings do not lead to the best layout in most cases.

Exception: To realize 100% Height size in Web Dynpro ABAP UIs you MUST

vertically stretch the Matrix Layout!

Design Time - For Static View Layouts created at design time in ABAP

Workbench:

When using the matrix or grid layout inside a container UI element the layout

properties stretchedHorizontally and stretchedVertically are set false by

default (other than the runtime instance default!).

SAP TechEd 2010

Based on using given Web Dynpro ABAP UI Container Layouts (Grid, Matrix,

…) there is no possibility or workaround to solve the described layout

limitations!

Solution: Apply new FormLayout available with SAP NetWeaver 7.0 EhP2

21

SAP TechEd 2010

22

SAP TechEd 2010

Form Layouts are „non-pushing‟ = content does not „push‟ layout cells! If a label

is too long to be displayed completely, the label text is cut and “…” is added to

indicate that the label has been cut. A tooltip displays the complete label text.

23

SAP TechEd 2010

24

SAP TechEd 2010

25

SAP TechEd 2010

Note: Elements belonging to RowLayout only have the shown properties if their

layoutdata property is set to RowHeadData.

SAP TechEd 2010

Special UI Element Containers

There are special UI elements like the TabStrip UI element. They can be

considered containers, but unlike a UI element container can only contain

certain subelements. A TabStrip UI element, for example, can only contain Tab

subelements. Each Tab subelement can contain a title (Caption UI element), a

toolbar and additional UI elements to display a content.

SAP TechEd 2010

SAP TechEd 2010

IMPORTANT NOTE:

Allthough the LayoutData Properties are listed on UI element level they refer to

the virtual cell containing the UI element, but not to the UI element itself.

The LayoutData defines cell specific layout properties (like width, height, vertical

gutter or paddings) and how a UI element is laid out in its embedding container cell, i.e. on the container grid (vertical alignment, horizontal alignment).

SAP TechEd 2010

Note:

• Some properties are common to the layout cell and to the UI element itself,

like width or hAlign depending on the given layout of the embedding

container (like MatrixLayout) and the contained UI element (like TextView

with hAlign and width).

• Make sure, that you clearly differentiate between LayoutData properties

referring to the UI element„s embedding virtual container cell and UI

element properties referring to the UI element itself.

SAP TechEd 2010

33

SAP TechEd 2010

SAP TechEd 2010

From a performance point of view it is often better to have one large grid or

matrix layout with column spans where necessary instead of a nested layout

that includes transparent containers with flow or grid layout and so on.

Complex Views

Complex views can require the usage of many containers and sub-containers.

Some views require the usage of not only the Root Transparent Container,

but Group containers that in turn may contain Tray containers, which in

turn may contain Transparent containers to achieve proper spacing, but try

to avoid nested containers as much as possible!

Some containers use matrix layouts that have long columns, in this case

some rows might want multiple UI Elements on a column To do this you can create a Transparent container for that row‟s column and have it

contain multiple UI Elements.

SAP TechEd 2010

A reasonable usage of the TransparentContainer is to change the layout of

inner UI elements compared with the layout of the embedding container. This is

often done to arrange Button UI elements based on a FlowLayout whereas the

embedding container UI element has a MatrixLayout

General Rule: Never, Ever Misuse Web Dynpro UI Elements Do not modify, use, or combine UI elements for a purpose they have not been

designed for. This means do not try to produce a certain display result of a UI element

by setting improper property values. An example is trying to produce an empty Group UI element in order to get a highlighted header text.

The appearance of Web Dynpro UI elements is subject to change. With the Web

Dynpro UI Element technology, changes to the controls can be applied centrally, without having to edit individual screens. Misused Web Dynpro UI elements will most

probably be displayed other than before in this case.

SAP TechEd 2010

Intrinsic sizing means that Web Dynpro (the Web Dynpro UI renderer and the

Web Dynpro Client) adequately specifies anc calculates these sizing properties

itself.

The size of a Web Dynpro container is specified using the attributes width and

height.

Width and height may be specified by CSS (cascading-style-sheet) size

values.

This is a percentage value like "50%", a pixel value like "100px" or a

relative font size value like "1.5em" or "1ex".

SAP TechEd 2010

Exchanging Element Definition

In the View Designer in the layout you can replace each UI element with

another UI element, for example, replace a Button with a InputField. This works

the same as when exchanging ROOTUIELEMENTCONTAINER elements.

• When UI elements are exchanged, aggregated elements are transferred too,

as far as possible. This means that it is not necessary to delete root child

elements in advance, since the root is now replaced centrally through the

element exchange.

• It is always the targets of the respective aggregation that are exchanged, for

example, all UI elements in the case of child elements, and all Table Cell

Editors in the case of Table Cell Editors.

• The properties of UI elements are also automatically transferred as far as

possible.

• If possible the primary property bindings are automatically transferred.

You can exchange the element definition by choosing Exchanging Element

Definition in the context menu of a UI element in the preview or in the UI

element tree.

SAP TechEd 2010

41

SAP TechEd 2010

42

SAP TechEd 2010

What does 100% mean? At first we have to get a better understanding of the meaning of “100% height”. Let‟s

study a toy model. Assume we have two controls in our browser window: a red and a

blue one. Controls in this context could be DIVs or a TransparentContainer UI Element containing an InteractiveForm UI element. If the height of the blue control is 100% it

doesn‟t mean that it should cover 100% of the browser height but 100% of the height

inside the red control. If the red control‟s height is 100px then the blue one will also be roughly 100px high minus some padding, margin, etc. Please note that resizing of the

browser will not change either the size of the red or the blue control. There are cases

when the actual height of the blue and the red control will exceed the absolute height of the red control. The reason is a general principle in HTML: controls can push. The

browser calculates a minimum height (and width) for the content of a DIV or TABLE

(e.g. a Web Dynpro ABAP view element TransparentContainer or MatrixLayout) and then the surrounding control will be stretched to accommodate the content. Please

note that the minimum height for a UI element that requires a plugin e.g.

InteractiveForm, JNet, FlashIsland, etc. is usually 0px! So if you add buttons and texts to a transparent container with height 1px, the buttons and texts will “push” the height

of the transparent container and they are visible. If you try the same with an

InteractiveForm you are in for bad surprise: the InteractiveForm will hardly be visible. Assume now that both the red and the blue control have 100% height. Then both of

them will be as large as the browser window (minus padding, margin, etc.) and both of

them will be elastic controls.

43

SAP TechEd 2010

There are several layouts in Web Dynpro ABAP but only MatrixLayout and

GridLayout are safe to be used in containers that contain an elastic view

element. All others may lead to disappointing results because they either

contain SPANs (FlowLayout, RowLayout) or because they are rigid grids

(FormLayout). You may find that Row- and FlowLayouts may work under

certain circumstances but problems have been reported in the past and

therefore they should be avoided.

44

SAP TechEd 2010

The naïve approach of setting the UI element‟s height to 100% may not always

suffice. HTML-based Web Dynpro UI elements like Groups, Trays, etc. might

not stretch as much as intended. UI elements that represent browser plugins

(e.g. InteractiveForm) may even collapse to a line. This leaves a lot of

developers puzzled. This lecture section tries to explain how a Web Dynpro

ABAP application has to be tailored to embed an elastic UI element and it gives

some background information.

In theory, the Golden rule above applies to width as well. Experience shows

that browsers are much more benign when dealing with 100% width than 100%

height although there have been problems in Safari 4. (Please refer to PAM if

you want to know which versions of Web Dynpro ABAP support which

browser). If you violate the Golden Rule you may be lucky – particularly if you

use Internet Explorer – but other browsers might be less forgiving. Nothing

serious will happen to HTML-based view elements. Usually they will “push” and

be visible anyway. However, if you use a view element based on a plug in like

e.g. InteractiveForms no “pushing” can be expected. The control will collapse to

a line if the Golden Rule is violated only once!

45

SAP TechEd 2010

46

SAP TechEd 2010

There are several layouts in Web Dynpro ABAP but only MatrixLayout and

GridLayout are safe to be used in containers that contain an elastic view

element. All others may lead to disappointing results because they either

contain SPANs (FlowLayout, RowLayout) or because they are rigid grids

(FormLayout). You may find that Row- and FlowLayouts may work under

certain circumstances but problems have been reported in the past and

therefore they should be avoided.

Notes on Step 5:

Further adjustments need to be made if a WD ABAP application is embedded in a SAP NetWeaver Portal. The Height Type of the relevant iView must be

set to FULL_PAGE. The AUTOMATIC height type may cause UI elements with a

height of 100% not to be displayed or not to be displayed in full. If it is displayed

next to other iViews on the same page, the application may be in 100%-mode

and may appear too large - it should only take up the space it really needs. In this case the Web Dynpro Application Parameter WDUSPPORTSFULLHEIGHT

needs to be set to 2.

See SAP Note 1266588 …

47

SAP TechEd 2010

See Also Related SAP Notes dealing with the 100% Height Topic

Note 1266588 - Automatic height adjustment does not work

Note 1347454 - WD ABAP: Active UI Elements with height 100% in Firefox

Note 1351822 - WD ABAP: UI Elements of 100% height in popup windows

48

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












SAP TechEd 2010

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

SAP Note 999498 - Correct use of Web Dynpro ABAP UIElements

49









SAP TechEd 2010

See also Note 1253282 - Layout of the table UI element and Note 999498 -

Correct use of Web Dynpro ABAP UIElements

Also consider the following: The browsers determine the width of an InputField

in different ways. In Internet Explorer, the width of the InputField is the same as

the width of its content. This is not the case in any other browsers. As a result,

a column with InputFields in Internet Explorer is as wide as the widest text that

was entered. In other browsers, it is as wide as the heading of the column.

In addition, we do not recommend mixing absolute units (ex,px,em) and relative

units with regard to table column widths in Internet Explorer: the widths are

usually set incorrectly as a result.

50









SAP TechEd 2010



fixedTableLayout (This property can be personalized by administrators)

With fixedTableLayout each Table column has the exact width specified. In this

case, the widths for the Table and TableColumns must be specified. For more

information, see SAP Note 1253282. If the content is larger it is cut off on the

right.

Without fixedTableLayout, the width of the column is as specified or as large as

the widest visible TableCellEditor. Here, the table column widths are minimum

widths. In this mode, the width distribution of the table columns can change

when you scroll through the Table vertically.

Note

If scrollableColCount=-2 is used, fixedTableLayout should be set.

51









http://service.sap.com/~form/handler?_APP=01100107900000000342&_EVENT=REDIR&_NNUM=1253282&_NLANG=en&_NVERS=0

SAP TechEd 2010

52

SAP TechEd 2010



53









SAP TechEd 2010



54









SAP TechEd 2010



55









SAP TechEd 2010

Introduced new application parameter WDUIGUIDELINE. Its default value

GL11 (UI-Guideline 1.1) ensures that your application works as in the past.

Setting it to GL20 (UI-Guideline 2.0) leads to a new look and feel for tables and

layouts.

The Table is subject to some major changes in the GL2.0-mode: Tables will

now be filtered and sorted using a table header menu which also contains

filter value suggestions (here e.g. all airlines that can be found in the table).

Table column resizing via click and drag has been introduced in 7.01. Now,

Web Dynpro ABAP offers a second column resizing behavior that also allows

client-side smooth column scrolling. This feature can be switched on and off

by end-user personalization. If the property fixedTableLayout=true and

personalization is activated, the user can change the width of the columns by

dragging the column boundary with the mouse. The new values are persisted in

the user's personalization data.

The selection of the table works differently: the selection buttons on the left are

toggling. If the table has no lead-selection and no selection actions are defined

(the preferred option in BTC) selections no longer cause roundtrips and always

follow the focus (e.g. if you click into cells or navigate via keyboard).

56

SAP TechEd 2010

Client-side column scrolling and column-based table column resizing is

switched on for a Web Dynpro ABAP Table if the following conditions hold:

The new WD ABAP application parameter WDUIGUIDELINE is

set to GL20 and columnResizeBehavior=preserveOtherColumns are set

The property Table.width is set to a value. All units are allowed: px,em, ex

and %. If a width is not set in this way, the Web Dynpro Framework attempts

to determine a width from the cell editor.

The property Table.fixedTableLayout is set to true.

The property width is set for all aggregated TableColumns and

AbstractMasterTableColumns

(i.e. TreeByKeyTableColumn and TreeByNestingTableColumn) of the table

and none of those widths are relative i.e. only the unites px, em and ex are

allowed

The property fixedPosition of all TableColumns is set to notFixed. Caution:

fixed table columns are not possible with columnResizeMode =

preserveOtherColumnWidths.

57

SAP TechEd 2010

58

SAP TechEd 2010

We recommend that you do not insert too many columns in a Table. However, should this be necessary, horizontal column scrolling can prevent users from having to scroll horizontally in the browser window. The following modes for column scrolling are available:

1) Server-Side Horizontal Column Scrolling

Fixed specification of the number of visible columns. This mode is activated by specifying a fixed number of scrollable columns in property scrollableColumnCount. The maximum number of columns that can be displayed is always this specified number, and a paginator is provided in the footer for scrolling.

Columns fitting in the Table: As many columns as fit in the Table will be displayed. If one of the columns is too wide, has a wrong unit, or has no width specification at all, it will be displayed individually in the full width of the Table. Note that if there is an existing selection column, the specified Table width is increased by this column. The following prerequisites must be met for this mode to function reliably: scrollableColumnCount = -2 activates the mode fixedTableLayout=true should also be activated so that columns are only as wide as specified. The width of all columns and of the Table must be specified, and the widths must be set in the

same unit (exception: the Table width can be in a different unit if the column widths are specified as a percentage)

1) Client-Side Smooth Horizontal Column Scrolling (SAP NetWeaver 7.02)

If WDUIGUIDELINE=GL20 and columnResizeBehavior=preserveOtherColumns are set, you get a smooth horizontal column scrolling on the client side.

59

http://aiokeh.wdf.sap.corp:50000/SAPIKS2/content_get.sap?_CLASS=IWB_EXTHLP&TMP_IWB_TASK=PREVIEW2&_LOIO=6EAE0E422DFCDC2CE10000000A1550B0&LANGUAGE=EN&RELEASE=760&_SEQNUM=0

SAP TechEd 2010

60

SAP TechEd 2010

61

SAP TechEd 2010

62

SAP TechEd 2010

For more details See documentation in SAP Online Help - http://help.sap.com

:

SAP NetWeaver 7.0 EhP1 > Web Dynpro for ABAP > Web Dynpro ABAP:

Development in Detail > Quality Assurance and Supportability

> Performance Monitor

http://help.sap.com/saphelp_nw70ehp1/helpdata/en/4b/4cdb2ffcf74d39ac958fe2170

2887b/frameset.htm

The performance monitor is used to check the general performance of Web Dynpro

applications. The monitor does not provide detailed information, it just gives a rough

assessment of performance.

Caution

Do not use the performance monitor for accurate performance measurements. You

use it to get an overall view of whether performance is satisfactory or whether further

performance analyses are necessary.

63

http://help.sap.com/

http://help.sap.com/saphelp_nw70ehp1/helpdata/en/4b/4cdb2ffcf74d39ac958fe21702887b/frameset.htm

http://help.sap.com/saphelp_nw70ehp1/helpdata/en/4b/4cdb2ffcf74d39ac958fe21702887b/frameset.htm

SAP TechEd 2010

Note: Prerequisites to apply Web Dynpro ABAP Performance Monitor

User needs debug rights

Performance Monitor must be activated in Web Dynpro Trace Tool. It is

inactive by default. The Web Dynpro trace tool can be activated for a specific

user on an application server. Start Web Dynpro application using the URL parameter sap-wd-

perfMonitor=X

All Web Dynpro applications started within 30 minutes can then be traced for

this user with an activated Performance Monitor.

For more details See documentation in SAP Online Help - http://help.sap.com

:

SAP NetWeaver 7.0 EhP1 > Web Dynpro for ABAP > Web Dynpro ABAP:

Development in Detail > Quality Assurance and Supportability

> Web Dynpro Trace Tool or URL

http://help.sap.com/saphelp_nw70ehp1/helpdata/en/43/2a63b164700b19e1000

0000a1553f6/frameset.htm

64

http://help.sap.com/

http://help.sap.com/saphelp_nw70ehp1/helpdata/en/43/2a63b164700b19e10000000a1553f6/frameset.htm

http://help.sap.com/saphelp_nw70ehp1/helpdata/en/43/2a63b164700b19e10000000a1553f6/frameset.htm

SAP TechEd 2010

See also: SAP Design Guild article “The PeP Project: Evaluating the

Responsiveness of SAP Applications from a User-Centered Perspective“

By Gerd Waloszek, SAP User Experience, SAP AG, and Ulrich Kreichgauer,

oCTO, SAP AG – October 13, 2009 • original article (story),

http://www.sapdesignguild.org/editions/edition10/ux_pep.asp

Table: PeP adaptation of human time ranges table, including variations in

parentheses

End to End Response Time can be split into main contributors Server part

Client part

Network part in WAN scenarios (out of focus in this lecture)

Break down of End to End Response Time for simple tasks Server part: < 300ms

Client part: < 700ms

Why does the client consume that much time?

Rendering in web browsers is slow (compared to others GUIs like NWBC or

SAP GUI)

HTML parsing, rendering and DOM tree manipulations are costly wrt

performance

65

mailto:[email protected]


http://www.sapdesignguild.org/community/readers/reader_ux_pep.asp

SAP TechEd 2010

66

See also: SAP Design Guild article “The PeP Project: Evaluating the Responsiveness of SAP Applications from a User-Centered Perspective" By

Gerd Waloszek, SAP User Experience, SAP AG, and Ulrich Kreichgauer, oCTO, SAP

AG – October 13, 2009 • original article (story), http://www.sapdesignguild.org/editions/edition10/ux_pep.asp

The overall end to end response time can be split into its two main contributors,

the client part and the server part; the network is out of focus in this document.

This lecture presentation concentrates on simple tasks (also see table in

previous slide) as they occur in most application frequently. To assure the

server has sufficient time to process complex requests and the end to

end time stays below one second (upper bound for simple tasks), the

Client CPU Time for Rendering must be kept below 700ms.

As the client often consumes the major part of the overall end to end response,

it shows the highest potential

for performance optimizations. The simplest rule to save time and build fast screens

is keeping them as simple as possible; that means leaving as many UI elements as

possible by putting not to many different tasks on one screen but split it into several

ones.



http://www.sapdesignguild.org/community/readers/reader_ux_pep.asp

SAP TechEd 2010

The given values should be understood as indicators showing a kind of trend;

summing up the price tags of all UI elements of a screen will typically not

represents its real Client CPU Time for Rendering. Another very important

factor which can influence the Client CPU Time for Rendering is the used Client

hardware.

The reported numbers are based on measurements done on reference

hardware for NetWeaver 7.20 (2.4 GHz single core CPU, 1 GB Memory,

Windows XP SP2, Internet Explorer 6) which reflects the standard equipment

used at many customer sites.

67

SAP TechEd 2010

68

Rendering Times of UI elements depend on their complexity

Internal layout

Style attributes

Shadowing

Shading

Nesting levels (table, critical, average)

Overall complexity of the screen on which UI element is used

SAP TechEd 2010

One of the simplest rules for fast screens might be to keep them as simple as

possible; designing them more complex by putting more and more elements

and information on a screen can result in horrible end to end response times.

The effect of the overall complexity of a screen can be shown best by using an

example.

The complexity of the above Web Dynpro ABAP UI screen could be decreased

dramatically by reducing the number of displayed line items from 22 entries to

10 ones in a first step (1) and by removing the phase indicator (2) in a second

step. Although removing the phase indicator without replacement is no option in

real life, this example clearly demonstrates how single UI elements can

contribute to the client CPU time for rendering consumption and hence slow

down the overall performance of a screen. The html table nesting level as well

as the html critical nesting level stays stable over all three screens. Therefore

these metrics do not influence the performance in this example.

69

SAP TechEd 2010

The reduction of the Client CPU Time can be explained with the decreased

overall complexity of the internal DOM tree representation of the screen within

the browser (also see result table on next slide).

70

SAP TechEd 2010

71

SAP TechEd 2010

72

FPM Classroom Training NET313: (http://www.sap.com/usa/services/education/)

Three / four days classroom training for application developers at Customer Site

FPM@SDN (https://www.sdn.sap.com/irj/sdn/nw-wdabap#section2 Follow

„Floorplan Manager‟)

Developer„s Guide

Introduction to application programming based on FPM

FPM@SDN-Forum (https://www.sdn.sap.com/irj/scn/forum?forumID=296&start=0)

General discussions round about the Floorplan Manager

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

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



https://www.sdn.sap.com/irj/scn/forum?forumID=296&start=0

SAP TechEd 2010

Because Web Dynpro comes with a big choice of UI elements and layout managers, Web Dynpro applications tend to look alike. The Floorplan Manager, which was introduced in SAP NetWeaver 7.0 EHP 1, goes a step further: It offers building blocks that can be arranged on a page and configured. This allows for cross-project consistent UIs.

Benefits UI Consistency: consistency across Web Dynpro ABAP applications with

unified look and feel. Configurability and Reusability: Easy configuration and assembly of

predefined (reusable) building blocks called Floorplans and Generic UI Building Blocks (“code free UI”)

Adaptability: Modification free customers adaptations of Web Dynpro ABAP applications delivered by SAP based on simple UI configuration

SAP UI Guideline Compliance: compliance with SAP User Interface and architecture guidelines.

Efficiency: APIs provided for standard functionality like event handling, message management, navigation, dynamic behavior or personalization.

The Floorplan Manager is the standard tool for the creation of new Web Dynpro ABAP applications in the SAP Business Suite, for instance ERP, PLM, or SRM.

73

SAP TechEd 2010

Source: Dr. Dirk Becker, SAP AG, “Using Floorplan Manager for navigation,

messaging and personalizing SAP HCM transactions” (Content Area: Human

Capital Management) ASUG October 2010, Orlando

74

SAP TechEd 2010




75

SAP TechEd 2010




76

SAP TechEd 2010




77

SAP TechEd 2010




78

SAP TechEd 2010




79

SAP TechEd 2010




80

SAP TechEd 2010




81

SAP TechEd 2010




82

SAP TechEd 2010

Generic UI Building Blocks are …

Guideline conform UI content templates

Full integration into FPM Framework

Generic configuration based on feeder classes

Complete separation of User Interface and Business Logic

Business Logic in feeder classes

Code-free configuration of User Interfaces

Outlook to future GUIBBs:

Power List GUIBB

Reuse UIBBs (Attachments, Notes, …)




83

SAP TechEd 2010

Personalization (End User):

Applies to the end user only.

Personalization of the application UI

FPM Customizing (Admin):

Applies to all users at the client.

Delta handling at the configuration

FPM Configuration (Developer):

Applies to all users and clients

Configuration of the overall application




84

SAP TechEd 2010

85

SAP TechEd 2010SAP TechEd 08

1. SAP supplies the overall WD Component in a FPM application. In this case the

FPM Component is FPM_OVP_COMPONENT.

2. Via Component Configuration each inner Web Dynpro Component is defined.

These inner Web Dynpro Components are called UIBBs – UI Building Blocks.

3. Each UIBB WD Component has a component usage declared for another WD

Component that will act as the Shared Data Component. This component must

have the IF_FPM_SHARED_DATA interface. This is where all the common

context data is modeled and all shared methods are declared.

4. Whenever a component is instantiated by the FPM, the FPM analyzes all usages

of that component. If it detects a usage pointing to a component which

implements the IF_FPM_SHARED_DATA interface, a singleton of this shared

data component is automatically attached to the usage.

SAP TechEd 2010

87

SAP TechEd 2010

88

SAP TechEd 2010

89

SAP TechEd 2010

Warning: Cross Component Context Binding always creates copies of the

bound context at runtime. This is very different than context mapping between

controllers within the same component – which always uses only a single copy

of the context.

Although the framework takes care of the logic to keep the context copies in

sync, this can still greatly add to the memory requirements of your application.

The more UIBBs you have, the greater the number of copies of the shared

context nodes. Try to limit the amount of data you place into the shared data

context and in each UIBB only bind the sections of the context that you

absolutely need for that particular UIBB.

90

SAP TechEd 2010SAP TechEd 08

1. SAP supplies the overall WD Component in a FPM application. In this case the

FPM Component is FPM_OVP_COMPONENT.

2. Via Component Configuration each inner Web Dynpro Component is defined.

These inner Web Dynpro Components are called UIBBs – UI Building Blocks.

3. In this case we have UIBBs that are no implemented as freestyle Web Dynpro

Components. Instead we have a List Generic UIBB (GUIBB). This is a standard

SAP Web Dynpro Component named FPM_LIST_UIBB which is implemented as

a Feeder Class. Feeder classes are standard ABAP classes which contain a

certain interface (IF_FPM_GUIBB_LIST in this case). The SAP Component

(FPM_LIST_UIBB) will call methods of the this class for its implementation.

4. Instead of a component usage and a central shared data component, we instead

use a normal ABAP class. It is designed with the Singleton Instantiation approach

so that all request of an object instance will return the same shared instance.

5. Both the Feeder Class GUIBB and the Web Dynpro Component UIBB call a

Static Method of the Singleton class to recieve a reference to its instance. They

can then call methods or access the public attributes of this instance.

SAP TechEd 2010

92

SAP TechEd 2010

93

SAP TechEd 2010

94

SAP TechEd 2010

95

SAP TechEd 2010

96

SAP TechEd 2010

97

SAP TechEd 2010

98

SAP TechEd 2010

99

SAP TechEd 2010

100

cd203 wdfa bestpractices ui

Documents