© 2012 by SAP AG. All rights reserved. SAP and the SAP logo are registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects is an SAP company. Sybase and the Sybase logo are registered trademarks of Sybase Inc. Sybase is an SAP company such products and services, if any. Nothing herein should be construed as constituting an additional

warranty.

BUILDING AND CUSTOMIZING A MOBILE

APPLICATION USING THE SYBASE UNWIRED

PLATFORM 2.1.2

SUP DEVELOPER CENTER TUTORIAL #1

BUILDING MOBILE APPS 101

EXERCISE #1 – CREATE A SIMPLE HYBRID WEB APP (WORKFLOW)

1. START THE SYBASE UNWIRED PLATFORM SERVICES

Run the “Start Sybase Unwired Platform Services” shortcut on the desktop

2. CREATE A NEW MOBILE APPLICATION PROJECT

Launch Sybase Unwired WorkSpace from the shortcut on the desktop

(If prompted) Select the default location for your Workspace

(If prompted) Select “Start Development” on the Welcome Screen

(Optional) Select “Window-Reset Perspective…” (you can do this at anytime to set your workspace windows and view back to default)

File -> New -> Mobile Application Project

Name it “CustomerList” and click “Finish”

Switch Developer Profile to Advanced Right click on any white space in the “CustomerList – Mobile Application Diagram” window and choose

“Switch Developer Profile” from the context menu

Make sure the Advanced developer profile is selected

3. CREATE YOUR APPLICATIONS MOBILE BUSINESS OBJECT (MBO)

In the “Enterprise Explorer” window (bottom left) expand (double-click) “Database Connections -> My Sample Database -> sampledb -> Tables”

Drag the “Customer” table to your “CustomerList – Mobile Application Diagram” window

Uncheck the “create”, “update”, and “delete” operations and click “ok”

4. DEPLOY MOBILE BUSINESS OBJECTS

Right click on any white space in the “CustomerList – Mobile Application Diagram” window and choose “Deploy Project…” (always say yes to saves..;)

Click “Next” on the Deploy Mode and Target Version screen

“Next” on Contents screen

“Next” on Package User-defined Classes screen

Double click on the “My Unwired Server” on the Target Server screen and click “Next”

Click “Next” on the Deploy Application Server screen

Select “sampldb” from the Server connection field and click “Next”

“Finish” on “Save as a Deployment Profile” screen

Make sure you see the “Success” window

5. CREATE YOUR HYBRID WEB APP (WORKFLOW)

Right click on your “CustomerList” project in the WorkSpace Navigator window and select “New -> Mobile Workflow Forms Editor”

Call it “CustList.xbw” and click on “Next”

Check the box “Can be started, on demand, from the client” and click “Finish” (this will be a client initiated app)

Switch from the “Introduction” tab to the “Flow Design” tab

Expand the Mobile Business Object folder in your project and click and drag your “Customer” MBO to

white space in the Flow Design window of your application Note: You can have eclipse auto arrange your Flow Design screens buy clicking on the “Arrange All” icon

Double click on the “Start Screen” in the Flow Design window

Add a “MenuItem” to your “Menu” screen on your app (click once, then click again under the Cancel Screen button that was added by default, no click and drag…)

Name it “Get List”

Make sure you have the “Properties” tab selected in the bottom right window and change the “Type” of this menu item from “Save Screen” to an “Online Request”

Search and find the Mobile business object you created “Customer” and select for it to “Invoke object query” -> “findAll”

Enter whatever “Submit error message” you want displayed if it doesn’t work (you’ll never see this..;)

Click on the “Generate Error Screen” button to have it auto generate error screens for your app

Have it move to the “Customer” screen on “Success screen”

Switch back to the “Flow Design” screen and pat yourself on the back for your great work in creating an

application that will run on Widows Mobile, iPhone, iPad, Android, and BlackBerry devices Note: “Arrange All” to make it look pretty and save your work

Arrange All icon in eclipse toolbar

6. CONFIGURE HYBRID WEB CONTAINER ON BB SIMULATOR

