Business Information Server Developing ICE Applications for Mobile Devices Tool Suggestions White Paper 1 The Unisys Business Information Server (BIS) provides scripting capabilities that you can use in creating applications for your specific environment. This document provides BIS Internet Commerce Enabler (ICE) tool suggestions and code examples by Unisys developers for developing and updating applications for use on mobile devices. 2 Table of Contents General Overview 4 How to Use This Document 4 Tool Definitions 5 Development Tool Suggestions 6 Choosing Browser Development Tools 6 Using Full Code 6 Debugging BIS Script or BIS JavaScript 6 IdentifyingJSONErrors 6 Tracking HTTP Traffic 6 Developing Web Content for Mobile Devices 7 Coding BIS ICE Examples 7 Example 1 8 Simple List 9 Targeting a Mobile Device 10 Enhanced Content 10 Example 2 12 Using DataTables to Produce a Table in a Web Page 12 Example 3 14 Moving to JSON and Ajax for DataTables 14 Using JSON to Define a Table 15 Checking JSON Content 17 Example 4 18 Continuing with Development 20 Summary 21 Appendix 1: Example 1 ICE Script 22 Appendix 2: Example 2 ICE Script 25 Appendix 3: Example 3 ICE Script 28 Appendix 4: Example 4 ICE Script 30 Appendix 5: Configuring Fiddler2 as a Proxy for Mobile Devices 32 3 General Overview The demand for Web content on desktop and mobile devices has pushed many businesses to extend the Web-based services they provide to their customer market. Designing content for the Web is challenging because of the variety of Web browsers and devices available. Unisys provides a solution to this problem in this document. We provide tool suggestions and code examples so that you can develop Web content efficiently with BIS Internet Commerce Enabler (ICE). By using our recommendations you will achieve applications that have a mobile look and functionality. This document applies to: Business Information Server Release 11 or later Versions of Business Information Server with ICE (Windows and UNIX/Linux) How to Use This Document This document provides four examples for developing Web content for mobile devices with BIS ICE. Example 1 demonstrates how to update your applications to have a mobile look using jQuery and jQuery Mobile. Example 2 demonstrates that you can quickly produce a table in a Web page using jQuery and DataTables. Example 3 demonstrates an Ajax service to yield a JSON load for DataTables. Example 4 integrates Example 2 and Example 3 to make DataTables display any report. Before you begin with the examples, familiarize yourself with the tools used in this document in Tool Definitions. Then, decide on development tools if you have not done so yet in Development Tool Suggestions. 4 Tool Definitions The examples in this document use the following tools: XML (eXtensible Markup Language) XML uses text markup identified by special names within the less-than sign (<) and greater-than sign (>) to apply notations to textual data. It is used to transport and store data between different hardware and software programs. The resulting document context is humanly readable. Ajax or AJAX (Asynchronous JavaScript and XML) Ajax is used on a client (browser) to send and receive data asynchronously, that is without interfering with the display and behavior of the existing web page. Despite its name, the use of XML is not required (for example, JSON is often used instead). Combining Ajax technology with ICE means you create an ICE service to accept a HTTP request from the page and respond with the requested data like JSON. CDN (Content Delivery Network or Content Distribution Network) CDN is a large distributed system of servers. CDN is an URL reference to load CSS or JavaScript libraries from a separate Web server. This saves you from having to download and setup links on your server but in production you want to download and retain it on your own server. JSON (JavaScript Object Notation) JavaScript Object Notation, is derived from the JavaScript scripting language for representing simple data structures and associative arrays, called objects. The JSON format is often used for serializing and transmitting structured data over a network connection. It is used primarily to transmit data as an object between a server and web application, serving as an alternative to XML. jQuery “jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers” (jQuery.com). In general, the browser allows scripting to be triggered on a variety of events and smoothly transition effects and transitions without requiring constant server communications. jQuery UI, jQuery Mobile, and DataTables depend on jQuery as a foundation. jQuery UI This library, from jqueryui.com, is aimed at the user interface of the desktop or tablet browsers to enable rich behaviors for that environment. For example, menus, dialogs, and other interfaces that pop up or emerge on the Web page. jQuery Mobile This library, from jquerymobile.com, produces content for mobile browser devices like smart phones or tablets. DataTables This library, from datatables.net, depends on the jQuery base as well. It can transform a table of content into a richer dynamic user Web page. Example 2 relies heavily on jQuery and DataTables and a rich set of defaults. 5 Development Tool Suggestions It’s important to have a good set of tools for the job. In development, Web pages can get problems from a variety of sources: Web page source content; Ajax, JSON, or XML content; server side production; timing; and related HTTP traffic. This section provides a few tool recommendations. Choosing Browser Development Tools Most popular Web browsers (Google Chrome, Microsoft Internet Explorer, Apple Safari, Firefox, and Opera) in their latest versions contain good development tools. The difficulty is becoming familiar enough to find the correct tool or become familiar enough with a second browser to get the information you need. Having the right set of tools prepares you for the tasks you will do at one time or another: examine console messages, trace script execution, check timing of multiple requests for one page, prevent cached responses, and examine the DOM elements after JavaScript is done. Using Full Code During development, use the library version with an extension, .js (full code), instead of the .min.js (condensed code). Although using full code is a little slower this allows you to examine the JavaScript library code when you have access to it. Switch to condensed code before you start testing. Debugging BIS Script or BIS JavaScript Within ICE, the Developer Workshop is invaluable for debugging BIS script or BIS javaScript during server side execution. On a development box, include @rdb,YourPC (PC name that you are debugging from) in your script at the starting point. Set or chose an ICE gateway log on with a user-id that has write permission (security report and group) to the run scripts. Now when you exercise the ICE script with the @rdb, Developer Workshop should open in the BIS script at your PC and you can step through the server execution. Identifying JSON Errors JSON syntax checkers, like JSONLINT.com, can be very useful if the browser development tool says there is a syntax error, such as, parse error or unexpected token. In this case it’s probably not important where in the code the error was detected, but rather you want to know where the JSON syntax went awry. Submitting the JSON notation to a tool like jsonlint.com and validating the text will reveal those errors. Tracking HTTP Traffic There are times when you want to see all the HTTP traffic. Fiddler2 (Fiddler2.com) is a good tool to examine the traffic between your browser and the host. For mobile devices, you can configure Fiddler2 to act as a proxy to see Web requests and responses. 6 Developing Web Content for Mobile Devices The examples in this document are extracted from several jQuery cross-browser scripting libraries and add-ons. Using JavaScript libraries minimizes the custom cross browser code required to address your needs. jQueryUI, jQuery Mobile and DataTables are all JavaScript libraries that are based on jQuery but extend functionality, respectively, for: improved user interface, support for mobile browsers, and presenting data content in a grid. The jQuery dependent libraries make a lot of assumptions by default to give you a presentation, but like all libraries there are many settings and methods that tailor any aspect or add capabilities. The jQuery philosophy is more of assuming you want enhancements and you turn them on or off as desired. Whereas some other JavaScript libraries start you at a minimal feature like the grid, and then you enable what you want. Most, including jQuery, offer a lot of additional controls and customization. The JavaScript libraries (jQuery, jQuery UI, jQuery Mobile, and DataTables) used in these examples are available as open source. Typical scripting libraries take HTML with special classes and some custom markup then selectively enhance (rewrite) the HTML to create attractive useful content. Coding BIS ICE Examples These examples use the web scripting option on @brk “@brk,0,f,,y” where the “,,y” indicates web scripting. This allows you to copy and paste from an HTML example with ease, but you can still code without the web scripting option as shown below: The older coding method without webscript option(@brk,0,f .. ): [title]<svctitle>[/title] The newer coding with webscript option (@brk,0,f,,y . .) of the same fragment: <title><%<svctitle>%></title> 7 Example 1: Using jQuery and jQuery Mobile to Enhance a Mobile Web Page This example will show you that you can use BIS ICE with jQuery and jQuery Mobile to enhance a Web page for use with mobile applications.