Building Offline(Display Only) Hybrid Web Container Mobile Applications With Sybase Unwired Platform

In this blog series, we will go through how to start developing a simple mobile application with Sybase Unwired Platform. For the sample application, we will use SAP Mobile Platform Version 2.2 SP2. The information provided in this blog can be found in the online help on SyBooks Online infocenter. Thanks to SAP for providing 30 days trial of SAP Mobile Platform. In this trail connection to SAP System, sample database and unwired server is already done. Summary In this sample application I have used the standard flight data application components to search for flights, display the results and show the details of a particular flight in online and offline mode. This blog contains 1. Creation of Mobile Application Project 2. Create Mobile Business Object 3. Create Personalization Key 4. Assign Load Arguments 5. Deploying Project 6. Create UI using Hybrid App Designer 7. Registering the mobile device in Sybase Control Center 8. Generating Hybrid App 9. Testing App in Online Scenario 10.Testing App in Offline Scenario

Click here to Building

Offline(Display Only) Hybrid Web Container Mobile Applications With Sybase Unwired Platform - Part 1 Click here to Building Offline(Display Only) Hybrid Web Container Mobile Applications With Sybase Unwired Platform - Part 2 Click here to Building Offline(Display Only) Hybrid Web Container Mobile Applications With Sybase Unwired Platform - Part 3 Click here to Building Offline(Display Only) Hybrid Web Container Mobile Applications With Sybase Unwired Platform - Part 4

Just follow the following steps to create sample application. Double click on Start Sybase Unwired Platform Services to start Sybase Unwired Platform.

Double click on Sybase Unwired Workspace 2.2 to create mobile application.

To create Mobile Application Project, Click on File -> New -> Mobile Application Project

Provide Project Name

After creating project we will add Mobile Business Object ( MBO ) to defining object data models with back-end EIS connections, attributes, operations and relationships that allow filtered data sets to be synchronized to the device.

Give proper name

Select data source type "SAP"

Click on "Browse" to search BAPI

Specify BAPI name (BAPI_FLIGHT_GETLIST) and click on "Search BAPIs/RFCs". It will return list of BAPI method/s (operation/s). Click on "Get List" and click on "OK".

Select Input and Output parameters. For our application AIRLINE is the input parameter and FLIGHT_LIST is the output parameter. Click on "Finish" complete the wizard.

Create Personalization Keys to get "Airline Name" from the user and retrieve only those fields/records that satisfy a condition.

Specify Type to "STRING(3)" as of "AirlineID". and storage as "Transient" to store value of the personalization key in process, when the process ends, value will be lost.

Now click on MBO "FlightList" click on "Properties".

Select "Attributes" tab and "Load Argumets" Tab. Select Personalization Key which we have created earlier.

Right-click on Mobile Application Diagram and Click on "Deploy Project".

Select Deploy Mode, Click on Next.

Select MBO, Click on Next.

Click on Next.

Double click on Available Target Server. Click on Next.

Click on Next.

Select Server Connection.

After selecting Server Connection, we can see Server Connection Properties.

Click on Finish.

After Deploying Project, now we will create "Hybrid App Designer" to design the user interface. Right Click on Project. Click on New -> Hybrid App Designer.

Give Proper Name. Click on Next.

Select "Can be started, on demand, from the client" option. Click on "Finish".

After "Hybrid App Designer" wizard, we can see following screen. Click on "Flow Design" Tab

As we can see the application is "Client-initiated". We can assign Client Icon for the application by using "Clint Icon" option as shown in bottom of the image. By mistake I have not selected icon while crating application. So I will use default icon throughout the blog.

Select MBO "FlightList" from Workspace Navigator and drop it in Hybrid App Designer.

Click on "Arrange All" button.

Select "Start" Screen and select "Screen Design" tab.

Now we can see Screen, Menu, Custom Actions and Palette.

In start screen we will have to select airline. So we will use Choice option to select the airline. Select Choice from Palette and drop it in Start Screen.

Enter label text to be displayed on screen.

Select the label position.

Click on New Key button.

Specify Name and Type of key.

Now we will provide options for choice bar. Click on "Add" button.

Specify Display Name and Value. For this example we will take 2 airline options. 1. Delta Airline 2. Japan Airline

