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


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



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.




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




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



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!



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.



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


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



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. Whats 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:

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



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



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



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



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



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




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



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



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






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



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



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



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



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



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




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



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



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



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



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




Agenda


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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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

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

Documents

sap netweaver developer

web dynpro ui containers2

web dynpro java dcsinto

new web dynpro ui elements

ehp1sap netweaver

sap nw core uiam fnovember

ehp1 best practices

nesting container ui