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:

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.

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.

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.

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);
}
		

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
}
		

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.

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
}
		

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.

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(); }
		

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.

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.