Home

Overview How to run Vital via the web What's new Short tutorial Description Reference manual How to install Vital About the Vital project

Run Vital via the web

Short tutorial on Vital

• Launching the system
• Browsing a Haskell document
• Editing a document
• Styles
• Direct manipulation of data structures using Copy and Paste operations
• Error indications

It is helpful to print a copy of this tutorial.

Launching the system

Either mode of launching should result in the Vital GUI being displayed.

Components of the Vital GUI

• The menu bar
• The tool bar
• The editor panel, containing:
  • The program field
  • The style field
• The viewport (within which a Haskell document may be displayed)
• The status bar.

Browsing a Haskell document

• Click on the Open button to drop down the Open Module dialog box.
• Enter the name Example1 and click the OK button.

The document consists of a comment, an import declaration, declarations for variables ns, bar and oval, and a couple of expressions.

Documents (notionally of unbounded extent) can be dragged relative to the viewport:

• Click on an empty part of the document and drag it sideways or downwards. This will bring into view (and hence force the evaluation of) further parts of the two infinite lists displayed.
• Alternatively, use the mouse wheel to scroll the document (it will scroll either vertically or horizontally, depending on the direction of the last mouse drag.)
• Click on the Origin button to return the document to its origin.

The contents of the viewport may be magnified:

• Select the View => Magnified x2 command
• Select theView => Normal view command to return to normal.

If the system has been installed an is being run as a Java application (rather than having been launched using Java Web Start), then the contents of the viewport may be printed

• Click the Print button.

Imported modules

• Click on the Window command (in the menu bar). This will show a list of the modules that are presently loaded:
  • Example1 -- the present document
  • Styles -- a library module that is explicitly imported by the present document
  • Prelude, Pic, and Style -- library modules implicitly imported by every module
• Select the Prelude module from this list. This is an instance of a library module (ie, it is not a document). It consists of plain text and it does not display the values of declarations.
• Use the Window command again to return to the Example1 document.

Finally, exit the system:

• Use the File => Exit command.

Editing a document

Open the Example1 document again:

• Click the Open button and enter Example1 in the dialog box.

Items and handles

An item can be repositioned by dragging its handle:

• Click the handle of an item and note that:
  • its handle changes to a red square (indicated that it is the current item)
  • the text of the item appears in the Program field of the Edit panel.
• Reposition the item by dragging its handle.

Editing an item

• Click the handle of the declaration for variable ns.
• Change the list expression inside this item from [1 ..] to [1 .. 5].
• Click the Done button.

Try some other changes, such as:

• Change the expression map (* 2) ns to map (: []) ns, or
• Change the colour in the declaration for bar from cyan to green, or
• Change the text of the comment.

An item may be deleted:

• Click the handle of the map expression (for the vertical list)
• Click the Delete button to delete it.

The effect of an editing operation may be undone:

• Click repeatedly on the Undo button to undo (successively) each of the above changes (and so restore the document to its original form).

Inserting new items

• Click in an empty region of the document (if necessary, first drag the document to bring a suitable region into view). The location of the click point will be marked by a small red cross.
• Enter a declaration such as ms = filter even ns in the Program field
• Click the Done button.

Similarly new expressions may be inserted:

• Click in an empty region of the document
• Enter an expression such as sum $ take 5 ns
• Click the Done button.

And similarly new comments may be inserted:

• Click in an empty region of the document
• Enter a new comment comment such as:

      --
      This expression summed the first five
      elements of the sequence of squares
  

  (The two dashes on a line by themselves indicate that the item is a comment.)
• Click the Done button.

Styles

Attaching a style

• Select (by clicking on its handle) the declaration for the variable ns
• Confirm that, at present, there is no style shown in the Style field of the editor panel. (The fact that there is no style is also signalled by the presence of a small magenta square visible alongside the handle of the item when it is selected).
• Enter the style expression list bt5 in the Style field and click the Done button. This will cause the list to be displayed diagrammatically.
• Explore the effects of differing styles by changing the variable bt5 to (in turn) bt1, bt2, bt3 and bt4, and also by changing the function list to listPack or to vList.

A style may also be attached to a comment:

• Select (by clicking on its handle) the comment in the document and note that, initially, it has no attached style.
• Attach the style expression comment3 to it and click the Done button.
• Explore the effects of differing styles by changing the attached style to enlarge comment3 and then to shrink comment3.

Styles are datatypes

• Use the Window => Style command to display the library module containing the collection of primitive style datatypes.

For convenience, a collection of useful styles and style-constructing functions is defined in a module (in effect, a stylesheet) named Styles:

• Use the Window => Styles command to display the library module containing these definitions (including those, such as bt5 and enlarge used above).
• Use the Window => Example1 command to return to displaying the sample document.

