Html5 Ma Kit Hwc Code Example Tutorial

Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container

White Paper


2012

1

Contents Introduction: ................................................................................................................................................. 2

Part 1: Downloading and installing the code example and the code example database ............................. 3

Part 2: Importing the Database Connection Profile in SUP Workspace ....................................................... 5

Part 3: Importing the Code Example workspace .......................................................................................... 6

Part 4: Examining the Mobile Business Objects and Mobile Workflows: ..................................................... 8

Part 5: Configuring a Mobile Workflow to use MAKit Charts ..................................................................... 10

Part 6: Deploying the MAKit HWC Code Example MBOs ............................................................................ 24

Part 7: Generating and Deploying Mobile Workflow Packages to an Unwired Server .............................. 33

Part 8: Configuring the Workflow using the Sybase Control Center .......................................................... 36

Part 9: Deploying the SUP Workflow application to Your Mobile Device and Configuring it to Access the

Workflows ................................................................................................................................................... 40


2012

2

Introduction: Mobile Analytics Kit (MAKit) HTML5 is a client-side graphic tool for visualizing and analyzing data

through Mobile Web applications on mobile devices (namely tablets) running HTML5 browsers. MAKit

HTML5 is delivered as a JavaScript library that can be used with the Sybase® Unwired Platform Hybrid

Web Container or any HTML5 Web application.

This document will guide you through the installation, configuration, and deployment of the HTML5

Mobile Analytics Toolkit (MAKit) Demos for the Hybrid Web Container.

For additional resources and information on MAKit please see the MAKit Developers Guide for HTML5,

the MAKit Code Examples for HTML5 and the MAKit Tutorial for HTML5 available at:

http://infocenter.sybase.com/help/topic/com.sybase.infocenter.dc01757.0213/doc/html/MAKit_HTML

5_portfolio.pdf

For additional information on the Hybrid Web Container please see the Developer Guide: Mobile

Workflow Packages available at:

http://infocenter.sybase.com/help/index.jsp?topic=/com.sybase.infocenter.dc01218.0213/doc/html/titl

e.html

http://infocenter.sybase.com/help/topic/com.sybase.infocenter.dc01757.0213/doc/html/MAKit_HTML5_portfolio.pdf

http://infocenter.sybase.com/help/topic/com.sybase.infocenter.dc01757.0213/doc/html/MAKit_HTML5_portfolio.pdf

http://infocenter.sybase.com/help/index.jsp?topic=/com.sybase.infocenter.dc01218.0213/doc/html/title.html

http://infocenter.sybase.com/help/index.jsp?topic=/com.sybase.infocenter.dc01218.0213/doc/html/title.html


2012

3

Part 1: Downloading and installing the code example and the code

example database 1. Download the file MAKitHTML5ContainerDemos.zip from the SAP Community Network. Click

here to download it.

2. Unzip the file MAKitHTML5Container Demos.zip to a temporary directory.

3. Move the files MAKitHWCDb.db, MAKitHWCDb.log, and StartMAKitHWCDB.bat to a directory

accessible by your SUP Server (for example C:\MAKit)

4. Edit the file StartMAKitHWCDB.bat and change the path for your SUP server (if necessary) and

the path for the database file from C:\MAKit to the location on your machine.

5. In Windows Explorer right click on the startmakittestdb.bat file and select Open. (Note if you are

using Windows 7 or Windows Vista you will need to select Run as Administrator.)

6. Make sure that the SUP Services are running. There is an icon on the desktop to launch the

services, or you can navigate to Start\All Programs\Sybase\Unwired Platform\Start Unwired

Platform Services.

Desktop Shortcut:

http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/c0d778a1-d8b3-2f10-c4a0-dda167673634

http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/c0d778a1-d8b3-2f10-c4a0-dda167673634


2012

4

Or click on the Windows Start button and navigate to All Programs\Sybase\Unwired

Platform\Start Unwired Platform Services:

7. Start Unwired Workspace by double clicking on the Desktop Shortcut Or click on the Windows

Start button and navigate to All Programs\Sybase\Unwired Platform\Unwired Workspace:

8. If prompted select a workspace. If you don’t already have one created you can use C:\MAKit:


2012

5

Part 2: Importing the Database Connection Profile in SUP Workspace 1. In the Enterprise Explorer tool click on the Import toolbar button:

