COMP266_withNotes

8/12/2019 COMP266_withNotes

http://slidepdf.com/reader/full/comp266withnotes 1/81

COMP266

Best-Practices for Building

State-of-the-Art Web Dynpro Java

User Interfaces

Bertram Ganz, SAP NW UI Foundation OPSChris Whealy, SAP NW RIG EMEA

Mykola Gorbarov, SAP NW UI Foundation Dev

Ivan Perelomov, SAP NW UI Foundation Dev



© SAP 2008 / SAP TechEd 08 / COMP266 / 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 reasonwithout 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 intentionally or grossly negligent.




Session Abstract

COMP266

Release Description Type Audience

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

2-hours

Hands-

On

Developers or

architects with

basic knowledge

in building Web

Dynpro Javauser interfaces

Best-Practices for Building State-of-the-Art Web Dynpro Java User Interfaces




1. Web Dynpro UI Containers

2. Web Dynpro UI Container Layouts

3. Web Dynpro UI Element Positioning and Virtual Layout Cells

4. Web Dynpro UI Element Sizing

5. Web Dynpro UI Element States

6. What‗s New in SAP NetWeaver CE 7.1

Agenda

COMP266:

Best-Practices for Building State-of-

the-Art Web Dynpro Java User

Interfaces




Web Dynpro Containers

Web Dynpro Containers are UI Elements that can contain a number of arbitrary

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

TransparentContainer ( IWDTransparentContainer-API) ScrollContainer ( IWDScrollContainer-API)

Group ( IWDGroup-API)

Tray ( IWDTray-API)




Web Dynpro Container UI Elements –

1) TransparentContainer

The TransparentContainer 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:


http://slidepdf.com/reader/full/comp266withnotes 7/81© SAP 2008 / SAP TechEd 08 / COMP266 / Page 7


2) ScrollContainer

The ScrollContainer 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.AUTO and ScrollingMode.BOTH

If you do not want to have scroll bars but use scrolling mode ScrollingMode.NONE,

you should use another container instead e.g. TransparentContainer.

Example




3) Group

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: Group Header Group Toolbar

ToolBarPopin Content* Group ChildTooBarPopin TextBar




4) Tray

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:

CollapsedTray

Expanded TrayPopup Menu in Tray

Expand/Collapse Button



Adapting the Design of UI Element Containers

with pre-defined design Property Values





Tray design = FILL

ToolBar design = EMPHASIZED

ToolBarPopin des ign = PLAIN

TextView (ToolBarPopin Content) semant icColo r = POSITIVE





Tray design = PLAIN

ToolBar design = TRANSPARENT

ToolBarPopin des ign = FILL

TextView (ToolBarPopin Content) semant icColo r = NEGATIVE



Exercise





3. Web Dynpro UI Element Positioning and Layout Cells




Agenda

COMP266:



Interfaces





Web Dynpro Layouts – FlowLayout

FlowLayout – 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 describe defined

line breaks, for example.

Depends on the client technology and the size of the browser window.

Example:

with wrapping

enabled

without wrapping



Web Dynpro Layouts – RowLayout

RowLayout – 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 layoutdata

property.

Set this property to “RowHeadData” data to start a new row.

Leave this property set to “RowData” so that it appears on a row that already exists.

There is no control of vertical positioning.

Example:

Row 1



Web Dynpro Layouts – MatrixLayout

MatrixLayout – is similar to the RowLayout but with the extra functionality of vertical

positioning control.

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 a row that already exists.

UI elements are controlled both horizontally by rows and vertically by columns. Variable number of columns per row

Example

Row 1

MatrixHeadData MatrixData



Web Dynpro Layouts – GridLayout

GridLayout – is similar to MatrixLayout in that you have both horizontal and vertical

positioning.

Vertical positioning is controlled by columns which is set on the container through the

co lCount property.

Fixed number of columns per row

Example

Row 1

Column 1 Column 2



Prefer the Row Layout to the Grid or Matrix

layout whenever possible!

Prefer the Row Layout to the Grid or Matrix Layout if you

don‟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 layoutData of the first element of the new row to RowHeadData.

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✔



