Designing the Layout of the ControlPanel View

In the following step, you finish the designing of the user interface used in the Eventing example application by extending the layout of the ControlPanel view to include appropriate UI elements. On the one hand, two buttons can be used to control the lifetime of the embedded Web Dynpro component; on the other hand, the parameter value of the event to which the embedding component is subscribed is displayed.

Procedure

Below is a description of how to design the layout of the ControlPanel view. Afterwards, the view will look like this:

...

       1.      Open the ControlPanel view in the View Designer by choosing the Layout tab page.

       2.      First, adapt the individual properties of the two existing UI elements:

Property	Value
For the root element RootUIElementContainer
Properties of TransparentContainer – layout	GridLayout
For the TextView element named  DefaultTextView
Properties of TextView – design	header1
Properties of TextView – text	Embedding Web Dynpro Component
LayoutData – hAlign	center
LayoutData – paddingBottom	large

 

       3.      Enter a Group UI element named ControlPanelGroup. To do this, go to the context menu and choose the entry InsertChild above the root element RootUIElementContainer of the Outline. Make the following settings:

Property	Value
For the Group UI element ControlPanelGroup
Properties of Group – design	sapcolor
Properties of Group - layout	MatrixLayout
Properties of Group – width	70%
LayoutData – hAlign	center
For the Caption UI element ControlPanelGroup_Header
Properties of Caption - text	Control Panel

 

       4.      Set up the Control Panel according to the table below and set the data binding (marked by ) as well as the action binding to the UI elements. Also add the following UI elements to the ControlPanelGroup.

Property	Value
Label ComponentLabel of type Label
Properties of Label – text	Control Internal Component:
Button CreateButton of type Button
Properties of Button – text	Can remain empty because this text will be retrieved from the declared action event to which the button is bound.
Event – onAction	CreateComponent
Button DestroyButton of type Button
Event – onAction	DestroyComponent
Text EventHeader of type TextView
Properties of TextView – design	emphasized
Properties of TextView  – layoutdata	MatrixHeadData
Properties of TextView – text	Event received from internal Web Dynpro Component
LayoutData - colSpan	3
Label ParameterLabel of type Label
Properties of Label – layoutdata	MatrixHeadData
Properties of Label – text	Received Event Parameter:
Field ParameterValue of type InputField
Properties of InputField – value	EventParameter

 

Here, buttons are not activated or deactivated by using data binding but by activating or deactivating action objects in the view controller implementation. On the user interface, all UI elements bound to the same action event are automatically adapted to the state of the corresponding action runtime object.

 Now continue with Implementing the Controller of the ControlPanel View.