Quickly Create Graphical Applications with SashXB

by Fred Mora

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.

Quickly Create Graphical Applications with SashXB

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).

SashXB Concepts and Capabilities

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.

Installing SashXB

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& .

Quickly Create Graphical Applications with SashXB

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:

Quickly Create Graphical Applications with SashXB

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.

Using the WDF Editor

SashXB comes with a GUI-based WDF editor. Start it with:

sash-wdf-editor helloworld.wdf&

Now we can do a minimal amount of work to produce an installable weblication. Start with the General tab and fill in the title with "Hello World". All resources need a globally unique identifier (GUID), so click the Generate button to generate a pseudo-random GUID for the weblication itself. In the Type section, make sure the Weblication button is selected. In the Version tab, set the version number to 1.0.0.0. A purist also would set the minimum and recommended version numbers for Sash and Mozilla. Fortunately, we're lazy.

Moving on to the Actions tab, click the New Action button at the bottom of the panel. Next to the Location GUID text box is a Choose button. Click it, and select the WindowApp location. Then, in the Registration panel, enter the text in Listing 2. It's important to note that everything within the htmlfile tag is the file name. Do not add blanks or line breaks!

Listing 2. Registration Text

The Dependencies tab is where we list all the elements that our weblication depends upon. Click the New Dependency button at the bottom of the panel, click the Choose button, and pick the WindowApp location.

The File tab is where we define all the files required by the weblication. Click the Add File button at the bottom of the panel, and choose helloworld.html. In the Install Location panel, leave the default Weblication selected.

Ignore the Install tab and instead open the Platform tab. Select Linux, and click on the Save icon.

Voilà, we have created our first Weblication Definition File. Adventurous souls probably want to see the content of this file. Typing less helloworld.wdf shows this is a text file with a lot of unformatted XML. Do not modify the file!

Installing Our First Weblication

Now, let's install this brand new application with sash-install helloworld.wdf. If everything was done correctly in the WDF editor, you now should see a panel similar to the one in Figure 2. Click on Next, go back to the task manager and select the Installed tab. The title of your newly installed weblication should be listed there.

Quickly Create Graphical Applications with SashXB

Figure 2. Installation Panel for the Hello World Weblication

If there are errors in the WDF, you might receive a message like this:

Installation failed: Locator failure -- Error: Could not find component XXX!

In this case, rerun the editor and check the Actions tab. Highlight the previously defined action, and verify its location and its registration. Also, on the Dependencies tab, check that you selected the WindowApp location. You should have installed it first, as mentioned earlier.

If your installation succeeds, you still can edit helloworld.html and the WDF files. An install will fail, however, with the complaint that this version of the weblication already is installed. You can either increment the version number in the WDF editor's Version tab or force the installer to comply with:

sash-install --force-quiet helloworld.wdf

We can start our weblication in two different ways. In the SashXB task manager, open the Installed tab, select the Hello World application and click on the Run button. Optionally, you can start if from the shell by typing sash-runtime helloworld.wdf&. Figure 3 shows the result.

Quickly Create Graphical Applications with SashXB

Figure 3. The Completed Hello World Weblication

A More Complex Example

For our second example, we write a wrapper around the Folding@Home client (see sidebar). To install the FAH client:

  • Create a foldathome user on your machine (without login rights for security) with the command adduser foldathome.

  • Download the FAH Linux client (see Resources) corresponding to your glibc version. Do a ls /lib/libc*.so to determine the version. If your glibc version is less than 2.3, get the Linux Console client. Otherwise, get the Linux Console B version.

  • Configure the client with FAH3Console-Linux.exe -config. Pick a user name and a team; see the FAH site for a list of teams. I suggest using team number 163 (Linux).

  • The simplest way to start the client automatically is to add the following line at the bottom of the /etc/inittab file (as root):

    fh:35:once:su --command=/home/foldathome/startfah.sh foldathome
    

    The /home/foldathome/startfah.sh file should contain:

    #! /bin/bash
    cd ~/downloads # Or wherever you put the client
    nice -n 19 ./FAH3Console-Linux.exe &
    

Sidebar: The Folding@Home Success Story

The nice command lowers the priority of the client, so it consumes only idle CPU time not needed by any other running program.

Listing 3. Foldwrap Weblication

Listing 3 shows a small weblication that does the trick. The foldwrap weblication is a small wrapper that allows the user to specify the FAH install directory, start the FAH client if necessary and start the Mozilla browser to view the resulting page, MyFolding.html, automatically generated in this directory. That resulting page points to team and user statistics on the FAH web site (see Figure 4).

Quickly Create Graphical Applications with SashXB

Figure 4. The Foldwrap Weblication

The weblication is composed of two files, foldwrap.html and foldwrap.wdf. Foldwrap.html is available above and foldwrap.wdf is below.

Foldwrap.wdf

Conclusion

If you tried these examples, you probably want to see some more complex SashXB code. The SashXB weblications gallery (see Resources) shows working code using more extensions, especially networking.

Resources

Download SashXB

Weblications Gallery

Weblication Documentation

JavaScript Tutorial

JavaScript Reference

Folding@Home

Fred Mora has been a UNIX sysadmin and developer since 1990. He has published and co-authored several books and technical manuals. He is doing his best to lose the rest of his sanity by tinkering with Linux and writing more books, under the indulgent watch of his techie wife. He works at IBM.

Load Disqus comments

Firstwave Cloud