Sash XB for Linux
Home |  Library  ... Contact
Installing a Weblication |  The Task Manager |  Sample Weblications |  Building a Weblication

Welcome to the SashXB Visual Tour. Here you'll find a bunch of annotated screenshots of SashXB, which should serve as a good introduction to the functionality and versatility of SashXB.

Most screenshots have additional sample code or other technical information, which you can access by clicking on the right arrow. (Opera does not support this feature -- if you are using it, all the additional information should already be displayed.) Try this on the sample below:

Click Here For More Information
Here is more information about this topic. Isn't it interesting?

Sandino Flores Moreno has written an introduction to SashXB in Spanish.


 Sash Definitions

Sash Components
Component a location, extension, or weblication
Weblication a Sash application. Consists of a configuration file, Javascript code, and a user interface. Examples include Checkers, SashFTP, and SashPad.
Location a place where a Sash weblication can run. For instance, Sash Weblications can currently run in a shell, in a Glade-designed UI, in a GNOME panel, or in an embedded Mozilla window.
Extension a library of Sash functions. Each extension exposes something new to the weblication writer, like filesystem or network access.
Some open source technologies on which Sash relies
Mozilla an open source web browser. Sash uses Mozilla's HTML layout engine, JavaScript interpreter, and Component Model.
Glade a drag-and-drop GUI construction tool for creating GTK UIs
GTK a UI widget toolkit
Gnome a desktop environment for Linux


 Installing a Weblication

Each SashXB component -- weblication, extension, or location -- can be installed graphically or textually. The installer will automatically download and install any necessary dependencies that you don't already have. Components can be installed from a local directory or from the web. If the component is a weblication, you'll have the chance to modify its security settings and permissions as you install it.

Technical Details

The weblication writer has a significant amount of control over the graphical installation. He or she can control the how many installation screens will appear, as well as their order. As each screen contains an embedded Mozilla (such as the one shown above), creating one is as easy as making a web page.

A component can depend on other components, the location and minimum necessary version of which the weblication writer can optionally specify. If not, the installer will attempt to find these dependencies using the SashXB Locator Service.

The installer has a number of configuration flags that help facilitate automatic installation. For instance, one flag tells the installer how to handle a previous registry; if that flag is set, the installer would take action automatically rather than popping a dialog.


 The Task Manager

  