Note: For instructions on how to use Android Emulator or iOS device, see Appendix A & B

Start the BlackBerry simulators o Run the “MDS” application from the desktop shortcut (or Start -> Programs - > Research In Motion

-> BlackBerry Email and MDS Services Simulators 4.1.1 -> MDS) o Run the “9800” application from the desktop shortcut ( or Start -> Programs -> Research In Motion

-> BlackBerry Smartphone Simulators 6.0.0 -> 6.0.0.141 -> 9800) Note: If the BlackBerry simulator is not pre installed, they can be downloaded using the following links: https://swdownloads.blackberry.com/Downloads/entry.do?code=996009F2374006606F4C0B0FDA878AF1 - Download and install the “BlackBerry Email and MDS Services Simulator Package” http://us.blackberry.com/developers/resources/simulators.jsp - Download and install the “BlackBerry Torch 9800” – “6.0” Generic OS – “6.0.0.141” simulator.

Once the BB simulator loads, make sure it is running in “Graphics Acceleration” -> “Off” mode

Show “All” applications and open the Sybase “Workflow” application

Note: If the “Workflow” application isn’t pre-installed you will need to copy all .cod files from \Sybase\UnwiredPlatform\MobileSDK\HybridWeb\BB to the \Program Files (x86)\Research In Motion\BlackBerry Smartphone Simulators 6.0.0\6.0.0.141 (9800) directory and close and re-load the simulator.

Check the “Enable Automatic Registration” box and enter connection information to the server: Server Name: The unique IP Address of your Dev Center Image (Start->Run->ipconfig) Note: If you plan

to use a real device this needs to be the Public IP Address of your server (see Appendix B)

Server Port: 5001 Farm ID: 0

User Name: supAdmin (this is the default SUP Admin account) Password: s3pAdmin (this is the default SUP Admin password)

Note: This is why you want to use Afaria as the Mobile Device Management solution for SUP, it will do all this configuration for the user…

Select “Save” from the menu to begin connecting to the server

You can see the progress on the Device log by selecting “Show Log” from the menu, make sure you see “Connected to Server” that’s a good sign…

7. GENERATE AND DEPLOY WORKFLOW APPLICATION

Back in the Sybase Unwired Workspace Eclipse tool right click on some white space in the Flow Design tab and select “Generate Mobile Workflow Package…”

Make sure the “Assign workflow to user(s)” box is checked and your user is there (Get Users) and click “Finish

8. RUN WORKFLOW APPLICATION

Access your application from the Workflows application or from the menu item in the Inbox Note: It can take a few minutes for the Workflow application to come down the first time.

Test your application

EXERCISE #2 – CUSTOMIZE YOUR HYBRID WEB APP (WORKFLOW)

1. CHANGE YOUR APPLICATION ICON AND COLOR SCHEME

In the Sybase Unwired Workspace Eclipse tool right click on some white space in the Flow Design tab and under the “Properties” window change the “Client icon” of your application

Save and Re-Generate your Application. Select “Theme e” for the kQuery Mobile theme. Test changes on

