04 UI Elements

7/24/2019 04 UI Elements

1/33

Page 1 Author

Introduction to UI elements

Putting data on the screen: Context binding

Controlling the behaviour of UI elements using contextbinding

Using a basic composite UI element

Contents:

UI Elements


2/33

Page 2 Author

What is a UI element?

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

Label UI Element

e!t"iew UI Element

Input#iel$ UI Element

%roup UI Element


3/33

Page & Author

'ow are UI elements arrange$?

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

The root node is alwaysof type TransparentContainer and is alwayscalled

!ootUI"lementContainer. #ou cannot change this it is hard coded$

'ar$ co$e$ (ootUIElement)ontainer


4/33

Page * Author

UI Element categories

"arious categories o+ UI elements are supporte$

e.g. %utton

Input&ield 'abel

e.g. (ate)avigator

Table Tree

e.g.

TransparentContaine

r Tray

*fficeControl

+antt )etwor,

Interactive&orm

%usiness+raphics

+eo-ap

%I Application &rame

-essageArea

Each UI element ob,ect is represente$ as an abstract class that is in$epen$ent o+ any

client presentation layer.


5/33

Page - Author

Using the "iew E$itor

. Choose Change from the

context menu of a view


6/33

Page Author

"iew E$itor/. The 'ayout view

will be selected by

default

0a.UI elements can be added by

1drag and drop2 from the toolbar

0b. In the hierarchical representation 3 UI

elements can also be added by selecting

1Insert Element2 via context menu

4. Properties of the

UI elements can

be changed

. Choose

Change from

the context

menu of a view


7/33Page / Author

UI 'ayout

)onte!t 0in$ing 1

)onte!t 0in$ing is the association o+ a UI element property with a no$e or attributein a view controller3s conte!t.

he UI element property then uses the conte!t no$e or attribute as it $ata source.

I+ the UI element property can be up$ate$ by the user4 then new value replaces the

value in the conte!t.

Context

(oot 5o$e

Automatic

datatrans

port


8/33Page 6 Author

)onte!t 0in$ing 2

)onte!t 0in$ing $ecouples the UI element ob,ect +rom the application co$ing.

Implementation

)avigation

Plugs

5tandard6oo,

-ethods

Instance

-ethods

Actions

Context

(oot 5o$e

Application Coding

UI 'ayout

Automatic

datatrans

port


9/33Page 7 Author

)onte!t 0in$ing &

In or$er to control the behaviour o+ UI elements4 you shoul$ manipulatethe conte!t no$es or attributes to which the UI elements are boun$.

Implementation

)avigation

Plugs

5tandard6oo,

-ethods

Instance

-ethods

Actions

Context

(oot 5o$e

Updates

UI 'ayout

Automatic

datatrans

port


10/33Page 18 Author

Putting $ata on the screen 1

7 (eclare context

attribute


11/33Page 11 Author

Putting $ata on the screen 2

7 (eclare context

attribute

/7 Create UI element

on layout


12/33Page 12 Author

Putting $ata on the screen &

7 (eclare context attribute


on layout

07 %ind UI element

to context attribute


13/33Page 1& Author

Putting $ata on the screen *

7 (eclare context

attribute


on layout

07 %ind UI element

to context attribute


14/33Page 1* Author

Putting $ata on the screen -

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

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

9ata +rom the conte!t is transporte$ to the client $uring screen ren$ering

9ata entere$ by the user is transporte$ bac: to the conte!t when the

'P roun$;trip is processe$.

)otice that all the arrows

are double headed$


15/33Page 1- Author

5etting the UI element behaviour

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$

.5ince the value for the read*nly property ishard coded and not flexible

/.The

corresponding

input field will

always be open

for input.


16/33Page 1 Author

Controlling UI element behaviour 87

%y creating a new attribute you can control the property ofone or moreUI elements.

.A new attribute has been

created that is of the

correct data type to

control the read*nly

attribute

0.The value of the attribute

can be set by default or ina appropriate method 9

accessing the attribute

during runtime

/.&or the UI element

are according data

types available.

The readOnlyUI

element propertycan be controlled by

an attribute of type

(#;%**'"A)

8> True ? < >>

&alse7


17/33Page 1/ Author

)ontrolling UI element behaviour 2

%inding UI element properties to suitable

context attributes is a very much better

and more flexible techni@ue for UI

design.

.The readOnlyproperty can now bebound to a boolean context

attribute.

/.The input field will now only

be open for input if the

context attribute is set to ? ?

>> A%AP;&A'5".


18/33

Page 16 Author

est Page +or UI Elements

The Test ( applicationwdr_test_ui_elementsallows you to investigate and

chec,out the function of the available UI elements.

UI element appearance

Possible UI "vents

Available Properties


19/33

Page 17 Author

Introduction to Composite UI"lements 87

A composite UI element is any UI element thatre


20/33

Page 28 Author

Intro$uction to )omposite UI Elements2

Child UI "lements. The

TableColumnelements are alsocomposite UI elements.

)omposite UI elements are incapable o+ $isplaying in+ormation on

their own.

hey must have chil$ UI elements in or$er to +unction correctly.

6ierarchical representation of

a TableUI element

Composite TableUI "lement.


21/33

Page 21 Author

he TableUI element

"ach TableColumnUI "lement has a

Captionand TextViewUI element

as its children.

he Tableis an e!ample o+ a composite UI element.

A Table3s chil$ elements are also composite.

Composite TableColumnUI

"lement.

hierarchical representation of

a TableUI element


22/33

Page 22 Author

%inding a Table UI element to thecontext

iew layout

he UI elements ma:ing up a Table

hierarchy re


23/33

Page 2& Author !untime(esign Time

Context -etadata

Context !oot

#LI%'> c8..n

P(I)E

)A((I9)@55I9

#L9AE

0@@I5%> c8..n

0@@I9

)U>@BI9

)LA>>

PA>>5ABE

%inding Table Column UI elements tothe context

iew layout

"ach context attribute is a

potential candidate for

becoming a TableColumn.

TableColumnUI elements must beboun$ to chil$ attributes o+ the same node

to which the parent TableUI element is

boun$.


24/33

Page 2* Author

9e+ining chil$ UI elements +or a able)olumn

iew layout

*ptional column

header 8CaptionUI

element7

-andatory table cell

editor UI element

A TableColumn UI element must have a

UI element nominate$ to act as the table

cell e$itor. he column hea$er caption is

optional.

!untime(esign Time

Context -etadata

Context !oot

#LI%'> c8..n

P(I)E

)A((I9)@55I9

#L9AE

0@@I5%> c8..n

0@@I9

)U>@BI9

)LA>>

