UI Elements

Contents:
 Introduction to UI elements
 Putting data on the screen: Context binding
 Controlling the behaviour of UI elements using context
binding
 Using a basic composite UI element

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 What is a UI element?

A UI element is any graphical entity that occupies a position within a

view layout.

Group UI Element

TextView UI Element

Label UI Element

InputField UI Element
 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›
 How are UI elements arranged?

All view layouts are composed from a hierarchy of UI elements.

The root node is always of type TransparentContainer, and is

always called RootUIElementContainer. You cannot change
this, it is hard coded!

Hard coded RootUIElementContainer

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 UI Element categories

Various categories of UI elements are supported

e.g. Button, InputField, Gantt, Network

Label
InteractiveForm

BusinessGraphics,
GeoMap
e.g. DateNavigator,
Table, Tree
BI Application Frame

OfficeControl
e.g.
TransparentContainer, MessageArea
Tray

Each UI element object is represented as an abstract class that is

independent of any client presentation layer.

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 Using the View Editor

1. Choose Change
from the context
menu of a view

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 View Editor

2. The Layout view 3a. UI elements can be added by

will be selected by “drag and drop” from the toolbar
default

1. Choose Change
from the context
menu of a view

3b. In the hierarchical representation - UI 5. Properties of the UI

elements can also be added by selecting elements can be
“Insert Element” via context menu changed
 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›
 Context Binding (1)

Context Binding is the association of a UI element property with a node

or attribute in a view controller’s context.

The UI element property then uses the context node or attribute as it

data source. If the UI element property can be updated by the user,
then new value replaces the value in the context.
UI Layout

Context
Root Node

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 Context Binding (2)

Context Binding decouples the UI element object from the application

coding.

Application Coding

Implementation
UI Layout
Standard Context
Hook
Root Node
Methods

Instance
Methods

Actions

Navigation
Plugs

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 Context Binding (3)

In order to control the behaviour of UI elements, you should

manipulate the context nodes or attributes to which the UI elements
are bound.

Implementation
UI Layout
Standard Context
Hook
Root Node
Methods

Instance
Updates

Methods

Actions

Navigation
Plugs

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 Putting data on the screen (1)

1) Declare context
attribute
 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›
 Putting data on the screen (2)

2) Create UI element
on layout 1) Declare context
attribute
 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›
 Putting data on the screen (3)

3) Bind UI element
to context attribute
2) Create UI element
on layout 1) Declare context
attribute
 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›
 Putting data on the screen (4)

3) Bind UI element
to context attribute
2) Create UI element
on layout 1) Declare context
attribute
 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›
 Putting data on the screen (5)

The order of attributes within a node has no influence on the order in which
the data they hold is displayed.

Notice that all the arrows

are double headed!

The binding between a UI element and a context attribute is a two-way

relationship:
 Data from the context is transported to the client during screen rendering
 Data entered by the user is transported back to the context when the HTTP
round-trip is processed.

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 Setting the UI element behaviour

1.Since the value for the readOnly

property is hard coded and not flexible

2.The corresponding
input field will
always be open for
input.

A hard coded UI element property value

gives the UI element a fixed behaviour.

This arrangement does not lend itself to good

UI design and should be avoided!

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 Controlling UI element behaviour (1)

By creating a new attribute, you can control the property of

one or more UI elements.

2.For the UI element

are according data
types available.
3.The value of the attribute The readOnly UI
can be set by default or in a element property can
appropriate method – be controlled by an
accessing the attribute attribute of type
during runtime WDY_BOOLEAN
1.A new attribute has been ('X' == True, ‘ ' ==
created that is of the False)
correct data type to control
the readOnly attribute
 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›
 Controlling UI element behaviour (2)

1.The readOnly property can now be

2.The input field will now
bound to a boolean context attribute.
only be open for input if
the context attribute is set
to ‘ ‘ == true.

Binding UI element properties to

suitable context attributes is a very
much better, and more flexible
technique for UI design.

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 Test Page for UI Elements

The Test WD application wdr_test_ui_elements allows you to investigate

and checkout the function of the available UI elements.

UI element appearance

Available Properties

Possible UI Events

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 Introduction to Composite UI Elements (1)

 A composite UI element is any UI element that

requires child UI elements.

Examples: The Table and Tree UI elements.

Rendered tree
UI element

Rendered table UI elements

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 Introduction to Composite UI Elements (2)

 Composite UI elements are incapable of displaying information on

their own.

 They must have child UI elements in order to function correctly.

Composite Table UI Element.

Child UI Elements. The

TableColumn elements are also
composite UI elements.

hierarchical representation of
a Table UI element

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

 The Table UI element

 The Table is an example of a composite UI element.

 A Table’s child elements are also composite.

Composite TableColumn UI Element.

Each TableColumn UI Element has a

Caption and TextView UI element
as its children.

hierarchical representation of
a Table UI element
 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›
Binding a Table UI element to the context

 The UI elements making up a Table

Context Metadata hierarchy require several context
bindings in order to function correctly.
Context Root
FLIGHTS (c=0..n)
BOOKINGS (c=0..n)

BOOKID

CUSTOMID

CLASS

PASSNAME

CARRID
View layout
CONNID
The Table UI element must have its
FLDATE
dataSource property bound to a context
PRICE node of cardinality 0..n or 1..n

Design Time Runtime

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

Binding TableColumn UI elements to the context

 TableColumn UI elements must be

Context Metadata bound to child attributes of the same
node to which the parent Table UI
Context Root element is bound.
FLIGHTS (c=0..n)
BOOKINGS (c=0..n)

BOOKID
Each context attribute is a
CUSTOMID potential candidate for
becoming a TableColumn.
CLASS

PASSNAME

CARRID

CONNID

FLDATE View layout

PRICE

Design Time Runtime

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

Defining child UI elements for a TableColumn

 A TableColumn UI element must

Context Metadata have a UI element nominated to act as
the table cell editor. The column
Context Root header caption is optional.
FLIGHTS (c=0..n)
BOOKINGS (c=0..n)
Optional column header
BOOKID (Caption UI element)
CUSTOMID

CLASS

PASSNAME

CARRID Mandatory table cell

editor UI element
CONNID

FLDATE
View layout
PRICE

Design Time Runtime

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

Table row selection

 Each element in the node

Context Root
Context Metadata Default
collection becomes a table
Element 0

row
Context Root
FLIGHTS (c=0..n) FLIGHTS
BOOKINGS (c=0..n) CARRID ..n
BOOKID CARRID
CONNID
2
CARRID
CONNID 1
CUSTOMID
CONNID
CLASS
FLDATE
PASSNAME

CARRID
Runtime data View layout
CONNID

FLDATE Selecting a row on the screen causes the

node’s lead selection to be altered
PRICE

Design Time Runtime

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

Selecting multiple rows from a table

 Define the node’s

Context Metadata selection cardinality
Context Root
FLIGHTS (c=0..n)
BOOKINGS (c=0..n)

BOOKID

CUSTOMID

CLASS

PASSNAME

CARRID View layout

CONNID A node’s selection cardinality controls how many
FLDATE elements may be selected simultaneously within the
element collection. 0..1 is the default.
PRICE

Design Time Runtime

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›

UI Elements: Unit Summary

You should now be able to:

 The UI element concept
 How to put data on the screen through context
binding
 Control the behaviour of UI elements using context
binding
 The use of a basic composite UI element

 SAP AG 2005, Title of Presentation / Speaker Name / ‹#›