comp167 print v2

8/12/2019 COMP167 Print v2

http://slidepdf.com/reader/full/comp167-print-v2 1/131

COMP167

Web Dynpro Java for Beginners

Chris Whealy, SAP UKHristo Dobtchev, SAP Labs, Bulgaria

Bertram Ganz, SAP AG

8/12/2019 COMP167 Print v2


© SAP 2008 / SAP TechEd 08 / COMP167

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 being intentionally or grossly negligent.

8/12/2019 COMP167 Print v2



1. Introduction

1.1. What is Web Dynpro?

1.2. Some Commonly Held Misconceptions

1.3. Web Dynpro Development in the SAP NetWeaver Developer Studio1.4. Web Dynpro and the SAP NetWeaver Development Infrastructure

2. The Principles of Web Dynpro Architecture

2.1. Web Dynpro’s Use of the Model-View-Controller Design Pattern

2.2. The Web Dynpro Component Concept

3. Working With Web Dynpro Components3.1. Web Dynpro Component Architecture

3.2 Visual and Non-Visual Controllers

3.3. The Context and Context Mapping

3.4. UI Elements and Data Binding

Agenda 1/2

8/12/2019 COMP167 Print v2



4. Web Dynpro Component Programming

4.1. Programming with the Context

4.2. Making the UI Interactive

5. Windows and Navigation5.1. Windows and the View Assembly

5.2. Navigation Processing

5.3. Messages and Error Handling

Agenda 2/2

8/12/2019 COMP167 Print v2



1. Introduction




Agenda

8/12/2019 COMP167 Print v2



What is Web Dynpro?

Web Dynpro is SAP’s standard toolset for UI development and execution.

Web Dynpro Design timeRuntime

Component

based

WindowWindow

View AssemblyView Assembly

View LayoutView Layout

AS Java

Based on

MVC

NWDS

Web Dynpro Tools

Web Dynpro

Framework

Client Device

etc

Compile & Deploy

Declared

Metamodel

Generated Code

Custom Code

8/12/2019 COMP167 Print v2

http://slidepdf.com/reader/full/comp167-print-v2 7/131© SAP 2008 / SAP TechEd 08 / COMP167

1. Introduction




Agenda

8/12/2019 COMP167 Print v2


Some Commonly Held Misconceptions 1/4

So, Web Dynpro has

something to do with

Master Data Management or

Exchange Infrastructure?

Web Dynpro , MDM and XI are un related.Web Dynpro is not an application, it is a

development toolset for creating your own custom

business applications

8/12/2019 COMP167 Print v2



Web Dynpro doesn’t require any programming

Not quite: Web Dynpro

requires much less programming.

Based on your declarations, the Web Dynprotoolset will generate UI code for you…

But you must write the coding to

implement your business logic.

8/12/2019 COMP167 Print v2



Web Dynpro applications are really

just Java Server Pages in disguise…

No! Web Dynp ro is no t JSP!

Web Dynpro does not use any JSP

based technology at all!

8/12/2019 COMP167 Print v2



There is no need for an

experienced Java developer to

attend any Web Dynpro training

Big Mistake!

This assumption is the #1 cause for poorquality Web Dynpro implementations!

Web Dynpro is based on simple principles,

but these principles are different from JSP!

8/12/2019 COMP167 Print v2


1. Introduction



1.3. Web Dynpro Development in the SAP NetWeaver DeveloperStudio

1.4. Web Dynpro and the SAP NetWeaver Development Infrastructure

Agenda

8/12/2019 COMP167 Print v2


SAP NetWeaver Developer Studio (NWDS)

All Web Dynpro development is performed within the SAP NetWeaver Developer Studio.

The NWDS uses:

Eclipse V3 as its foundation

Multiple SAP supplied plug-ins are used to implement

the required functionality

Different perspectives for SAP related development.E.g. Web Dynpro, Dictionary, Web Services

Eclipse Plug-In Framework

SAP Integration Framework

J a v a

D i c t i o

n a r y

T o o

l s

I n f r a s t r u c t u r e

T o o l s

W e b D y n p r o

T o o

l s

J a v a

E E

T o o l s

W e b S e

r v i c e s

T o o l s

Java SE

Tools

P e r s i s

t e n c e

T o o

l s

8/12/2019 COMP167 Print v2


SAP NetWeaver Developer Studio

Web

Dynpro

Tools

The Web Dynpro Tools with the NWDS

Custom Coding

Custom business logic implemented within

the framework of generated codeGood for data-driven, dynamic apps

Implementation of business rules

Dynamic screen modifications

Access to backend systems (via models)

Portal eventing

etc...

Metamodel Declarat ion s

Guarantees that all applications have a

standardised architectureGood for graphical tool support

Screen Layout and Nesting

Navigation and Error Handling

Data Flow

Componentization

etc...

Declared

Metamodel

C om pi l e

& B ui l d

D e pl o y a b

l e

A p pl i c a t i o

n

Generated Code

Custom Code

8/12/2019 COMP167 Print v2


AS Java

Access to Backend Systems from Web Dynpro

Web

Service

Provider AS Java

Web Dynpro

Runtime

Deployed WebDynpro AppDeployed Web

Dynpro App

SAP Enterprise Portal

Web Dynpro iView

Backend Application ABAPBackendServer

Web

Service

RMI SOAP RFC

RFC enabledFunction Modules

EJB

Business

Data

Business

Data

Business

Data

8/12/2019 COMP167 Print v2


1. Introduction



1.3. Web Dynpro Development in the SAP NetWeaver Developer Studio1.4. Web Dynpro and the SAP NetWeaver Development

Infrastructure

Agenda

8/12/2019 COMP167 Print v2