PA>>5ABE


25/33

Page 2- Author

able row selection

Each element in the no$e

collection becomes a table row

!untime data iew layout

!untime(esign Time

Context -etadata

Context !oot

#LI%'> c8..n

P(I)E

)A((I9

)@55I9

#L9AE

0@@I5%> c8..n

0@@I9

)U>@BI9

)LA>>

PA>>5ABE

)onte!t (oot

8

9e+ault

Element

..n)A((I9

)@55I9/)A((I9

)@55I9)A((I9

)@55I9

#L9AE

&'I+6T5

5electing a row on the screen causes

the nodes lead selection to be altered


26/33

Page 2 Author

!untime(esign Time

Context -etadata

Context !oot

#LI%'> c8..n

P(I)E

)A((I9

)@55I9

#L9AE

0@@I5%> c8..n

0@@I9

)U>@BI9

)LA>>

PA>>5ABE

>electing multiple rows +rom a table

9e+inethe no$e3sselection car$inality

iew layout

A nodes selectioncardinality controls howmany elements may be selected simultaneously

within the element collection. 0..1is the default.


27/33

Page 2/ Author

(ifference between alue 5elector and alue 6elp

!euse alue of existing alue 6elps from the

classical A%AP programming

+eneric UI 5ervices


28/33

Page 26 Author

*verview alue 5elector 3 alue6elp

alue help is based on input fields

Input fields are bound to Context attributes

alue 5elector 3 UI elements with limited value

selection 8no server roundtrip7

(rop(own%yDey

(rop(own%yIndex

Item'ist%ox

!adio%utton

alue 6elp 9 based on UI Input&ield

element 8server roundtrip re@uired7

alues will be retrieved during runtime

separated pop3up


29/33

Page 27 Author

alue 5elector "xample 3(rop(own%ox

(rop (own %ox displays the valid inputvalues

Context attribute bound to a

(rop(own%yDey UI element

Context attribute

%ased on ((IC domain

8with fixed values or table7

Assigned values during runtime

5uitable for small sets of values 8E 0B7


30/33

Page &8 Author

(ynamic alue 5elector

data: lr_node_info type ref to if_wd_context_node_info,

lt_alue_set T!"# wdy_$ey_alue_table,

alue_set_item T!"# wdy_$ey_alue.

% &et ob'ect referent of root node metadata

lr_node_info ( wd_context)*&et_node_info+ .

% fill alues into table of type wdy_$ey_alue_table

alue_set_item)$ey ( --.

alue_set_item)alue ( -C/arter-.

insert alue_set_item into table lt_alue_set.

alue_set_item)$ey ( -"-. alue_set_item)alue ( -"riate-.

insert alue_set_item into table lt_alue_set.

% set alues +table to context attribute

lr_node_info)*set_attribute_alue_set+ 2# (

-34567T_T!"#_8!-

V49#_S#T ( lt_alue_set .

Code sample


31/33

Page &1 Author

alue 6elp

Input field provide a Input 6elp icon

!endered as a pop3up table

Context attribute bound to a Input&ield UI

element

Input 6elp -ode

Automatic

(ictionary search help

*bFect alue 5elector

1frei programmiert2


32/33

Page &2 Author

!euse of existing ((IC alue6elp

5et Input 6elp -ode to

1automatic2

Assign the type of the context

attribute to an data element

The appropriate value help is

assigned to the context

attribute and is available during

runtime

Priority of search help

search help

chec, table

domain fixed values

5P&'I3CA!!I(

5;CA!!;I(

5;CA!!;I(

&ield

(ata element

(omain

"alue (ange

)hec: table

>earch help

99I)

Web 9ynpro

Properties


33/33

(ifferent Types of alue 6elps

(ate pic,er(omain fixed value range

Chec, table

(omain fixed values

04 UI Elements

Documents

Transcript of 04 UI Elements