Making the Right Choice for Web Enabling IBM i Applications

Abstract

Many organizations still access some or all of their IBM i applications through text-based 5250 terminals or terminal emulators. However, these applications don’t take advantage of the productivity benefits that the Web provides, and many users, managers and even IT staff perceive the IBM i as outdated solely because of green screens. As a result, IBM i organizations are facing increased pressure to modernize their green screen application interfaces.

Web-based graphical user interfaces (GUIs) provide the following benefits:

 They improve the organization’s image with a more contemporary look.

 They reduce training costs and can speed up data entry by streamlining workflows and simplifying the end user experience with a browser-based interface that is commonly used in most people’s daily lives.

 You can leverage the full power of web browsers including advanced user interface (UI) components and visual elements like images, video and charts.

 They are easier to deploy than 5250 emulators because users can easily access them from browsers on PCs, Macs, tablets and smartphones.

 You can repurpose your legacy applications so partners, vendors and even customers can access them. Solution Overview

BCD’s Presto is a web enablement and modernization tool that helps IBM i programmers meet the shortest deadlines by automatically rendering IBM i green screens as web pages. You don’t need to select which applications you’ll modernize because Presto uses the 5250 datastream to web enable all RPG and COBOL programs on the fly without requiring the source code. Using Presto’s 5250 data stream approach, all of your third party, older RPG II-IV programs and those missing the source code are given a web GUI. You can also give new RPG programs a web GUI using Presto’s RPG Open Access (OA) handler.

On installation, Presto automatically transforms all of your function keys and menu items into clickable buttons and links and provides you with other global configuration options. Presto includes a visual editor that makes it easy to add new functionality, such as drop-down boxes, datepickers and images, to your web-enabled screens without needing to code HTML. You also have access to the HTML, CSS and JavaScript from the Presto Designer, which gives programmers who prefer to code by hand the flexibility to do so.

Presto web-enabled screens are easy to deploy because users only need a browser to securely access the web-enabled screens on PCs, Macs, tablets and smartphones. No ActiveX, Windows Servers or other software are required.

1

A Phased Approach to Modernization

Some organizations take a phased approach to modernization with Presto. At first, they deploy the consistent look and experience that Presto provides on installation for the majority of their screens. They may also give their new RPG programs a web GUI using RPG OA. In the second phase, they further enhance and add new functionality to their most-used screens. In the last phase, they may integrate some of their web-enabled screens with other web applications and technologies to further improve work flows.

Figure 1: A green screen instantly transformed to a web page by Presto (Phase 1), then further enhanced (Phase 2 and 3).

Phase One: Rapid Results Out of the Box

If you want to take advantage of the modern look and new functionality that browsers provide by deploying your green screens as web applications, Presto provides a means to do so almost immediately.

As soon as you install Presto on your IBM i, which can be done in under 30 minutes, you can access all of your IBM i screens as web pages from a browser. Presto accomplishes this by automatically intercepting the 5250 data stream, and dynamically translating and reshaping your programs to run as web pages (Figure 2). This is done without requiring any source code changes or manually identifying your screens. Because Presto is a web enablement tool and not an emulator, it’s recommended that you test your screens before deploying them to your users.

RPG OA support is included with Presto so you have more options to deliver modern web applications. You can use Presto’s RPG OA handler to give new RPG programs a web GUI, transform subfiles into scrollable grids with sortable columns and automatically add datepickers to date fields. You can also seamlessly intermingle OA screens with screens that were web-enabled using Presto’s 5250 datastream approach.

2

Figure 2: Presto’s run-time architecture.

Here is how Presto works:

1. The user navigates to a URL in their browser on their PC or mobile device. That URL points to the IBM i.

2. The browser communicates with the IBM HTTP Server (powered by Apache), which processes the request and evokes the Presto Engine.

3. The Presto Engine starts the Virtual Terminal session. It also processes requests in both directions, rendering your green screens as web pages to the browser by transforming the 5250 data stream into HTML, CSS and JavaScript and returning data in the format that the Virtual Terminal requires.

4. The original RPG or COBOL programs and menus run in the background. Because Presto works on the 5250 data stream level, your programs are not affected in any way and can still be accessed on 5250 emulators by users who prefer green screens.

