Better User Interfaces for Your Web Apps

By:

Most articles I've written about web applications have been based on the view that the readers are not currently using HTML web browsers for their user interface. Today, however, that wall is coming down as a lot of shops have moved to a browser-based user interface successfully, and those who haven't wish they had. What I want to do for those of you who have moved up to browser-based user interfaces is point out a few services that you can integrate or mimic in your own applications. So let's get started.

Google Suggest

URL: http://www.google.com/webhp?complete=1 [2]

As users type data into an input field in the browser, Google Suggest guesses what they are going to type in, in realtime, one letter at a time. For example, if they type "Nasa moon mis," they will see a drop-down window containing:

nasa moon missions
nasa moon rocket
nasa moon video
nasa moon landing hoax
nasa moon walk
nasa moon plans
nasa moon ship
nasa moon names
nasa moon conspiracy
nasa moon earth video

Of course, this is integrated into many browsers, but the Google Suggests feature provides a level of platform independents that you don't get -- it does it on any PC you're using instead of just remembering what you entered on your own PC. I've helped companies employ a Google Suggests-style interface for System i-based hospital software, accounting software, automotive software, and even casino software. It's a great feature that every user appreciates.

So how do you implement something like this on System i with RPG IV as the CGI language of choice?

There are two ways, and both take advantage of Ajax. If you haven't read my articles on Ajax, now would be a good time.

Using Ajax, as the end user types each character into a field in the browser-based application, you retrieve the data or "value" from the input field via JavaScript and an onkeyup() event, then pass the entire field's value to a CGI RPG program, which searches for related terms. To do that, you simply retrieve the value sent by the Ajax request using QtmhGetEnv or perhaps QzhbCgiParse and use that value to issue a SETLL and READ to the file in question. Then compare the value that is read with what was typed in using something like the following:

      searchData = %TrimR(cgiGetVar('ITEMDESC'));  // Get value from cgiparse
      setll (searchData) partsFile;
      if %EOF();
        suggestions += '<count>0</count>';
      else;
      read partsFile;
      dow (NOT %EOF()) and %subst( itemdesc : 1 : %len(searchData)) = searchData;
          suggestions += '<item>' + %trimR(itemdesc) + '<item>';
          count += 1;
          read partsFile;
        enddo;
       endif

Of course, to retrieve the data from the web page's Ajax request, you need to call QzhbCgiParse or have one of the third-party CGI libraries, such as RPG xTools [3] or eRPG SDK [4]. The next step is to do a SETLL on the file to position it to the item description that matches what's been typed in. Of course, you'll need a logical file built over the item description or need to use embedded SQL. Also make sure you use ALTSEQ(QSYSTRNTBL) on the logical file, or the key fields will be case-sensitive.

This simple routine counts the number of matches and passes that number along with the matches themselves as XML nodes back to the web browser. But remember, the "A" in Ajax stands for Asynchronous, so the end user isn't waiting while your RPG IV program is running -- so it's a good idea to return as quickly as possible, or your efforts may be for nothing.

Another technique that some people prefer is to send back JavaScript with the returned values. That JavaScript is then dynamically translated and run by JavaScript in the browser. This is known as JSON (pronounced "Jason"), and some Believe it runs a bit faster than parsing XML with JavaScript, but I don't see any difference.

Google Chart API

So many RPG IV developers have requirements to produce charts and graphs for their end users. Creating a simple browser-based interface would be great, but doing that often requires knowledge of Java. So most people tend to generate Excel files and allow end users to generate their own charts and graphs. Well, I say "No more!"

Today, it's really easy to generate a chart or graph right inside your own web browser using, once again, a cool tool from Google. The Google Chart API is an online API that can be directly embedded in any HTML document. For example, if I wanted to include a comparison of the sales of my "The Modern RPG IV Language" book compared with all other RPG books out there, I would have to generate the following URL string, and then embed it into my HTML page:

http://chart.apis.google.com/chart?chtt=RPG+Book+Sales+(all+Authors)
&amp;chts=000000,12&amp;chs=340x120&amp;chf=bg,s,ffffff
&amp;cht=p3&amp;chd=t:75.00,6.25,18.75
&amp;chl=Modern+RPG+IV|RPG+TnT|All+others&amp;chco=0000ff,990000,cc33ff

To make the chart show up as an image on your web page, you simple need to embed it into an IMG (image) tag, as follows:

<img src="chart.api.google.com goes here">

This causes the results returned from the Google servers to be embedded properly as an image. Here's the results from this particular example:

Pretty cool, huh?

You can find the Google Chart API [5] at this link [6] -- and the tool is capable of showing just about any type of chart you may want, including charting by state (if you have sales to the U.S.). This is a very cool feature that we're going to use on the next RPG World registration page. We'll show how many people have registered for RPG World by state.

Bob Cozzi is popular on the lecture circuit and is author of "RPG TnT: 101 Dynamic Tips 'n Techniques with RPG IV" and host of RPG World Live [7], a live 2-hours video podcast for System i Developers and Managers aired live on Friday's from 10:00 AM to Noon central time (15:00 GMT) on ustream.tv and on RPGWorld.com. Bob also produces RPG World [8], the most popular RPG IV developer conference of the year. Visit RPGWorld.com [9] for details on the dates and location of the 2009 RPG World Conference.