• The Four Hundred
  • Subscribe
  • Media Kit
  • Contributors
  • About Us
  • Contact
Menu
  • The Four Hundred
  • Subscribe
  • Media Kit
  • Contributors
  • About Us
  • Contact
  • Using JSON and RPG To Create Interactive Web 2.0 Applications

    February 8, 2012 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

    Share this:

    • Reddit
    • Facebook
    • LinkedIn
    • Twitter
    • Email

    Tags:

    Sponsored by
    LaserVault

    Integrate Virtual Tape to Automate Your Backups And Strengthen Your Ability To Recover From Cyber Attacks And Disasters

    With most IT departments stretched thin, finding something that can quickly free up IT time is definitely a bonus. That’s why it’s important to stop and take a look at integrating virtual tape into your backup and recovery. Virtual tape is one of those technologies where once you have it, you’ll wonder why you didn’t do it sooner. See a demo and get a $50 gift card.

    But what is it about using virtual tape that makes it so worthwhile? Why is it that so many IBM i shops are already using or considering using virtual tape for all or part of their backup and recovery systems?

    Virtual tape and virtual tape libraries offer a way to both simplify and strengthen backup and recovery operations. By incorporating virtual tape technology, automation of backups becomes possible resulting in hundreds of hours saved annually for IT departments and personnel.

    “We needed to find a replacement that would lower the maintenance cost and reduce complexity of our backup and recovery functions without a major disruption to our operations.” David Fray, Director of Enterprise Systems, ABC Financial

    LaserVault ViTL is a virtual tape and tape library solution developed specifically for use with IBM Power Systems (from AS/400 to iSeries to Power 9s). With ViTL you can:

    • Replace physical tape and tape libraries and eliminate associated delays
    • Automate backup operations, including the ability to purge or archive backups
    • Remotely manage your backups – no need to be onsite with your server
    • Save backups to a dedupe appliance and the cloud
    • Recover your data at lightspeed greatly improving your ability to recover from cyberattacks
    • And so much more

    Sign-up now to see a ViTL online demo and get a $50 Amazon e-gift card when the demo is complete as our way of saying thanks for your time. Plus when you sign-up you’ll receive a free facts comparison sheet on using virtual tape vs tape so you can compare the functionality for yourself.

    Share this:

    • Reddit
    • Facebook
    • LinkedIn
    • Twitter
    • Email

    Sponsored Links

    Micro Focus:  RUMBA for iSeries, the world's most used terminal emulation software
    HiT Software:  Solve data movement, data migration and data replication challenges with DBMoto
    Abacus Solutions:  More affordable and flexible alternatives to deliver secondary workloads

    IT Jungle Store Top Book Picks

    BACK IN STOCK: Easy Steps to Internet Programming for System i: List Price, $49.95

    The iSeries Express Web Implementer's Guide: List Price, $49.95
    The iSeries Pocket Database Guide: List Price, $59
    The iSeries Pocket SQL Guide: List Price, $59
    The iSeries Pocket WebFacing Primer: List Price, $39
    Migrating to WebSphere Express for iSeries: List Price, $49
    Getting Started with WebSphere Express for iSeries: List Price, $49
    The All-Everything Operating System: List Price, $35
    The Best Joomla! Tutorial Ever!: List Price, $19.95

    Flex Platform: An IBM System That Goes With The Tech Flow Big Blue To Bring Live Migration To IBM i 7.1

    Leave a Reply Cancel reply

Volume 12, Number 3 -- February 8, 2012
THIS ISSUE SPONSORED BY:

Bug Busters Software Engineering
ProData Computer Services
WorksRight Software

Table of Contents

  • bsearch: A Better %LOOKUP
  • Using JSON and RPG To Create Interactive Web 2.0 Applications
  • Admin Alert: QSECOFR Security Problems I Have Known

Content archive

  • The Four Hundred
  • Four Hundred Stuff
  • Four Hundred Guru

Recent Posts

  • IBM Mulls Using DataMigrator as Cloud Warehouse Pipeline
  • PowerTech AV Automatically Detects Ransomware Activity
  • Infor Puts CM3 Project On Hold
  • Four Hundred Monitor, June 29
  • IBM i PTF Guide, Volume 24, Number 26
  • Guild Mortgage Takes The 20-Year Option For Modernization
  • IBM i Licensing, Part 3: Can The Hardware Bundle Be Cheaper Than A Smartphone?
  • Guru: The Finer Points of Exit Points
  • Big Blue Tweaks IBM i Pricing Ahead Of Subscription Model
  • We Still Want IBM i On The Impending Power E1050

Subscribe

To get news from IT Jungle sent to your inbox every week, subscribe to our newsletter.

Pages

  • About Us
  • Contact
  • Contributors
  • Four Hundred Monitor
  • IBM i PTF Guide
  • Media Kit
  • Subscribe

Search

Copyright © 2022 IT Jungle

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.