XML Feeds
WASH - Simplified Edition
by Scott Elcomb 
A little late but here it is - an introduction to the Web Application SHell - Simplified Edition.
Follow up:
History of Atomic OS and WASH
Some 5 years ago or so I tried to dedicate myself to finding ways for improving the user interfaces in my web applications. I knew precious little about Javascript, DOM, or CSS. JavaScript libraries of the time were lacking and there was just no way to get reliable debugging information from apps at runtime.
So I wrote a quick and dirty console script and called it jsConsole. Little did I know just how infulential this script was to become for me.
Over the next few weeks I toyed around with it, searching for and discovering a range of uses for jsConsole. It quickly became apparent that this was the most flexible piece of code I had ever come up with; in addition to providing debugging support I found I could create applications and test them on the fly.
Around the same time I'd been looking for other angles to tackle my UI issues from. One was an interest in emulating a desktop-like environment for some of my apps. Instead of standard link based menus where users could select screens (or modes) from, I wanted icons that could be dragged around and organized by users, then have the applications remember these positions for future sessions.
Eventually these thoughts started to coalesce and I set about stitching them together. Over two weeks or so, the craziest beast of a web application - WAJAX ("Way AJAX") - was born. It might've been limited to Firefox and horribly inefficient but it was a rather interesting proof-of-concept. At this point, jsConsole turned into WASH.
A while later I decided a rewrite would be really a good idea - to clean up the code, maybe put some documentation together and to apply new techniques that I'd learned since WAJAX was hacked together. This new version was named Atomic OS and has since become my primary development interest.
Since working with these ideas late in 2003, web application development in general and the quality of JavaScript libraries specifically have come a long, long way. As a result Atomic OS will no longer provide GUI widgets unless absolutely necessary. I'll leave that to better-suited libraries like ExtJS or OAT.
Atomic OS will now become very narrow in purpose. It will try to:
- Provide a quality command line console (CLC) and access to a virtual file system (VFS) for web applications and developers
- Emulate FOSS command line tools appropriate to helping programmers write web applications
- Ensure it's source code is clean, legible, and available
- Support as many browsers as possible
- Be easy to include in any web application
Alright, with some of the history now behind us, let's take a closer look at WASH.
WASH
The Web Application SHell is one of two primary components in the Atomic OS library. It provides a command line environment for the client-side of any web application. By itself WASH will likely only be worthwhile for gaining some runtime debugging support. Eventually I'd like it to behave more like BASH from the world of *nix; with VFS support and additional code (for text editors and such), WASH becomes much more powerful.
In this post, we'll look at WASH in isolation. In the future we'll drop the Simplified Edition and build a completely new one; a version that will make use of the other primary Atomic OS component - a Virtual File System.
Practical
Start by downloading the WASH-SE script and saving it to a convenient location.
Next copy the following HTML code into your favorite text editor:
<html>
<head><title>WASH: The Web Application SHell</title>
<script type="text/javascript" src="wash.js"></script>
<style type="text/css">.code,.data {display: none;}</style>
</head>
<body onload="window.Console = new WASH({show:true});">
<div id="myFile" class="code">alert('This is myFile!');</div>
<div id="myOtherFile" class="data">This is myOtherFile!</div>
</body>
</html>
Save the file as wash.html and make sure it's in the same location as your wash script.
Open up your copy of wash.html in your favorite browser and give it a whirl. If you'd rather just fiddle around with an online copy you'll be able to find mine at http://projects.psema4.com/wash-se/wash.html.
Inside the WASH Object
A quick look at the source for WASH-SE shows 6 methods, only 4 of which you should ever need call:
| Method | Sample Usage | Description |
|---|---|---|
| init | N/A | Creates a GUI panel with widgets for the console's I/O. |
| show | Console.show() | Makes the console visible. |
| hide | Console.hide() | Makes the console invisible. |
| Console.print("Hello, World!\n") | Writes a string to the console's output area. | |
| keyHandler | N/A | Checks keypresses when the console's input area has focus. Dispatches user commands to exec when the ENTER key is detected. This method does not need to be called by the programmer; init attaches the keyHandler to the console input area when the object is instantiated. |
| exec | Console.exec("echo Hello, World!") | The heart of WASH: the command line interpreter. |
In looking through the source code, the trickiest area is the keyHandler method - everything else should be fairly easy to follow.
In init we create DOM elements to represent our console and attach a custom property - component - to the console's panel element. This is a reference to the WASH object being instantiated. We do this because otherwise we won't be able to find our WASH object's print or exec methods when we process events like key presses.
WASH-SE leaves much to be desired; command line parsing should be more rigorous for one thing. Splitting arguments on whitespace alone just doesn't cut it for me. Still it's a handy little object and serves as a good starting point for the development of Atomic OS 2.
As always I'm open to comments, questions and general discussion on WASH. I'd absolutely love to hear your thoughts & suggestions.
09/07/08 12:28:21 am,