The SAP Component Model

Structure

Products

Provides a complete business solution

Software Components (SCs)

The unit of installation and upgrade

Grouped DCs without overlapping

Developm ent Components (DCs)

Metadata container for compilation and transport

Grouped DOs without overlapping

Developm ent Objects (DOs)

Saved as versioned files in the Design Time

Repository

DC version

SC version

File version

*

1

1

*

1

*

Product version

*

*

Software

Component

Product

Development

Object

Development

Component

8/12/2019 COMP167 Print v2



Delivery and Maintenance

Development

Components

Software

Components

ReleaseP1 P2

D1

D4

D3

D7

D8D6

D5

D11

D10D9

S1 S2

Products

Support

Package

Patch

D2

8/12/2019 COMP167 Print v2


We are interested in this type of

Development Component


The Development Component

What is a Developm ent Compo nent?

A Development Component (DC) is simply a metadata container that holds information

about:

How the contained objects should be compiled

What dependencies exists to objects in other DCs

What objects are exposed through the DC’s ―public parts‖

The name of the Software Component to which it belongs The name of the transport path through the system landscape

Developm ent Compo nents Types

There are many different types of Development Component.

Web Dynpro

Java

Composite Application

Dictionary

etc, etc.

DC A

ppB

DC B

ppC

DC C

8/12/2019 COMP167 Print v2


Packaging Web Dynpro Components 1/2

There is an unfo rtunate clash of termino logy h ere!

Do not confuse these two entities:

A Development Component of type “Web Dynpro”

This is a metadata container used for compilation and transport

A Web Dynpro Component

This is your fundamental unit of development and reuse

Multiple Web Dynpro components can exist within a single DevelopmentComponent of type ―Web Dynpro‖.

DC of type Web Dynpro

WindowWindow



WindowWindow



WindowWindow



WindowWindow

View AssemblyViewAssembly


In this example, a single DC of

type ―Web Dynpro‖ containsfour Web Dynpro components

called A, B, C & D

A B C D

8/12/2019 COMP167 Print v2


Packaging Web Dynpro Components 2/2

DC of type Web Dynpro

WindowWindow



WindowWindow



WindowWindow



WindowWindow



1 2 … ?

How many Web Dynpro

components should be placed

into a DC of type Web Dynpro?

A DC of type Web Dynpro should contain as many

Web Dynpro components as can be treated as a

single unit of compi lat ion and t ranspor t .

8/12/2019 COMP167 Print v2


DC example~dc2

WindowWindow



WindowWindow



WindowWindow



WindowWindow



Consuming Web Dynpro Functionality Held

Within a DC

The Public Part

All Development Components have interfaces known as Public Parts:

A DC may have zero or more Public Parts

A Web Dynpro Component within a DC may be added to zero or more public parts

Once a Web Dynpro component has been added to one of the DC’s Public Parts, itsfunctionality is then accessible to Web Dynpro components in other DCs.

PP_BPP_ADC example~dc1

WindowWindow



WindowWindow

ViewAssemblyView Assembly


Usage of PP_A

A B C D

Exposes WD

components

A & C

Exposes WD

components

B & D

8/12/2019 COMP167 Print v2


Exercise 1

Creating a DC of Type Web Dynpro (5 mins)

8/12/2019 COMP167 Print v2





Agenda

8/12/2019 COMP167 Print v2


A Typical Implementation of the MVC Pattern

E d i t o r

ControllerRequest

Response

Event

subscription

Data

transfer

Model

View

Datatransfer

Data

transfer

Business

System

Communication

Layer

Business Interaction Layer

User Interaction Layer

1

2

3

4

4

5

8/12/2019 COMP167 Print v2



Communication

Layer



Web Dynpro Framework

Server

Abstraction

Layer

Common

Model

Interface

MVC as Implemented Within Web Dynpro

E d i t o rWeb Dynpro Component

Non visual

Controller

Request

Response

Data

transfer

Model

Visual

Controller

Data

transfer

Business

System

C

l i e n t

A b s t r a c t i o n

L

a y e r

S e r v e r

s i d e

r e n d e

r i n g

1 23

4

5

6

8/12/2019 COMP167 Print v2






Agenda

8/12/2019 COMP167 Print v2



WindowWindow



The Web Dynpro Component:

The Basic Unit of Development and Reuse

There are several very important differences between Web Dynpro development and

other MVC based toolsets. In Web Dynpro:

The Component is the fundamental unit of development, not the web page.

A component is not a single Java class. Instead, it is an aggregation of independent, but

interrelated classes.

No individual class within a Web Dynpro Component can function independently from the

rest of the component.

The unit of reuse in Web Dynpro is an entire component, no t an individual view or

controller within a component.

Multiple, independent classes

exist within a single Web

Dynpro component

8/12/2019 COMP167 Print v2



Why is a Component Structured This Way?

The Heart of MVC 1/2

MVC is often thought of as the design pattern that separates data

presentation from data processing. And this is true.

However, this is just one use case of a more fundamental concept.

MVC-Based Web Application

View

Data

Presentation

Controller

Data ProcessingBackend

SystemModel

8/12/2019 COMP167 Print v2



Why is a Component Structured This Way?

The Heart of MVC 2/2

At its heart, the MVC design pattern separates those parts of a program that

generate (or supply) data from those parts that consume data.

It is this aspect of the MVC design pattern

that is emphasized in Web Dynp ro.

Web Dynpro Application

Visual Controller

Data Consumer

Non-Visual

Controller

Data GeneratorBackend

SystemModelVisual Controller

Data Consumer

Non-Visual Cntlr Data

Generator

w.r.t.

Data

Consumer

w.r.t.

8/12/2019 COMP167 Print v2



