Gabby, Come Chat With Me

A new project for RPG and web apps

I have big plans for this domain, but for now it will act as a simple chat application that can showcase how you can make use of SenchaTouch and OpenRPGUI. In the future, I hope to integrate it into Facebook using their developer tools, but that’s a story for another article.

If you point your HTML5-capable browser at Chatty Gabby, you’ll be prompted to enter a “Gabby Name” that’s superimposed over a chat history as shown in Figure 1. Enter any name into the text box and select OK. That prompt box will disappear and you’ll see only the chat history screen where you can start entering text and submitting it by selecting the Send button or using the Enter key on your keyboard. That’s it for features for now, but I’ll be adding more in the future that will teach you new concepts surrounding the concept of dynamically processing the query string in a URL.

I should note that currently the only HTML5 capable desktop browsers I know of are Google Chrome and Safari—both available on Windows and Mac. I use the term “capable” loosely because they support enough of the HTML5 specification to allow Chatty Gabby to work correctly, though as HTML5 Test shows, they still fall short on the full HTML5 specification implementation.

How It Works

As is the case with all code I write for articles, I’ve made the full source for Chatty Gabby open source, so let’s take a look at what was required to get this pseudo marketing effort up and running.

First, download the SenchaTouch files. Unzip it to your desktop and upload it to IFS folder /www/chattygabby/htdocs/sencha-touch-beta-0.96. Note you can alternatively add it to an existing Apache instance htdocs folder if you prefer. I’ve started the practice of using the exact folder name specified in the zip file because then I can install multiple versions of the same framework within the htdocs folder. This makes it easier to test new versions as they come out, which is frequently in the world of web app frameworks.

Next, create the graphical screen to be displayed to the user. This involves configuring the SenchaTouch UI components. The best approach to developing an application is to copy something else and build from it. I perused the SenchaTouch Kitchen Sink examples and found that the “Forms” example gave me the best kickstart. Code Sample 1 shows the entire Chatty Gabby home page where the UI is configured using SenchaTouch syntax.

The first two important lines of code are the <link> and <script> tags that are bringing in the ext-touch.css and ext-touch.js files from the IFS. I like to think of these as be similar to doing a /COPY in RPG because it’s basically reaching back to the server and asking it for those resources so it can download them to be included in the page for any and all runtime purposes.

Next in Code Sample 1, we have the Ext.setup() call. The SenchaTouch API documentation says this should be invoked to set up a page for use on a mobile device. We can specify a variety of configuration parameters for Ext.setup(), but the main point of interest is what we specify for the onReady parameter. As you can see, it just has the value of “function() {”. This is what’s called an “anonymous function,” or an in-line function as I’m terming them because it makes more sense to my RPG brain. The alternative would have been to specify “onReady: myFunctionName” and then have myFunctionName appear later on in my code like a normal JavaScript function declaration. Don’t fret if anonymous functions don’t yet make sense—I had to use them for several weeks before the flexibility of the JavaScript language and syntax started sinking in.

Aaron Bartell is Director of IBM i Innovation for Krengel Technology Inc. and an IBM Champion.

comments powered by Disqus



2017 Solutions Edition

A Comprehensive Online Buyer's Guide to Solutions, Services and Education.

New and Improved XML-INTO

Namespace support makes the opcode a viable option

Authenticating on the Web

The finer points of OpenRPGUI, Part 1

The Microphone is Open

Add your voice: Should IBM i include open-source RPG tools?

IBM Systems Magazine Subscribe Box Read Now Link Subscribe Now Link iPad App Google Play Store
IBMi News Sign Up Today! Past News Letters