HWC mobile app development for dummies - Part 3

[midhun_vp]

Developing a Hybrid Web Container Application

Use the hybrid App designer to create the screenflows for the Flight List application. The Hybrid Web Container Application will be using the MBOs developed for getting the list of Flight from SAP database. The screen flow of the application is given below.

When the user starts the application they will see a welcome screen with a message. From there they will see a start screen where the user enters the Airline ID of the flight to get filtered list of flights based on the Airline ID. Clicking on flight from the list will bring the detail screen.

This is the 3rd part of this series. Other parts are:

Part 1- Setup Mobile Development Environment

Part 2- Starting SUP Development

Part 4- Deploying a Hybrid Web Container Application

Part 5- Register Device and Assign User for Hybrid App

Part 6- Test Application on Device

1. In the Sybase Unwired Workspace, create a new HWC application. Right click on the project> New> Hybrid App Designer.

  

2. Enter Flight List.xbw as the application name and click Next.

    

3. Check the option “Can be started, on demand, from client”, and click Finish. This allows the application to be launched manually from client.

   

4. In the new window, click on the Flow Design to see the screen flow.

    

5. To add a welcome screen, click on the Screen available in the palette> then click on white free space.

    

6. Give the screen title as “Welcome”.

     

7. Double click on the Welcome screen and change the OK action of the screen from Save to Cancel. Welcome screen is going to be the first screen of the app hence the OK action should be “Cancel” for an app with client initiated starting point.

    

8. Drag and drop the arrow to welcome screen, that makes welcome screen as the first screen of the app.

   

9. Double click on the Welcome screen to go to the Screen Designer. Click on the HTMLView control from palette then click on the screen. This will add a HTML control onto the screen where we can set its content to any HTML string.

   

10. In the properties of the HTMLControl click on the New key button> Enter name for the key as “HTMLView”. There will be key for each element on a screen.

    

11. In the default value text box enter the following HTML code: <h1>Flight List</h1></h2>Mobile App<h2>

    

12. Click on the button control from palette and click on the screen. This will add a button on the screen. Give button name as “Start” and hit Enter.

  

13. In the properties of the button enter the name “Start_Button” by clicking New key.

   

14. In the properties of the button change the Type to Open and select the screen “Start (start)”. When the user clicks on the start button it opens the Start        screen.

    

15. Change label position of the button to CENTER.

    

16. Click on the flow design to see the modified screen flow.

    

17. Drag and drop the Flights_List MBO to the Flow Design screen. It creates two screens FlightsList and FlightsListDetail.

    

18. Double click on the Start screen to add an Editbox to enter the Airline ID. Click on the Editbox control from the palette and click on the screen. Enter the text “Enter Airline ID” as the name of the editbox and hit Enter.

    

19. Create a key, “Enter_Airline_ID ” for the edit box and keep the label on the TOP of the editbox. The editbox key will be used later to map with Personalization Key.

    

20. Click on the button control, then click on the screen under editbox. It will create a button in the screen. Give the name “Get Flights” to the button and hit Enter.

    

21. Give a key for the button (ex: Get_Flights_Button) and keep the label position to CENTER in the properties of the button as given below.

    

22. Change the Type of the button to Online. Hence once the user clicks on the button it will make an online request to SAP system to fetch the data. Click on search button to select MBO.

    

23. Select the AirlineProject and click on Search, it will get the Flight List MBO. After selecting the MBO click OK.

   

24. Check the option “Invoke object query” and select the findAll query from the dropdown. This query will be triggered when the button is pressed.The findAll query is automatically generated while creating MBO.

   

25. Click on the Personalization key Mappings tab> select PK_AirlineID> Edit> Select “Enter_Airline_ID”> Ok. The editbox key (Enter_Airline_ID) is mapped with Personalization Key, the Airline ID entering in the device will be send to SAP as input to the BAPI_FLIGHT_GETLIST.

   

  

26. Select the success screen of the button as FlightList (FlightList).

   

27. Click on the Flow Design tab to see the flow design.

    

Conclusion

Our simple HWC application has been built. The next step is to deploy this application to Unwired Server. Once this application is deployed to server it will be accessible to the mobile users. Go to Part 4 to deploy HWC application to Unwired Server.