You can also enhance your screens by using Presto’s global environment settings. A couple examples of global transformations are: Presto’s automatic conversion of function keys and menu options into clickable buttons and links, and the ability to select a skin that applies a modern web look to all of your screens. You can also customize the skins to match your organization’s look and feel. The benefit of global changes is that they enhance all of your screens without having to individually customize them.

Critical to any enterprise solution, Presto supports multiple environments and languages. Presto environments are a set of global settings for a group of programs or screens on your system, providing you with test and production environment(s). If you are an Independent Software Vendor (ISV) who needs to web enable your existing 5250 solutions, Presto environments give you the ability to simultaneously have independent versions of the same web-enabled apps. ISVs can use environments to make the same application have a customized look for each client.

Presto supports your IBM i and database language settings. Your web-enabled screens will display the language that you've configured with your IBM i and database.

3

Accessing Screens from Mobile Devices

Extending the functionality of your native IBM i- based applications to mobile devices helps extract more value from your investment in IBM i technology by improving business processes. Presto includes built-in features to support mobile devices. When an iPhone, iPad or Android device is used to access a web-enabled green screen, Presto's built-in intelligence automatically detects the device type and displays the mobile layout. The mobile layout can also be customized for other devices.

Presto’s mobile layout hides the top banner of the screen in order to make more efficient use of the screen size and reduce the size of the Figure 3: A Presto web-enabled screen displayed in an iPad with page so it loads faster. It also includes a virtual its virtual keyboard expanded. keyboard for function keys (Error! Reference source not found.). This is significant because some mobile devices, including iPhones and iPads, don’t have function keys on their keyboards, an integral part of almost every green screen application.

This first stage might be sufficient for some – or even all – of your screens, regardless of whether they’re accessed from desktops or mobile devices. From this starting point, you can make further customizations that add more business value to your applications.

Phase Two: Add New Functionality

Presto makes it easy to further enhance screens by adding new UI elements and functionality like drop- down boxes (Figure 4). There are several different ways to customize your web-enabled desktop or mobile screens, including the Presto Visual Editor, SQL Queries and changes to the HTML, CSS and JavaScript.

Figure 4: Two Presto web-enabled screens with added UI elements.

4

Presto includes a Windows-based IDE called the Presto Designer. Programmers and IT staff with no web development experience are productive right away using the Presto Designer’s Visual Editor (Figure 5):

 Drag and drop fields around the screen.

 Change the colors, fonts and other properties of elements or text on the screen.

 Add visual elements like tabs, images and charts.

 Add UI elements, such as datepickers, drop-down boxes and autocompletes that speed up data entry and reduce keying errors.

 Add links to PDF or Word documents.

 Add JavaScript events to fields for a more responsive user experience.

 Further enhance screens for mobile devices.

Figure 5: The Presto Designer, illustrating a screen that has been enhanced using Presto's Visual Editor (tabs, icons, drop-down list, radio buttons and image).

The Presto Designer also gives you full access to the HTML, JavaScript and CSS so you have the flexibility to add any other enhancements you may want to make.

5

SQL Queries for Database-Driven UI Elements

Some of the UI elements that you add through the Visual Editor are driven by SQL Queries you define in Presto. SQL Queries allow you to extend your screens beyond the 5250 data stream by accessing data that’s not in the original program. They are most frequently used to either dynamically populate drop- down boxes, autocompletes and charts with data from DB2 files, or to export the DB2 query result to a spreadsheet or HTML page. They can also be used to retrieve and update DB2 data that was not part of the original program. SQL Queries are non-intrusive as they do not require any changes to the underlying program object or source code.

Phase Three: Integrated Web Environment

Phase three integrates web-enabled screens with other web applications and technologies. Depending on the application and your organization’s requirements, you may decide to only carry a small percentage of screens (if any) forward to phase three. Having the flexibility to enhance screens at this level helps add more sophisticated functionally and future-proof your applications.

