Designing the View Layout 

Use

You create the view layout by using view templates (table, action button) and the view layout editor. For data transport from the component controller, the view controller context is created through context-mapping to the component controller context.

Prerequisites

A Web Dynpro component is available containing the single view OrderList.

Procedure

1. Create the View Controller Context

...

       1.      In the Handhelds UI Explorer, double click on view OrderList.

       2.      Open the Context tab page.

       3.      Open context menu on the top node of the context tree and choose New → Node → Context Mapping.

       4.      Select all nodes of the component controller.

       5.      Choose Finish.

2. Create the View Layout

...

       1.      Add the input field and bind it to query input parameter longtext of the context.

                            a.      In the view editor for view OrderList, open the Layout tab page to start the view layout editor.

                            b.      From the palette, drag item Input field from control group Text to the upper left area of the view layout.

                            c.      Open the Properties tab page and set the cursor on the value field for the property value.

Button Bind appears.

                            d.      Choose Bind.

                            e.      In the dialog box, select context node longtext and choose OK.

       2.      Add an action button that executes query getOrdersByLongtext.

                            a.      In the Handhelds UI Explorer, open the context menu on view OrderList and choose Template → Apply.

                            b.      In the Template dialog box, choose the template action button.

                            c.      Rename Button label to Search. This automatically creates the respective names for action and event.

                            d.      Choose Next.

                            e.      In the dropdown list, choose OrderComp as controller and getOrdersByLongText as method.

This is a convenience method generated by the component controller that automatically picks up the longtext from the context, executes the query with longtext as input parameter and binds the result back to the context. The result can then be displayed in the table.

                              f.      Choose Finish.

       3.      Add a table to show the query result.

                            a.      In the Handhelds UI Explorer, open the context menu on view OrderList and choose Template → Apply.

                            b.      In the Template dialog box, choose Template Table.

                            c.      For Select attributes check node getOrdersByLongtextOutput.

This will automatically check all node attributes below.

                            d.      Choose Next.

                            e.      In dialog box Specify Table Properties, use the arrows to move OrderId to the first attribute position in the list, followed by longtext, service unit, created on, and created at in this sequence.

                              f.      Choose Finish.

Result

You have defined the complete view layout and data flow. After saving your data, you can build the Mobile UI Component.