Quickly Create Graphical Applications with SashXB

SashXB is an open-source programming environment developed by IBM. It is the Linux rewrite of the Windows-based Sash language and uses JavaScript as a programming language. SashXB allows coders to create GUIs as HTML pages rendered with Mozilla. A SashXB weblication can execute locally or over the Web, provided you have installed the requisite runtime. It allows you to create a GUI manually or by using Glade, the GNOME user interface builder. SashXB's interpreted nature allows you to quickly produce working prototypes.

Remote Control Mozilla with Sash!

Copyright (C) 2003 David Bosco

Millions of people who don't call themselves coders have a passing knowledge of JavaScript and HTML. SashXB allows these people to create applications without having to learn yet another programming language. JavaScript has a Java-like syntax, but JavaScript is not Java and is much easier to learn (see Resources).

You can't write ultra-complex code or fast embedded applications with SashXB. SashXB is a good choice, however, for any small networked graphical programming project.

Let's start with some SashXB terminology. A location is the place where a weblication runs. It can be a Mozilla window (windowapp location) or the GNOME panel (panelapp location). It also can be a GTK user interface (UI) designed with Glade or simply a shell command line (console location). You can write weblications that run from a shell command line, and do not require a network.

The SashXB environment comes with extensions, which are libraries that give you access to new APIs. SashXB extensions are written in JavaScript and C++, but you can use them as any other JavaScript function. The extensions are what allow your SashXB code to go beyond what is authorized by regular JavaScript code. Examples of extensions include Core and Linux, which always are loaded and provide native functionalities, as well as mysql (for querying MySQL databases), glade to run Glade-designed GUIs, ftp to connect to FTP servers and more (see sidebar).

Sidebar: SashXB Extensions

SashXB actually uses the JavaScript engine of Mozilla and provides it with some extra APIs. Thus, you can use advanced features of JavaScript, such as regular expressions.

SashXB requires Mozilla 1.1 or better. Unless your distribution is old enough to drink, you should have Mozilla either preinstalled or available for download. The next step is to download and install either the Sash XB package or the source (see Resources).

Be aware that the SashXB package is quite picky about its dependencies. On my machine (running Mandrake 9.0), the SashXB RPM complained that it needed gdome2, libgdome.so, libpanel_applet.so and mozilla-nspr. In such a case, rpmfind.net is your best friend; using it, I downloaded the mozilla-nspr-1.1, gdome2 and libpanel_applet0 RPMs. The mozilla-nspr package conflicted with files already present on my machine, so I forced the installation of SashXB with the --nodeps option:

rpm -ivh gdome2-0.7.2-1.i386.rpm \
  libpanel_applet0-1.4.1-1.ximian.5.i586.rpm
rpm -ivh --nodeps sashxb-1.1-2.i386.rpm

Now it was time to install and run a few sample weblications, starting with the SashFTP weblication, a graphical FTP client. Simply type sash-install sashftp to download and install the required code, as well as the required extensions. SashFTP then automatically installs the following extensions: FileSystem, Glade, GTK, Registry and FTP. The Core and Linux extensions are installed by default. You can download the source of the application, sashftp.js, from the weblications gallery Web page (see Resources).

Now start the SashXB control panel with sash-task-manager&. If you are running a GNOME desktop, the Sash icon appears in the GNOME Panel (see Figure 1). Otherwise, you will probably get a error something like:

** WARNING **: Cannot activate a panel object

In this case, run the task manager as a regular application with sash-task-manager --no-panel& .

Figure 1. The SashXB Task Manager

The installed extensions are listed in the Extensions panel of the task manager. Notice that only the Console location currently is installed; we need the others. Download and install the WindowApp and PanelApp locations by typing:

sash-install windowapp
sash-install panelapp

Of course, you need an Internet connection to perform the automatic download.

The sash-install commands has a few useful options:

A "Hello, world" Weblication

A weblication is composed of several files. The best place to start is the Weblication Definition File (WDF), which lists the resources files (e.g., graphics and sounds), the security definitions and the dependencies (extensions it requires) of the weblication. Moreover, if your weblication includes a GUI, chances are it defines actions, which are methods called upon menu selection, button click and so on. These actions should be declared in the WDF. The SashXB environment comprises a graphical WDF editor for all these tasks.

When you write a weblication, you have to decide the location from which it runs. If you run in the console or panel locations, write your code as a SashXB source file, which looks a lot like JavaScript, and drive your UI (if any). If you decide to use the windowapp location, the code is an HTML file in which you embed SashXB code within <script> tags, and you run the application with Mozilla.

Let's write a simple "Hello World" weblication containing a simple text input box with a button. Listing 1 shows the whole weblication, an HTML file that can be created with any text editor.

Listing 1. HTML Weblication

The head of the file contains a JavaScript application. The logical point to start reading this file, however, is the body (lines 30-37). Line 33 defines an input text box named box. Line 35 defines an OK button that triggers an action named showGreeting. That's where SashXB intervenes.

Lines 4-5 give a name to the weblication window and make it visible, using the SashXB WindowApp API. Line 9 makes the status line (bottom line) of the window visible. Then (lines 10-11), we demonstrate the string concatenation operator + and the Core extension by writing the OS type into the window status line.

Notice that we're repeating a lot of typing on lines 9 and 10. We could have avoided this by using the with construct of JavaScript. These lines could be rewritten as:

with (Sash.WindowApp.MainWindow) {
  StatusVisible = true;
  StatusText = "Running on " + Sash.Core.Platform.OS;
}

Line 14 is where we define the showGreeting function, the one invoked by clicking the OK button. The definition carries a string argument, str, that is not used here. In JavaScript, the variables are weakly typed, so it's safe to consider them as strings. If a string contains only digits then you can do math on the variable.

Lines 16-17 define two variables: box, which is used to identify the box created on line 33, and name, which simply is a string. On lines 18-20, we check to see if the user has typed something in the box before pressing the button. If so, the default value of name is replaced by the entered string, given by box.value.

Now it's time to display a pop-up message box. Lines 21-22 define two variables, the message and title of the box. Lines 24-25 create the box by using a method in the default Core extension. The type of dialog is set by an identifier also provided in Core. Here, Sash.Core.UI.MB_OK is a regular message box with a single button.

HelloWorld.html

HelloWorld.wdf

Of course, you can do much more than this with JavaScript and SashXB. You can find pointers to a JavaScript tutorial and to the SashXB documentation in the Resources section of this article.

We're not completely done yet; the HTML file isn't all we need. As mentioned earlier, a weblication needs all its characteristics and dependencies to be defined in a WDF file. So that's what we create now.