best-practices for building state-of-the-art web dynpro java user interfaces - presentation

1

SAP 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

2


© SAP 2008 / SAP NetWeaver CE 7.11 EhP1 / Best Practices for Building State-of-the-Art Web Dynpro Java User Interfaces /

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


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

https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/50568365-ba9e-2b10-1188-a612a20edf31

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.


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. What‘s New in SAP NetWeaver CE 7.1

Agenda


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".

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 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!

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.

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



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 menuToolbars 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



Adapting the Design of UI Element Containers with pre-defined design Property Values

12




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




Tray Tray design = design = PLAINPLAIN

ToolBarToolBar design = design = TRANSPARENTTRANSPARENT

ToolBarPopinToolBarPopin design = design = FILLFILL

TextViewTextView ((ToolBarPopinToolBarPopin Content) Content) semanticColorsemanticColor = = NEGATIVENEGATIVE

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. What‘s New in SAP NetWeaver CE 7.1

Agenda


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:

FlowLayoutRowLayoutMatrixLayoutGridLayoutColumnLayout(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



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



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 don’t need horizontal alignment (one column layouts).

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



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



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 dondon’’t 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 don’t 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



Prefer the Matrix Layout to the Grid Layout!

Prefer the Prefer the Matrix LayoutMatrix Layout to the Grid Layout!to the Grid Layout!

This won’t enhance the performance, but we think it is easier for the application developer to work with: You don’t 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 won’t enhance the performance, but we think it is easier for the application developer to work with: You don’t 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



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 container’s 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 don’t run into this problem as often since most don’t over size vertically, but none the less this is good to remember.

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



New Container Layout in SAP NetWeaver CE 7.1 – Column Layout (1)

ColumnLayoutColumnLayout – new in SAP NetWeaver CE 7.1Allows aligned positioning of UI Elements across container bordersSolves 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



New Container Layout in SAP NetWeaver CE 7.1 – Column Layout (2)

ColumnLayoutColumnLayout – new in SAP NetWeaver CE 7.1Divide screen into three master columns (MC) (between one and five MCs)One master column consists of a label, a content and a spacer columnWorks across component and view bordersUI elements are placed automatically on this MC

Each UI element uses one or more columnsEach 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




Agenda


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



Web Dynpro UI Element Embedding and Layouting Metamodel

UI Element Containers UI Element Containers Embed one ore more UI elementsAre 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 ElementsAre associated with a LayoutDataLayoutData object used to define the layout of its related virtual cell virtual cell

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 rowsCells in different rows are not aligned horizontallyRows can have different heightsLayoutData of RowLayout refers to whole rowLayoutData of FlowLayout refers to virtual cell

MatrixLayoutGridLayout

Container is split into a grid of rows and columnsVirtual cells can span multiple columnsCells in different rows are aligned horizontallyRows can have different heights

ColumnLayout

Container is split into a grid of rows and columnsVirtual cells can span multiple columnsVirtual cells can span multiple rowsCells in different rows are aligned horizontallyRows can have different heights

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



UI Element Container = Group / Container Layout = MatrixLayout


Containers, Layouts, Cells and UI ElementsExample: Label in MatrixLayout

Cell

UI Element = Label

UI element propertiesUI element properties

32




UI Element Container Cellwith Layout Data UI Element = Label


Cell

LayoutDataLayoutData of UI element’s 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






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 PropertieslayoutDatalayoutDatadesigndesignhAlignhAlign

widthwidth

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 element‘s embedding virtual container cell and UI element properties referring to the UI element itself.

34



Define LayoutData Properties to Adapt the Virtual Cells Inside Containers

Define the UI elementDefine the UI element’’s 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 element

MatrixData: 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 container’’s 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



Layout Specific Properties at a Glance

UI Container(Group, Tray, TransparentContainer, ScrollContainer)

UI Container Layout

UI Element

LayoutData(of UI element‘s virtual cell)

LayoutHeadData(of UI Element‘s virtual cell)

Layo

ut P

rope

rtie

s of

RowLayout MatrixLayout GridLayout FlowLayout

layout = RowLayout

layout = MatrixLayout

layout = GridLayout

layout = FlowLayout

not defined stretched-Horizontallystretched-Vertically

stretchedHoriz.stretchedVertic.cellPaddingcellSpacingcolCount

wrapping

layoutData layoutData not defined* not defined*

not defined cellBackgroundDesigncellDesigncolSpanhAlignheightvAlignvGutterwidth

cellBackgroundDesigncolSpanhAlign, heightpaddingBottompaddingLeftpaddingRightpaddingTopvAlign, width

cellDesignvGutter

hAlignrowBackgroundDesignrowDesignvGutter

same as LayoutData

not defined not defined

ColumnLayout

layout = ColumnLayout

colCount

layoutData

interlineSpacingrowSpancolSpan

same as LayoutDatarequiresEmpty-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



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 row’s column and have it contain multiple UI Elements.

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.

Don’t add extra TransparentContainer UI elements inside container UI elements such as Groups – these UI elements already contain a TransparentContainer.

Use the layout property of the Group instead of placing a TransparentContainer on it as top child and specifying the layout there

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



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 levels

New in SAP NetWeaver CE 7.1

✔Rule #8

39




Agenda


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



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 Dynpro’s 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



Abandon Pixel Accurate Arrangement of UI Elements

DonDon’’t 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

DonDon’’t 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 %.

Don’t 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



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 it’s “length”property.

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



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.

ProcedureProcedureTo 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 “Representation”tab and enter the number of characters that can be entered into the “External Length”property.

45



The UI Element colSpan property part of a Cell’s

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 who’s 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 row’s 2nd element:

To fix this, set the colSpancolSpan property of the long input field to “2”.

46




Agenda


47



“ReadOnly”, “Enabled” and “Visible” –UI Element States at a Glance

All Web Dynpro UI Elements have the properties enabledenabled and visiblevisible in commonEnabled: booleanboolean (true/false)Visibility: values are defined in enumeration type WDVisibilityWDVisibility

SAP NetWeaver ‘04 and 7.0: BLANK, VISIBLE, NONESAP 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=false

Value InheritanceValue Inheritance of these properties in nested UI elements is not generally given:Visible: child UI elements inherit visibility of embedding container UI elementEnabled: 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



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 scenariothe user must not interact withwhere 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

InheritanceInheritanceThe 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



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 elementUser can still navigate and read in a non-editable Table UI element (vertical scrollbar keeps active, rows keep selectable, buttons keep active)

InheritanceInheritanceOnly given for the Table UI elementA readOnly Table makes all its cells readOnly too.

UI Elements with readOnly Property

Editor Category UI Element

Drop Down Boxes

DropDownByIndexDropDownByKeyToolBarDropDownByIndexToolBarDropDownByKeyItemListBox

Editiable Fields InputFieldToolBarInputFieldTextEditFormattedTextEdit

Markers CheckBoxTriStateCheckBoxRadioButton

Tables Table

How to set all Fields in a Group to readOnlyDefine a single context attribute IsFieldReadOnly of type boolean and map the view controller context to this attributeMultiselect (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 IsFieldReadOnlyRepeat 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



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 Description

falsefalse truetrue InputField is editableonEnter event triggers action

truetrue truetrue InputField is not editable, Text in InputField can be clearly readonEnter event does not trigger action

falsefalse falsefalse InputField is not editableonEnter event does not trigger actionText in InputField and Label are greyed out and cannot be clearly read

readOnly

disabled

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 bemade visible by end user or role personalization.

BLANKdeprecated in CE 7.1

UI element is invisible but takes up view spaceIt can be hidden, but cannot be made visible by end user or rolepersonalization.

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 thenbe 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



State Inheritance for Table UI ElementExample: readOnly = false

TextEditTextEditis editableis editable

readOnly = false

Row selectionRow selectionis activeis active

TableScrollBarTableScrollBaris activeis active

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




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




disabled = true

TextEditTextEditis notis not editableeditable

Row selectionRow selectiongets gets inactiveinactive

TableScrollBarTableScrollBargets gets inactiveinactive

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




Agenda


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 RearrangementUse of XMLHTTPRequestObjectAsynchronous Input ValidationInputField UI elements supports onChange event,In-place editing and input promptExtensive Keyboard Support (hot and access keys)MessageBasedTrigger UI elementFluid animations based on UR LightspeedEnhanced client/server communication supportingon-demand JavaScriptNew Web Dynpro UI theme SAP Tradeshow Plus

59



SAP Tradeshow Standard Theme …SAP Tradeshow Standard Theme …

60



New SAP Tradeshow Plus Theme …New SAP Tradeshow Plus Theme …

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 & collectTable: 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 itemTree: Drag single selected node/leaf, no auto-scrolling, insert before/after node/leaf or drop right onto a node

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 elementHighlighted in selection color while draggingOften, a thin dashed border is all one can see

63



New Ajax Functions – Suggestion Support

Suggestion Support for Suggestion Support for InputFieldInputField UI ElementUI Element

Suggestion Support for InputField UI ElementUser starts typing and framework provides a filtered list of valid values matching the user inputApplication developer can configure the input field so it supports suggested values if possibleValue 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



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



New Web Dypro Ajax Functions – In-Place Editing and Input Prompt

InIn--place Editingplace Editing

Input PromptInput Prompt

In-place EditingNew 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 PromptPre-fill an InputField UI elementwith a prompt that tells the user what to do or typeIt helps make the UI self-explanatoryOften used when no label text is displayedBased on new InputField property inputPrompt

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 KeysAccess keys are keyboard short cuts (e.g. <ALT + R>) for UI element navigationApplication developer specifies which UI elements have access keys have supportAccess 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



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. <CTRL + SHIFT + F7>) that trigger an action. After pressing the ALT key, access keys will be underlined on the UIApplication 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 itemWDHotkey enumeration constants in Web Dynpro Java Runtime API lists all hot keys

supported in Web Dynpro

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



Web Dynpro Java – What‘s 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) ViewFeatures of the calendar views

