Using JSON and RPG To Create Interactive Web 2.0 Applications

Published: February 8, 2012

by Alex Roytman

Note: The code accompanying this article is available for download here.

In my last article, Meet JSON, I introduced you to the concept of JavaScript Object Notation and how it's changing the way Web applications are being built. Let's explore JSON syntax a little further by building a really simple customer inquiry Web application. The code can be downloaded here.

This application consists of three simple parts:

• CustInq.html--Simple HTML page to ask for customer number and present customer information
• CUSTINQ.rpgle--RPG/CGI program to output customer information in JSON format
• CustInq.js--JavaScript code to facilitate the communication between the RPG and the HTML

The example is meant to run on an IBM i Apache server configured for CGI. Because we're learning about the basics, I have not introduced any CGI or JavaScript frameworks, other than a simple AJAX library, which is included in the accompanying ZIP file.

The HTML

The first piece is CustInq.html. This is the starting point for this application, which is launched directly in the browser as a static HTML page. The page uses an HTML table to present several rows of fields. The first row shows an input box to allow the user to enter a Customer Number. The rows that follow will show information for the customer number specified.

Each area in the HTML that is meant to be dynamic is marked with an ID. This allows JavaScript code to update the HTML as soon as it receives the JSON response from the RPG program.

Note that in more sophisticated applications, you may choose to use something other than a simple HTML page for representing the user interface. It can be a dynamic CGI page, for example. It can also be represented entirely in JSON coupled with a JavaScript framework that translates the JSON to dynamic HTML on the fly. This allows for the ultimate user experience, as HTML by itself is fairly primitive.

The RPG

RPG program CUSTINQ uses the QtmhGetEnv API (Get Environment Variable) to read in the customer number from a query string parameter, chains to the Customer Master file to get additional customer information, and finally outputs this customer information to standard out using the QtmhWrStout API (Write to Standard Out). To make this a self-contained RPG program example, I have used raw CGI APIs here, but nothing stops you from using your favorite CGI libraries or tools to accomplish the same results.

This is not your typical CGI program, however. Traditionally, CGI programs output HTML to the browser. But here the output is JSON, and it is sent in response to an AJAX request. This means the page will never reload--it is simply updated with new customer information as the user interacts with the page.

The JSON

So what does the JSON look like when the RPG program responds? In this case, the output is a simple list of name/value pairs, which are the basic building blocks of JavaScript Object Notation. The entire JSON expression is surrounded in curly braces, which indicate an object consisting of one or more name/value pairs. The pairs are comma separated, with a colon between each name and value, like this:

{ "company": "Profound Logic Software", "address": "562 Congress Park, 
Dayton, OH 45459", "contact": "Alex Roytman", "phone": 
" (937) 439-7925" }

The JavaScript

The JavaScript code is simple, yet key to this application as it facilitates the communication between the RPG and the HTML. There are two distinct parts to the JavaScript code.

The first part sends a request to the RPG using a simple function provided by the AJAX Library. I decided to send a request for updated customer information with each key stroke, using the "onkeyup" event in the HTML. After all, it is a Web 2.0 AJAX application, and we want the screen to be as responsive as possible. As soon as a valid customer is keyed in, the customer information will be populated--you don't even have to press Enter!

The second part of the JavaScript receives the output from the RPG program and places it on the browser page. This is where the IDs in the HTML code come into play. Notice that no special JSON parsing is required. We refer to the data directly (i.e., response.company, response.address, etc.)

So, now you know the basics of building a Web 2.0 application with JSON and RPG. Have fun!

Alex Roytman is an innovator in the field of legacy application modernization, with a concentration on creating rich browser interfaces on the IBM i (iSeries/AS400) system. His company, Profound Logic Software, provides an innovative graphical user interface platform for ILE RPG developers on the IBM i. Profound Logic has facilitated the modernization of many millions of lines of legacy RPG code, and serviced thousands of customers, including prominent enterprises such as Nintendo, Disney, Nike, Pepsi, FedEx, Volvo, Sony, General Electric, and Warner Brothers. Most recently, Alex and his team have worked closely with IBM to define a new era for the IBM i platform--an era where a graphical user interface is native to the system. Through a joint offering (RPG OA from IBM and Profound UI from Profound Logic), developers can use sophisticated design tools to create native IBM i user interface objects to modernize and extend existing legacy code. This new approach has proven to be 10 to 20 times more effective compared to traditional application modernization.

RELATED STORY

Meet JSON

                     Post this story to del.icio.us
               Post this story to Digg
    Post this story to Slashdot