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, Label Gantt, Network

InteractiveForm BusinessGraphics, GeoMap

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

OfficeControl
e.g. TransparentContainer, Tray MessageArea

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 will be selected by default 3a. UI elements can be added by drag and drop from the toolbar

1. Choose Change from the context menu of a view

SAP AG 2005, Title of Presentation / Speaker Name / #

3b. In the hierarchical representation - UI elements can also be added by selecting Insert Element via context menu

5. Properties of the UI elements can be changed

Context Binding (1)

Context Binding is the association of a UI element property with a node or attribute in a view controllers 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 Standard Hook Methods Instance Methods Actions Context

Root Node

UI Layout

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 Standard Hook Methods Context

Root Node

UI Layout

Actions

Navigation Plugs

SAP AG 2005, Title of Presentation / Speaker Name / #

Updates

Instance Methods

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

SAP AG 2005, Title of Presentation / Speaker Name / #

1) Declare context attribute

Putting data on the screen (3)

2) Create UI element on layout

SAP AG 2005, Title of Presentation / Speaker Name / #

3) Bind UI element to context attribute 1) Declare context attribute

Putting data on the screen (4)

2) Create UI element on layout

SAP AG 2005, Title of Presentation / Speaker Name / #

3) Bind UI element to context attribute 1) Declare context attribute

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.

1.A new attribute has been created that is of the correct data type to control the readOnly attribute
SAP AG 2005, Title of Presentation / Speaker Name / #

3.The value of the attribute can be set by default or in a appropriate method accessing the attribute during runtime

2.For the UI element are according data types available. The readOnly UI element property can be controlled by an attribute of type WDY_BOOLEAN ('X' == True, ' == False)

Controlling UI element behaviour (2)

1.The readOnly property can now be bound to a boolean context attribute. 2.The input field will now 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 Tables 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 hierarchy require several context bindings in order to function correctly.

Context Metadata
Context Root FLIGHTS (c=0..n) BOOKINGS (c=0..n) BOOKID CUSTOMID CLASS PASSNAME CARRID

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

CONNID
FLDATE PRICE

Design Time
SAP AG 2005, Title of Presentation / Speaker Name / #

Binding TableColumn UI elements to the context

TableColumn UI elements must be bound to child attributes of the same node to which the parent Table UI element is bound.

Context Metadata
Context Root FLIGHTS (c=0..n) BOOKINGS (c=0..n) BOOKID CUSTOMID CLASS PASSNAME CARRID

Each context attribute is a potential candidate for becoming a TableColumn.

CONNID
FLDATE PRICE

View layout

Design Time
SAP AG 2005, Title of Presentation / Speaker Name / #

Runtime

Defining child UI elements for a TableColumn

A TableColumn UI element must have a UI element nominated to act as the table cell editor. The column header caption is optional.
Optional column header (Caption UI element)

Context Metadata
Context Root FLIGHTS (c=0..n) BOOKINGS (c=0..n) BOOKID CUSTOMID CLASS PASSNAME CARRID

Mandatory table cell editor UI element View layout

CONNID
FLDATE PRICE

Design Time
SAP AG 2005, Title of Presentation / Speaker Name / #

Runtime

Table row selection

Each element in the node collection becomes a table row

Context Root

Context Metadata
Context Root FLIGHTS (c=0..n) BOOKINGS (c=0..n) BOOKID CUSTOMID CLASS PASSNAME CARRID

Default Element

FLIGHTS
CARRID
CARRID 2 CONNID CARRID CONNID 1 CONNID FLDATE
..n

Runtime data

View layout Selecting a row on the screen causes the nodes lead selection to be altered

CONNID
FLDATE PRICE

Design Time
SAP AG 2005, Title of Presentation / Speaker Name / #

Runtime

Selecting multiple rows from a table

Define the nodes selection cardinality

Context Metadata
Context Root FLIGHTS (c=0..n) BOOKINGS (c=0..n) BOOKID CUSTOMID CLASS PASSNAME CARRID

View layout A nodes selection cardinality controls how many elements may be selected simultaneously within the element collection. 0..1 is the default.

CONNID
FLDATE PRICE

Design Time
SAP AG 2005, Title of Presentation / Speaker Name / #

Runtime

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