Sybase sup hybrid_web_container_article_wp
Upcoming SlideShare
Loading in...5
×
 

Sybase sup hybrid_web_container_article_wp

on

  • 426 views

 

Statistics

Views

Total Views
426
Views on SlideShare
426
Embed Views
0

Actions

Likes
1
Downloads
15
Comments
0

0 Embeds 0

No embeds

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

Sybase sup hybrid_web_container_article_wp Sybase sup hybrid_web_container_article_wp Document Transcript

  • white paperSybase® Unwired PlatformHybrid Web ContainerAn Industry Leading Approach to DevelopingBoth Native and Web Mobile Applicationswww.sybase.com
  • Table of Contents x Introduction 1 What is a Hybrid Web Container? 1 Why use a container to develop mobile apps instead of other development environments? 1 What is the development process for a Hybrid Web Container application? 2 What CSS is used? Is there a standard look and feel across devices, or is each device specific? 3 What if you want a device-specific look and feel? 3 Are the CSS files packaged as part of the Web application? 3 Are the screens customizable? Can developers change the screens or modify the JavaScript functions? 3 Can developers use the JavaScript API functions to access the MBOs and back-end platforms? 3 How do developers access the data that comes from the back-end platforms? 4 How do you work with MessageValueCollection()? 5 Can you edit the HTML directly? Where are the customization boundaries? 5 Where can I learn more and get resources or sample apps? introduction Sybase Unwired Platform supports two main modes of application development: native application development and hybrid Web development. Native application development makes sense when user interface expectations or application performance depend on device-specific capabilities. Hybrid Web development is best for cross-platform apps that run on multiple devices. It provides a lower cost of development for extending workflow processes such as approvals or requests. This paper, in an easy-to-read Q&A format, describes how developers can apply their existing HTML and JavaScript skill sets to build enterprise mobile applications using the Hybrid Web Container, which is included in Sybase Unwired Platform 2.0. x
  • What is a Hybrid Web Container? In a nutshell, the Hybrid Web Container is the runtime on the mobile device within which mobile applicationsare executed. The Hybrid Web Container (or “container”) is a native application that is installed on the mobile device.The container application includes some of the Sybase Unwired Platform messaging libraries and local data store andembeds the WebKit runtime from the native operating system’s SDK. It also embeds a browser that allows developersto build mobile applications using their Web development skills, while maximizing the power of native device services. The Hybrid Web Container enables the rapid development of mobile workflows. These types of applications extendexisting enterprise business processes to a mobile device so that business process decisions can be made on amobile device.Why use a container to develop mobile apps instead of other development environments? The Hybrid Web Container allows developers to create applications in open, standards-based HTML5, JavaScriptand CSS. Web developers can leverage their Web expertise to develop business-ready, mobile applications quickly. The applications that run in the container are Web apps. The Web apps are constructed just like an applicationwritten for the browser. They have an HTML5 page, with a set of div’s and form elements that make up the appscreens. A set of JavaScript files includes the methods for navigating from screen to screen and the functions foraccessing data for the screens. A set of CSS files provides the styling for the screen elements written on the HTML. This in-the-box support provides Web developers with the tools they need to mobilize existing enterprise apps.What is the development process for a Hybrid Web Container application? First, let’s see where it comes from. Here is the basic development process: 1. You open the Eclipse tooling, create a mobile project and connect to a data source. This could be direct to a database; a set of business application programming interfaces (BAPIs); Web services; or representational state transfer (REST) services. 2.  Drag-and-drop tables or views (the Mobile Business Objects, or MBOs) from a data source to the model diagram. Here, you define exactly what the mapping is between the data source or service and the JavaScript API. 3.  The next step maps the MBOs to the application UI and generates the HTML5, JavaScript and CSS code. In the Eclipse tooling, you get a Screen Designer, where you can drag and drop MBOs into the screenflow and auto-generate list–>detail screens. You can also add Menu Items buttons and Query or Operation actions. 1
  • Key Point: One key feature of the SUP Hybrid Web Container is the ability to define a screenflow that can be started both by a user (Client-initiated), or by events or changes to the data source (Server-initiated). To do this, use the Screen Designer to set two entry points to the application. In the Client-initiated case, open the container, select the container app, and go to a Start Screen. From there, you can run a query and point to the List screen. In the Server-initiated case, an engine on the server recognizes a business process event, executes a query and pulls a set of values, packages them as a message, and pushes the message to the container on the device. That message on BlackBerry® and Windows Mobile devices is opened from a plugin in the device Inbox. On iOS and Android it’s in an inbox in the standalone Container app. Either way, the application can be defined as a single package of screenflows. This feature is extremely useful for developers because the screens can be re-used for multiple flows and only a single package is needed. 4.  Once you’ve used the Screen Designer in Eclipse to set your screen flows, a Generate command takes the screens you’ve defined with the nested UI elements and generates an HTML5 page. The screen elements are consistent with the jQueryMobile tags and classes. Five or six JavaScript files are created. They make up the JavaScript API and include functions for making Online Requests or submitting Operations, navigating from screen to screen, or accessing values from the encrypted cache. This functionality is different—and better—than plain HTML5 because, in addition to the server-initiated features, Sybase has implemented an encrypted WebStorage cache that holds result sets. WebStorage is the spec for the offline data caching in HTML5. Developers can be confident that their data is encrypted regardless of which platforms the app is running on. 5.  Sybase has included a set of CSS files that degrades properly across the earlier BlackBerry OS and Windows Mobile devices. So that’s the code: HTML5, JavaScript and CSS. Straight out of the box, you can build mobile applications with a standard look and feel across iOS, BlackBerry 6.x and compatible 5.x, and Windows Mobile devices. The Android Container is a part of the roadmap and will be available to Sybase Unwired Platform 2.0 customers as a patch. What CSS is used? Is there a standard look and feel across devices, or is each device specific? In Sybase Unwired Platform, Sybase is shipping jQueryMobile—both the .js and css files—out of the box. Including these files allows for a single look and feel across devices and consistent navigation. jQueryMobile has its own theming framework and offers five themes. (By default, HTML markup that the Eclipse tooling generates uses theme “a.”) Changing the theme code will change not only the color of your buttons, but other controls as well. You may also make changes to the themes directly in the CSS rule definitions. The tooling in the /html directory generates the jQueryMobile.css file: html/css/jquery/jquery.mobile-<version #>.css2
  • What if you want a device-specific look and feel? Sybase has JavaScript calls in the API for determining the operating system. Developers have access to theDocument Object Model (DOM) so they can get window.screen.height()/width(). That lets you identify the form factor.You can include device-specific CSS files—or write modifications to the jQueryMobile for each device—then write acheck in the beforeWorkflowLoaded() function to choose which CSS file you want to use.Are the CSS files packaged as part of the Web application? Yes. You can copy CSS and JavaScript files to the app directory. When the Eclipse tooling packages the application,those files are copied to the manifest. JavaScript files are auto-added to the HTML headers, and CSS files canbe appended.Are the screens customizable? Can developers change the screens or modify theJavaScript functions? Yes. Both jQuery JavaScript and jQueryMobile CSS files can be used extensively to customize screens for HybridWeb Container applications. Sybase has made customization simple, open and straightforward, so that you won’thave any problems with downstream modifications to the model, or to the screens in the Screen Designer, or withthe regeneration in Eclipse. Sybase Unwired Platform 2.0 includes a JavaScript file called Custom.js. This file contains callbacks to the navigationfunctions in the API: beforeWorkflowLoaded(), beforeShowScreen(), afterShowScreen(), etc. The naming of the customfunctions is straightforward; for example, customBeforeWorkflowLoaded(). You can make modifications in thesecustom functions, and return TRUE or FALSE, depending on whether you want the original behavior to be executedafter your custom code. A simple example of what you might do with customBeforeWorkflowLoad() is add a line of code to append astylesheet to the HTML page header, based on device type. You can add an attribute to the menu buttons to give themicons, so you could use the Welter image set. If you have HTML links on the Start Screen styled as buttons, you coulduse customBeforeWorkflowLoad() to set the Click function and call one of the native JavaScript API functions or acustom function that you’ve created. This is a generic place to handle some of the configuration you might do in yourAppDelegate in an iOS app.Can developers use the JavaScript API functions to access the MBOs and back-end platforms? Yes. A good example is in an Inventory Lookup app that one of our partners, Liquid Analytics, built, which is includedin the Sybase Unwired Platform 2.0 release as sample code. Instead of using the MenuItems in the navigation bar,Liquid Analytics wanted larger buttons in the center of the screen. They added an HTML link, styled it, and pointed tothe function call in the API for the Online Request for inventory data.How do developers access the data that comes from the back-end platforms? A value called the MessageValueCollection contains the latest values returned from an online request and cached.MessageValueCollection can be traversed by key names or indexes. Remember that if you generate an applicationand run it straight out of the box, all these values are prebound to the screen elements, so you don’t have toknow anything about the MessageValueCollection to get data to the screen or input back to the server. But theMessageValueCollection is how you get the data for sublists on a screen or dynamically work with a result set onthe device. MessageValueCollection is really access to WebStorage. 3
  • How do you work with MessageValueCollection()? The getCurrentMessageValueCollection() method returns an array of the most recent values returned for an Object Query. For example, if a FindAll object query has been called on an Employee MBO, you could use messageValueCollection.getData(”Employee”) to get the array of all Employees. To get an attribute value for a specific employee, you could use employeeArray.value[rowIndex].getData(”Employee_state_attribKey”). The default key for an MBO attribute is: [MBO name]_[attribute name]_attribKey. Let’s see how to use getCurrentMessageValueCollection() and getData() to access the results of a FindAll object query and count the number of employees in each U.S. state. The output array will be: [{state, # of employees}]. The code will be added to the customBeforeShowScreen() function in Custom.js, so that it will be run before the Chart screen (the success screen for the Employees_FindAll object query) is displayed. function customBeforeShowScreen(screenToShow, screenToHide) { if (screenToShow === ‘Chart’) { try { // output array ‘arrayOfStatesAndCounts’ will be [{state, # of employees}] var arrayOfStatesAndCounts = new Array(); var values = getCurrentMessageValueCollection(); // get array of Employees from the messageValueCollection var employeeMVC = values.getData(“Employee”); // for each Employee in employeeMVC for (var rowIndex = 0; rowIndex < employeeMVC.value.length; rowIndex++) { var stateValue = employeeMVC.value[rowIndex].getData(“Employee_state_ attribKey”); var found = false; for (var outputArrayIndex = 0; outputArrayIndex < arrayOfStatesAndCounts.length; outputArrayIndex++) { if (arrayOfStatesAndCounts[outputArrayIndex][0] === stateValue.value) { arrayOfStatesAndCounts[outputArrayIndex][1] = arrayOfStatesAndCounts [outputArrayIndex][1] + 1; found = true; break; } } if (!found) { var newValue = new Array(2); newValue[0] = stateValue.value; newValue[1] = 1; arrayOfStatesAndCounts[arrayOfStatesAndCounts.length] = newValue; alert(“stateValue.value = “+ stateValue.value); } } } catch (e) { alert(“got an exception: “ + e); } } return true; }4
  • Can you edit the HTML directly? Where are the customization boundaries? Here the answer is yes and no. The generated HTML5 page is fully functional HTML, and you can open it in the Webtool of your choice. For example, you can use Adobe Dreamweaver to open the Hybrid App package directly from theroot and do customization there. The important thing to remember is that the main page of the app, the HTML file, will be regenerated whenyou go back to Eclipse to repackage. Obviously you don’t to want to overwrite any edits you would have made directlyto the page. You have three options in working with the HTML. The first one is to use JavaScript to build dynamic HTML and usethe tags of the screen to add it to the view. You can add dynamic tables or elements because you have access to theDOM (this is typical Web development). When SAP partner Liquid Analytics (www.liquidanalytics.com) built the sample Inventory Lookup app (which can befound at https://cw.sdn.sap.com/cw/docs/DOC-142757), they wanted to use the jQueryMobile list so they could demothe native jQueryMobile searchbar. They used the customBeforeNavigateForward() function in Custom.js to retrievethe values from the MessageValueCollection and then build the table view dynamically in HTML. So the first option isto use JavaScript to build HTML dynamically. Another option is using the HTMLView in the Screen Designer, where you drag and drop an HTMLview onto a screen,and paste HTML code into the view. When Eclipse generates the HTML page, the code that you’ve pasted into the viewwill be published in-line, nested in the screen that the view is sitting on. In this way you can statically customize theHTML page without worrying about it being overwritten. The code is a first-class member of the page and can accessall the JavaScript functions and CSS markups. The third option is to use HTML markup being generated externally, so if you have an existing application for whichthe markup is generated on the server, you can bind that service to an MBO, and inject the string to the value of theHTMLView.Where can I learn more and get resources or sample apps? Resources for SUP development are available through the SAP Developer Network, and hosted on the SDN CodeExchange: https://cw.sdn.sap.com/cw/groups/sup-apps. Also:Core Concepts: Hybrid Web Container www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/c0b2fd0e-675e-2e10-cdaa-8375825271a7Core Concepts: Custom UI for Container Apps www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/f0118416-5062-2e10-9e93-8cca742da350 And on iTunes:SUP Developers Video Podcast http://itunes.apple.com/us/podcast/sup-developers-video-podcast/id443324429 5
  • For information on our comprehensiveConsulting and Education Services tosupport your Sybase technology initiatives,visit us at www.sybase.com/consulting.Sybase, Inc.Worldwide HeadquartersOne Sybase DriveDublin, CA 94568-7902 Copyright © 2011 Sybase, Inc. All rights reserved. Unpublished rights reserved under U.S. copyright laws. Sybase andU.S.A the Sybase logo are trademarks of Sybase, Inc. or its subsidiaries. ® indicates registration in the United States of1 800 8 sybase America. SAP and the SAP logo, are the trademarks or registered trademarks of SAP AG in Germany and in several other countries. All other trademarks are the property of their respective owners. 08/11 BlackBerry®, RIM®, Research In Motion®, SureType®, SurePress™, BBM™ and related trademarks a, names and logos are the property of Research In Motion Limited and are registered and/or used in the U.S. and countries around the world.www.sybase.com Used under license from Research In Motion.