Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Sybase sup hybrid_web_container_article_wp
1. white paper
Sybase® Unwired Platform
Hybrid Web Container
An Industry Leading Approach to Developing
Both Native and Web Mobile Applications
www.sybase.com
2. 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
3. What is a Hybrid Web Container?
In a nutshell, the Hybrid Web Container is the runtime on the mobile device within which mobile applications
are 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 and
embeds the WebKit runtime from the native operating system’s SDK. It also embeds a browser that allows developers
to 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 extend
existing enterprise business processes to a mobile device so that business process decisions can be made on a
mobile 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, JavaScript
and 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 application
written for the browser. They have an HTML5 page, with a set of div’s and form elements that make up the app
screens. A set of JavaScript files includes the methods for navigating from screen to screen and the functions for
accessing 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
4. 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 #.css
2
5. 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 the
Document 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 a
check 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 can
be appended.
Are the screens customizable? Can developers change the screens or modify the
JavaScript functions?
Yes. Both jQuery JavaScript and jQueryMobile CSS files can be used extensively to customize screens for Hybrid
Web Container applications. Sybase has made customization simple, open and straightforward, so that you won’t
have any problems with downstream modifications to the model, or to the screens in the Screen Designer, or with
the regeneration in Eclipse.
Sybase Unwired Platform 2.0 includes a JavaScript file called Custom.js. This file contains callbacks to the navigation
functions in the API: beforeWorkflowLoaded(), beforeShowScreen(), afterShowScreen(), etc. The naming of the custom
functions is straightforward; for example, customBeforeWorkflowLoaded(). You can make modifications in these
custom functions, and return TRUE or FALSE, depending on whether you want the original behavior to be executed
after your custom code.
A simple example of what you might do with customBeforeWorkflowLoad() is add a line of code to append a
stylesheet to the HTML page header, based on device type. You can add an attribute to the menu buttons to give them
icons, so you could use the Welter image set. If you have HTML links on the Start Screen styled as buttons, you could
use customBeforeWorkflowLoad() to set the Click function and call one of the native JavaScript API functions or a
custom function that you’ve created. This is a generic place to handle some of the configuration you might do in your
AppDelegate 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 included
in 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 to
the 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 application
and run it straight out of the box, all these values are prebound to the screen elements, so you don’t have to
know anything about the MessageValueCollection to get data to the screen or input back to the server. But the
MessageValueCollection is how you get the data for sublists on a screen or dynamically work with a result set on
the device. MessageValueCollection is really access to WebStorage.
3
6. 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
7. 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 Web
tool of your choice. For example, you can use Adobe Dreamweaver to open the Hybrid App package directly from the
root and do customization there.
The important thing to remember is that the main page of the app, the HTML file, will be regenerated when
you go back to Eclipse to repackage. Obviously you don’t to want to overwrite any edits you would have made directly
to the page.
You have three options in working with the HTML. The first one is to use JavaScript to build dynamic HTML and use
the tags of the screen to add it to the view. You can add dynamic tables or elements because you have access to the
DOM (this is typical Web development).
When SAP partner Liquid Analytics (www.liquidanalytics.com) built the sample Inventory Lookup app (which can be
found at https://cw.sdn.sap.com/cw/docs/DOC-142757), they wanted to use the jQueryMobile list so they could demo
the native jQueryMobile searchbar. They used the customBeforeNavigateForward() function in Custom.js to retrieve
the values from the MessageValueCollection and then build the table view dynamically in HTML. So the first option is
to 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 view
will be published in-line, nested in the screen that the view is sitting on. In this way you can statically customize the
HTML page without worrying about it being overwritten. The code is a first-class member of the page and can access
all 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 which
the markup is generated on the server, you can bind that service to an MBO, and inject the string to the value of the
HTMLView.
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 Code
Exchange: 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-8375825271a7
Core 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
