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.
comments powered by