Exercise 2Create a Web Dynpro Component (5 mins)

8/12/2019 COMP167 Print v2



3. Working With Web Dynpro Components

3.1. Web Dynpro Component Architecture


3.3. The Context and Context Mapping3.4. UI Elements and Data Binding

Agenda

f C

8/12/2019 COMP167 Print v2



The Architecture of a Web Dynpro Component

1/2 (From NW CE 7.1 Onwards)

W e b D y n p r o C o m p o n e n t

Window

Controller

WindowWindow


Interface

Controller

Externally

Visible

Internally

Visible

Interface

View

Controller

Custom

ControllerView

Controller


Component

ControllerWindow

View

Layout

Visual Entities Programmatic Entities

Interface

View

Model

Th A hit t f W b D C t

8/12/2019 COMP167 Print v2



The Architecture of a Web Dynpro Component

2/2 (From NW 7.1 CE Onwards)


Window

Controller

WindowWindow


Interface

Controller

Externally

Visible

Internally

Visible

Interface

View

Controller

Custom

ControllerView

Controller


Component

ControllerWindow

View

Layout


Interface

View

Model

Controllers

acting as data

generators

Controllers

acting as data

consumers

A d

8/12/2019 COMP167 Print v2







Agenda

Vi l & N Vi l C t ll 1/2

8/12/2019 COMP167 Print v2



Visual & Non-Visual Controllers 1/2


Window

Controller

WindowWindow

Interface

Controller

Externally

Visible

Internally

Visible

Interface

View

Controller

Custom

ControllerView

Controller


Component

ControllerWindow

View

Layout


Model

Non-Visual

Controllers

VisualControllers


Interface

View

Vi l & N Vi l C t ll 2/2

8/12/2019 COMP167 Print v2



Visual & Non-Visual Controllers 2/2


Window

Controller

WindowWindow

Interface

Controller

Externally

Visible

Internally

Visible

Interface

View

Controller

Custom

ControllerView

Controller


Component

ControllerWindow

View

Layout


Model


Interface

View

Notice that some usage

declarations are bi-directional…

whereas others are one way

N Vi l C t ll

8/12/2019 COMP167 Print v2



Non-Visual Controllers

Non-Visual Controller

Model Usage

(Declared at the

component level)

Models

Implementation

Standard

Hook

Methods

Instance

Methods

Events

Required

Controllers

Controller

Interface

Other WD

Components

Other WD

Controllers

Custom

Controller

Model

Object

Context

Root Node

Component

Interface

Component

Usage

WindowWindow



Created by explicit declaration or coding Created when the component is declared

Vi l C t ll

8/12/2019 COMP167 Print v2



Visual Controllers

Visual Controller

Model Usage

(Declared at the

component level)

Models

Implementation

Standard

Hook

Methods

Instance

Methods

Actions

Required

Controllers

Controller

Interface

Other WD

Components

Other WD

Controllers

Custom

Controller

Model

Object

Context

Root Node

Component

Interface

Component

Usage

WindowWindow



Created by explicit declaration or coding Created when the component is declared

Layout

Navigation

Plugs

Standard Hook Methods

8/12/2019 COMP167 Print v2




Generic WD Controller

Model Usage

(Declared at the

component level)

Models

Implementation

Standard

Hook

Methods

Instance

Methods

Required

Controllers

Controller

Interface

Other WD

Components

Other WD

Controllers

Custom

Controller

Model

Object

Context

Root Node

Component

Interface

Component

Usage

WindowWindow



Why Do WD Controllers Have Hook Methods?

8/12/2019 COMP167 Print v2



Server

Abstraction

Layer

Common

Model

Interface

Why Do WD Controllers Have Hook Methods?

Model

Communication

Layer



C

l i e n t

A b s t r a

c t i o n

L a y e r

S e r v e r s i d e

r e n d e

r i n g

Web Dynpro Framework

E d i t o rWeb Dynpro Component

Non-Visual

Controller

Visual

Controller

Business

System

Irrespective of the functionality

your component implements,there must be a static interface

between it and the Web Dynpro

Framework


8/12/2019 COMP167 Print v2




The Standard Hook methods implement the static interface between the Web

Dynpro Framework and the functionality in your Web Dynpro Component.

All standard hook methods are called automatically by the Web Dynpro Framework.

Lifecycle hook methods are called only once during the lifecycle of the controller.

Round trip hook methods are only called once per server round trip.

Controller Type Hook

MethodTypeHook Method Name Comp View Custom Window

wdDoInit() Lifecycle

wdDoExit() Lifecycle

wdDoBeforeNavigation() Round trip

wdDoApplicationStateChange() Round trip

wdDoPostProcessing() Round trip

wdDoModifyView() Round trip

wdDoBeforeAction() Round trip

wdOnContextMenu() Round trip

Shortcut Variables

8/12/2019 COMP167 Print v2



Shortcut Variables

There are a set of standard shortcut variables that are automatically available within

every controller.

private final IPrivate${nc} wdThis;

private final IPrivate${nc}.IContextNode wdContext;

private final IWDComponent wdControllerAPI;

private final IWDComponent wdComponentAPI;

public ${nc}(IPrivate${nc} wdThis) {

this.wdThis = wdThis;

this.wdContext = wdThis.wdGetContext();

this.wdControllerAPI = wdThis.wdGetAPI();

this.wdComponentAPI = wdThis.wdGetAPI().getComponent();

}

Standard shortcut variables available in all Web Dynpro controllers

${nc} = the name of the declared component.

Agenda

8/12/2019 COMP167 Print v2







Agenda

The Context: A Controller Specific Repository

8/12/2019 COMP167 Print v2



