A First WindowApp Weblication

The easiest way to start may be to write a simple weblication. Once you've done this, the rest of the guide will make more sense, and you'll only need to look at the parts that are relevant to your particular weblication needs. This will step through the process quickly while the rest of the guide will give more detailed explanations of what's actually happening.

Our first weblication will just allow a user to enter a name and click on a button. It will present some sort of greeting to the user.

Creating a GUI and Writing Sash Code

This weblication will have an HTML-based GUI, we pick the the WindowApp (Window Application) location. This location provides a window on the desktop, in which is embedded a Mozilla browser; it is from within this browser that you design your UI and place your code.

We need some sort of text field for the user to type in a name, some sort of button for the user to click, and an area for the response to be displayed. WindowApps can display a status area, so we'll use that to display the response.

Create a new directory for the weblication file.

Using your favorite editor, edit a file called hello2.html (or something to that effect) and place in it the following code:

<html>
<head><script language="JavaScript">
// Configure the WindowApp main window.
Sash.WindowApp.MainWindow.TitleText = "Hello";
Sash.WindowApp.MainWindow.Visible = true;

// Show the status bar.
Sash.WindowApp.MainWindow.StatusVisible = true;

// Function for displaying a status message.
function showstatus(a) {
    Sash.WindowApp.MainWindow.StatusText = a;
}

// Function for clicking a button.
function printGreeting(a) {
    
    // Get the text out of the box element.
    var a = document.getElementById('box');
    var name = "world";
    if (a.value != ""){
        name = a.value;
    }
    showstatus("Hello, " + name);
}
</script>
</head>

In the body, add an input box called 'box' and a 'submit' button:


	  <body>
// The actual form.
<input size=30 id=box>
<input type="submit" value="OK" onclick="printGreeting()">
</body>
</html>

If we render this with a web browser, it looks like a simple form, but it doesn't do anything.

Creating a new WDF file

Use the WDF editor to create a new WDF file for your weblication:

> sash-wdf-editor hello2.wdf

This guide contains additional information on creating WDF files.

General

Fill in the Title/Abstract/Author information.

Every weblication must have its own GUID, so generate a new one by clicking 'Generate'.

Make sure that "weblication" is selected.

Version

Here you can set your weblication's version. It is important to do this as you release new versions of your weblication, because the runtime will only attempt to update a weblication if it has a higher version number than the one currently installed. For now, set it to 1.0.0.0.

Actions

Remember, your Hello World program is simply an action that resides in a weblication. So w must add it to the WDF file as such. Click 'New Action'. A new entry is added and highlighted. Click 'Choose' and pick the WinApp location. There is a registration area (with registration tags). Inside the tags, add the following so that the window reads as follows:


	  <registration>
    <htmlfile>hello2.html</htmlfile>
    <width>350</width>
    <height>75</height>
</registration>

The registration contains information about the main source file and the size of the window to run the weblication in. Be sure not to include newlines between the tags. For example,


	  <htmlfile>
hello2.html
</htmlfile>

will not work because the newlines surrounding 'hello2.html' will be included in the filename.

Dependencies

Since your Hello World action is using WindowApp, you need to specify it as a dependency. Click 'New Dependency'. A new entry is added and highlighted. Click 'Choose' and pick the WindowApp location.

Files

Click 'New File'. A new entry is added and highlighted. Click 'Choose' and pick 'hello2.html'. The installer needs to know to copy your HTML file.

Install

Ignore this for now.

Platforms

Select 'Linux'.

Click 'Save'.

Your first weblication is complete!

Now run sash-install on the wdf file ('sash-install hello2.wdf'). You can optionally use the '-f' flag with sash-install, which forces the install in text mode, overwriting previous installations of a weblication. (This makes testing a lot easier.)

Call the runtime on the wdf file ('sash-runtime hello2.wdf') to run the weblication. Once you've verified that your weblication works, feel free to tinker around with the design to get a feel for the WindowApp location.

Back | Next

Wing Yung

Last modified: Thu Apr 4 15:15:43 EST 2002