Developing the Form View (SAP Library

Developing the Form View

In this section, we will first list the declarative and visual development parts of the Form view and its controller. The description of the components is limited to the basic information items involved.

Controller Context of the View

In the controller context of the Form view, you require three value attributes for Name, Birthday, and E-Mail Address for the form data. Declare these in the appropriate Context tab.

Controller Context of the Form View
Context Element	Type	Properties	Value
Name	Value attribute	type	Name Simple Type defined previously in the Java Dictionary stored in the DataDictionary package with the name com.sap.tc.webdynpro.tutorial. errorbehavior.datatypes
Birthday	Value attribute	type	Birthday Simple type in the Java Dictionary
EMailAddress	Value attribute	type	string

Layout of the View and Data Binding

The following table lists the structure of the UI elements contained in the layout of the Form view. Also, the context paths are specified for included properties of UI elements. Properties linked to the value attributes are marked by the symbol This graphic is explained in the accompanying text in front of the path specification of the value attribute.

This graphic is explained in the accompanying text

When designing the view layout according to the following table, note that the labelFor property for UI elements of the type Label can only be selected when the subsequent InputField UI element has been added.

Layout of the Form View

UI Element Type	UI Element Name	Embedded in ... (Container Name)	UI Element Property	Value
Transparent Container	RootUIEelement Container		Properties of Transparent Container - layout	GridLayout
Transparent Container	RootUIEelement Container		Layout - colCount	1
TextView	HeaderText	RootUIElement Container	Properties of TextView – design	header1
			Properties of TextView – text	Error and Message Behavior
			LayoutData – hAlign	center
			LayouData – paddingBottom	large
Group	FormGroup	RootUIElement Container	Properties of Group – design	sapcolor
			Properties of Group - layout	GridLayout
			Properties of Group – width	75%
			Layout - colCount	2
			LayoutData – hAlign	center
Caption	FormGroup_header	FormGroup	Properties of Caption - text	Sample Form
Label	NameLabel	FormGroup	Properties of Label – labelFor	NameInput
			Properties of Label – text	Name
			LayoutData – width	25%
InputField	NameInput	FormGroup	Properties of InputField – state	required
InputField	NameInput	FormGroup	Properties of InputField – value	Name
Label	BirthdayLabel	FormGroup	Properties of Label – labelFor	BirthdayInput
Label	BirthdayLabel	FormGroup	Properties of Label – text	Birthday
InputField	BirthdayInput	FormGroup	Properties of InputField – value	Birthday
Label	EmailAddressLabel	FormGroup	Properties of Label – labelFor	EmailAddress Input
Label	EmailAddressLabel	FormGroup	Properties of Label – text	E-Mail Address:
Transparent Container	EMailContainer	FormGroup
InputField	EMailAddressInput	EMailContainer	Properties of InputField – value	EMailAddress
Button	SendEMailButton	EMailContainer	LayoutData – paddingLeft	small
Transparent Container	ButtonContainer	FormGroup	LayoutData – colSpan	2
			LayoutData – hAlign	center
			LayoutData – paddingTop	large
Button	SaveButton	ButtonContainer
Button	ClearButton	ButtonContainer	LayoutData – paddingLeft	small

Actions and Binding Events

In the view controller, define the listed actions and link the corresponding events of UI elements to these actions.

Controller of the Form View
Name of the Action	Text	Without Validation	Event Handler
Clear	Clear Errors	checked	onActionClear
Save	Save	unchecked	onActionSave
SendEMail	Send E-Mail	unchecked	onActionSendEMail

This graphic is explained in the accompanying text

Here the action Clear is declared as a non-validating action so that no validation of the data entered by the user takes place before this data is stored in the context. In this way it is possible to delete the entries in the input fields linked to the individual value attributes or to reset them to the values defined originally even if these are not valid – that is, if validation has failed.

Afterwards, the events of individual UI elements can be linked to the actions defined previously.

Linking Events to Actions in the EMailEditor View
UI Element Name	Event Name	Action
SendEMailButton	onAction	SendEMail
SaveButton	onAction	Save
ClearButton	onAction	Clear

This graphic is explained in the accompanying text Now repeat the above procedure in the same way in the EmailEditor View!