Working times (predefined per week day and per date)HolidayTime scale adjustableSelection of entries and free times / daysSpecialized calendar paginator

EntriesUse of CCTS data types for start and end datesPredefined semantic colors Recurring entriesFull day entriesStriped entries (e.g. to symbolize tentative)

New HierarchicalCalendarMonthView UI Element allows to visualize hierarchical calendar data (team calendar)

Allow Regional SettingCalandar Legend

70



Web Dynpro Java – What‘s 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 ViewsAllow 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



Web Dynpro Java – What‘s 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.1Vertically scrollable table, provide data tips for scroll status (index scroll tips)Wrapping of table column headersGeneric selection menuDisplay empty rows with new property displayEmptyRows=truedisplayEmptyRows=true

72



Web Dynpro Java – What‘s 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.1Grouping (like Outlook - grouping by today, yesterday, week etc.)Grid lines can be switched of, hide vertical grid lines onlyFixed rows and columnsHierarchical headersGrouping valuesCell variants Selection FineTuning

Select/deselect allSelectable columnsSelection menuPrevent selection of certain rowsDisable row selection

Multi sorting ability and visualize filtered columnBetter support of popup menus (header, disable etc.)TableRowCreator eases the handling of the table for rapid user input

73



Web Dynpro Java – What‘s New in NW CE 7.1 RowRepeater UI Element

