Download - Best-Practices for Building State-Of-The-Art Web Dynpro Java User Interfaces - Presentation (1)
-
1SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces
SAP NetWeaver CE 7.10. 7.11 EhP1SAP NetWeaver 7.0, 7.01 EhP1SAP NetWeaver 04
Bertram Ganz, SAP NW Core UI&AM FMykola Gorbarov, SAP NW Core UI&AM FIvan Perelomov, SAP NW Core UI&AM F
November 2008
-
2SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 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 being intentionally or grossly negligent.
-
3 SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 3
Related Exercise DocumentRelated Sofware Component Archive
1
2
Download related Exercises from SCN here ...
Download related Software Component Archive fromSCN here and import comprised Web Dynpro Java DCsinto your SAP NetWeaver Developer Studio
3 Process 4 Exercises ...1.Creating a Simple Search View with GridLayout
2.How to build an Advanced Search Form using MatrixLayout
3.Order Details View
4.Creating final Sales Order application
-
4SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 4
Presentation Abstract
Release DescriptionSAP NetWeaver 7.0 and CE 7.1
Within this hands-on session you will learn important concepts and practical guidelines for building state-of-the-art Web Dynpro Java user interfaces.We introduce different container layouts, provide rules for the horizontal and vertical sizing of UI element containers, container cells and UI elements and differentiate the visibility, readOnly and enabled states of UI elements. We cover additional UI design aspects like nesting container UI elements or finding the best container layout to optimize rendering performance. We finally introduce new Web Dynpro UI elements and enhancements in SAP NetWeaver CE 7.1, like the new column layout for the vertical alignment of UI elements across component borders.
Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces
-
5SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 5
1. Web Dynpro UI Containers2. Web Dynpro UI Container Layouts3. Web Dynpro UI Element Positioning and Virtual Layout Cells4. Web Dynpro UI Element Sizing5. Web Dynpro UI Element States6. Whats New in SAP NetWeaver CE 7.1
Agenda
Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces
-
6SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 6
Web Dynpro Containers
Web Dynpro Containers are UI Elements Containers are UI Elements that can contain a number of arbitrary other UI Elements UI Elements called its children. Containers can also contain sub containers. Containers have a layout property that can be set to control the positioning of its child UI
Elements. A UI element that is managed by a layout may provide layout data carrying individual layout
information. All non-container UI elements must be placed in a container. When creating a view a default root container of type TransparentContainer is created.
New in SAP NetWeaver CE 7.1: Use other containers as root container
There are 4 kinds of containers available: TransparentContainerTransparentContainer ( IWDTransparentContainer-API) ScrollContainerScrollContainer ( IWDScrollContainer-API) GroupGroup ( IWDGroup-API) TrayTray ( IWDTray-API)
A container manages its children using an instance of Layout. The layout defines how the children are arranged in their container. A UI element that is managed by a layout may provide layout data carrying individual layout information.
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".
-
7SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 7
Web Dynpro Container UI Elements 1) TransparentContainer
The TransparentContainerTransparentContainer UI element UI element is 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 CE 7.1) Can contain child containers.
Example:Example:
What the property isLayoutContainer means
The initial value of the TransparentContainers 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!
-
8SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 8
Web Dynpro Container UI Elements 2) ScrollContainer
The ScrollContainerScrollContainer UI element UI element is the same as the TransparentContainer with the additional functionality in that it can have vertical and horizontal scroll bars. The properties height and width must be specified for the ScrollContainer UI element, i.e. you
must assign values to these properties when using scrolling modes ScrollingMode.AUTOScrollingMode.AUTO and ScrollingMode.BOTHScrollingMode.BOTH
If you do not want to have scroll bars but use scrolling mode ScrollingMode.NONEScrollingMode.NONE, you should use another container instead e.g. TransparentContainer.
ExampleExample
scrollingMode can be set to both, auto, or none. ScrollingMode.NONEScrollingMode.NONE, no scrolling. ScrollingMode.BOTHScrollingMode.BOTH, horizontal and vertical scroll bars will be present even if not
needed shown in example above. ScrollingMode.AUTOScrollingMode.AUTO, scroll bars will only be displayed when needed.Use ScrollContainers Judiciously and Avoid Nesting Them Principally your Web Dynpro UI should adhere to immediacy. Immediacy means that there should be no need to scroll. The user wants to see all information at a glance so that no further action (selection, submit, or scroll) should be required to see information. Instead of adding your own custom scroll containers you should utilize the inbuilt scrolling capability of your Web Dynpro client.
Apply the scrollingMode-property of Groups, Trays, and TransparentContainersWithin SAP NetWeaver 7.0 the container UI elements Group, Tray and TransparentContainer were extended by an additional scrollingMode-porperty (see IWDScrollContainer- and WDScrollingMode-API). Apply this new property instead of embedding inner scroll containers into Groups, TransparentContainers, or Trays.
Do Not 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. In case the size of the embedded UI elements gets too large, using a ScrollContainer seems to be a proper solution. Instead you should reconsider your UI design or view composition in terms of Web Dynpro. As soon as the content within a Tab UI element gets too large it is most often better to separate it to another view and to display it via navigation.
-
9SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 9
Web Dynpro Container UI Elements 3) Group
Group UI element Group UI element similar in behavior to the TransparentContainer with added functionality. Should be used to group UI Elements that belong logically together. Includes a group header that describes the functionality of the UI Elements in the Group
Container. Can include a tool bar with buttons and a toolbar popin that act on the functional area.
Example:Example: Group HeaderGroup Header Group ToolbarGroup Toolbar
ToolBarPopinToolBarPopin Content*Content* Group ChildGroup ChildTooBarPopinTooBarPopin TextBarTextBar
*New in SAP NetWeaver CE 7.1: Toolbars in Tray and Group containers can have a ToolBarPopin with TextBar and Content
-
10
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 10
Web Dynpro Container UI Elements 4) Tray
Tray UI Element Tray UI Element similar in behavior to Group container with added functionality. Tray container can be opened or collapsed to save screen space. New in NetWeaver CE 7.1:
Tray container can have a popup menu Toolbars in Tray containers can have a ToolBarPopin with TextBar and Content
Example:Example:
CollapsedTray
Expanded TrayPopup Menu in TrayPopup Menu in Tray
Expand/Collapse ButtonExpand/Collapse Button
-
11
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 11
Adapting the Design of UI Element Containers with pre-defined design Property Values
-
12
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 12
Adapting the Design of UI Element Containers with pre-defined design Property Values
Tray Tray design = design = FILLFILL
ToolBarToolBar design = design = EMPHASIZEDEMPHASIZED
ToolBarPopinToolBarPopin design = design = PLAINPLAIN
TextViewTextView ((ToolBarPopinToolBarPopin Content) Content) semanticColorsemanticColor = = POSITIVEPOSITIVE
WDTrayDesign and WDPopinDesign Enumerations
The design property of a Tray or ToolBarPopin UI element can have one of the following three predefined values:
1.FILL: The content area has a background color.
2.PLAIN: The content area has a white background and borders.
3.TRANSPARENT: The background is transparent, the content area has no borders.
WDToolBarDesign Enumeration
The design property of a ToolBar UI element can have one of the following three predefined values:
1.EMPHASIZED: Non-standard background color.
2.STANDARD: Standard background color (default)
3.TRANSPARENT: Transparent background.
-
13
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 13
Adapting the Design of UI Element Containers with pre-defined design Property Values
Tray Tray design = design = PLAINPLAIN
ToolBarToolBar design = design = TRANSPARENTTRANSPARENT
ToolBarPopinToolBarPopin design = design = FILLFILL
TextViewTextView ((ToolBarPopinToolBarPopin Content) Content) semanticColorsemanticColor = = NEGATIVENEGATIVE
-
14
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 14
1. Web Dynpro UI Containers2. Web Dynpro UI Container Layouts3. Web Dynpro UI Element Positioning and Layout Cells4. Web Dynpro UI Element Sizing5. Web Dynpro UI Element States6. Whats New in SAP NetWeaver CE 7.1
Agenda
Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces
-
15
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 15
Web Dynpro Container Layouts
LayoutsLayouts 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 container. There are 5 kinds of layouts:
FlowLayout RowLayout MatrixLayout GridLayout ColumnLayout
(new in SAP NetWeaverCE 7.1)
Each container must use one of these layouts.
Dynamic UI Programming Aspects
The layout specifies the arrangement of the UI elements in their UI element container. An object of the type IWDLayout can be added to each container. To each child object contained in this container, an appropriate object of the type IWDLayoutData can be added. This IWDLayoutData object specifies the layout properties of the corresponding child - for example, the position in a coordinate system defined by the layout.
In SAP NetWeaver CE 7.1 the IWDLayoutData-API is extended by the following interfaces: IWDColumnLayoutData IWDColumnLayoutHeadData IWDFlowData IWDGridData IWDMatrixData IWDMatrixHeadData IWDMeltingGroupData IWDRowData IWDRowHeadData
-
16
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 16
Web Dynpro Layouts FlowLayout
FlowLayoutFlowLayout 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. Sequentially arranges the container children. This means that you cannot define line breaks,
for example. The final appearance depends on the client technology and the size of the browser window.
Example:Example:
with wrappingwith wrappingenabledenabled
without wrappingwithout wrapping
-
17
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 17
Web Dynpro Layouts RowLayout
RowLayoutRowLayout Allows developer to control the UI elements that are placed on a row.
Each UI Element in a container that is using the RowLayout will have a layoutdataproperty. Set this property to RowHeadData data to start a new row. Leave this property set to RowData so that it appears on the current row.
There is no control of vertical alignment.
Example:Example:
Row 1Row 1
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 dont need horizontal alignment (one column layouts).
-
18
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 18
Web Dynpro Layouts MatrixLayout
MatrixLayoutMatrixLayout is similar to the RowLayout but with the extra functionality of horizontal alignment. 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 the current row.
UI elements are controlled both horizontally by rows and vertically by columns. Variable number of columns per row
Example:Example:
Row 1Row 1
MatrixHeadDataMatrixHeadData MatrixDataMatrixData
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.
-
19
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 19
Web Dynpro Layouts GridLayout
GridLayoutGridLayout is similar to MatrixLayout in that you have both horizontal and vertical positioning. Horizontal alignment is controlled by columns which is set on the container through the
colCount property. Fixed number of columns per row
ExampleExample
Row 1Row 1
Column 1Column 1 Column 2Column 2
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.
-
20
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 20
Prefer the Row Layout to the Grid or Matrix layout whenever possible!
Prefer the Prefer the Row Layout Row Layout to the Grid or Matrix Layout if you to the Grid or Matrix Layout if you dondont need horizontal alignment!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 layoutDataof the first element of the new row to RowHeadDataRowHeadData. 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.
Rule #1
Choose the RowLayout over the MatrixLayout if you dont need horizontal alignment.
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.
The RowLayout 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 layout-data of the first element of the new row to RowHeadData. It is also a good idea to use the RowLayout if you have only one element per row as it is often used to arrange a screen vertically.
-
21
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 21
Prefer the Matrix Layout to the Grid Layout!
Prefer the Prefer the Matrix LayoutMatrix Layout to the Grid Layout!to the Grid Layout!
This wont enhance the performance, but we think it is easier for the application developer to work with: You dont have to specify a column count and you can 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 MatrixHeadDataMatrixHeadData.
Additionally, the matrix layout helps to 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:
Rule #2
Based on its flexibility and its ease of use you should favor the use of the MatrixLayout. This wont enhance the performance, but we think it is easier for the application developer to work with: You dont have to specify a column count and you can 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. Additionally, the MatrixLayout helps to achieve consistent layouts:
Other than the GridLayout or the FlowLayout, the MatrixLayout 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 (the standard cellDesign is rPad)
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. Consequently it is more difficult to achieve a consistent setting of cell padding and
-
22
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 22
Grid and Matrix Layouts property stretchedHorizontally
Containers that use Grid and Matrix Layouts have an important property called stretchedHorizontally. Property by default is set to truetrue, and causes the containers UI elements to stretch out from
one another if the browser window is large. If property is set to falsefalse, UI elements will not stretch out.
ExampleExample
stretchedHorizontally set to truetrue
stretchedHorizontally set to falsefalse
Note: The stretchedVertically property works in the same manner, but vertical of course. Generally you dont run into this problem as often since most dont over size vertically, but none the less this is good to remember.
-
23
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 23
Do not stretch matrix or grid layouts by default
Do not stretch matrix or grid layouts by default.Do not stretch matrix or grid layouts by default.
When using the matrix or grid layout inside a container UI element the layout properties strechedHorizontally and strechedVertically are set true by default.
But these default settings do not lead to the best layout in most cases.
Rule #3
-
24
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 24
New Container Layout in SAP NetWeaver CE 7.1 Column Layout (1)
ColumnLayoutColumnLayout new in SAP NetWeaver CE 7.1 Allows aligned positioning of UI Elements across container borders Solves complex layouting problems concerning vertical alignments (for example alignment of
form fields in different components)Column Layout
Matrix Layout
view B
view A
view B
view A
ColumnLayout
ColumnLayout is a layout mechanism which can work across container, view and even component interface view boundaries, arranging content on a common grid which consists of a fixed number of columns and a variable number of rows.
Embedded UI element containers are merged with their embedding container, i.e. both containers' contents are arranged on the same grid, under certain preconditions: both must be non-scrolling transparent containers with column layout. This even works across view and even component boundaries.
The main use case of ColumnLayout is vertical alignment across view layout and mainly component interface view borders.
-
25
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 25
New Container Layout in SAP NetWeaver CE 7.1 Column Layout (2)
ColumnLayoutColumnLayout new in SAP NetWeaver CE 7.1 Divide screen into three master columns (MC) (between one and five MCs) One master column consists of a label, a content and a spacer column Works across component and view borders UI elements are placed automatically on this MC
Each UI element uses one or more columns Each visual container can start a new column layout
Label ColumnLabel Column
Content ColumnContent Column
Spacer ColumnSpacer Column
ColumnLayoutData
ColumnLayoutData helps to determine how a UI element is placed onto the column layout's grid. Each UI element occupies a rectangular area of cells, thus spanning a variable number of rows and a fixed number of columns. These values can be explicitly provided, but the default is to derive them automatically from the type and properties of the UI element in question.
ColumnLayoutHeadData serves to mark those UI elements which must be placed at the head of a new row, when arranging content on a column layout's grid.
New in SAP NetWeaver CE 7.11
New enumeration value WDColumnLayoutColCount.INHERIT provides a new value for the WDColumnLayoutColCount enumeration. This new value automatically uses the maximum available number of columns (as defined, e.g. by the colSpan-property or the outer container's colCount). It is useful for reusable where the number of columns should be determined by the using component, not by the used one.
-
26
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 26
1. Web Dynpro UI Containers2. Web Dynpro UI Container Layouts3. Web Dynpro UI Element Positioning and Virtual Layout Cells4. Web Dynpro UI Element Sizing5. Web Dynpro UI Element States6. Whats New in SAP NetWeaver CE 7.1
Agenda
Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces
-
27
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 27
Web Dynpro UI Element Positioningand LayoutData
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.
RowLayoutRowLayout
GridLayoutGridLayout
ColumnLayoutColumnLayout
FlowLayoutFlowLayout
MatrixLayoutMatrixLayout
Note: Elements belonging to RowLayout only have the shown properties if their layoutdata property is set to RowHeadData.
-
28
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 28
Web Dynpro UI Element Embedding and Layouting Metamodel
UI Element Containers UI Element Containers Embed one ore more UI elements Are associated with a specific layout (Grid, Matrix, Column, Row, Flow) Layouts partition the container into virtual cells virtual cells to position the embedded UI elements inside
UI ElementsUI Elements Are associated with a LayoutDataLayoutData object used to define the layout of its related virtual cell virtual cell
-
29
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 29
Know about the Virtual Cells inside Containers used to Layout UI Elements
Layout Grid with Virtual Cells inside Container
Container Layout Type Descripiton
FlowLayoutRowLayout
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
MatrixLayoutGridLayout
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
ColumnLayout
Container is split into a grid of rows and columns Virtual cells can span multiple columns Virtual cells can span multiple rows Cells in different rows are aligned horizontally Rows can have different heights
-
30
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 30
UI Element Container with specific Layout
UI Element Container Cellwith Layout Data
Containers, Layouts, Cells and UI Elements
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
-
31
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 31
UI Element Container = Group / Container Layout = MatrixLayout
UI Element Container Cellwith Layout Data
Containers, Layouts, Cells and UI ElementsExample: Label in MatrixLayout
Cell
UI Element = Label
UI element propertiesUI element properties
-
32
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 32
UI Element Container = Group / Container Layout = MatrixLayout
UI Element Container Cellwith Layout Data UI Element = Label
Containers, Layouts, Cells and UI ElementsExample: Label in MatrixLayout
Cell
LayoutDataLayoutData of UI elements virtual cellvirtual cell
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).
-
33
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 33
UI Element Container = Group / Container Layout = MatrixLayout
UI Element Container Cellwith Layout Data
Containers, Layouts, Cells and UI ElementsExample: Label in MatrixLayout
Clearly differentiate between Clearly differentiate between LayoutDataLayoutData and UI element specific and UI element specific propertiesproperties!!
LayoutDataLayoutData [[MatrixDataMatrixData] Properties] Propertieswidthwidth, height, heightvAlignvAlign, , hAlignhAlignvGuttervGuttercolSpancolSpancellDesigncellDesigncellBackgroundDesigncellBackgroundDesign
UI Element PropertiesUI Element PropertieslayoutDatalayoutDatadesigndesignhAlignhAlignwidthwidth
UI Element = Label
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 elements embedding virtual container cell and UI element properties referring to the UI element itself.
-
34
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 34
Define LayoutData Properties to Adapt the Virtual Cells Inside Containers
Define the UI elementDefine the UI elements layout properties to adapt the s layout properties to adapt the properties of the properties of the virtual cellvirtual cell comprising this UI elementcomprising this UI elementMatrixData: cellBackgroundDesign, cellDesign colSpan, hAlign,
height, vAlign, vGutter, width
RowHeadData: hAlign, rowBackgroundDesign, rowDesign, vGutter
FlowLayoutData: cellDesign, vGutter
Rule #4
Define the UI element containerDefine the UI element containers layout properties to adapt s layout properties to adapt the properties or ALL virtual cells inside the containerthe properties or ALL virtual cells inside the containerMatrixLayout: stretchedHorizontally, stretchedVertically
FlowLayout: wrapping
ColumnLayout: colCount
Rule #5
-
35
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 35
Layout Specific Properties at a Glance
UI Container(Group, Tray, TransparentContainer, ScrollContainer)
UI Container Layout
UI Element
LayoutData(of UI elements virtual cell)
LayoutHeadData(of UI Elements virtual cell)
Layo
ut P
rope
rtie
s of
RowLayout MatrixLayout GridLayout FlowLayout
layout = RowLayout
layout = MatrixLayout
layout = GridLayout
layout = FlowLayout
not defined stretched-Horizontally
stretched-Vertically
stretchedHoriz. stretchedVertic. cellPadding cellSpacing colCount
wrapping
layoutData layoutData not defined* not defined* not defined cellBackground
Design cellDesign colSpan hAlign height vAlign vGutter width
cellBackgroundDesign
colSpan hAlign, height paddingBottom paddingLeft paddingRight paddingTop vAlign, width
cellDesign vGutter
hAlign rowBackground
Design rowDesign vGutter
same as LayoutData
not defined not defined
ColumnLayout
layout = ColumnLayout
colCount
layoutData interlineSpacing rowSpan colSpan
same as LayoutData
requiresEmpty-NewRow
The UI element property layoutData defines, whether a UI Element is associated with a LayoutData Object (of corresponding type, like IWDMatrixData) OR a with a LayoutHeadData Object (of corresponding type, like IWDMatrixHeadData)
* not defined means: UI Elements embedded into a Grid or Flow Layout have no layoutData property, because the virtual cells in a Grid or Flow Layout only have a LayoutData but not a LayoutHeadData. So there is no need to
-
36
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 36
Try to avoid complex and nested layouts wherever possible!
Try to avoid complex and nested layouts wherever Try to avoid complex and nested layouts wherever possible!possible!
Nesting has a big impact on browser or client rendering performance!
E.g. nesting TransparentContainers with Matrix or Gridlayout 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
Rule #6
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 but try to avoid nested containers as much as possible!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 rows column and have it contain multiple UI
Elements.
-
37
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 37
Re-Think the Usage of TransparentContainersinside Container UI Elements!
ReRe--think the usage of think the usage of TransparentContainersTransparentContainers inside inside container UI elements (e.g. Groups)! container UI elements (e.g. Groups)!
Containers such as the Group control already allow specifying the layout of their content.
Dont 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
Rule #7
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
SAP NetWeaver 7.0 - Usage of TransparentContainers as Layout Containers
In SAP NetWeaver 04s you can replace Group-UI-Elements with TransparentContainer-UI-Elements of type isLayoutContainer = false to lay out label-field pairs and with header text on top.
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.
-
38
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 38
Exchange Transparent Root Container UI Element with other Container Types in CE 7.1
Exchange default root view element Exchange default root view element ((TransparentContainerUIElementTransparentContainerUIElement) with other container UI ) with other container UI element (like element (like TabStripTabStrip, Table, Group) to minimize container , Table, Group) to minimize container nesting levelsnesting levelsNew in SAP NetWeaver CE 7.1
Rule #8
-
39
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 39
1. Web Dynpro UI Containers2. Web Dynpro UI Container Layouts3. Web Dynpro UI Element Positioning and Virtual Layout Cells4. Web Dynpro UI Element Sizing5. Web Dynpro UI Element States6. Whats New in SAP NetWeaver CE 7.1
Agenda
Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces
-
40
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 40
Why Web Dynpro Java Does Not SupportPixel-Perfect Alignement
The absolute size of Web Dynpro UI elements is affected by localization requirements, varying font sizes or even dictionary type metadata (field lengths).
Furthermore your Web Dynpro application can run on different clients that calculate box sizes like widths, heights, padding, borders, or margins with client-specific algorithms and therefore client-specific results.
ExampleExample
Intrinsic sizing autoIntrinsic sizing auto--maticallymatically extends the extends the Label width and Label width and correctly positions the correctly positions the InputFieldInputField
PixelPixel--perfect perfect positioning of positioning of InputFieldInputField would would truncate the Labeltruncate the Label65 pixels65 pixels
Web Dynpro has been designed to support multiple languages automatically, and does not require the developer to write language-specific coding.
If Web Dynpro were to allow the developer to position UI elements exactly on the screen, then such information would immediately become language specific because of the simple fact that words change length (and possibly direction) when translated from one language to another.
Translation is an awkward enough process as it is without adding UI element placement into the mix.Therefore, SAP took the deliberate design decision to have all UI elements positioned automatically by the Web Dynpro Framework.
From: How to avoid Web Dynpro Java implementation nightmares, Chris Whealy, SAP Professional Journal, March/April 2008
-
41
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 41
Abandon Pixel Accurate Arrangement of UI Elements
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 Utilize Web Dynpros various layout designs and layout
properties for positioning and spacing UI elements in a predefined way
Avoid Setting Explicit Widths and HeightsAvoid Setting Explicit Widths and HeightsYou should principally avoid specifying the UI elements
width- and height- properties at all. Better trust in the intrinsic* sizing capabilities of your Web
Dynpro Client than in your own explicit size definitions. Only in case this default sizing behavior does not fulfill your
requirements, you should specify width- and height-properties explicitly.
Rule #9
Rule #10
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 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".
-
42
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 42
Abandon Pixel Accurate Arrangement of UI Elements
DonDont Specify Percentage Heights in NetWeaver 04 and 7.0t Specify Percentage Heights in NetWeaver 04 and 7.0Do not specify percentage heights because the client might
not be able to convert such relative heights into absolute values. Avoid setting the height property of UI-elements by default.New in NW CE 7.1: 100% Height Support
Rule #11
Rule #12
DonDont Specify Absolute Widths t Specify Absolute Widths Principally you should not specify absolute values for the
width-property of your Web Dynpro UI-elements. Instead specify relative widths in %.
Dont Specify Absolute Widths
This rule is again based on the fact that the width of Web Dynpro UI elements could change because of localization changes, varying font sizes, lengths of contained fields, or because the application is embedded within a SAP NetWeaver Portal iView.
-
43
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 43
Input Fields Controlling Length
Input fields are all the same lengths unless configured in one of two ways.Without controlling the length, all
input fields have the same length.One way to control the size of an
input field is to set its lengthproperty.This controls the length of the
input field displayed but not the length of the value you are entering!
To control both the length and the number of characters you can enter, create a Simple Type!
-
44
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 44
Simple Types To Control Input Field Length
Simple Types can control the length of the field they are assigned to, as well as the number of characters the user can enter.
ProcedureProcedure To create a Simple Type go to the Dictionaries
node and drill down until you see the Simple Types node.
Right click on the Simple Types node and select Create Simple Type.
Set the Built-In Type: Configure the length settings: Assign the Simple Type to the context element
that your input field is mapped to.
Note: The above shows how to configure the length of a string built-in type. To configure a numeric types length of characters that can be entered you must go to the Representationtab and enter the number of characters that can be entered into the External Lengthproperty.
-
45
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 45
The UI Element colSpan property part of a Cells
The colSpancolSpan property (part of LayoutData) on UI elements in the Grid and Matrix layouts can be used to control spacing.
Usage ExampleUsage Example: You are using a MatrixLayout, you get to a row whos 2nd column element is very long. The following row has 3 UI Elements, unfortunately the 3rd element will be spaced all the way over past the above rows 2nd element:
To fix this, set the colSpancolSpan property of the long input field to 2.
-
46
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 46
1. Web Dynpro UI Containers2. Web Dynpro UI Container Layouts3. Web Dynpro UI Element Positioning and Virtual Layout Cells4. Web Dynpro UI Element Sizing5. Web Dynpro UI Element States6. Whats New in SAP NetWeaver CE 7.1
Agenda
Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces
-
47
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 47
ReadOnly, Enabled and Visible UI Element States at a Glance
All Web Dynpro UI Elements have the properties enabledenabled and visiblevisible in common Enabled: booleanboolean (true/false) Visibility: values are defined in enumeration type WDVisibilityWDVisibility
SAP NetWeaver 04 and 7.0: BLANK, VISIBLE, NONE SAP NetWeaver CE 7.1: BLANK (deprecated!), VISIBLE, NONE, NOT_YET, ALWAYS
Editable Web Dynpro UI Elements provide the readOnlyreadOnly property to change its editability state (readOnly = non-editable)
UI elements with readOnlyreadOnly=true=true look and behave differently than with enabled=falseenabled=falseValue InheritanceValue Inheritance of these properties in nested UI elements is not generally given: Visible: child UI elements inherit visibility of embedding container UI element Enabled: inheritance is only given for special UI element aggregations (e.g. ToolBar and
Table) ReadOnly: inheritance is only given for the Table UI element
-
48
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 48
Enabled State of All UI Elements
A disabled Web Dynpro UI element is greyed-out on the UI and the user cannot interact with it (actions are not triggered).
Disable those UI elements which are not relevant for the user in the current UI scenario the user must not interact with where the content is not important for the user to read
Avoid noisy and flickering changes on the UI by disabling UI elements instead of making them totally invisible
InheritanceInheritance The enabled state is only inherited within ToolBars (in Groups, Tables, Trays etc.) and
Tables
A disabled toolbar disables all its child toolbar itemsA disabled toolbar disables all its child toolbar items
Rule #13
-
49
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 49
ReadOnly State of Editable UI Elements
Editable Web Dynpro UI Elements provide the readOnlyreadOnly property to make them editable or not. readOnly = non-editable
UI elements with readOnlyreadOnly=true=true look and behave differently than with enabled=falseenabled=false User can clearly read text inside a
readOnly UI element User can still navigate and read in a non-
editable Table UI element (vertical scrollbar keeps active, rows keep selectable, buttons keep active)
InheritanceInheritance Only given for the Table UI element A readOnly Table makes all its cells
readOnly too.
UI Elements with readOnly PropertyEditor Category UI Element
Drop Down Boxes
DropDownByIndex DropDownByKey ToolBarDropDownByIndex ToolBarDropDownByKey ItemListBox
Editiable Fields InputField ToolBarInputField TextEdit FormattedTextEdit
Markers CheckBox TriStateCheckBox RadioButton
Tables Table
How to set all Fields in a Group to readOnly Define a single context attribute IsFieldReadOnly of type boolean and map the view
controller context to this attribute Multiselect (with CTRL+Left Mouse Button) all fields of same type (based on a functional
restriction of the Web Dynpro Tools in NetWeaver CE 7.1 EhP1), like all InputFields, and jointly bind their common readOnly property to the attribute IsFieldReadOnly
Repeat this step for all fields of other types (like DropDownByKey UI elements) In the controller storing the (unmapped) data context attribute IsFieldReadOnly (like
component controller or a controller of another component) implement the logic to set the readOnly state of this context attribute IsFieldReadOnly: wdContext.currentReadOnlyStateElement().setIsFieldReadOnly(false)
NOTE
Only supported in NetWeaver CE 7.1: Multiselection of UI Elements in the Outline perspective view and an automatic filtering of all common properties in the Properties perspective view
-
50
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 50
Differences between UI Element States ReadOnly and Enabled Example
UI Elements with readOnlyreadOnly=true=true look andbehave differently than with enabled=falseenabled=false
User Interface readOnly enabled Descriptionfalsefalse truetrue InputField is editable
onEnter event triggers actiontruetrue truetrue InputField is not editable,
Text in InputField can be clearly read onEnter event does not trigger
action
falsefalse falsefalse InputField is not editable onEnter event does not trigger
action Text in InputField and Label
are greyed out and cannot be clearly read
readOnly
disabled
-
51
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 51
Visibility States of UI Elements
WDVisibility Enumeration Type
Key DescriptionVISIBLE UI element is visible in its view. NONE UI element is invisible and takes up no view space. It cannot be
made visible by end user or role personalization.
BLANKdeprecated in CE 7.1
UI element is invisible but takes up view space It can be hidden, but cannot be made visible by end user or role
personalization.
ALWAYS UI element is always visible in its view UI element cannot be hidden by end user or role personalization
NOT_YET UI element is not yet visible in its view (i.e. treated like NONE) until it is made visible by end user or role personalization. This can be used to ship hidden parts of a screen which can then
be made visible on demand.
Deprecation of WDVisibility.BLANK in NetWeaver CE 7.1
This value is no longer needed. This visibility is inherently insecure. The data is sent to the client although they will not be displayed. Using this visibility might reveal sensitive data.
To avoid UI flickering when navigating from a visible container to an invisible better disable the container instead of making it invisible.
-
52
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 52
State Inheritance for Table UI ElementExample: readOnly = false
TextEditTextEditis editableis editable
readOnly = false
Row selectionRow selectionis activeis active
TableScrollBarTableScrollBaris activeis active
-
53
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 53
State Inheritance for Table UI ElementExample: readOnly = true
readOnly = true
TextEditTextEditis notis not editableeditable
Row selectionRow selectionkeeps activekeeps active
TableScrollBarTableScrollBarkeeps activekeeps active
design = STANDARD
-
54
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 54
State Inheritance for Table UI ElementExample: readOnly = true
readOnly = true
Alternating design of table rows*Alternating design of table rows*
design = ALTERNATING
Alternating desing of table rows is only applied when Table is set to readOnly = true.
-
55
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 55
State Inheritance for Table UI ElementExample: readOnly = true
disabled = true
TextEditTextEditis notis not editableeditable
Row selectionRow selectiongets gets inactiveinactive
TableScrollBarTableScrollBargets gets inactiveinactive
-
56
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 56
Web Dynpro ComponentUser Interface
Implicitly Disabling UI Elements With Action Objects
Disable UI elements with defined action binding (event bound to action) by disabling action objects in view controller class
In this way the Web Dynpro Java Runtime automatically disables ALL UI elements which are bound to the same action
Prefer Action Object Disabling/Enabling to explicit UI Element Disabling/Enabling
View Controller
onAction
NetWeaver AS Java
wdThis.wdGetSaveAction().setEnabled(truesetEnabled(true));
wdThis.wdGetSaveAction().setEnabled(falsesetEnabled(false));
View Controller Class
Save Action Object
Web Dynpro Client
Save Action ObjectonAction
enabledenabled
disableddisabled
Button Event
disable
-
57
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 57
1. Web Dynpro UI Containers2. Web Dynpro UI Container Layouts3. Web Dynpro UI Element Positioning and Virtual Layout Cells4. Web Dynpro UI Element Sizing5. Web Dynpro UI Element States6. Whats New in SAP NetWeaver CE 7.1
Agenda
Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces
-
58
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 58
Web Dynpro AJAX Client Succeeds HTML Client in SAP NetWeaver CE 7.1 EhP1
The The Web Dynpro AJAX Client Web Dynpro AJAX Client is the renamed successor of the formerWeb Dynpro HTML Client based on the following Ajax functions implemented in SAP NetWeaver CE 7.1 EhP1: Drag & Drop, Suggestion, Page Rearrangement Use of XMLHTTPRequestObject Asynchronous Input Validation InputField UI elements supports onChange event,
In-place editing and input prompt Extensive Keyboard Support (hot and access keys)MessageBasedTrigger UI element Fluid animations based on UR Lightspeed Enhanced client/server communication supporting
on-demand JavaScript New Web Dynpro UI theme SAP Tradeshow Plus
-
59
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 59
SAP Tradeshow Standard Theme SAP Tradeshow Standard Theme
-
60
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 60
New SAP Tradeshow Plus Theme New SAP Tradeshow Plus Theme
-
61
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 61
Browse & Collect Pattern:Browse & Collect Pattern:
New Ajax Functions Drag & Drop Support (2)
Browse & Collect Pattern
Support for implementing UI patterns similar to browse & collect Table: Drag multiple selected rows, auto-scrolling, insert before/after item Note: Selection
and scrolling require a roundtrip! Item List Box: Drag multiple selected rows, auto-scrolling, insert before/after item Tree: Drag single selected node/leaf, no auto-scrolling, insert before/after node/leaf or drop
right onto a node
-
62
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 62
Generic Drag & Drop Generic Drag & Drop
New Ajax Functions Drag & Drop Support (1)
Generic Drag & Drop
Image as generic drag source Dragging the image as a way to drag the business object itself (image may visualize a
business object. )
DropTarget as generic drop target Normally invisible frame around arbitrary UI element Highlighted in selection color while dragging Often, a thin dashed border is all one can see
-
63
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 63
New Ajax Functions Suggestion Support
Suggestion Support for Suggestion Support for InputFieldInputField UI ElementUI Element
Suggestion Support for InputField UI Element User starts typing and framework provides a filtered list of valid values matching the user
input Application developer can configure the input field so it supports suggested values if
possible Value set of the data type has to support suggestion
Suggestion based on a static valueset defined in a Dictionary simple type. Suggestion based on a serverside query combined with OVS valuehelp service.
Performance Note Beware the increased number of server roundtrips when applying OVS-based suggestion (implementing IWDOVSSuggester and IWDSuggestionList). Client repeatedly calls the server to send back a list of matching suggestions on-demand.
-
64
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 64
New Ajax Functions Asynchronous Input Validation and new onChange Event
Asynchronous Input Validation for numeric fieldsAsynchronous Input Validation for numeric fields
New New onChangeonChange UI element eventUI element event
Asynchronous Input Validation for numeric fields
User enters some data into an input field which contains simple numeric value (e.g. date, time, percentage). After leaving the input field a generic input validation is asynchronously processed on the server side without blocking the user to continue typing into another field.
The asynchronous input validation feature is activated by default for all numeric fields (e.g. byte, short, long, date, time, ...)
New onChange UI element event
Introduced new onChange event for UI elements InputField, FormattedTextEdit, TextEdit, ToolBarInputField.
The action (the onChange event is bound to) is performed when a UI element loses focus AND its value has been changed
Performance Note Beware the increased number of server roundtrips when applying asynchronous input validation and new onChange event.
-
65
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 65
New Web Dypro Ajax Functions In-Place Editing and Input Prompt
InIn--place Editingplace Editing
Input PromptInput Prompt
In-place Editing New boolean property displayAsText allows to display an editable UI element as text and
morph the display to editable InputField on focus. The displayAsText property can be defined for the UI elements
InputField, ToolBarInputField, DropDownByIndex, DropDownByKey, ToolBarDropDownByIndex, ToolBarDropDownByKey
Input Prompt Pre-fill an InputField UI element
with a prompt that tells the user what to do or type It helps make the UI self-explanatory Often used when no label text is displayed Based on new InputField property inputPrompt
-
66
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 66
New Web Dynpro Ajax Functions Enhanced Keyboard Support (1)
Access UI Elements with Keyboard Access UI Elements with Keyboard Access KeysAccess Keys
Access UI Elements with Keyboard Access Keys Access keys are keyboard short cuts (e.g. ) for UI element navigation Application developer specifies which UI elements have access keys have support Access key is defined by Web Dynpro framework (first character of the associated label or
UI element's text) The same access key can be used for different UI elements (user might have to press
access key multiple times to set focus to right UI element)
-
67
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 67
New Web Dynpro Ajax Functions Enhanced Keyboard Support (2)
Access UI Elements with Keyboard Access UI Elements with Keyboard Hot KeysHot Keys::
Access UI Elements with Keyboard Hot Keys: Hot keys are keyboard short cuts (e.g. ) that trigger an action. After
pressing the ALT key, access keys will be underlined on the UI Application developer specifies which hot key is used for which UI element and the scope
in which hot keys are defined Information about which hot key is assigned is added to the tooltip or appended to the
menu item WDHotkey enumeration constants in Web Dynpro Java Runtime API lists all hot keys
supported in Web Dynpro
-
68
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 68
More Openness in Web Dynpro Java Adobe Flash Islands for Web Dynpro
In SAP NetWeaver CE 7.1 EhP1 Web Dynpro Java provides openness to other UI technologies like Adobe Flash or Java Server FacesAdobe Flash Islands for Web Dynpro Java Adobe Flash Islands for Web Dynpro Java Provide a FlashIslandFlashIsland UI Element to
integrate additional Flash Controls like YahooMaps in Web Dynpro view layouts.Support rich user interaction with Flash
Controls utilizing transition effects, drag & drop, sliders,tooltips etc.Provide subset of WD4VC Analytics UI
Elements like the AnalyticsChartAnalyticsChart UI Element in Web Dynpro Java UI Element Library.
Adobe Flash Islands for Web Dynpro (Java/ABAP)
-
69
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 69
Web Dynpro Java Whats New in NW CE 7.1New Calendar UI Elements
New Outlook-like Calendar UI Elements Calendar UI Elements with year, week, day and hierarchi-cal month perspectives
Support of Year, Week, Day and Hierarchical (Team) View Features of the calendar views
Working times (predefined per week day and per date) Holiday Time scale adjustable Selection of entries and free times / days Specialized calendar paginator
Entries Use of CCTS data types for start and end dates Predefined semantic colors Recurring entries Full day entries Striped entries (e.g. to symbolize tentative)
New HierarchicalCalendarMonthView UI Element allows to visualize hierarchical calendar data (team calendar) Allow Regional Setting Calandar Legend
-
70
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 70
Web Dynpro Java Whats New in NW CE 7.1Hierachical Context Menu UI Elements
Provide Hierarchical Context MenusHierarchical Context Menus in Web Dynpro View Layouts
View DesignerView Designer
Provide Hierarchical Context Menus in Web Dynpro Views Allow for defining menus in the Web Dynpro Tools. Menus may contain action items, check boxes, radio buttons and separators. Menus may have submenus. Provide a Web Dynpro runtime API to define menus and to attach them to view elements. Embed Menus in Trees and Tables
Added special view controller hook method: wdOnContextMenu(IWDContextMenuManger mgr, IWDContextMenuEvent event)
Related Web Dynpro APIs: IWDContextMenuManager, IWDContextMenuProvider, IWDContextMenuEvent WDContextMenuBehavior
-
71
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 71
Web Dynpro Java Whats New in NW CE 7.1 Further Table Enhancements (1)
The Table UI element is further enhanced in NW CE 7.1The Table UI element is further enhanced in NW CE 7.1
Scroll tip Scroll tip
Empty RowsEmpty Rows
number of elements = 3visibleRowCount = 5displayEmptyRows = true (default)
Selection Menu Selection Menu
The Table UI element is further enhanced in NW CE 7.1 Vertically scrollable table, provide data tips for scroll status (index scroll tips) Wrapping of table column headers Generic selection menu Display empty rows with new property displayEmptyRows=truedisplayEmptyRows=true
-
72
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 72
Web Dynpro Java Whats New in NW CE 7.1 Further Table Enhancements (2)
The Table UI element is further enhanced in NW CE 7.1The Table UI element is further enhanced in NW CE 7.1
The Table UI element is further enhanced in NW CE 7.1 Grouping (like Outlook - grouping by today, yesterday, week etc.) Grid lines can be switched of, hide vertical grid lines only Fixed rows and columns Hierarchical headers Grouping values Cell variants Selection FineTuning
Select/deselect all Selectable columns Selection menu Prevent selection of certain rows Disable row selection
Multi sorting ability and visualize filtered column Better support of popup menus (header, disable etc.) TableRowCreator eases the handling of the table for rapid user input
-
73
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 73
Web Dynpro Java Whats New in NW CE 7.1 RowRepeater UI Element
New New RowRepeaterRowRepeater UI ElementUI Element
New RowRepeater UI Element Google like Search Result display with repeated containers RowRepeater is rendered as one big MatrixLayout Supports simple non input UIElements like TextView, Link, Image Each UI Element in the RowElements aggregation is displayed in one column*. * Exception is the TransparentContainer with Matrix Layout, which is directly aggregated by
the Row Repeater. It is disintegrated into the Row Repeater table. Each column of the Matrix Layout leads to a column in the
Row Repeater table. Each row of the Matrix Layout leads to row in the Row Repeater table. All other cells in that Row Repeater row gets a suitable row span
For each element in the data source one row is painted. Supports only paging. Input of page number and jump to last page isnt possible
-
74
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 74
Web Dynpro Java Whats New in NW CE 7.1 Further UI Element Enhancements
FormattedTextViewFormattedTextView UI ElementUI Element Supports XHTML modules Text, List, Hypertext, Image
FormattedTextEditFormattedTextEdit UI ElementUI Element
ButtonChoiceButtonChoice UI ElementUI Element Button with Menu
ToolBarPopinToolBarPopin UI ElementUI Element
Miscellaneous AdditionsMiscellaneous Additions TransparentContainer with SectionHeader Icons within the Legend Allow to set default values for editable UI Elements on client-side Bold Links Triggering FileDownload from within action event handler MeltingGroup:Connects several UI Elements acting as one UI Element in a master column of
a Column Layout SectionHeader: used as form header UI Element in a non-layouting TransparentContainer
Performance Optimization: New 0/1-Delta-Handling for Windows:
Introduced a new All-Or-None Rendering Technique for Windows 0/1-Delta-Handling: The Web Dynpro Runtime automatically detects unchanged Windows ( = 0) and does not render them again.
Yields an improved UI rendering performance
NOTE Requires stable UI element IDs To utilize 0/1-Delta-Handling, the application developer must not unnecessarily re-modify
view layouts (firstTime == false) with the ID-less IWDView.createElement(Class element) API
-
75
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 75
New MessageBasedTrigger UI Element
New (Pull) Message Based Trigger UI ElementNew (Pull) Message Based Trigger UI Element
Based on the integration of the RTMF Messaging Framework in the Web Dynpro Ajax Client
Enhanced version of the former TimedTriggerTimedTrigger UI ElementUI Element
Web Dynpro UI control that triggers a pull from the client to the server in regular time intervals
By placing this UI Element in a Web Dynpro View, you are able to register the application for incoming messages on the Client
WDMBTParametersWDMBTParameters--API Map providing typed access to Parameters of the MessageBasedTrigger UIElement
RestrictionRestriction: Currently only supported for MS IE 6 and IE 7MS IE 6 and IE 7
-
76
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 76
Further Information
Related SAP Education and Certification Opportunitieshttp://www.sap.com/education/
SAP Public Web:SAP Developer Network (SDN): www.sdn.sap.comSAP NetWeaver UI https://www.sdn.sap.com/irj/sdn/nw-uiWeb Dynpro Java https://www.sdn.sap.com/irj/sdn/nw-wdjavaSDN Article: Best Practices for Building Client-Independent Web Dynpro UIs, Bertram Ganz, 17th May 2006
-
77
SAP NetWeaver 04, 7.0, 7.01, CE 7.1, CE 7.11
SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces / Page 77
Copyright 2008 SAP AGAll Rights Reserved
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
SAP, R/3, xApps, xApp, SAP NetWeaver, Duet, SAP Business ByDesign, ByDesign, PartnerEdge 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 in several other countries all over the world. All other product and service names mentioned and associated logos displayed 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. This document is a preliminary version and not subject to your license agreement or any other agreement with SAP. This document contains only intended strategies, developments, and functionalities of the SAP product and is not intended to be binding upon SAP to any particular course of business, product strategy, and/or development. Please note that this document is subject to change and may be changed by SAP at any time without notice. SAP assumes no responsibility for errors or omissions in this document. SAP does not warrant the accuracy or completeness of the information, text, graphics, links, or other items contained within this material. 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 shall have no liability for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. This limitation shall not apply in cases of intent or gross negligence.
The statutory liability for personal injury and defective products is not affected. SAP has no control over the information that you may access through the use of hot links contained in these materials and does not endorse your use of third-party Web pages nor provide any warranty whatsoever relating to third-party Web pages.
Weitergabe und Vervielfltigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrckliche schriftliche Genehmigung durchSAP AG nicht gestattet. In dieser Publikation enthaltene Informationen knnen ohne vorherige Ankndigung gendert werden.
Einige von der SAP AG und deren Vertriebspartnern vertriebene Softwareprodukte knnen Softwarekomponenten umfassen, die Eigentum anderer Softwarehersteller sind.
SAP, R/3, xApps, xApp, SAP NetWeaver, Duet, SAP Business ByDesign, ByDesign, PartnerEdge und andere in diesem Dokument erwhnte SAP-Produkte und Services sowie die dazugehrigen Logos sind Marken oder eingetragene Marken der SAP AG in Deutschland und in mehreren anderen Lndern weltweit. Alle anderen in diesem Dokument erwhnten Namen von Produkten und Services sowie die damit verbundenen Firmenlogos sind Marken der jeweiligen Unternehmen. Die Angaben im Text sind unverbindlich und dienen lediglich zuInformationszwecken. Produkte knnen lnderspezifische Unterschiede aufweisen.
Die in dieser Publikation enthaltene Information ist Eigentum der SAP. Weitergabe und Vervielfltigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, nur mit ausdrcklicher schriftlicher Genehmigung durch SAP AG gestattet. Bei dieser Publikation handelt es sich um eine vorlufige Version, die nicht Ihrem gltigen Lizenzvertragoder anderen Vereinbarungen mit SAP unterliegt. Diese Publikation enthlt nur vorgesehene Strategien, Entwicklungen und Funktionen des SAP-Produkts. SAP entsteht aus dieserPublikation keine Verpflichtung zu einer bestimmten Geschfts- oder Produktstrategie und/oder bestimmten Entwicklungen. Diese Publikation kann von SAP jederzeit ohne vorherigeAnkndigung gendert werden.
SAP bernimmt keine Haftung fr Fehler oder Auslassungen in dieser Publikation. Des Weiteren bernimmt SAP keine Garantie fr die Exaktheit oder Vollstndigkeit der Informationen, Texte, Grafiken, Links und sonstigen in dieser Publikation enthaltenen Elementen. Diese Publikation wird ohne jegliche Gewhr, weder ausdrcklich noch stillschweigend, bereitgestellt. Dies gilt u. a., aber nicht ausschlielich, hinsichtlich der Gewhrleistung der Marktgngigkeit und der Eignung fr einen bestimmten Zweck sowie fr die Gewhrleistung der Nichtverletzung geltenden Rechts. SAP haftet nicht fr entstandene Schden. Dies gilt u. a. und uneingeschrnkt fr konkrete, besondere und mittelbare Schden oder Folgeschden, die aus der Nutzung dieser Materialienentstehen knnen. Diese Einschrnkung gilt nicht bei Vorsatz oder grober Fahrlssigkeit.
Die gesetzliche Haftung bei Personenschden oder Produkthaftung bleibt unberhrt. Die Informationen, auf die Sie mglicherweise ber die in diesem Material enthaltenen Hotlinks zugreifen, unterliegen nicht dem Einfluss von SAP, und SAP untersttzt nicht die Nutzung von Internetseiten Dritter durch Sie und gibt keinerlei Gewhrleistungen oder Zusagen ber InternetseitenDritter ab.
Alle Rechte vorbehalten.