The Context: A Controller Specific Repository

for Runtime Data

Generic WD Controller

Model Usage

(Declared at the

component level)

Models

Implementation

Standard

Hook

Methods

Instance

Methods

Required

Controllers

Controller

Interface

Other WD

Components

Other WD

Controllers

Custom

Controller

Model

Object

Context

Root Node

Component

Interface

Component

Usage

WindowWindow



The Context: Declaring the Context Structure

8/12/2019 COMP167 Print v2




at Design Time 1/2

The structure of the context is typically

declared at design time.

The top level node in a context is

called the ―root node‖ and it’s

properties are immutable.

The context

root node


8/12/2019 COMP167 Print v2




at Design Time 2/2

The structure of the context is typically

declared at design time.

The top level node in a context is

called the ―root node‖ and it’s

properties are immutable.

Nodes

A node is a type safe collection that

behaves much like a table.It contains zero or more attributes.

Attr ibutes

An attribute is a scalar value of any

available data type.

The Context:

8/12/2019 COMP167 Print v2



The Context:

Creating a Node at Design Time

When you declared a context node,

you must identify how the node’s

structure will be defined.

The metadata needed to define a

node’s structure can be obtained via:

Mapping

The node’s structure is created using the

metadata from some other node in a differentcontroller. The mapped node then acts as a

reference to the data in the mapping reference

node.

Structure Bind ing


metadata found in a dictionary structure.

Model Bind ing


metadata found in a model object. Manually

The node’s structure must be defined

manually.

The Context:

8/12/2019 COMP167 Print v2



The Context:

Creating an Attribute at Design Time

A similar process is used for

attribute declaration.

Attribute metadata can be obtained

via:

Mapping

The metadata is obtained from an attribute inthe same node to which the parent node is

mapped. At runtime, this attribute contains a

reference to the data held in the mapped node.

Structure Bind ing

The attribute is created using the metadata

found in a dictionary object or simple type.

Model Bind ing

The attribute is created using themetadata found in a model attribute.

Manually

The attribute’s metadata must be

defined manually.

The Context:

8/12/2019 COMP167 Print v2



The Context:

Two Important Node Properties

All context nodes have two very important properties.

It is vital to understand how these property values alter anode’s runtime behaviour otherwise, you could get the

false impression that data is missing from the context.

Collect ion Cardinal i ty

Defines the maximum and minimum number of elements this

node may contain.

Singleton Defines how many instances of this node may exist with

respect to the parent node – not the JVM!

The Context:

8/12/2019 COMP167 Print v2



The Context:

The Collection Cardinality Property

Col lect ion Cardinal i ty

A node’s collection cardinality property is actually a pair ofvalues that, taken together, determine the maximum and

minimum number of elements the node may contain.

Mandatory

The first value defines whether the node is required to

contain at least one element.

Mult ip le The second value defines whether the node may contain

more than one element.

This gives a total of 4 possible cardinality values:

1..1 Exactly one element

0..1 No more than one element

1..n At least one element

0..n Any number you like (default)

The Context:

8/12/2019 COMP167 Print v2



The Context:

The Singleton Property 1/2

Singleton

This property is hard-coded to ―true‖ for all nodes thathave the context root as their immediate parent.

The Context:

8/12/2019 COMP167 Print v2



The Context:

The Singleton Property 2/2

Singleton

This property is hard-coded to ―true‖ for all nodes thathave the context root as their immediate parent.

However, you may alter this property value for any node

lower down the hierarchy.

Changing the singleton value has a profound effect on the

way the node behaves at runtime!

The Context:

8/12/2019 COMP167 Print v2



The Context:

Runtime Behavior – Non-Singleton Nodes

Context Root

0Default

Element

SalesOrders

..nOrderNo

SalesDat

e1OrderNo

0OrderNo

SalesDate

LineItems

..nItemNo

SalesDate

1ItemNo

0ItemNo

Price

LineItems

..nItemNo

SalesDat

e1ItemNo

0ItemNo

Price

LineItems

..nItemNo

SalesDat

e1ItemNo

0ItemNo

Price

For every element in the parent node

collection, there could exist a separate

instance of the non-singleton child node

Each element has a direct

reference to its own specific

child node instance

The Context:

8/12/2019 COMP167 Print v2



The Context:

Runtime Behavior – Singleton Nodes

Context Root

0Default

Element

No matter how many elements exist in the

parent node collection there will only ever be a

single instance of the child node.

SalesOrders

..nOrderNo

SalesDat

e1OrderNo

0OrderNo

SalesDate

LineItems

..nItemNo

SalesDat

e1ItemNo

0ItemNo

Price

Each time the lead selection in

the parent node changes…

The contents of a singleton child

node must be rebuilt.

This is the purpose of a ―Supply

Function‖

supplyLineItems()

Context Mapping:

8/12/2019 COMP167 Print v2



Context Mapping:

Sharing Data Between Controllers


Window

Controller

WindowWindow


Interface

Controller

InterfaceView

Controller

Custom

Controller

View

Controller


Component

ControllerWindow

View

Layout

Interface

View

Context Mapping

Within a Web Dynpro component, each controller is an independent Java class.Therefore by default, these controllers will not normally share data with each other.

Context mapping allows two

controllers to share data – as

long the controller’s role as a

data consumer is not violated.

The direction of the arrow

indicates the direction of

dependency.

Context Mapping:

8/12/2019 COMP167 Print v2



pp g

Using Data Modeller

Context Mapping w ith the Data Model ler

The Data Modeller is a graphical tool for declaring the relationship that exist betweenthe controllers within a single component.

Context Mapping:

8/12/2019 COMP167 Print v2



pp g

The Context Mapping Wizard 1/3