New New RowRepeaterRowRepeater UI ElementUI Element

New RowRepeater UI ElementGoogle like Search Result display with repeated containersRowRepeater is rendered as one big MatrixLayout Supports simple non input UIElements like TextView, Link, ImageEach 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 isn’t possible

74



Web Dynpro Java – What‘s New in NW CE 7.1 Further UI Element Enhancements

FormattedTextViewFormattedTextView UI ElementUI ElementSupports XHTML modules Text, List, Hypertext, Image

FormattedTextEditFormattedTextEdit UI ElementUI Element

ButtonChoiceButtonChoice UI ElementUI ElementButton with Menu

ToolBarPopinToolBarPopin UI ElementUI Element

Miscellaneous AdditionsMiscellaneous AdditionsTransparentContainer with SectionHeaderIcons within the LegendAllow to set default values for editable UI Elements on client-sideBold Links Triggering FileDownload from within action event handlerMeltingGroup:Connects several UI Elements acting as one UI Element in a master column of a Column LayoutSectionHeader: 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 Windows0/1-Delta-Handling: The Web Dynpro Runtime automatically detects unchanged Windows ( ∆ = 0) and does not render them again.Yields an improved UI rendering performance

NOTERequires stable UI element IDsTo 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



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



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



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 Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrückliche schriftliche Genehmigung durchSAP AG nicht gestattet. In dieser Publikation enthaltene Informationen können ohne vorherige Ankündigung geändert werden.