Examples of these types of enhancements include:

 JSON, Ajax and other technologies to call other programs and do web services for approving a credit card, tracking a shipment, or displaying a location in a map.

 Linking to other web applications (PHP, RPG, .Net, etc.), including new web applications created with WebSmart, which is part of BCD’s modernization suite.

 Adding web plugins and scripts like jQuery, which is included and used extensively in Presto.

Mobile Optimization with jQuery and Phonegap

While Presto offers out-of-the-box mobile features, it also provides the flexibility for you to take your applications to the next level. You can integrate Presto with other technologies to provide the mobile look and feel that users expect and to take advantage of the device’s hardware features (GPS, camera):

 Use jQuery Mobile to provide a mobile-optimized design that enhances the user experience when screens are accessed from mobile devices (Figure 6). Using jQuery Mobile with Presto requires you to make changes to the HTML.

 Integrate with Phonegap to use the device’s hardware features. This can include accessing the camera to take photos or scan a barcode, or using the GPS for geolocation.

6

Figure 6: A Presto web-enabled screen that has been optimized for mobile devices using jQuery Mobile.

Modernization Suite

You can optionally combine Presto with other BCD tools to further modernize your IBM i applications and processes by building your own customized and integrated solution. Start with one, a couple of tools or BCD’s complete ClearPath modernization suite to meet your needs.

WebSmart is BCD’s rapid desktop and mobile web application development tool for creating new PHP or RPG web applications. You can link your Presto web-enabled screens to your WebSmart web applications (and any other web application). You can also use WebSmart to add more sophisticated functionality to your Presto screens, including emailing, uploading files and processing web services.

Presto optionally includes BCD’s license-free (only maintenance is billed) Nexus Portal. Nexus provides a secure single point of access to your enterprise information, including your Presto web-enabled screens, other web apps and pages, documents, dashboards and productivity tools. It also includes a web menu system and single sign-on for your Presto apps that you can use to hide some 5250 navigation menus.

7

Security

Because Presto runs as a layer over your green screens, many of their security conventions, such as object authorities, are inherited by your web-enabled screens. The web layer in Presto can provide additional security in the form of encryption. Many of the same security considerations that apply to conventional web applications also apply to Presto web-enabled applications. These are the general areas of concern you should consider:

1. Data transmission between client (browser) and server (IBM i/Presto server). To secure data transmission, you should use SSL (Secure Socket Layers). SSL encrypts data prior to transmission, sends it encrypted, then decrypts it. All major commercial B2C sites use SSL.

2. Network configuration (firewalls, VPN, etc.). A firewall allows you to control access to your network, including your IBM i. By default, all external access to your network should be denied. You can then open a port to the IBM HTTP Server if you want to allow external access to your web-enabled screens. You also control whether you want to require VPN to allow remote access to screens.

3. IBM HTTP Server (powered by Apache). The default Apache configuration shipped with Presto only exposes Presto-related functionality. Any changes to the configuration are subject to the standard Apache considerations.

4. IBM i user profile and object security. Presto utilizes the user’s IBM i user profile so all of their object authorities are automatically retained. You can also specify a device description in Presto.

5. SSO with auto-logins. The Presto auto-logins feature allows you to configure a way for authorized users to navigate directly to a program or menu without an additional login via Presto. This feature is primarily intended be used with Nexus, BCD’s web portal, although you can also tie it into your own portal software or web applications by writing your own API. Required Skills

The skills you need depend on the level of customizations that you plan to make to your web-enabled screens. Using Presto out of the box and making changes using the Visual Editor requires minimal HTML skills. BCD has detailed documentation, code samples and a technical support team to assist as you learn.

As your customizations become more sophisticated, an understanding of HTML is greatly beneficial. If you choose to make phase three customizations by integrating web applications and technologies with your screens, you will also need a deeper understanding of web technologies. Resources

 Datasheet  Webinars

8

Supported Platforms

Presto requires at least V5R4 of IBM i and uses the free IBM HTTP Server (Powered by Apache). Users can access Presto screens from PCs, Macs, tablets and smartphones using popular browsers such as Chrome, Firefox, Internet Explorer and Safari. It does not use WebSphere, Windows Server or ActiveX so there is no need to purchase or configure any of those products.

Download and Ordering Information

Visit http://www.bcdsoftware.com/richgui.

9