Chat Application

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 computer

• 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 points.
• 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 "return."

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 and third.
• Switch to Intertask view and observe the result below. Each upper widget and its corresponding lower widget are on different computers.

• 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 program loading.

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

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 shown below.

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

• 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" computer.
• 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]