In this example we will create a "chat" application
from scratch then enhance it to sort typed data by lines. The
chat application conveys typed-in lines between two computers.
In an enhancement, lines typed into one computer appear sorted
on the other computer.
Step 1: Create an application with the basic function on one
- Start NetAlive without specifying a file. If your version
of NetAlive has the design tool features enabled, you will see
a new, empty document called "NetAlive1."
- Switch to Intertask view. This view lets you create the application
as a directed graph.
- Toggle display of the palette. NetAlive connects a default
palette to each new document.
- Drag four tasks representing "text widgets" from
the palette and drop on the design space as shown below.
- Connect the tasks with arrows as shown. Tasks have 12 "tie
points" around their perimeter corresponding to the hours
on a clock. Draw an arrow by sweeping the mouse between two tie
- Press the start button.
- Type something into one of the upper widgets and "defocus."
A text widget is said to have focus while you are typing and editing
its text. You signal that you are done through a "defocus"
event. You may defocus by typing the tab key or clicking the mouse
outside text box (typically an OK button). The typed text will
immediately appear in the corresponding lower widget. The screen
should appear as shown below.
Discussion: The text box widget in the palette is of a "multiple
line" variety but there is also a "single line"
variety. A single line text box will defocus when the user types
Step 2: Make the program run on two computers
- Switch to "option settings" view. Some tasks have
user-changeable options. The icon list box on the left contains
the tasks with user-changeable options. User-changeable options
for the selected task appear on the right.
- Set the "computer to run on" (address) fields. The
chat program is to connect to our demonstration hosts "COLOR"
and "MONO" (your hosts will be different). Type "COLOR"
into the first and fourth tasks and "MONO" in the second
- Switch to Intertask view and observe the result below. Each
upper widget and its corresponding lower widget are on different
- Press the start button. The widgets specified for COLOR (your
computer) remain while the other widgets appear on MONO.
- Type something into the upper widget and "defocus."
The typed text should immediately appear on the other computer.
Go to computer MONO and do the same. The screen on COLOR should
appear as shown below.
Discussion: During execution, each NetAlive instance is both
a client and server; they use an extension of HTTP permitting
Step 3: Adjust the GUI's appearance
- Go to computer MONO and switch to "edit document"
view. All four widgets appear with resizing borders.
- Drag the widget's borders to create a pleasing layout.
- Press the start button. Observe that the application on COLOR
switches to the new layout. The screen should appear as shown
Discussion: Just like any IDE, NetAlive lets you edit a program
and then test it. This requires extra technology because NetAlive's
applications span multiple computers. The extra technology must
first figure out which version of the application is newest and
then propagate the newer program across the network. Resizing
the widgets on MONO creates a newer version of the program through
a mechanism involving a document's "dirty bit" and a
version number. A new version arriving across the network supersedes
the old version on COLOR.
Step 4: Add sorting
- Go to computer COLOR and switch to Intertask view.
- Drag the "sort" task from the palette and drop on
the design space. Move one arc and add another so the sort task
is in the flow from COLOR to MONO. The screen should appear as
Discussion: Note that the sort task has a "button" border
whereas the others have a "resizing" border. There are
two types of tasks: Functional tasks appear in the functional
views with a button border and do not appear at all in the document
views. Widget tasks appear in the functional views with an ornamental
resizing border. This is a mnemonic that widgets can be resized,
but they can only be resized in the document views. Widget tasks
initially appear in the document view at the same position and
size as in the functional view, but the user may move and resize
- Press the start button.
- Type "2 1" on successive lines in the type-in area
on COLOR. Observe that "1 2" appear in the type-out
on MONO. The screen on COLOR should appear as shown below.
Automatic GUI Support for Concurrency
The colored borders in the previous figure are a result of Net
Alive!'s automatic generation of visual cues for concurrent actions.
The GUI cannot ignore Internet delays because they are too long.
To accommodate this, the NetAlive system creates visual queues
in the GUI to for the benefit of the user. Specifically, NetAlive
follows the Intertask's graph forwards and backwards from each
task causing delay to a task visible to the user. Tasks found
in the forward direction get a red border indicating 'pending
change' and the backward tasks get a green border indicating 'data
still being processed.' The adjacent figure was "snapped"
immediately after typing "2 1" so the green border is
still visible. The GUI remains fully functional during delay.
Completing the Application
- The application created has the names of computers hard-coded.
This simplified the demonstration, but a production application
would probably want one of the computers to be implicitly "yours"
and let the other be specified by typing the host name. NetAlive
supports these changes through features not in this example: (1)
a blank host name is an alias for "your" computer, and
(2) one task may "address" of another, or control which
computer executes it. Thus a new text box on "your"
computer could input an explicit address for the "other"
- Headings on the text boxes would make the GUI look less Spartan.
Widgets have an option that displays its caption to the upper-left
of the widget in the GUI.
[Up][NetAlive Home Page]