2. Click the browse button on the Import Connection Profiles dialog and navigate to the folder

where you unzipped the code example files. Select the HTML5MAKitHWCDb file and click OK.

3. You should now see the database connection profile listed under Database Connections:

4. Right click on HTML5MAKitHWCDb and select Connect from the popup menu.


2012

6

Part 3: Importing the Code Example workspace 1. From the File menu select Import and select Existing Projects into Workspace under the General

Folder from the dialog:


2012

7

2. On the Import dialog click the Browse button to navigate to the directory where you unzipped

the file MAKitHTML5Container.zip (for example c:\temp)

3. The project HTML5MAKitHWC should appear in the projects list with the checkbox selected.

4. Make sure the “Copy projects into workspace” checkbox is selected and click the Finish button.

5. The project will now be imported into the workspace and the files copied to your workspace

directory.


2012

8

Part 4: Examining the Mobile Business Objects and Mobile Workflows: 1. In the Workspace Navigator tool window, click on the triangle glyph to the left of the

HTML5MAKitHWC project to display the project’s contents in the navigator.

2. Click on the triangle glyph next to the Mobile Business Objects folder to expand its contents

To learn more about MBOs please see the section on Mobile Business Object Development and the

tutorial Mobile Business Object Development 2.1 ESD#2 in the SUP documentation.


2012

9

3. In the Workspace Navigator, scroll down to the Mobile Workflows (displayed as .xbw files):

4. Double click on one of the .xbw files to open the Mobile Workflow Forms editor.

To learn more about creating and deploying mobile workflows please see the Mobile Workflow

Package Development and tutorial Mobile Workflow Package Development 2.1 ESD #2 in the SUP

documentation.


2012

10

Part 5: Configuring a Mobile Workflow to use MAKit Charts This section demonstrates how to add MAKit Charts to Mobile Workflows and display them at

runtime. For a more complete discussion on using MAKit with Mobile Workflows please see the

MAKit Developer Guide HTML5 in the SUP documentation.

All of the MAKit Code Examples associated with this document, with the exception of the MAKit API

example, have been configured to automatically invoke an object query on an MBO and display the

MAKit charts when the Mobile Workflow is selected by the user.

Walking through the Drilldown Mobile Workflow Example:

1. Open the Drilldown Mobile Workflow Form editor by double clicking on drilldown.xbw in the

Workspace Navigator.

2. Click on the Flow Design tab and select the Drill Down screen.

3. Click on the Screen Design tab to display the screen, menu, and custom actions.

4. In the Custom Actions box, click on ShowCharts and then click on the Properties tab in the

designer to see the properties for this action.

5. Note that the Type dropdown has been set to Online Request. This changes the properties that

are visible for this action. The MBO selected is HTML5MAKitHWC\ProductRevenueByYear.

6. The Invoke object query radio button has been selected and the findAll object query has been

chosen from the dropdown. This query will provide the data for our drill down charts.

7. The Success screen has been set to Drill Down Charts (key name “Show_Charts_List”). Once the

query has been invoked the mobile workflow will automatically navigate to the Drill Down

Charts screen.


2012

11

8. Return to the Flow Design tab and select the Drill Down Charts screen. Then click on the Screen

Design tab.

9. Note that the screen contains an HTMLView control. Click on it and then click on the Properties

tab below:


2012

12

10. A Key named ShowChartListKey has been defined, and the Default value has been set to <div>

tags specifying the four charts to be displayed.

11. Back on the Screen Design tab, select the Bar Chart menu item, and review the contents of the

properties tab:


2012

13

12. The Type property has been set to Open Screen and the Screen property to Drill Down Chart.

When this menu item is selected the Drill Down Chart screen will display the bar chart in full

screen mode.

Custom Actions behave much like menu items, but are triggered programmatically in JavaScript. In

this section we will walk through the JavaScript coding requirements to utilize a MAKit chart.

1. In the Workspace Navigator, expand the Generated Workflow folder to the Drilldown js folder

level:

2. After the ShowCharts Custom Action was added to the Drill Down screen, and the mobile

workflow was generated, a new JavaScript method was added to the workflow.js file. Double

click on that file in the Workspace Navigator to open it in the editor. Locate the function named

menuItemCallbackStart_ScreenShowCharts:


2012

14

3. The function menuItemCallbackStart_ScreenShowCharts will programmatically invoke the