The SashXB Task Manager is your primary method of using and organizing SashXB components. It resides in your panel (although if you're running KDE you can invoke it as a normal window); a click exposes the full interface. From the Task Manager you can view all installed weblications, extensions, and locations, and update to the latest version or uninstall each of them. In addition, you can run a weblication or modify its security settings. You can also view all currently running weblications and terminate those that are misbehaving. Finally, you can modify proxy and locator settings.

More Information

You can also run, update, and uninstall components from the command line. For terminating an errant weblication from the command line, you'll still have to use 'kill'.

When a user tries to update from the installer, it first checks the location from which the component was originally installed for a newer version; failing that, it queries the locator service.

Each weblication has a host of security settings. There are about a dozen default ones (such as filesystem and registry access, downloading files from the web, spawning other apps, etc.), and each extension can specify its own custom settings as well.


 Sample Weblications

Once weblications have been installed (along with all of their dependencies), they can be run from the command line or the task manager. From the command line, simply call the runtime (sash-runtime) with the weblication's wdf file as an argument.


Newsbar

This weblication scrolls news headlines from user-specified locations. Clicking on a headline pops up a Mozilla window that displays the article.

Users can customize various display options, including scroll speed and Newsbar length.

News sources can be added easily - just specify an RDF file (which contains headlines and URLs) location and Newsbar will take care of the rest.

  


BluePages Lite

BluePages Lite is a full-featured IBM employee directory search tool (which only works inside IBM). It supports simple and advanced searches, applies user-defined filters, and displays detailed contact information and organizational charts.


Checkers

  

This weblication lets you play checkers with an opponent on the same computer or across the network. You can save and load your game at any time (even with a remote player -- it'll transmit the game data to him or her over the network). The entire download (including graphics and code) is about 10k. It's also cross-platform: there is also a version for Sash for Windows, so you can play against both Windows and Linux opponents.

Sample Code and Technical Info

The Checkers source code is about 400 lines long, with another few hundred lines of HTML to generate the game board. It uses the Jabber (for network support) and Filesystem (for saving games) extensions, and runs on the WindowApp location. The user interface is all done in HTML.

This weblication is truly cross platform: the Linux and Windows versions differ by about 5 lines of code (due to a minor difference in the Jabber Extension APIs -- soon to be fixed). This demonstrates the significant underlying compatibility between SashXB for Linux and Sash for Windows.

Let's take a look at some sample code, in this case how Checkers uses the Jabber extension to send and receive moves across the network. Sending a message with Jabber is quite easy, provided the user has a default Jabber profile.

var jabber = new Sash.Jabber.Session();
jabber.Resource = "checkers";
jabber.Connect();
...
function send_message(body) {
   var message = new Sash.Jabber.Message();
   message.To = opp;
   message.Body = body;
   jabber.SendMessage(message);
}
		

Receiving is simple as well, once you register a callback with the extension:

jabber.OnMessage = on_message;
...
function on_message(session, message) {
    var body = message.Body;
    // code to handle moves, starting a game, receiving a saved game, etc
}
		

Finally, let's see how Checkers saves a game. Since it stores the board as an 8x8 array of integers, it simply writes them out to disk one row at a time.

function save_file() {
	  filename = Sash.Linux.FileDialog(filename); // prompt the user for a filename
	  if (filename == "") return;
	  var file = new Sash.FileSystem.TextStream(filename, Sash.FileSystem.MODE_WRITE);
	  file.WriteLine("Checkers Save File"); // to verify that this is a checkers file on load
	  for (var i = 0 ; i < 8 ; i++) {
	      file.WriteLine("[" + board[i] + "]");
	  }
	  file.WriteLine(currp); // whose turn is it?
	  file.Close();
  	  Sash.WindowApp.MainWindow.StatusText = "Game saved!"; // let the user know the save was successful
}
		


SashFTP

SashFTP is a graphical FTP client. You can queue up multiple files for transfer, transfer entire directories recursively, and perform basic filesystem operations (create, recursive delete, and rename) on each end. You can also bookmark sites and save the default directories for each bookmark. It's also multi-threaded -- notice how the queued file continues to download while the program waits for the user's input on overwriting a file. You can sort local and remote file listings by name, size, or date. And as with any native application, it also supports a variety of keyboard shortcuts. SashFTP is an 11k download.

Sample Code and Technical Info

SashFTP relies on the FTP, FileSystem (for local file manipulation), Registry (for bookmarks), Glade (for the UI framework), and GTK (for specific manipulation of the UI) extensions, and runs on the Console location. It's about 725 lines of source. The UI was designed with the Glade WYSIWYG UI construction tool (see below).

Let's look at two code snippets. First, here's the code for when the user clicks on the remote 'Create' button.

function on_create_remote_clicked() {
	if (check_transfer()) return; // don't perform this operation if a transfer is in progress
	// prompt the user for the remote directory name
	var fname = Sash.Core.UI.PromptForValue("Create remote directory", "Enter the name of the directory you wish to create:", "");
	if (fname == "") return;
	connection.Mkdir(fname);
	populate_and_display_remote(); // redisplay the remote file listings
}
		

Here's the code for logging into the remote server:

var connection = new Sash.FTP.Connection;
connection.Connect(host, port);
connection.Login(username, password);
connection.OnLogin = "on_login";
...
// this function gets called by the FTP extension when the login attempt completes
function on_login(con /* the connection object */, successful) {
	if (successful) {
		con.IsASCII = false; // default to Binary
		con.NotifyInterval_S = 1; // how often to invoke progress callbacks when transferring a file; in this case, each second
		// load the default local and remote directories
		var lp = Sash.Registry.QueryWeblicationValue(connection_name, "local_dir");
		var rp = Sash.Registry.QueryWeblicationValue(connection_name, "remote_dir");
		if (rp != "") con.Cd(rp);
		remote_path = con.CurrentDirectory;
		// display the file listings
		populate_and_display_remote();
		display_local(lp);
		// change the title of the application to reflect the connection
		window.setTitle("SashFTP - " + connection_name);
	} else {
		// failed!
		status("Login failed!\n");
		con.Logout();
	}
}
		


Stock Ticker

Although the stock data is fake, this weblication highlights the PanelApp location. It resides in your GNOME panel (although it can be dragged off to float anywhere on the screen, if you'd like) and scrolls stock information. It also has custom menus, as you can see above.

Sample Code and Technical Info

This sample application, using generated stock data, is about 40 lines of code. There's actually an embedded Mozilla running in the panel; the ticker code is all DHTML and JavaScript. Here's the code that tells the PanelApp location to create custom context menus and a tooltip:

Sash.PanelApp.Tooltip = "Sash Stock Ticker";
Sash.PanelApp.AddStockMenuItem("Exit", Sash.PanelApp.QuitIcon, Exit);
Sash.PanelApp.AddMenuItem("Ticker/Start Ticker", StartTicker);
Sash.PanelApp.AddMenuItem("Ticker/Stop Ticker", StopTicker);
function Exit() { Sash.PanelApp.Quit(); }
function StartTicker() { ticker.start(); }
function StopTicker() { ticker.stop(); }
		

Panel weblications can modify themselves based on the panel size or orientation, or even change the length of the panel, as follows:

Sash.PanelApp.Length = 400; // now we're 400 pixels long
Sash.PanelApp.OnSizeChange = Resize;
Sash.PanelApp.OnOrientationChange = Reorient;
function Reorient(a) { print("My orientation is now " + (a == 0 ? "up" : (a == 1 ? "down" : (a == 2 ? "left" : "right"))))}
function Resize(height) { print("My height is now " + a + " pixels"); }
		


WebBlazer

WebBlazer is a simple web browser. It keeps track of your bookmarks and homepage, and has traditional navigational functionality. Since it uses an embedded Mozilla, the download size is less than 5k. It's very skinnable.

Sample Code and Technical Info

WebBlazer uses a Glade GUI and an embedded Mozilla to make a clean, simple browser that can be easily customized. It's about 100 lines of code. Let's look at how WebBlazer dynamically adds a link to the Bookmarks menu when the user clicks on the "Bookmark" icon.

var statusbar = gladefile.getWidget("statusbar");
var bookmarks = gladefile.getWidget("bookmarks_menu");
var browser = gladefile.getWidget("browser");

function add_bookmark_clicked() {
	var nowurl = browser.getLocation(); // get the current url
	Sash.Registry.SetWeblicationValue("bookmarks", browser.getTitle(), nowurl); // store it for future uses
	var item = new Sash.GTK.GtkMenuItem(browser.getTitle()); // create a new menu item for the bookmark
	item.signalConnect("activate", "on_bookmark_clicked", nowurl); // attach a signal to it so we know when it's been clicked
	item.show();
 	bookmarks.append(item); // add it to the bookmarks menu
	statusbar.setText("Added bookmark " + browser.getTitle()); // let the user know
}

function on_bookmark_clicked(bookmark, page) {
	// note how the callback also gives us the data we stored with signalConnect
	statusbar.setText("Blazing to bookmarked page " + page);
	browser.loadUrl(page);
}
		


SashPad

SashPad is a text editor with most basic functions -- save, load, open last, cut, copy, paste, find, replace, word wrap, and so on. Here, it's editing its own source code. It's about a 5k download.


RegTest

Weblications do not have to be graphical. In this example, the weblication is running in a shell using the Console location. In this way, SashXB can be used as a powerful scripting tool. Note that even text-based weblications can display graphical components (windows, popups, etc.) if desired.


 Security

The user has fine-grained control over a weblication's access to his or her system. If the weblication ever tries to do anything out of line (like access the filesystem or the network), the user has the option to terminate it or allow it to continue (as in the dialog above). Extensions can specify their own custom settings, maintaining the security architecture even as functionality increases.


 Building a Weblication

A weblication has three basic parts: the user interface, the underlying code, and a WDF file. A WDF file contains all the information necessary to install a weblication -- its name, author, data files, default security settings, installation screens, and so on. The user interface can be created using HTML, or with Glade, an intuitive drag-and-drop UI creation tool. For now, you can use your favorite editor for the code, and the WDF Editor for generating a WDF file (below). The code and WDF can also be written with the Weblication Development Environment, a full-featured IDE that is currently under development.


WDF Editor

The WDF Editor automates the WDF creation process for you. It aids you in setting weblication installation information: required dependencies, files, minimum version requirements, installation screens, and so forth. Once you've created a WDF file, your weblication can be installed.


Glade

Glade, shown here editing the GUI for SashPad, is a great drag-and-drop UI creation tool. Its authors have done a fantastic job of handling most GTK and GNOME widgets, and we felt its ease-of-use made it a great fit for SashXB. We've hacked the SashXB runtime so that callbacks set in Glade invoke the appropriate JavaScript function.

Once the weblication is complete, it's ready to be published. Publishing a weblication simply involves making the UI, code, and WDF files available. Users specify which weblication they want, and the Sash installer will take care of installing all necessary Sash components.

Author: AJ Shankar
Last modified: Fri Jan 18 18:00:00 EST 2002
© Copyright 2002, All Rights Reserved. Contact