cd203 - best-practices for designing web dynpro abap user interfaces
DESCRIPTION
SAp Web Dynpro best practiceTRANSCRIPT
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.
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
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
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
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
See also Note 1253282 - Layout of the table UI element and Note 999498 -
Correct use of Web Dynpro ABAP UIElements
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
SAP TechEd 2010
52
SAP TechEd 2010
See also Note 1253282 - Layout of the table UI element and Note 999498 -
Correct use of Web Dynpro ABAP UIElements
53
SAP TechEd 2010
See also Note 1253282 - Layout of the table UI element and Note 999498 -
Correct use of Web Dynpro ABAP UIElements
54
SAP TechEd 2010
See also Note 1253282 - Layout of the table UI element and Note 999498 -
Correct use of Web Dynpro ABAP UIElements
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
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
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
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
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.
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
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
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
75
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
76
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
77
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
78
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
79
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
80
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
81
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
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, …)
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
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
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
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