Skip to Content
Author's profile photo Midhun VP

HWC mobile app development for dummies – Part 3

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.

result screen.jpg

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.

   /wp-content/uploads/2013/11/newproject_328598.jpg

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

     /wp-content/uploads/2013/11/nameproject_328599.jpg

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

    /wp-content/uploads/2013/11/clientinitiated_328600.jpg

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

     /wp-content/uploads/2013/11/mks_328616.jpg

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

     Newscreen.jpg

6. Give the screen title as “Welcome”.

      /wp-content/uploads/2013/11/screentitle_328631.jpg

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.

     /wp-content/uploads/2013/11/cancel_328632.jpg

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

    /wp-content/uploads/2013/11/arrowchange_328633.jpg

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.

    HTMLView.jpg

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.

     htmlKey.jpg

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

     htmlText.jpg

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.

   Buttonname.jpg

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

    newbutton name.jpg

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.

     type in welcome screen.jpg

15. Change label position of the button to CENTER.

     startButton label.jpg

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

     Flow design after welcome.jpg

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

     Drag MBO.jpg

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.

     editbox name.jpg

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.

     Editbox properteies.jpg

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.

     button name.jpg

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.

     get flight button property.jpg

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.

     online request.jpg

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

    MBO select for online req.jpg

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.

    findall query.jpg

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.

    pk mapping.jpg

   Pk mapping with edit box map.jpg

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

    success screen.jpg

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

     result screen.jpg

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.

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Greetings Midhan,

      Following the tutorial to this point, when I get to the point where it instructs to "Drag and Drop" the MKO object onto to "Flow Design Screen" to create the two screens "FlightList" and "FlightListDetail", I only receive one of these screens, the "FlightListDetail" screen. Please note, I am using SMP 2.3.3 (SDK and Server). Could the issue be my version of SMP, or would there be another reason why it would only create the one screen?

      Thanks,

      Christoff Schwan

      Author's profile photo Former Member
      Former Member

      An update to this issue:

      I recreated the MBO on previous STEP page. But instead of using the Search function to search for the BAPI, I manually browsed to "Basis Components->ABAP Workbench->Flights" to get the GetList function. Once the MBO was created in this fashion, when dragged and dropped onto the Flow Design, it created the expected 2 screens.

      Thanks,

      Christoff Schwan

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Sometimes this happens, I assume that its a bug. If you recreate the MBO or recreate the WF this issue will be solved.

      - Midhun VP