Prefer the Matrix Layout to the Grid Layout!

Prefer the Matrix 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 thefirst element of the new row to MatrixHeadData.

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✔





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

Rule #3✖




New Container Layout in SAP NetWeaver CE

7.1 – Column Layout (1)

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




New Container Layout in SAP NetWeaver CE

7.1 – Column Layout (2)

ColumnLayout – new in SAP NetWeaver CE 7.1

Divide screen into three master columns (MC) (between one and five MCs)

One master column exists 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 Column

Content Column

Spacer Column




Exercise










Agenda

COMP266:



Interfaces




Web Dynpro UI Element Positioning

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

RowLayout

GridLayout

ColumnLayout

FlowLayout

MatrixLayout




Web Dynpro UI Element Embedding and

Layouting Metamodel

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 to position the embedded UI elements inside

UI Elements

Are associated with a LayoutData object used to define the layout of its related virtual cell




Know about the Virtual Cells inside Containers

used to Layout UI Elements

Layout Grid with Virtual

Cells inside Container

Container

Layout Type

Descripiton

FlowLayout

RowLayout

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

MatrixLayout

GridLayout

Container is split into a grid of rows and columns

Virtual cells can span multiple columns

Cells in different rows are aligned horizontally


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





UI Element Container with specific Layout

UI Element Container Cell

with 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 PropertiesCertain UI element properties affect the „layout― of UI element itself, not

of its associated container cell(s)

UI Element




UI Element Container = Group / Container Layout = MatrixLayout


with Layout Data


Example: Label in MatrixLayout

Cell

UI Element = Label

UI element properties



C t i L t C ll d UI El t




UI Element Container = Group / Container Layout = MatrixLayout


with Layout Data


Example: Label in MatrixLayout

Clearly differentiate between LayoutData and UI element specific properties!

LayoutData [MatrixData] Properties

width, height vAlign, hAlign

vGutter

colSpan

cellDesign

cellBackgroundDesign

UI Element Properties layoutData

design

hAlign

width

UI Element = Label

D fi L tD t P ti t Ad t th




Define LayoutData Properties to Adapt the

Virtual Cells Inside Containers

Define the UI element‟s layout properties to adapt the

properties of the virtual cell comprising 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 container‟s layout properties to adapt

the properties or ALL virtual cells inside the container

MatrixLayout: stretchedHorizontally, stretchedVertically

FlowLayout: wrapping

ColumnLayout: colCount

Rule #5

✔

L t S ifi P ti t Gl




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)

L a y

o u t

P r o p e r t i e s

o f

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

cellBackground

Design

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

T t id l d t d l t




Try to avoid complex and nested layouts

wherever possible!

Try to avoid complex and nested layouts wherever

possible!

Nesting has a big impact on browser or client rendering

performance!

E.g. nesting TransparentContainers with Matrix or Grid

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



E h T t R t C t i UI




Exchange Transparent Root Container UI

Element with other Container Types in CE 7.1

Exchange default root view element

(TransparentContainerUIElement ) with other container UIelement (like TabStrip, Table, Group) to minimize container

nesting levels

New in SAP NetWeaver CE 7.1

✔ Rule #8

Agenda










Agenda

COMP266:



Interfaces

Why Web Dynpro Java Does Not Support




Why Web Dynpro Java Does Not Support

Pixel-Perfect Alignement

The absolute size of Web Dynpro UI elements could change because of localization

changes, varying font sizes and 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.

Example

✔

✖

Intrinsic sizing auto-

matically extends the

Label width and

correctly positions the

InputField

Pixel-perfect

positioning of

InputField would

truncate the Label65 pixels

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 Heights

You should principally avoid specifying the UI elements‘ width-

and height- properties at all.

Better trust in the intrinsic* sizing capabilities of your WebDynpro 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






Elements

Don‟t Specify Percentage Heights in NetWeaver 04 and 7.0

Do 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

Don‟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 %.

Input Fields Controlling Length




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

To control both the length and the

number of characters you can

enter, create a Simple Type!

Simple Types To Control Input Field Length




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 ofcharacters the user can enter.

Procedure

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.

The UI Element colSpan property part of a




