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.