Webdynpro ABAP-2

7/30/2019 Webdynpro ABAP-2

1/30

Web Dynpro Controllers


2/30

Controllers/Contexts


3/30

Types of Controllers

Three types of controller

Custom / Component controller

Each Web Dynpro component has at least one global controller the

component controller (default)

Custom controllers are a kind of additional global controllers to encapsulate

sub function from the component controller typically to structure bigger

components

They do not have a visual interface

View controller

Each view has exactly one view controller, which processes the actions

performed by the user in the view

Window controller

Each window has exactly one window controller. It behaves like a view

controller (plugs) and is usable from other controllers (like a custom /

component controller)


4/30

Common Controller Entities


5/30

Common Controller EntitiesContextEach controller has its own context.

Root Node is already created

Methods

Called by Web Dynpro Framework(WDF).

Processed Once during the life time of controller Instance

1.Standard hook methodswhen a controller instance is created wddoinit( )

when a controller instance is deleted wddoexit( ).

2.Additional methods can be defined using the Methods tab.

Attributes

Attributes not related to the value or property of UI elementscan be declared

using theAttributes tab.

visible in all methods of this controller.

1.Standard Attributes


6/30

Special Entities of Component / Custom

Controllers Events

Any event handler method of any other controller

can register these events

Use e.g. To invocate processing of view controllerafter processing component controller

Additional Standard Hook Methods

Processed directly before the navigationrequests are processed wddobeforenavigation( )Processed after all views of the view

assembly to be sent have been processed

wddopostprocessing( )


7/30

Special Entities of View Controllers

Designed to handle all aspects of data display and

user interaction

Navigation PlugsOutbound Plug

A navigation event is raised when an outbound

plug is fired.

Inbound Plug

event handler that can be registered to a

navigation request.Actions

links a client-side event (for example, pressing

a button in a browser)

For a action an event handler method

(ONACTION) is automatically generated

Additional Standard Hook Methods

wddobeforeaction( ) is processed if a client event is

fired in any view.

wddomodifyview( ) to allow you to manipulate

programmaticallythe layout of the view

View controller has a reference to the

component controller of its

component:

WD_COMP_CONTROLLER


8/30

Special Entities of Window Controllers

Same as of view controller except UI elements

Contains structure of all the views to be displayed

Navigation links defining the possible view assemblies

contains outbound plugs and inbound plugs to set up

cross-component navigation

has a reference to the component controller of its

component:

WD_COMP_CONTROLLER


9/30

Actions for UI Element Events

Has to define for UI elements which trigger events

e.g. Pushbutton, Radiobutton, Checkboxes etc,


10/30

Navigation Between Views


11/30

Plugs And Navigation


12/30

Exercise: Navigation between viewsProblem

Develop a Web Dynpro application with more than one view. On views, provide

buttons to allow the user to initiate navigation to the next view.

Process

Task 1:Create a Web Dynpro component with a Web Dynpro window and twoWeb Dynpro views.

