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