MBO’s query when triggered in code.

4. Since this file gets regenerated each time the Mobile Workflow is generated and deployed, you

should not modify any code.

5. Close the workflow.js file and double click on the Custom.js file in the Workspace Navigator to

open it in the editor.

6. Locate the function customAfterWorkflowLoad. As its name implies, this function is triggered

after a Workflow is loaded. This is the appropriate place to trigger the

menuItemCallbackStart_ScreenShowCharts function:

7.

8. Since the Custom Action invokes the object query which returns data, the next step is to place

some code in the customAfterDataReceived function to display the MAKit charts. Scroll down to

the customAfterDataReceived function:


2012

15

9. To display the charts we have created a function named afterDataReceived. This function has

been defined in the file MAQuery.js, which can be found in the MAKit folder underneath the js

folder:


2012

16

10. Since this is a drill down chart, the dataTables used for quarterly and monthly data need to be

defined if the user drills down to those levels. The afterDataReceived function does this:

11. Returning to the Custom.js file, locate the function customAfterShowScreen.


2012

17

12. This function gets triggered after a screen is shown. We have placed some conditional logic in

this method to display the Drill Down charts if the screenToShow is “Show_Chart_List”. We then

populate an array (metaFiles) with references to the metadata files that contain the definitions

for the charts to be displayed.

13. To view the contents of these metadata files, in the Workspace Navigator, locate the meta

folder under the html folder:


2012

18

14. Double click on the bi_drilldown_bc_bar.xml file to open it in the editor. Then click on the

Source tab:

15. Note that each chart for the drill down bar chart example is defined with a name, chart type,

query, and title property. The category, series, and values are also defined. Valid values for

ChartType are bar, column, line, bubble, and pie. Please refer to the MAKit Developer Guide

HTML5 for more information about all of the valid metadata file properties.

16. Returning to the Custom.js file, note that the makitShowDrilldownChartList function takes the

array of metadata files as an argument.


2012

19

17. The makitShowDrilldownChartList function is defined in the file MAKitTest.js, in the MAKit

folder:


2012

20

18. Double click on this file to open it in the editor and locate the function

makitShowDrilldownChartList:


2012

21

19. Note that our array contained four elements, one for each chart to be displayed. This function

calls the JavaScript function arrangeCharts (defined in the file MyLayout.js):

20. This function is used to define the height and width of a chart and its position in the HTMLView

control.

21. Returning to makitShowDrilldownChartList, the next step is to instantiate the chart control and

load data. This is accomplished using the load function.

22. Since MAKit is a query-based solution, the application developer must implement a query that

provides data to the chart. In MAKit HTML5, a global function – executeMAQuery- acts as the


2012

22

interface between MAKit and the hosting JavaScript. MAKit calls this function, which returns a

dataTable to MAKit anytime it needs data. In the code examples, this function is defined in the

file MAQuery.js. (Note: You can name this file anything you want; it just needs to contain a

function called executeMAQuery.)

23. In the code example, this function looks like this:


2012

23

24. For the Drilldown charts, we are using productRevenueByYear. In the conditional statement, this

invokes the function getProductRevenueByYear, also defined in the file MAQuery.js:

25. In this function the dataTable is created, the necessary columns are added, and the content of

the MBO’s result is loaded into the dataTable.

26. At this point the data has been retrieved and loaded into the chart for display.


2012

24

Part 6: Deploying the MAKit HWC Code Example MBOs 1. In the Workspace Navigator, right click on the html5makittest project and select Deploy

Project… from the popup menu.

2. In the Deploy Mobile Application Project dialog select the Replace radio button and then click

the Next button:


2012

25

3. On the next page, make sure that the Mobile Business Objects checkbox is selected and then

click the Next button:


2012

26

4. We won’t be creating any JARs for this project so you can leave the next screen blank and click

Next to continue:


2012

27

5. On the next page, connect to the Unwired Server by clicking on the Connect button:


2012

28

6. After successfully connecting to the Unwired Server the Domain and Security configuration

fields should be populated as follows:


2012

29

7. Click on the Next button to navigate to the Select Applications to deploy to server page. Make

sure that the html5makittest project is listed under the Assigned Application table. Click the

Next button to continue.


2012

30

8. On the Server Connection Mapping page, ensure that the settings point to the

MAKitSUPContainerTestDb connection profile and then click Next to continue.


