Specifying the View Layout and the Data Binding 

Now you can design the view:

●      A Label and an InputField, the latter bound to the name attribute of the Request node (Request_StudsLocal_getStudent) in the context. This is given as a parameter to the model call.

●      A Button so that the user can trigger the event to call the model. In detail the event triggered when the button is clicked calls the action event handler of the view controller and this calls the execute method in the component controller.

●      A form that displays the values we received from the EJB (always the same values are displayed for street, town and age, since we just have created some dummy data).

Procedure

Defining an Input Field

       1.      To open the Layout editor for the view, select the view node and choose Open → View Editor. Then choose the Layout tab.

       2.      Navigate to the corresponding Outline view and choose Apply Template in the context menu of Root Element.

       3.      Choose Form and select the name attribute under the Request_StudsLocal_getStudent node as shown in the screenshot below.

 

Defining a Button

       1.      Choose Apply Template in the context menu of Root Element.

       2.      Choose Action button and in the next screen call the Button Go. Let the automatically created entries for Action and Event unchanged and click Next.

       3.      Select the Call Method checkbox and choose StudsWDComp as Controller and getStudent as Method. Confirm with Finish. A button, an action event handler and the code to call the method in the component controller is generated.

Defining Output Fields

...

       1.      Choose Apply Template in the context menu of Root Element.

       2.      Choose Form and select street, town, age and name below the return node as shown in the screenshot below:

       3.      Change each editor to TextView und confirm with Finish.

       4.      To adjust the UI elements according to your needs, you can now change the layout property of the RooTElement to MatrixLayout and the layoutData property of each UI Element, you want to be displayed in a new row, to MatrixHeadData.