The UI Element colSpan property part of a

Cell’s

The colSpan property (part of LayoutData) on UI elements in the Grid and Matrix

layouts can be used to control spacing.

Usage 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 colSpan property of the long input field to ―2‖.




Exercise

Agenda










Agenda

COMP266:



Interfaces

ReadOnly“ Enabled“ and Visible“ –




„ReadOnly , „Enabled and „Visible –

UI Element States at a Glance

All Web Dynpro UI Elements have the properties enabled and visible in common

Enabled: boolean (true/false)

Visibility: values are defined in enumeration type WDVisibility

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 readOnly property to change its

editability state (readOnly = non-editable)

UI elements with readOnly=true look and behave differently then with

enabled=false

Value 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

Enabled State of All UI Elements




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

which must not be read by the user

the user must not interact with

Avoid noisy and „flickering― changes on the UI by disabling UI elements instead of

making them totally invisible

Inheritance

The enabled state is only inherited within ToolBars (in Groups, Tables, Trays etc.) and

Tables

A disabled toolbar disables all its child toolbar items

✔ Rule #13

ReadOnly State of Editable UI Elements




ReadOnly State of Editable UI Elements

Editable Web Dynpro UI Elements

provide the readOnly property to makethem editable or not.

readOnly = non-editable

UI elements with readOnly=true look

and behave differently than with

enabled=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)

Inheritance

Only given for the Table UI element

A readOnly Table makes all its cells

readOnly too.

UI Elements with readOnly Property

Editor Category UI Element

Drop Down

Boxes

DropDownByIndex

DropDownByKey

ToolBarDropDownByIndex

ToolBarDropDownByKey

ItemListBox

Editiable Fields InputField

ToolBarInputField

TextEdit

FormattedTextEdit

Markers CheckBox

TriStateCheckBox

RadioButton

Tables Table

Differences between UI Element States




Differences between UI Element States

„ReadOnly“ and „Enabled“ – Example

UI Elements with readOnly=true look and

behave differently than with enabled=false

User Interface readOnly enabled Description

false true InputField is editable

onEnter event triggers action

true true InputField is not editable,

Text in InputField can be

clearly read

onEnter event does not triggers

action

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

Visibility States of UI Elements




Visibility States of UI Elements

WDVisibility Enumeration Type

Key Description

VISIBLE UI element is visible in its view.

NONE UI element is invisible and takes 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 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.

State Inheritance for Table UI Element





Example: readOnly = false

TextEdit

is editable

readOny = false

Row selection

is active

TableScrollBar

is active






Example: readOnly = true

readOny = true

TextEdit

is not editable

Row selection

keeps active

TableScrollBar

keeps active

design = STANDARD







readOny = true

Alternating design of table rows*

design = ALTERNATING






disabled = true

TextEdit

is not editable

Row selection

gets inactive

TableScrollBar

gets inactive

Implicitly Disabling UI Elements With Action




Web Dynpro ComponentUser Interface

p y g

Objects

Disable UI elements with defined action binding (event bound to action) by disablingaction 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(true);

wdThis.wdGetSaveAction()

.setEnabled(false);

View Controller Class

Save Action

Object

Web Dynpro Client

Save Action

ObjectonAction

enabled

disabled

Button Event

disable

Agenda









6. What„s New in SAP NetWeaver CE 7.1

g

COMP266:



Interfaces

Web Dynpro AJAX Client Succeeds HTML Client in




SAP NetWeaver CE 7.1 EhP1

The Web Dynpro AJAX Client …

is the renamed successor of the former

Web 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




SAP Tradeshow Standard Theme …




New SAP Tradeshow Plus Theme …

New Ajax Functions – Drag & Drop Support (2)




Browse & Collect Pattern:

j g ( )

New Ajax Functions – Drag & Drop Support (1)




Generic Drag & Drop

New Ajax Functions – Suggestion Support




Suggestion Support for InputField UI Element





New Web Dynpro Ajax Functions –




Enhanced Keyboard Support (1)

Access UI Elements with Keyboard Access Keys

New Web Dynpro Ajax Functions –




Enhanced Keyboard Support (2)

Access UI Elements with Keyboard Hot Keys :