Context mapping can be performed by picking the context node and dropping it on

the target context’s root node.

Context Mapping:

8/12/2019 COMP167 Print v2



pp g




Context Mapping:

8/12/2019 COMP167 Print v2



pp g




8/12/2019 COMP167 Print v2



Exercise 3Context Creation and Mapping (10 mins)

Agenda

8/12/2019 COMP167 Print v2







g

Creating a View Layout 1/5

8/12/2019 COMP167 Print v2



g y

A view layout can be constructed in one of three ways. Either by:

Dragging and dropping the individual UI elements onto the screen one at a time


8/12/2019 COMP167 Print v2



A view layout can be constructed it one of three ways. Either by:


By using the ―Insert Child‖ menu option in the Outline view

You now have the opportunity to

name the UI element before it is

added to the hierarchy.


8/12/2019 COMP167 Print v2






Using the template wizard to create UI elements based on attributes found in the context


8/12/2019 COMP167 Print v2








8/12/2019 COMP167 Print v2







Supplying UI Element Properties with Data

8/12/2019 COMP167 Print v2



from the Context 1/2

All UI elements have a set of properties.

These properties can obtain a value in one of two ways. Either: From a value hard-coded into the property field, or

Supplying UI Element Properties with Data

8/12/2019 COMP167 Print v2



from the Context 2/2

All UI elements have a set of properties.

These properties can obtain a value in one of two ways. Either: From a value hard-coded into the property field, or

By being bound to a node or attribute in the view controller’s context

Controlling UI Element Properties

8/12/2019 COMP167 Print v2



UI LayoutImplementation

Navigation

Plugs

Standard

Hook

Methods

Instance

Methods

Actions

Context

Root Node

U p d a

t e s

The behavior of a UI element should always be controlled by binding the required

property to a suitable context attribute.

Your coding changes the context.

Data binding m akes the direct manipulat ion

of UI element p ropert ies unnecessary!

Data binding updates the UI element property.

Context Mapping and Data Binding: A Chain of

8/12/2019 COMP167 Print v2



Connections to Put It All Together 1/2

Context Mapping allows controllers to share

data with each other within the scope of a

single component.


Component

Controller

View Controller

Root Node

SalesOrders

LongText

OrderNo

SalesDate

SalesRep

LineItems

Description

ItemNo

Price

Quantity

Root Node

SalesOrders

LongText

OrderNo

SalesDate

SalesRep

LineItems

Description

ItemNo

Price

Quantity

Data binding either presents the values in the

context on the screen, or uses them to

manipulate UI elements behavior.

The context in the component

controller acts as the data

supplier.

The context in the view

controller acts as the data

consumer.

Context Mapping and Data Binding: A Chain of

C 2/2

8/12/2019 COMP167 Print v2



Connections to Put It All Together 2/2

Context Mapping allows controllers to share

data with each other within the scope of a

single component.


Component

Controller

View Controller

View layout

Root Node

SalesOrders

LongText

OrderNo

SalesDate

SalesRep

LineItems

Description

ItemNo

Price

Quantity

Root Node

SalesOrders

LongText

OrderNo

SalesDate

SalesRep

LineItems

Description

ItemNo

Price

Quantity

Data binding either presents the values in the

context on the screen, or uses them to

manipulate UI elements behavior.

The UI element properties in the

view layout act as data consumers

with respect to the view controller’s

context.

Supplying Data to UI Element Properties

8/12/2019 COMP167 Print v2



Java EquivalentDefault Type

A context attribute may have any data type you want…

However, if you want that context attribute to be bound to the property of a UIelement, then you are only permitted to use the following simple data types.

Notice this is java.sql.Date,

not java.util.Date!

timestamp

time

string

short

long

integer

float

double

decimal

date

boolean

binary

java.sql.Timestamp

java.sql.Time

java.lang.String

java.lang.Short

java.lang.Long

java.lang.Integer

java.lang.Float

java.lang.Double

java.math.BigDecimal

java.sql.Date

boolean

byte[]

8/12/2019 COMP167 Print v2



Exercise 4UI Element Creation & Data Binding (10 mins)

Agenda

8/12/2019 COMP167 Print v2






The Purpose of the Context

8/12/2019 COMP167 Print v2



Why do Web Dynpro controllers have a context?

To provide a standardized data storage structure common to all controllers To allow data to be shared easily between controllers (context mapping)

To act as a data supplier for UI element properties (view controllers only)


Component

Controller

View Controller

View layout

Root Node

SalesOrders

LongText

OrderNo

SalesDate

SalesRep

LineItems

Description

ItemNo

Price

Quantity

Root Node

SalesOrders

LongText

OrderNo

SalesDate

SalesRep

LineItems

Description

ItemNo

Price

Quantity

Programming With The Context 1/12

Accessing a Node Its Elements and Attributes

8/12/2019 COMP167 Print v2



Accessing a Node, Its Elements, and Attributes

Typed Context API

Any node declared at design time will have a set oftyped classes created for it. These class and method

names will contain the name of the declared node.

// Get a reference to the SalesOrders node ISalesOrdersNode soNode = wdContext.nodeSalesOrders();

Accessing a context node declared at design time

SalesOrders

..nOrderNo

SalesDate1OrderNo

SalesDate0OrderNo

SalesDate



8/12/2019 COMP167 Print v2




Typed Context API




// Get the element at the lead selection ISalesOrdersElement soEl = soNode.currentSalesOrdersElement();


SalesOrders

..nOrderNo

SalesDate1OrderNo

SalesDate0OrderNo

SalesDate



8/12/2019 COMP167 Print v2




Typed Context API




// Get the element at the lead selection ISalesOrdersElement soEl = soNode.currentSalesOrdersElement();