Einige von der SAP AG und deren Vertriebspartnern vertriebene Softwareprodukte können 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 erwähnte SAP-Produkte und Services sowie die dazugehörigen Logos sind Marken oder eingetragene Marken der SAP AG in Deutschland und in mehreren anderen Ländern weltweit. Alle anderen in diesem Dokument erwähnten 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 können länderspezifische Unterschiede aufweisen.

Die in dieser Publikation enthaltene Information ist Eigentum der SAP. Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, nur mit ausdrücklicher schriftlicher Genehmigung durch SAP AG gestattet. Bei dieser Publikation handelt es sich um eine vorläufige Version, die nicht Ihrem gültigen Lizenzvertragoder anderen Vereinbarungen mit SAP unterliegt. Diese Publikation enthält nur vorgesehene Strategien, Entwicklungen und Funktionen des SAP®-Produkts. SAP entsteht aus dieserPublikation keine Verpflichtung zu einer bestimmten Geschäfts- oder Produktstrategie und/oder bestimmten Entwicklungen. Diese Publikation kann von SAP jederzeit ohne vorherigeAnkündigung geändert werden.

SAP übernimmt keine Haftung für Fehler oder Auslassungen in dieser Publikation. Des Weiteren übernimmt SAP keine Garantie für die Exaktheit oder Vollständigkeit der Informationen, Texte, Grafiken, Links und sonstigen in dieser Publikation enthaltenen Elementen. Diese Publikation wird ohne jegliche Gewähr, weder ausdrücklich noch stillschweigend, bereitgestellt. Dies gilt u. a., aber nicht ausschließlich, hinsichtlich der Gewährleistung der Marktgängigkeit und der Eignung für einen bestimmten Zweck sowie für die Gewährleistung der Nichtverletzung geltenden Rechts. SAP haftet nicht für entstandene Schäden. Dies gilt u. a. und uneingeschränkt für konkrete, besondere und mittelbare Schäden oder Folgeschäden, die aus der Nutzung dieser Materialienentstehen können. Diese Einschränkung gilt nicht bei Vorsatz oder grober Fahrlässigkeit.

Die gesetzliche Haftung bei Personenschäden oder Produkthaftung bleibt unberührt. Die Informationen, auf die Sie möglicherweise über die in diesem Material enthaltenen Hotlinks zugreifen, unterliegen nicht dem Einfluss von SAP, und SAP unterstützt nicht die Nutzung von Internetseiten Dritter durch Sie und gibt keinerlei Gewährleistungen oder Zusagen über InternetseitenDritter ab.

Alle Rechte vorbehalten.

best-practices for building state-of-the-art web dynpro java user interfaces - presentation

Documents

ehp1 sap netweaver

web dynpro ui containers

new web dynpro ui elements

web dynpro ui element

web dynpro ui element

web dynpro java dcs

noncontainer ui elements

nesting container ui