More Openness in Web Dynpro Java –




Adobe Flash Island for Web Dynpro

In SAP NetWeaver CE 7.1 EhP1 Web Dynpro

Java provides openness to other UItechnologies like Adobe Flash or Java Server

Faces

Adobe Flash Islands for Web Dynpro Java

Provide a FlashIsland UI Element to

integrate additional Flash Controls likeYahooMaps 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 Analyt icsChart UI

Element in Web Dynpro Java UI Element

Library.

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




New Calendar UI Elements

New Outlook-like Calendar UI Elements with year, week, day and hierarchi-

cal month perspectives


C




Hierachical Context Menu UI Elements

Provide Hierarchical Context Menus in Web Dynpro View Layouts

View Designer


F th T bl E h t (1)




Further Table Enhancements (1)

The Table UI element is further enhanced in NW CE 7.1

Scroll tip

Empty Rows

number of elements = 3visibleRowCount = 5

displayEmptyRows = true (default)

Selection Menu


F th T bl E h t (2)




Further Table Enhancements (2)

The Table UI element is further enhanced in NW CE 7.1




F th UI El t E h t




Further UI Element Enhancements

FormattedTextView UI Element

Supports XHTML modules Text, List, Hypertext, Image

FormattedTextEdit UI Element

ButtonChoice UI Element

Button with Menu

ToolBarPopin UI Element

Misceleaneous 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

New MessageBasedTrigger UI Element




New (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 TimedTrigger UI 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 theapplication for incoming messages on the Client

WDMBTParameters- API

Map providing typed access to Parameters of the MessageBasedTrigger UIElement

Restriction: Currently only supported for MS IE 6 and IE 7

Building Your Business with

SDN S b i ti




SDN Subscriptions offers developers and consultants like you,

an annual license to the complete SAP NetWeaver platformsoftware, related services, and educational content, to keepyou at the top of your profession.

SDN Software Subscriptions: (currently available in U.S. and Germany)

A one year low cost, development, test, and commercializationlicense to the complete SAP NetWeaver software platform

Automatic notification for patches and updates

Continuous learning presentations and demos to buildexpertise in each of the SAP NetWeaver platform components

A personal SAP namespace

SAP NetWeaver Content Subscription: (available globally)

An online library of continuous learning content to help build skills.Starter Kit

SDN Subscriptions

To learn more or to get your own SDN Subscription, visit us at the

Community Clubhouse or at www.sdn.sap.com/irj/sdn/subscriptions

Further Information

http://www.sdn.sap.com/irj/sdn/subscriptions

http://www.sdn.sap.com/irj/sdn/subscriptions




Related Workshops/Lectures at SAP TechEd 2008

COMP165, Web Dynpro Java – Goals, Concepts, Benefits, 2 hours hands-on

COMP167, Web Dynpro Java for Beginners, 4 housr hands-on

COMP200, Web Dynpro Java: What‘s New With SAP NetWeaver CE 7.1, lecture

UP104, SAP NetWeaver Business Client: An Introduction, 1 hour lecture

UP105, Web Dynpro and Ajax, 1 hour lecture

UP111, Introduction to SAP Interactive Forms by Adobe, 2 hours lecture

UP200, SAP NetWeaver UI Strategy and Roadmap, 1 hour lecture

Related SAP Education and Certification Opportunitieshttp://www.sap.com/education/

SAP Public Web:

SAP Developer Network (SDN): www.sdn.sap.com SAP NetWeaver UI https://www.sdn.sap.com/irj/sdn/nw-ui

Web Dynpro Java https://www.sdn.sap.com/irj/sdn/nw-wdjava

SDN Article: „Best Practices for Building Client -Independent Web Dynpro

UIs”, Bertram Ganz, 17 th May 2006

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

http://www.sdn.sap.com/

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

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







http://www.sdn.sap.com/

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




Thank you!



Please complete your session evaluation.

Be courteous — deposit your trash,and do not take the handouts for the following session.

Thank You

Feedback

Date post:	03-Jun-2018
Category:	Documents
Upload:	koizak
View:	222 times
Download:	0 times

COMP266_withNotes

Documents