Defining the User Interface 

Use

After defining your data model, you define the user interface in a Mobile UI Component using the data created in the Mobile Service Component. This step is performed using standard Web Dynpro tools and concepts.

In the UI example of this tutorial, you create a single-screen application containing an entry field, a button to trigger the order search, and a table showing the query results. Technically, this boils down to creating a Mobile UI component containing the following objects:

●      One Web Dynpro application

●      One Web Dynpro model

●      One Web Dynpro component containing:

¡        One window

¡        One component controller with a context bound to the Web Dynpro model

¡        One view containing

§         A view controller context mapped to the component controller

§         A view layout containing:

·         An input field for the search string

·         A button for executing the query

·         A table displaying the query results

On initialization of the application (wdInit), the method for generating dummy data (generateTestData) is called once. On the click of a button, the query getOrdersByLongtextis fired and its result returned into the controller context. Through data binding, the data is then automatically displayed in the table control.

Procedure

1. Create the Mobile UI Component

More information: Creating a Mobile UI Component

2. Create a Web Dynpro Model and Application

More information: Creating the Web Dynpro Model and Application

3. Apply the Component Controller Template

More information: Applying the Component Controller Template

4. Design the View Layouts

More information: Designing the View Layout

5. Build the Mobile UI Component

After completing the steps above:

       1.      Save your data.

       2.      In the Handhelds UI Explorer, select your UI component order_ui.

       3.      Open the context menu and choose Rebuild to trigger Web Dynpro generation.

       4.      Open the context menu and choose Development Component → Build to build the component.

Result

You have created a Mobile UI Component and modeled the user interface. You can now go on to compose the application.