View
1
Download
0
Category
Preview:
Citation preview
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
White Paper
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
2012
19
17. The makitShowDrilldownChartList function is defined in the file MAKitTest.js, in the MAKit
folder:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
2012
20
18. Double click on this file to open it in the editor and locate the function
makitShowDrilldownChartList:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
2012
25
3. On the next page, make sure that the Mobile Business Objects checkbox is selected and then
click the Next button:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
2012
27
5. On the next page, connect to the Unwired Server by clicking on the Connect button:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
2012
28
6. After successfully connecting to the Unwired Server the Domain and Security configuration
fields should be populated as follows:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
2012
34
2. This will open the Mobile Workflow Package Generation Wizard:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
2012
45
5. After a few moments, the Drill Down Charts will appear:
Installing and configuring the HTML5 MAKit Demos for the Hybrid Web Container
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.
Recommended