Html5 Ma Kit Hwc Code Example Tutorial
Upcoming SlideShare
Loading in...5
×
 

Html5 Ma Kit Hwc Code Example Tutorial

on

  • 2,166 views

 

Statistics

Views

Total Views
2,166
Slideshare-icon Views on SlideShare
2,165
Embed Views
1

Actions

Likes
0
Downloads
64
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5 Ma Kit Hwc Code Example Tutorial Html5 Ma Kit Hwc Code Example Tutorial Document Transcript

    • Installing andconfiguring the HTML5MAKit Demos for theHybrid Web ContainerWhite Paper
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web ContainerContentsIntroduction: ................................................................................................................................................. 2Part 1: Downloading and installing the code example and the code example database ............................. 3Part 2: Importing the Database Connection Profile in SUP Workspace ....................................................... 5Part 3: Importing the Code Example workspace .......................................................................................... 6Part 4: Examining the Mobile Business Objects and Mobile Workflows: ..................................................... 8Part 5: Configuring a Mobile Workflow to use MAKit Charts ..................................................................... 10Part 6: Deploying the MAKit HWC Code Example MBOs ............................................................................ 24Part 7: Generating and Deploying Mobile Workflow Packages to an Unwired Server .............................. 33Part 8: Configuring the Workflow using the Sybase Control Center .......................................................... 36Part 9: Deploying the SUP Workflow application to Your Mobile Device and Configuring it to Access theWorkflows ................................................................................................................................................... 40 1
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web ContainerIntroduction:Mobile Analytics Kit (MAKit) HTML5 is a client-side graphic tool for visualizing and analyzing datathrough Mobile Web applications on mobile devices (namely tablets) running HTML5 browsers. MAKitHTML5 is delivered as a JavaScript library that can be used with the Sybase® Unwired Platform HybridWeb Container or any HTML5 Web application.This document will guide you through the installation, configuration, and deployment of the HTML5Mobile 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_HTML5_portfolio.pdfFor additional information on the Hybrid Web Container please see the Developer Guide: MobileWorkflow Packages available at:http://infocenter.sybase.com/help/index.jsp?topic=/com.sybase.infocenter.dc01218.0213/doc/html/title.html 2
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web ContainerPart 1: Downloading and installing the code example and the codeexample 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 StartAll ProgramsSybaseUnwired PlatformStart Unwired Platform Services. Desktop Shortcut: 3
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container Or click on the Windows Start button and navigate to All ProgramsSybaseUnwired PlatformStart 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 ProgramsSybaseUnwired PlatformUnwired Workspace:8. If prompted select a workspace. If you don’t already have one created you can use C:MAKit: 4
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web ContainerPart 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. 5
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web ContainerPart 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: 6
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container2. 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. 7
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web ContainerPart 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 contentsTo learn more about MBOs please see the section on Mobile Business Object Development and thetutorial Mobile Business Object Development 2.1 ESD#2 in the SUP documentation. 8
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container3. 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 WorkflowPackage Development and tutorial Mobile Workflow Package Development 2.1 ESD #2 in the SUPdocumentation. 9
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web ContainerPart 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 HTML5MAKitHWCProductRevenueByYear. 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 Container8. 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 Container10. 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 Container12. 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. Inthis 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 Container3. 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: 14
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container9. 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 Container10. 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 Container12. 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 Container14. 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 Container17. 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 Container18. 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 Container19. 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 Container24. 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. 23
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web ContainerPart 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 Container3. 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 Container4. We won’t 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 Container5. 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 Container6. 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 Container7. 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 Container8. 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 Container9. We won’t 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 Container10. 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 ContainerPart 7: Generating and Deploying Mobile Workflow Packages to anUnwired 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 Container2. This will open the Mobile Workflow Package Generation Wizard: 34
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container3. 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 ContainerPart 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 ProgramsSybaseSybase 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 Container4. 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 Container7. 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 ContainerPart 9: Deploying the SUP Workflow application to Your Mobile Deviceand Configuring it to Access the WorkflowsFor instructions on how to build and deploy the Workflow application for your device, please see theTutorial: Mobile Workflow Package Development 2.1 ESD #2 at http://tinyurl.com/7qh5zc5 (under theDeveloping Mobile Workflow Package section).After you have deployed the Workflow application to your device and configured it to connect to yourUnwired Server launch the application and log in. The following example uses the iPad simulator runningon a Macintosh computer. 40
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container1. 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: 41
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container2. 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: 42
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container3. 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 Container4. 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 Container5. After a few moments, the Drill Down Charts will appear: 45
    • Installing and configuring the HTML5 MAKit Demos 2012 for the Hybrid Web Container6. 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