After selecting airline we will provide one menu option to get the list of flights. So we will take MenuItem. Select MenuItem from Palette and drop it in Menu Block.

Enter text to be displayed on selecting Menu button.

Go-to properties and select Type as "Online Request".

To select "Mobile Business Object", click on Search button.

Click on "Search"

Select MBO. Click on OK.

Select "Invoke Object Query" choice and select Object query.

Please Check "Store data in on-device cache" to display contents in offline and select suitable cache option suitable for you.

Click on Success/Error tab to select which screen to be displayed on success/failure of user operation. We can give our own error message in "Submit error message". If the field is left blank, error message will be generated at run-time depending on the error list returned. Then click on "Generate Error Screen" to display error message.

Select "Default success screen" on success of operation(Get FlightList).

Select "Personalization Key Mappings" tab to map the "Personalization Key" with the Key specified during creation of Choice option. Click on Edit.

Select the key. Click on OK.

Click on "Hybrid App Designer" (Flight.xbw) and Click on Arrange All.

Now we can see flow of application as shown in the following image

Click on Save All.

Now we will open "Sybase Control Center"

Enter the credentials. Click on Log In.

After successful log on, we can see following screen.

Now we will register the device to run the application. Click on "Applications" in the "Unwired Platform Cluster" tree view. Click on "Application Connections" Tab. Click on "Register..." button.

Give any user name to register the device and same should be used in the device to register. Select the following options. Click on OK.

Now we can see the following screen showing the device details.

Now we will register the Android device. Open "Android AVD Manager".

Select existing Virtual Device. Click on Start.

Click on Launch.

After some time we can see the following screen.

Click on "Hybrid Web Container" app already installed in the virtual device. A Hybrid Web Container is a native application designed to process generic function calls from a Hybrid App. The Hybrid Web Container embeds a browser control supplied by the device OS, which allows you to build applications with simplicity of Web development but utilize the power of native device services.

If you are using it for the first time it will ask you to set the password. I have already set the password on this device. So I will just enter password. Click on OK.

Click on "Menu" Button as highlighted in blue color or "Menu" button in device if you are using real device. Select "Settings".

Please select Internal IP if you are using the Virtual Device which is present within cloud system. Please select External Address if you are using any real device or Virtual Device which is present outside cloud system.

Enter the Settings as shown below.

Click on "Menu" button of simulator or "Menu" button in device if you are using real device. Click on "Save"

Click on "Menu" button of simulator or "Menu" button in device if you are using real device. Click on "Show Log"

Now you can see you device has bee "Connected to Server".

Click on "Refresh" button to reload application connection data.

Now we can see our virtual device got connected to Sybase Control Center.

Now right-click on Hybrid App Designer

Click on "Generate Hybrid App.." to deploy it on to device.

Click on "Get Users". Select User in which the application has to be deployed. Click on Finish.

Now it will "Generate Code" and "Deploy" it on to the device.

Now in our virtual device in Show Log menu we can see "Installed Hybrid App" log. While using Virtual Device to run the application, the response will slower compared to the real device.

Click on Back button twice. Click on Menu. Select Hybrid Apps

Now we can see "Flight" App is installed on the device. Click on Flight. While using Virtual Device to run the application, the response will slower compared to the real device.

Click on Menu. Select Get Flights.

Now we can see list of flights of "Delta Airline".

Click on particular flight, it will navigate to detail display of flight.

Now we will try offline scenario. Since only Delta Airline's data is cached. So we will use Japan Airline later. So before doing this, we will switch-off the Mobile data or wireless data network. To switch-off the Mobile data or wireless data network. Go to Home screen by pressing home button. Click on Menu. Click on Settings.

Click on Wireless & networks

Click on Mobile networks in this case because simulator is using Mobile 3G network as we can see in the screen.

Change Data enabled to following state. Click on Home.

Now test the application in offline mode. It will work for "Delta Airlines". Because its data has already been cached. For "Japan Airlines", it will display error message.

Now we will switch-on the Mobile data or wireless data network as shown earlier. Check for Japan Airline in Online Mode.

Now we will test data in offline mode.

Now both "Delta Airline" and "Japan Airline" data has been cached. Both data can be displayed in offline mode.