1. Create Web Dynpro component(ZWD_CNTR_##) with a main windowMAIN_WINDOW.

2. Create two Web Dynpro views (INPUT_VIEW and OUTPUT_VIEW) inside wdcomponent and embed them into window.

C Th H f C ll


13/30

Context-The Heart of a Controller

Structure The data used in the component or in the view are stored in the context. Read-write access to this data is available using the controllers as a starting point.

Context Node:

Are arranged hierarchically and are permitted to have

children

Children of a node may be entities known as other nodes

or attributes

Metadata description declared manually or derived from a

Dictionary Structure

Context Attribute: Stores runtime data or references to runtime data

Based on DDIC Types


14/30

Context Binding

Label

Context

Like a data

container which

holds the data The data

transport

between the UI

Element and

Context

happens

automatically by

Binding


15/30

Context Node: Properties

Cardinality of a Context Node

11

Only one element is instantiated.

01

At runtime, no more than one element is instantiated, but it is also possible that no

element is instantiated.

1n

n elements can be instantiated, but at least one element must be instantiated.

0n

The number of instantiated elements of the context node can vary.

The cardinalityproperty controls the number of elements a node collection

may hold at runtime.


16/30

Context Node: PropertiesThe Lead SelectionAccessing/Marking of the Elements of node.

Exactly One element from the collection of node element can be markedSetting The Lead Selection

automatically by the Web Dynpro framework if the context nodeproperty

Initialize Lead Selection is set to true.

program source code. user actions related to UI elements (e.g. mark line in table viewelement, which is bound to the node).

The Singleton Property

Defines relationship between a dependent node and its parentnode.

SingletonNon-singleton


17/30

Context Node: PropertiesNon-SingletonFor every element in the parent node collection there will be a distinct instance of thechild node


18/30

Context Node: PropertiesSingletonDoes not matter how many elements are present in the parent node there will only ever

be one instance of the child node collection


19/30

Context Node: PropertiesSupply Function

Characteristics:

Is mechanism to repopulate child nodes controller method is generated for supply function

can be assigned to each context node of a controller

Very Useful For singleton nodes

Automatically called by Runtime When:

The node collection is initial. The lead selection in the parent node collection is changed.

The node collection is invalidated programmatically.


20/30

Context Mapping

Context mapping is the primary

mechanism for sharing data between

different controllers.

Advantages:

Data is automatically available to all

controllers using the mapping

relationship

Only one copy of the data is ever

maintained

Data can be mapped selectively, thus

reducing the amount of data in a

controllers context to the minimal set

required to fulfil a task


21/30

Context Mapping: Internal Mapping

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

View Controller Component Controller

Context Root

FLIGHTS

Mapped node collection Node collection of mapping origin

Controller

Usage

Declaration

Context Root

BOOKINGS

BOOKID

CUSTID

CLASS

PASSN

PRICE

CARRID

CONNID

FLDATE

BOOKINGS

BOOKID

CUSTID

CLASS

PASSN

PRICE

CARRID

CONNID

FLDATE

FLIGHTS


22/30

Exercise:Data Binding and Data Transfer

Problem

Develop a Web Dynpro application with input/output fields on the views. The data the

user enters on one view (a carrier ID and a connection ID) should be available as outputon the next view.

Task 1:

Copy your solution from the previous exercise.

From ZWD_CTRL_## to ZWD_COND_##)

Or copy from NET310_CTRL_S componnent.Task 2:

In the context of the component controller, create a context node that contains

attributes for a carrier ID and a connection ID. Create the same context node in each of

the two views and map the view controller contexts to the component controller

context.

1. In the context of the component controller, create a context node (FLIGHTINFO)

based on dictionary type SFLIGHT and with cardinality 1...1. Add two attributes

from the structure components CARRID and CONNID.

2. Create the same node in the context of each view controller and map the contexts

node of the view controllers to the context node FLIGHTINFO of the component

controller.


23/30

Exercise: Data Binding and Data TransferTask 3:

For both views, create input fields corresponding to the context node attributes and bindthem to these attributes.

1. On the layout of the view INPUT_VIEW, create a form with reference to the contextattributes CARRID and CONNID. Use the Web Dynpro Code Wizard to create the form.

2. Repeat the previous step for the view OUTPUT_VIEW.

3. Activate and test


24/30

User Interface

Defining a View Layout


25/30

User InterfaceUI Element Categories


26/30

Arrangement of UI ElementsRoot node is always of type TransparentContainerCalled asRootUIElementContainer


27/30

Container Elements and Layout

ManagersContainer elements are UI elements that may have child elementsAll container elements define with Layoutproperty how their children will be arranged

The Layout propertymay have four values:1. FlowLayout

2. RowLayout

3 MatrixLayout

4.GridLayout

Adding UI Elements to the Layout

Controlling UI Element Properties

Controller and Context Programming


28/30

Controller and Context ProgrammingStandard Controller Hook Methods

Each Web Dynpro controller is a separate ABAP class

There are two hook methods that exist for allcontroller types:

1. wddoinit( ):2. wddoexit( ):These will only be called during lifetime of controller

if implemented


29/30

Accessing the Context Nodes Reference to the context node should be created

For each controller (), an interface is generated having the name

IF_.For each node of a controller context, a constant (WDCTX_)

is generated in this interface;


30/30

Thank You

Documents

Webdynpro ABAP-2