Defining Data Binding for UI Elements 

With the FormView, the imported project template has a predefined form that allows input of relevant booking data. It returns the reservation ID number and the rental price on the basis of the results data returned by the Web service. Therefore, you do not need to worry about the layout of your example application.

You only need to take care of the link from the interface elements to the business data referenced in the view controller context. You can do this easily through Data Binding.

Prerequisites

You have set up the view context for the FormView and mapped it to the component controller context.

Procedure

...

       1.      Start the layout editor for the FormView.

       2.      Set up the data bindings between the UI element properties and the respective context model attributes in accordance with the table below.

You can start the wizard for data binding of a UI element property to a context attribute by pressing the  button at the right margin of the Value column in the Properties view.

Property	Value
Input field PickUpDate of type InputField
Properties of InputField – value	SaveBooking.dateFromString
Input field ReturnDate of type InputField
Properties of InputField – value	SaveBooking.dateToString
Input field PickUpLocation of type InputField
Properties of InputField – value	SaveBooking.pickupLocation
Input field DropOffLocation of type InputField
Properties of InputField – value	SaveBooking.dropoffLocation
Input field VehicleType of type InputField
Properties of InputField – value	SaveBooking.vehicleTypeId
Output field Price of type InputField
Properties of InputField – value	SaveBooking.Response.Result.price
Output field ReservationId of type InputField
Properties of InputField –value	SaveBooking.Response.Result.bookingID

The layout editor shows the assignment accordingly:

 

       3.      Save the current status of your project.

 

Next Step:

Implementing the Event Handler of the View