device (if needed, see step 8 in exercise #1 for details on how to Generate your application).

2. ENHANCE THE LIST VIEW OF YOUR APPLICATION

In the Sybase Unwired Workspace Eclipse tool open the “Customer” screen of your application

Select the Listview object

Under “Properties” in the “Cell” tab, remove all fields except “fname”, “lname”, and “company_name” Note: you can multiple select/delete Cell 0, 3,4,5,6,7 at once

Save and Re-Generate your Application, test icon change on device (if needed, see step 8 in exercise #1

for details on how to Generate your application)

EXERCISE #3 – ADD SEARCH TO YOUR HYBRID WEB APP (WORKFLOW)

1. ADD A FIND BY COMPANY NAME MBO QUERY

In the Sybase Unwired Workspace Eclipse tool select the “CustomerList – Mobile Applications Diagram” that shows your MBO

Click on the image of your MBO

Under the properties window, select the “Properties”, “Attributes”, “Object Queries” tab and click “Add”

Name the Object Query “findbyCompanyName”

Add a Parameter and name it “pCName” mapped to “company_name”

Click on the Generate button to create the SQL Statement

Replace the “WHERE x.company_name = :pCName” with “WHERE x.company_name LIKE :pCName” and click “Finish”

Save and re-Deploy the MBO (if needed, see step 4 in exercise #1 for details on how to Deploy your MBO)

2. ADD SEARCH TO YOUR APPLICATION

In the Sybase Unwired Workspace Eclipse tool select the “CustList.xbw” window that shows your application in “Flow Design” view

Open the “Start Screen” in Screen Design

Add an “EditBox” from the Controls on the right to the main screen

Label it “Company Name:”

Under properties set Label Position to TOP

Click on the “New Key…” button and name it “kCName” of type “string” and click “ok”

Give it a default value of “%” (% are used as a Wildcard during searches)

Now add a MenuItem to the Menu of this CustList screen

Label it “Find by Company Name”

Under Properties of this menu item change it from a “Save Screen” to “Online Request”

Add your “Customer” MBO

Have it invoke your “findbyCompanyName” Object Query

Select your “Error List” screen as the Error Screen

Map the “Customer” screen to the “Success Screen”

Select the “Parameters Mapping” tab to edit it by mapping pCName to the kCName value you are getting

from the user on this screen

Switch back to the “Flow Design” view, save, and re-“Generate Mobile Workflow Package…”

Test App changes on BB Simulator

EXERCISE #4 – ADD SERVER DRIVEN NOTIFICATION TO YOUR APP

1. ADD A SERVER-INITIATED STARTING POINT

In the Sybase Unwired Workspace Eclipse tool open your application in the Flow Design

Add a Server-initiated Starting Point from Starting Points toolbar on the right, click and click it onto your CustomerList.xbw window

Map it to your Customer MBO’s findbyCompanyName object query, click “Next”

The sample subject of your server notification should be “New Company Alert (Square Sports)”, click “Next”

Highlight “New Company Alert”, right click and “select as matching rule” that will trigger it as a notification

alert specific for your application, click “Next”

Now setup your rules to grab the value after “New Company Alert” inside the “()” to be used as a

parameter for your findbyCompanyName Object Query

Select “Subject” for the “Field” value

Click on the “…” button to the right of the “Start tag:” field and select the “(“ as your start tag

Click on the “…” button to the right of the “End tag:” field and select the “)“ as your start tag, click finish

2. LINK SERVER-INITIATED STARTING POINT TO DETAILS SCREEN

In Flow Design, click on the “GoTo” object in the right toolbar

Click on your Server-initiated starting point and drag it to the CustomerDetail screen

If you try and deploy your workflow now it will show an error because you can’t have a “Save Screen”

menu item on a screen linked from a Server-initiated starting point, open the CustomerDetail screen in Screen Design and change the “Back” button to type “Cancel Screen”, this will get rid of the error

Switch to Flow Design view, save and re-Generate your application

Have your BlackBerry simulator on the BB Inbox (Messages) screen for testing

On the Flow Design view, right click on white space and select “Send a Notification”

Make sure the “To:” field is your device (Get Device Users) and make sure the “From:” field has a user in it

Add the following CHARACTER for CHARACTER (case sensitive) in the subject “New Company Alert (Square Sports)”

Click send

Check device, a new notification should appear in the inbox of the device and once you click on it, it should

take you to the “Square Sports” Company details screen

EXERCISE #5 – USING JAVASCRIPT TO CUSTOMIZE YOUR APP

1. ADD A HEADER AND FOOTER TO YOUR APPLICATION

Create an “images” folder in your applications html generated directory (e.g. \Users\Administrator\workspace\CustomerList\Generated Workflow\CustList\html). The location of your html generated directory can be found by looking at the “properties” of your project. Download the image file (syLogo.gif) from www.sybase.com (right click on the Sybase, An SAP Company logo and “Save picture as…”). Please it in the images directory under the \html folder.

Copy the custom JavaScript below into your custom.js file replacing the existing

“customBeforeShowScreen” function. Note: The custom.js file can be edited using the Sybase Unwired Workspace Eclipse tool and is located in a subfolder under your project in the “Generated Workflow\CustList\html\js directory

//Use this method to add custom html to the top or bottom of a form function customBeforeShowScreen(screenToShow, screenToHide) { var form = document.forms[screenToShow + "Form"];

if (form) { // header var topOfFormElem = document.getElementById("topOf" + screenToShow + "Form"); if (topOfFormElem) { topOfFormElem.innerHTML = "<center><img id='ImgSylogo'

src='./images/syLogo.gif'/></center><br/>";

// footer var bottomOfFormElem = document.getElementById("bottomOf" + screenToShow + "Form"); bottomOfFormElem.innerHTML = "<center><p>Copyright 2012, Dev Center</p></center>"; } } return true; }

Save and Re-Generate your Application, test changes on device (if needed, see step 8 in exercise #1 for details on how to Generate your application)

2. CHANGING THE COLOR SCHEME OF YOUR APPLICATION

Open the jquery.mobile-1.0a3.css file in the “Generated Workflow\CustList\html\css\jquery” folder

change .ui-body-a to the following:

.ui-body-a { border: 1px solid #2A2A2A; background: #222222; color: #white; text-shadow: 0 1px 0 #000; font-weight: normal; background-image: -moz-linear-gradient(top, #666666, #222222); background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #0099D3), color-stop(1, #00233D)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#B2CFDA', EndColorStr='#FFFFFF)')"; }

Save and Re-Generate your Application, test icon change on device

APPENDIX A – USING ANDEROID EMULATOR

Important Remarks: The Android emulator requires you to use the IP Address of your server for the Dev Center image. Also, the Android Emulator can be VERY slow.

1. LOAD ANDROID EMULATOR

Run the “Android AVD Manager” from the desktop shortcut

Select the “SUPDevCenterDemo” Android 2.2 AVD and click “Start…” then “Launch”

2. CONFIUGRE SUP WORKFLOW CLIENT

Run the “Workflow” application on the Android emulator home screen, or from the all applications screen

Note: If the “Workflow” application isn’t pre-installed you will need to install it. With the emulator running, run the following 2 commands from a windows command prompt (cmd.exe): “c:\android-sdk-windows\platform-tools\adb install c:\Sybase\UnwiredPlatform\MobileSDK\HybridWeb\Android\SybaseDataProvider.apk”

“c:\android-sdk-windows\platform-tools\adb install c:\Sybase\UnwiredPlatform\MobileSDK\HybridWeb\Android\Workflow.apk”

Setup your “Workflow” application password. This password is independent of any other authentication. It is used to provide a extra level of application protection (sandboxing). It needs to be at least 6 characters so create a password you will remember (e.g. sup4sap). Note: If you forgot this application password you will have to uninstall/re-install the client application.

Use the “Automatic Registration” process (Important: Remember to use the IP Address of your server).

To Enable Automatic Registration simply check the box and enter in the following settings: o Server Name: Unique IP Address of your Server (Start->Run->”cmd.exe”->”ipconfig”) o Port: 5001 o Farm ID: 0 o User Name: supAdmin (default admin account) o Password: s3pAdmin (default admin account)

Then click “Menu” – “Save” – You can make sure you client is connecting to your SUP Server by checking the client side log “Menu” – “Show Log”

To assign an Application/Workflow to your client go to the Sybase Control Center, select your user/device

under “Applications->Application Connections” and select the “Workflows…” button (3rd

for the far right) and “Assign workflow…”

APPENDIX B – USING A PHYSICAL IOS OR ANDROID DEVICE

Important Remarks: If you are using a physical device, it needs an Internet connection that doesn’t block port 5001 and you must use the public IP Address of your server for the Dev Center image.

Download the Sybase Mobile Workflow 2.1.2 client from Apple’s App Store or from Android’s Market Place

Configure client as described in (Exercise #1 Step #6) and/or Appendix A using the Public IP Address of your server (you can find the Public IP Address of your server by opening up http://whatismyipaddress.com on your Dev Center Image Internet browser).