2012

31

9. We won’t be saving a deployment profile so you can leave this page blank and click Finish to

deploy the project.


2012

32

10. During the deployment process you will be notified of its progress.

11. If the deployment is successful you will see a dialog that looks like this:

12. The project has now been deployed to the Unwired Server.


2012

33

Part 7: Generating and Deploying Mobile Workflow Packages to an

Unwired Server To make the Mobile Workflows available to the Hybrid Web Container application on a mobile

device the workflow code needs to be generated and deployed to the Unwired Server.

1. Right click on one of the Mobile Workflows in the Workspace Navigator tool window and select

Generate Mobile Workflow Package… from the pop up menu:


2012

34

2. This will open the Mobile Workflow Package Generation Wizard:


2012

35

3. Make sure that the Deploy to an Unwired Server checkbox is selected. Click the Finish button to

generate and deploy the Mobile Workflow.

4. Repeat steps 1-3 for the remaining Mobile Workflows.


2012

36

Part 8: Configuring the Workflow using the Sybase Control Center In this part we will configure the deployed Workflow on the Unwired Server and assign it to a user.

1. Start the Sybase Control Center by double clicking on the Desktop shortcut or by navigating to it

by clicking the Windows Start button, selecting All Programs\Sybase\Sybase Control Center

2. Login to the control center. The default user name is: SupAdmin and the default password is:

s3pAdmin.

3. After logging in the Unwired Server Cluster Management View should be displayed. Select

Applications on the left side of the window:

You should see HWC in the list of applications on the right side of the window.


2012

37

4. Click on the Application Connections tab and then click on the Register… button:

5. Fill in the registration dialog so that it looks like the one below:

6. Click the OK button to register the user to the application.


2012

38

7. Finally we need to assign the Workflows to the user we created. Click the checkbox next to the

User and then click on the Workflows… button

Click on the Assign workflow… button.


2012

39

Select the checkbox next to the Display Name label and then click OK to assign the workflows to

this user.

8. When registration is complete you will be returned to the Applications Connections tab where

you will notice that user1 is pending activation. In the next section we will install the Workflow

application on mobile device or simulator and access the Workflows.


2012

40

Part 9: Deploying the SUP Workflow application to Your Mobile Device

and Configuring it to Access the Workflows For instructions on how to build and deploy the Workflow application for your device, please see the

Tutorial: Mobile Workflow Package Development 2.1 ESD #2 at http://tinyurl.com/7qh5zc5 (under the

Developing Mobile Workflow Package section).

After you have deployed the Workflow application to your device and configured it to connect to your

Unwired Server launch the application and log in. The following example uses the iPad simulator running

on a Macintosh computer.

http://infocenter.sybase.com/help/topic/com.sybase.infocenter.pubs.docset-SUP-2.1.2/doc/html/PLUGINS_ROOT/com.sybase.infocenter.dc01212.0212/doc/html/title.html

http://tinyurl.com/7qh5zc5


2012

41

1. From Xcode launch the iPad Simulator. This will deploy the Workflow application to the

simulator, if it hasn’t already been deployed, and launch the application. Because this is the first

time the application has been run you will be prompted to configure the application settings to

connect to the Unwired Server:


2012

42

2. In the Settings application, click on the Workflow 212 application and enter the Unwired Server

information. Be sure to enter your Unwired Server’s IP address or name. Remember the

Activation code is 123:


2012

43

3. Close the Settings Application and return to the Workspace Application. You will be prompted to

create a password and confirm it. Passwords must be a minimum of 6 characters in length and

can consist of alpha and numeric characters:


2012

44

4. After creating your password, tap on the OK button to enter the application. You will see a list of

Workflows assigned to this user (It may take a few minutes for the Workflows to synchronize

from the server to the device). When the device is in landscape mode the Workflows will be

permanently displayed on the left side of the screen. Select the Drilldown:


2012

45

5. After a few moments, the Drill Down Charts will appear:


2012

46

6. Tap the Bar Chart button in the upper right corner of the screen. The full view of the bar chart

will appear:

7. You can experiment with other MAKit chart features such as Full Screen, Semantic Zooming, and

What If in the other workflows.

8. This concludes the HTML5 MAKit in the Hybrid Web Container tutorial.

Documents

Html5 Ma Kit Hwc Code Example Tutorial