// Get the attribute values using the accessor methods String longText = soEl.getLongText();int orderNo = soEl.getOrderNo();Date salesDate = soEl.getSalesDate();String salesRep = soEl.getSalesRep();


SalesOrders

..nOrderNo

SalesDate1OrderNo

SalesDate0OrderNo

SalesDate


Adding a Typed Element to a Context Node

8/12/2019 COMP167 Print v2




A collection cardinality of 0..1 or 0..n means that when

the application starts, the node collection will be empty.

Therefore, an element must be added programmatically


Adding a typed element to context node declared at design time

SalesOrders (c = 0..1)

8/12/2019 COMP167 Print v2




8/12/2019 COMP167 Print v2








// Create a new typed element ISalesOrdersElement soEl = soNode.createSalesOrdersElement();

// Set the attribute values using the accessor methods

soEl.setLongText("Printer supplies");soEl.setOrderNo(1000);soEl.setSalesDate(new Date(System.currentTimeMillis());soEl.setSalesRep("Harry Hawk");



OrderNo

SalesDate



8/12/2019 COMP167 Print v2








// Create a new typed element ISalesOrdersElement soEl = soNode.createSalesOrdersElement();



soNode.addElement(soEl);



OrderNo

SalesDate



8/12/2019 COMP167 Print v2




If sort order is not needed within the node collection,then use method createAndAdd${cn}Element()






8/12/2019 COMP167 Print v2






// Create a new typed element ISalesOrdersElement soEl = soNode.create AndAdd SalesOrdersElement();





8/12/2019 COMP167 Print v2






// Create a new typed element ISalesOrdersElement soEl = soNode.create AndAdd SalesOrdersElement();





OrderNo

SalesDate


Adding a Singleton Child Node

8/12/2019 COMP167 Print v2



Adding a Singleton Child Node

SalesOrders

..nOrderNo

SalesDat

e1OrderNo

0OrderNo

SalesDate

LineItems (s = true)

..nItemNo

SalesDat

e1ItemNo

0ItemNo

Price

With respect to the parent node, there can only ever be one

instance of a singleton child node – irrespective of thenumber of elements in the parent’s node collection.

// Get a reference to the SalesOrder node ISalesOrdersNode soNode =

wdContext.nodeSalesOrders();

// Ensure that at least element zero is selectedif (soNode.getLeadSelection() < 0)soNode.setLeadSelection(0);

// Access the singleton child node ILineItemsNode liNode = wdContext.nodeLineItems();int nodeSize = liNode.size();

Adding a singleton child node

supplyLineItems()


Adding a Non-Singleton Child Node

8/12/2019 COMP167 Print v2



Adding a Non-Singleton Child Node

SalesOrders

..nOrderNo

SalesDat

e1OrderNo

0OrderNo

SalesDate

LineItems (s = false)

..nItemNo

SalesDat

e1ItemNo

0ItemNo

Price

There can be as many instances of a non-singleton child

node as there are elements in the parent’s node collection.

// Get a reference to the SalesOrder node ISalesOrdersNode soNode =

wdContext.nodeSalesOrders();

// Get the element at the lead selection ISalesOrdersElement soEl =

soNode.currentSalesOrdersElement();

// Create a new non-singleton child node ILineItemsNode liNode = soEl.nodeLineItems();

Adding a non-singleton child node

This method will never return null!

If the node instance does not already

exist, a new one will be created.

8/12/2019 COMP167 Print v2



Exercise 5Adding Data to the Context (10 mins)

Agenda

8/12/2019 COMP167 Print v2






Making The UI Interactive 1/10

8/12/2019 COMP167 Print v2



A Table is an example of a UI element

that is automatically interactive.

No programming is required to initiate a

server round trip when a row is selected.


8/12/2019 COMP167 Print v2



When a new table row is selected, unless

you say otherwise, you are telling theWeb Dynpro Framework to update the

context node’s lead selection.

When the Web Dynpro Framework

renders the next screen, it automatically

retrieves the child node data belonging to

the newly selected element.


UI Elements That Raise Client Side Events

8/12/2019 COMP167 Print v2



UI Elements That Raise Client Side Events

Web Dynpro Client

onAction

Certain UI elements are able to raise

client side events.

For instance, the Button UI element can

raise and event called onAction.

However, this event is raised in the client,

and not in the server.

Somehow, there must be a way to link a

client side event with a server side action.


View Controller Actions

8/12/2019 COMP167 Print v2



View Controller Actions

Within a view controller, you can declare

a specific type of object known as an―Action‖.

An action is the runtime object that links a

client side event with a server side

response.

In this example, the action is calledNewRow.

The declaration allows for both text and

an icon to be assigned.

Notice that an event handler method will be

created automatically in the view controller.

You put your coding within this method.


Associate a UI Element Event With an Action

8/12/2019 COMP167 Print v2




A Button UI element’s onAction event mus t be

associated with an action, otherwise the button

will remain completely unusable.



8/12/2019 COMP167 Print v2



Now that the Button UI element’s onAction eventhas been associated with the ―NewRow‖ action, it

inherits the action’s text and icon.


Linking Client Side Events to Server Side Actions

8/12/2019 COMP167 Print v2



public void onAction${act}(IWDCustomEvent wdEvent) { //@@begin onAction${act}(ServerEvent)

//@@end}

Implementation of the Action event ${act}

Web Dynpro Client Web Dynpro Framework

WD Application

WD Component

View Controller Action${act}

1

3

onAction HTTP(S) Post2

// Should the coding to modify the context go here?


Use The Correct Architecture!

8/12/2019 COMP167 Print v2



WD Component

Component

Controller

View Controller

newLineItemsRow() 2

onActionNewLineItemsRow()

1

Functionality that alters

business data should

always be located in a

non-visual controller

LineItems

..nItemNo

SalesDat

SalesOrders

..nOrderNo

Sales

Date1

OrderNo

0OrderNo

SalesDate

1ItemNo

SalesDat0

ItemNo

Price3


Use The Correct Architecture!

8/12/2019 COMP167 Print v2



WD Component

Component

Controller

View Controller

newLineItemsRow() 2

onActionNewLineItemsRow()

1

LineItems

..nItemNo

SalesDat

SalesOrders

..nOrderNo

Sales

Date1

OrderNo

0OrderNo

SalesDate

1ItemNo

SalesDat0

ItemNo

Price

Context mappingallows the view

controller to see any

changes made in the

context of the

component controller

3


Add Coding To The Action Event Handler

8/12/2019 COMP167 Print v2



Once an action has been created and associated with a UI element event, the last

step is to implement the coding in the action event handler method.

g

public void onActionNewRow(IWDCustomEvent wdEvent ) {//@@begin onActionNewRow(ServerEvent)

wdThis.wdGet${nc}Controller().newSalesOrdersRow();//@@end

}

Action Handler Coding in a View Controller

public void newSalesOrdersRow() {//@@begin newSalesOrdersRow()

// Get reference to node ISalesOrdersNode soNode = wdContext.nodeSalesOrders();

// Add a new element and set lead selection soNode.createAndAddSalesOrdersElement();soNode.setLeadSelection(soNode.size() - 1);

//@@end }

Create a New Row in Node SalesOrders in Component Controller

8/12/2019 COMP167 Print v2



Exercise 6Making the UI Interactive (10 mins)

Agenda

8/12/2019 COMP167 Print v2



5. Windows and Navigation

5.1. Windows and the View Assembly



The Web Dynpro Window Concept 1/2

A Component’s Visual Interface

8/12/2019 COMP167 Print v2




Window

Controller

WindowWindow


Interface

Controller

Externally

Visible

InternallyVisible

Interface

View

Controller

Custom

ControllerView

Controller


Component

ControllerWindow

View

Layout


Interface

View

Model

A Window is the design time entity

within which you define the content

and navigation of the component’s

visual interface

The Interface View is the runtime

entity that is implemented by thewindow to provide the visual

interface

The Web Dynpro Window Concept 2/2

A Component’s Visual Interface

8/12/2019 COMP167 Print v2




Window

Controller

WindowWindow


Interface

Controller

Externally

Visible

InternallyVisible

Interface

View

Controller

Custom

ControllerView

Controller


Component

ControllerWindow

View

Layout


Interface

View

Model

Think of the Window and

the Interface View as two

sides of the same coin…

Window Definition

Design Time Appearance

8/12/2019 COMP167 Print v2



WindowWindow

View ―Customer― View ―CaseDetail―

ViewContainer ―Upper‖

ViewContainer ―Lower‖

ViewContainer ―Area1‖ ViewContainer ―Area2‖

ViewContainer ―Area3‖

Empty

EmptyCustomer

List

Product

List

Customer

Search

Customer

Details

Product

Details

Interaction

Record

Interaction

History

A window contains two important types of content:

Embedded Views

Navigation Links (connections between inbound and outbound navigation plugs)

Window Definition 1/7

Runtime Appearance – The View Assembly

8/12/2019 COMP167 Print v2



WindowWindow

View ―Customer―



Empty

Empty

Customer

Search

Unless the window layout is very simple, only a subset of the views embedded at design time

will be visible on the client device at any one time.

This subset is known as the ―View Assembly‖ and it typically changes after every round trip.

The initial appearance of the

screen is controlled by setting an

embedded view’s ―default‖property to true.



8/12/2019 COMP167 Print v2



WindowWindow

View ―Customer―



Empty

Customer

List

Customer

Search

The user interacts with view ―Customer Search‖ and the action handler fires an outbound plug.

The previously displayed Empty view is now replaced with view ―Customer List‖

Fire plug



8/12/2019 COMP167 Print v2



WindowWindow

View ―Customer―



Empty

Customer

List

Customer

Details

Fire plug

The user interacts with view ―Customer List‖ and the action handler fires an outbound plug.

The previously displayed ―Customer Search‖ view is now replaced with view ―Customer Details‖



8/12/2019 COMP167 Print v2



WindowWindow

View ―Customer―



Empty

Product

List

Customer

Details

Fire plug

The user interacts with view ―Customer Details‖ and the action handler fires an outbound plug.

The previously displayed ―Customer List‖ view is now replaced with view ―Product List‖



8/12/2019 COMP167 Print v2



WindowWindow

View ―Customer―



Product

List

Product

Details

Fire plug

Customer

Details

The user interacts with view ―Product List‖ and the action handler fires an outbound plug.

The previously displayed Empty view is now replaced with view ―Product Details‖



8/12/2019 COMP167 Print v2



WindowWindow

View ―Customer― View ―CaseDetail―





Product

List

Product

Details

Interaction

Record

Interaction

History

Customer

Details

Fire plug

The user interacts with view ―Product Details‖ and the action handler fires an outbound plug.

The previously displayed ―Product Details‖ view is a child of view ―Customer‖.



8/12/2019 COMP167 Print v2



WindowWindow

View ―CaseDetail―



Interaction

Record

Interaction

History

The entire ―Customer‖ view is now replaced with view ―CaseDetail‖, which also contains

embedded views. Notice that views ―Interact Record‖ and ―Interaction History‖ are displayed in

a darker blue color. This indicates that these are the default views.

Agenda

8/12/2019 COMP167 Print v2







Navigation Processing

Inbound Plug Declaration

8/12/2019 COMP167 Print v2



View controllers are responsible for user interaction and navigation processing.

Therefore, special navigation entry and exit points can be declared known as plugs.Declaring an i nbound plug ${pin} causes a view controller method to be generated:

This method may take any parameters you require

You are required to write the implementation of this method

You are not responsible for calling this method directly. It is called automatically in response

to the corresponding outbound plug being fired on the other end of the navigation link.

SalesOrdersView

${pin}onPlug${pin}()

public void onPlug${pin}(IWDCustomEvent wdEvent ) {//@@begin onPlug${pin}(ServerEvent)//@@end }

Inbound Plug Method in a View Controller

Navigation Processing

Outbound Plug Declaration

8/12/2019 COMP167 Print v2



View controllers are responsible for user interaction and navigation processing.

Therefore, special navigation entry and exit points can be declared known as plugs.Declaring an outbound plug ${pout} causes a view controller method to be generated:

This method may take any parameters you require

You may not alter the implementation of this method

Calling this method is all that is required to initiate navigation (as long as a navigation link

connects this outbound plug to at least one other inbound plug!)

SalesOrdersView

An Outbound Plug is a

navigation exit point

${pout} wdFirePlug${pout}()

${pin}onPlug${pin}()

An Inbound Plug is a

navigation entry point

8/12/2019 COMP167 Print v2



Exercise 7Navigation Processing (15 mins)

Agenda

8/12/2019 COMP167 Print v2







The Message Editor 1/3

8/12/2019 COMP167 Print v2



Within the scope of a single Web Dynpro

Component, all message strings are handled

within a central message pool.

Double click on theMessage Pool to open

the Message Editor


8/12/2019 COMP167 Print v2



Press the ―plus‖ icon inthe toolbar to create a

new message


8/12/2019 COMP167 Print v2



For each message, you must declare:

A key (an arbitrary unique identifier)

The message text

The message type: success, warning, error, text or info

A flag to indicate whether the message text should be translated or not

Programmatic Access to Declared Messages

8/12/2019 COMP167 Print v2



After declaring a message for component ${nc}, interface IMessage${nc} will be

(re)generated the next time your project is saved (Ctrl-Shift-S), in which each message

exists as a constant within this interface.

For instance, the message ―Error‖ in component ―Ex1Comp‖ seen above is accessed:

IWDMessage errMsg = IMessageEx1Comp.ERROR;

Issuing Basic Messages 1/2

8/12/2019 COMP167 Print v2



Each component has a special class for displaying messages.

This can be accessed from any controller via the wdComponentAPI shortcut variable.

Messages can now be issued by calling one of the message manager’s report…()

methods.

IWDMessageManager msgMgr = wdComponentAPI.getMessageManager();

msgMgr.reportMessage(IMessageEx1Comp.ERROR, null);

Using the Message Manager

IMPORTANT!Do not call one of the message manager’s raise…() methods unless you need to

report a fatal application error!

The Web Dynpro Framework wi l l not return control to your coding after one of these

methods have been called. The appl icat ion w i l l terminate immediately!

Issuing Basic Messages 2/2

8/12/2019 COMP167 Print v2



You may call the message manager any number of times during a single

round trip.

msgMgr.reportMessage(IMessageEx1Comp.SUCCESS , null);For instance, calling:

produces:

msgMgr.reportMessage(IMessageEx1Comp.ERROR, null); And calling:

produces:

The icon that appears next to the text is

determined by the message type.

8/12/2019 COMP167 Print v2



Exercise 8Issuing Basic Messages (10 mins)

Basic Principle of Web Dynpro Architecture

8/12/2019 COMP167 Print v2



PRINCIPLE

In Web Dynpro development, view controllers should be written to act only

as consumers of data.

They should simply process the data received either from the user or from a

non-visual controller such as the component controller.

They are not responsible for:

Generating the data they work with (i.e. interacting with a backend system)Making decisions about flow control within the application

Making decisions about the application’s lifecycle

Good Practice for Error Handling

8/12/2019 COMP167 Print v2



Depending on which UI event is raised, any action event handler in any view

could be called.

Each view controller should report any errors it detects to the component

controller,

Web Dynpro Component

Component Controller

WindowWindow

View 2

View 3

View 1

onAction${act}() onAction${act}()

onAction${act}()

doErrorState() {

Decide what to do… }

Error

Error

Error

then the component controller can then process and report the

errors centrally.

8/12/2019 COMP167 Print v2



Exercise 9Error Handling (15 mins)

Building Your Business with

SDN Subscriptions

8/12/2019 COMP167 Print v2



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 commercialization

license 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

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

8/12/2019 COMP167 Print v2



Related SAP Education and Certification Opportunities

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

SAP Public Web:

SAP Developer Network (SDN): www.sdn.sap.com

Business Process Expert (BPX) Community: www.bpx.sap.com

Related Workshops/Lectures at SAP TechEd 2008BPM162 Building Web Dynpro UI Screens for SAP NetWeaver

BPM

COMP165 Exploring Web Dynpro Java: Goals, Concepts, Benefits

COMP200 Web Dynpro for Java: What’s New in SAP NetWeaver

CE 7.1

COMP204 Best Practices for Optimizing Web Dynpro Java

Application Performance

COMP264 Efficient Use of JCo Connections in Web Dynpro Java


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

http://www.bpx.sap.com/

http://www.bpx.sap.com/

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


8/12/2019 COMP167 Print v2



Thank you!

8/12/2019 COMP167 Print v2


Please complete your session evaluation.

Be courteous — deposit your trash,

and do not take the handouts for the following session.

Feedback

comp167 print v2

Documents