Since styles are ordinary Haskell values, they can be displayed and manipulated like any other kind of value:

• Click on an empty region of the document, enter the expression comment3 and click the Done button. Inspection of the value will show that it contains constants defining the colours, point sizes, fonts, etc. used by the comment3 style.
• Immediately below this expression, enter the expression enlarge comment3 and click the Done button. Comparing this value with the above one will show that the effect of applying the enlarge function has been to scale the constants defining the point sizes by a factor of 1.5.

Styles for pictures

• Click on an empty region of the document, enter the expression Rect 20 40 green black and click the Done button. The value of this expression will be displayed in textual form.
• Select this item (by clicking its handle) and then enter, in the Style field of the editor panel, the style expression Picture and click on the Done button. The above value will now be displayed pictorially.

Perspective view

• Click the PV button. This brings up a window that displays a Perspective View of the list map (* 2) ns.
• Enlarge the window to fill the screen and then use the mouse to drag the head of the list to the bottom right hand corner of the screen.
• Use the mouse wheel to scroll backwards or forwards along the list.
• Close this window.

Direct manipulation of data structures

Begin by loading the Example 2 document:

• Use the File => Close all modules command to close all existing modules
• Click the Open button, enter the name Example2 and click the OK button

Changing the values of elements

• The first declaration in the document is for a list ns = [1 .. 5]. Select (by double-clicking within) the field of this list that contains the value 4. This will highlight the boundary of that field.
• Click the Copy button. This will copy the contents of that field (ie, the value 4) to the Vital clipboard.
• Select (by double-clicking within) the field of the list that contains the value 2. This will highlight the boundary of that field.
• Click the Paste button. This will copy the contents of the clipboard into that field and also change the original declaration for ns to reflect its new value.

A value may be copied from one data structure to another:

• Select the field containing the value 5 of the list and click the Copy button.
• Select any field of the triangular array structure, nss, in the document and click the Paste button. Again, this will result in the declaration for that data structure being updated to reflect its new value and this, in turn, will lead to the value of the expression sum (map sum nss) being updated

An expression typed in from the keyboard can be inserted into a data structure:

• Select any field of the triangular array
• Type a numeric expression (for example, 2 ^ 3 into the Program field of the editor panel
• While holding down the Shift key, click the Paste button.

Changing the form of a data structure

• Scroll down the document to find the declaration string = "Hello", and observe that the attached style (yellowList) displays not only the head field of each "cons" cell but also the constructor (an infixed colon) and the tail field (a link to the next cell)
• Select (by double-clicking) the tail field of the fourth cell of the list and copy it to the clipboard (by clicking on the Copy button)
• Select the tail field of the second cell of the list and paste the contents of the clipboard into this field (by clicking on the Paste button)
• Observe that the declaration for the list is updated to reflect its new value.

Tree data structures

• Scroll further down the document to find the declaration for a Tree datatype and two declarations (tree1 and tree2) for values of that type. Observe that trees are formed from two kinds of cell:
  • those with a single field (formed by the Tip constructor) that holds an integer value, and
  • those with two fields (formed by the :+: constructor) that hold links to subtree values.
• Using select/Copy/Paste operations (and respecting the types of the constructors), try:
  • Copying an integer value from one tree tip to another, and
  • Copying a subtree value from one tree node to another.
• Undo the above changes by repeatedly clicking on the Undo button.

Inserting self-referential expressions

• Select the rightmost field of the subtree of tree1
• Enter the expression tree1 into the Program field
• While holding down the Shift key, click the Paste button.

Error indications

Syntactic errors

• Use the File => Close all modules command to close all existing modules
• Create a new document by clicking the New button and entering a suitable document name (such as Errors) and clicking the OK button.
• Type the (incorrect!) declaration ns = [1; 3 ..] into the Program field and click the Done button.
• Observe that the handle of this declaration is shown as a solid black square (indicating the presence of a syntactic error) and the location of the error is indicated by a change in the text colour from blue to red.

Unbound variable errors

• Type the (somewhat contrived!) expression let s = sum ns in 2 + 2 into the Program field and click the Done button
• Since this expression references ns and since that variable is (because of the syntax error) not bound, an error indication (in the form of a pop-up "Error log" window) is given. But this error does not prevent evaluation of the present expression (since, with lazy evaluation, the value of ns is not required).
• Now go back to the first declaration and correct the error:
  • Click on the handle of the declaration for ns (if necessary, first drag the error-log window out of the way)
  • Change the ";" in the list expression to a ",", so that the declaration now reads ns = [1, 3 ..] and click the Done button.
  The declaration now evaluates correctly and the error-log window is cleared.
• Click the OK button to discharge the error-log window.

Domain and type errors

• Type the expression div 5 0 into the Program field and click the Done button
• Type the expression 4 + True into the Program field and click the Done button