Sie sind auf Seite 1von 47

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

White Paper

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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 2012 for the Hybrid Web Container
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 2012 for the Hybrid Web Container
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 2012 for the Hybrid Web Container
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 dont already have one created you can use C:\MAKit:

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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 2012 for the Hybrid Web Container

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 2012 for the Hybrid Web Container
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 2012 for the Hybrid Web Container

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 projects 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 2012 for the Hybrid Web Container
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 2012 for the Hybrid Web Container
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. 10

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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:

11

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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:

12

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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:

13

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

3. The function menuItemCallbackStart_ScreenShowCharts will programmatically invoke the MBOs 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:

14

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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:

15

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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.

16

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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:

17

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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.

18

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
17. The makitShowDrilldownChartList function is defined in the file MAKitTest.js, in the MAKit folder:

19

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
18. Double click on this file to open it in the editor and locate the function makitShowDrilldownChartList:

20

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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 21

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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:

22

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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 MBOs result is loaded into the dataTable. 26. At this point the data has been retrieved and loaded into the chart for display.

23

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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:

24

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
3. On the next page, make sure that the Mobile Business Objects checkbox is selected and then click the Next button:

25

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
4. We wont be creating any JARs for this project so you can leave the next screen blank and click Next to continue:

26

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
5. On the next page, connect to the Unwired Server by clicking on the Connect button:

27

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
6. After successfully connecting to the Unwired Server the Domain and Security configuration fields should be populated as follows:

28

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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.

29

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
8. On the Server Connection Mapping page, ensure that the settings point to the MAKitSUPContainerTestDb connection profile and then click Next to continue.

30

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
9. We wont be saving a deployment profile so you can leave this page blank and click Finish to deploy the project.

31

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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.

32

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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:

33

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
2. This will open the Mobile Workflow Package Generation Wizard:

34

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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.

35

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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.

36

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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. 37

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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.

38

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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.

39

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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.

40

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
1. From Xcode launch the iPad Simulator. This will deploy the Workflow application to the simulator, if it hasnt 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:

41

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

2. In the Settings application, click on the Workflow 212 application and enter the Unwired Server information. Be sure to enter your Unwired Servers IP address or name. Remember the Activation code is 123:

42

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

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:

43

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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:

44

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
5. After a few moments, the Drill Down Charts will appear:

45

Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container
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.

46

Das könnte Ihnen auch gefallen