Skip to Content

SUP for Mobile(Part 1) – Steps to build and run a HWC based mobile application on Android simulator


This document is the first part in the two part series related to HWC based mobile application development in SUP Environment.

This document (part 1), will cover the following aspects:

  • Setting up Android Simulator
  • Create the Mobile application project
  • Create the Workflow form
  • Edit the custom.js file
  • Add the HTML code to build the basic Hello world screen dynamically
  • Insert an image into the Hello world page

Setting up Android Simulator:

Download the Android Simulator package from the internet. The package in the folder structure should look similar to the screenshot below:

12-28-2012 1-01-34 PM.png

Open the AVD manager.exe and create a new device. Add the option in the device to allow support for keyboard inputs.

12-28-2012 1-16-44 PM.png12-28-2012 1-18-34 PM.png 

Note: Later, to install the Sybase workflow forms in the device, start the device from the AVD Manager window. Once the window is open and the home page is visible, run the install.exe file in the platform-tools folder in the Android SDK. Provide a password for the Sybase Mobile Workflow application in the simulator.

12-31-2012 11-16-50 AM.png12-31-2012 11-17-56 AM.png

Create the Mobile application project:

First, create the mobile application project and provide the name of the application project name in the wizard.

12-28-2012 1-20-51 PM.png12-28-2012 1-20-36 PM.png 

Once the application is created in the SUP workspace, enable the “Advanced” developer profile.

12-28-2012 1-27-52 PM.png

Create the Workflow form:

Create the Workflow forms editor for the mobile application project. You can choose to select the project and use the right-click or workspace menu options to create the “Mobile Workflow Forms Editor” i.e. XBW file.

12-28-2012 1-30-42 PM.png

Choose the options: trigger by client for the workflow form. As the form does not connect to any backend system, the app would not need credentials of the user.

12-28-2012 1-35-10 PM.png

Review the properties of the Workflow forms file “HelloWorld_HWC_Form.xbw”. You can choose a separate icon and display name of the app when it appears in the mobile.

12-28-2012 1-39-49 PM.png12-28-2012 1-42-09 PM.png

Screen Design:

By default, SUP provides some standard UI elements which can be dragged onto the screen to assist in building UIs. However, the UI elements are limited and restrictive.

To get the best of the UI flavors available in the open market, SUP allows the developer to create custom UIs in the custom.js file.

To generate the files for the screen we need to use the option “Generate Mobile Workflow Package” as per the below screenshot. 

12-31-2012 10-25-37 AM.png12-31-2012 10-26-35 AM.png12-31-2012 10-32-15 AM.png

Open the custom.js file. In the editor, un-comment the sample/example code available.

Edit the code to insert custom text and save the file.

function customAfterWorkflowLoad() {

    var screenKey = getCurrentScreen();

    var form = document.forms[screenKey + “Form”];

    if (form) {

        var topOfFormElem = document.getElementById(“topOf” + screenKey + “Form”);

        topOfFormElem.innerHTML = “HelloWorldApplication”;

        var bottomOfFormElem = document.getElementById(“bottomOf” + screenKey + “Form”);                                   bottomOfFormElem.innerHTML= “<p>Welcomes you to the world of Hybrid Web Container(HWC) based mobile application for beginners</p>”;



Ensure that the server is configured in the developer workspace.

As described earlier, choose the option “Generate Workflow Package” to deploy the code onto the server.

12-31-2012 10-38-25 AM.png

After the successful deployment of the application, we need to perform the configuration on the Sybase Control Center (SCC) to make the app available for the users.

To understand the purpose of SCC, please refer to the link:

SCC Configuration:

Login to the SCC web-link and create an application for the mobile application user.

12-31-2012 10-48-30 AM.png12-31-2012 11-11-29 AM.png

Open the Sybase Workflow application in the simulator and save the server settings provided in the SCC in the simulator or smart device.

12-31-2012 11-21-18 AM.png

12-31-2012 11-33-31 AM.png

Now, the application will be available in the simulator under the Workflow option in Menu.

12-31-2012 11-35-43 AM.png

CONGRATULATIONS! You have just developed a HWC based mobile application on SUP server.

We shall look forward to the part 2 of the series to develop advanced mobile applications where the data will be exchanged with the backend system using Web Services. Hope this document was of help in your journey into mobile apps world.

You must be Logged on to comment or reply to a post.