Visual Programming Languages ICS 539 Prograph

1
Visual Programming LanguagesICS 539Prograph

• ICS Department
• KFUPM
• Sept. 1, 2007

2
Examples of VPLs

• Prograph (1989) Dataflow programming
• DataLab (1990) Programming by example
• Form/3 (1994) Form-based programming
• Clarity (2001) Functional programming

3
Prograph

• The Prograph language is an iconic language.
• Program is drawings.
• Prograph interpreter and compiler execute those
  drawings.
• Prograph is object-oriented
• Prograph supports dataflow specification of
  program execution

4
Simple program

• A simple Prograph code which sorts, possibly in
  parallel, three database indices and updates the
  database.

5
Paragraphs icons

• Prograph uses a set of icons
• classes are represented by hexagons,
• data elements by triangles,
• pieces of code by rectangles with a small picture
  of data flow code inside, and
• inheritance by lines or downward pointing arrows.

6
(No Transcript)
7
More Icons

• The representations can then be combined and used
  in a variety of language elements.
• For example, initialization methods - which are
  associated with an individual class - are
  depicted as hexagonally shaped icons with a small
  picture of data flow code inside.

8
Icon (Cont.)

• Triangles represent instance variables in a
  class Data Window to show that theyre data.
• Hexagons drawn with edges and interiors similar
  to the instance variable triangles represent
  class variables. This associates them with the
  class as a whole while also associating them with
  data.
• Next Figure shows three more complex
  representations initialization methods ,
  instance variables, and class variables.

9
Icon (Cont.)
10
Prograph

• It is an is object-oriented language.
• Class-based,
• Single inheritance (a subclass can only inherit
  from one parent),
• Dynamic typing

11
Cont.

• Polymorphism allows each object to respond to a
  method call with its own method appropriate to
  its class.
• Binding of a polymorphic operation to a method in
  a particular class happens at run-time, and
  depends upon the class of the object.
• The syntax for this message send is one of the
  more unusual aspects of Prographs syntax.
• The concept of message sending per se is not
  used in Prograph.

12
Annotation

• Annotation on the name of an operation is used
  for Polymorphism. There are four cases
• No annotation means that the operation is not
  polymorphic.
• / denotes that the operation is polymorphic and
  is to be resolved by method lookup starting with
  the class of the object flowing into the
  operation on its first input

13
Annotation (Cont.)

• 3. // denotes that the operation is polymorphic
  and is to be resolved by method lookup starting
  with the class in which this method is defined.
• // plus super annotation means that the
  operation is polymorphic and resolves by method
  lookup starting with the superclass of the class
  in which this method is defined.
• In Prograph there is no SELF construct (or a
  this construct, to use the C terminology).

14

• Prograph has an almost completely iconic syntax,
  and this iconic syntax is the only representation
  of Prograph code.
• Next Figure shows a small code fragment typical
  of the Prograph language.
• There is no textual equivalent of a piece of a
  Prograph program - the Prograph interpreter and
  compiler translate directly from this graphical
  syntax into code.

15
Example
16
Icons

• Next Figure shows most of the lexicon of the
  language (icons).
• The inputs and outputs to an operation are
  specified by small circles at the top and bottom,
  respectively, of the icons.
• The number of inputs and outputs - the
  operations arity - is enforced only at run-time.
  
• In addition, there are a variety of annotations
  that can be applied to the inputs and outputs, or
  to the operation as a whole to implement looping
  or control flow.

17
(No Transcript)
18
Spaghetti Code

• Visual languages like Prograph sometimes suffer
  from the spaghetti code problem there are so
  many lines running all over that the code for any
  meaningful piece of work actually ends up looking
  like spaghetti.
• Prograph deals with this issue by enabling the
  programmer to iconify any portion of any piece
  of code at any time during the development
  process.

19
Local

• This iconified code is called a local.
• Effectively, locals are nested pieces of code.
• There is no limit to the level of nesting
  possible with locals.
• In addition, locals can be named and this naming,
  if done well, can provide a useful documentation
  for the code.

20
Example

• Next Figure is a code to build a dialog box
  containing a scrolling list of the installed
  fonts without the use of Prograph locals to
  factor the code.

21
(No Transcript)
22
Same Example

• Next Figure is the same code with the use of
  Prograph locals to factor the code.

23
(No Transcript)
24
Local (Cont.)

• Note that long names, often containing
  punctuation or other special characters can be
  used for the names of locals.
• The proper use of locals can dramatically improve
  the comprehensibility of a piece of code.
• The one negative aspect of their use is the
  so-called rat hole phenomena - every piece of
  code in its own rat hole. This can sometimes make
  finding code difficult.

25
Syntax

• Three of the most interesting aspects of the
  Prograph syntax are
• list annotation,
• injects, and
• control annotation.

26
List Annotation

• Any elementary operation can be made to loop by
  list annotating any of its inputs.
• When this is done, the operation is invoked
  multiple times - one time for each element of the
  list that is passed on this input.
• Thus, list annotation on an input causes the
  compiler to construct a loop for the programmer.
  Since this annotation can be made on a local as
  well as a primitive operation, this looping
  construct is quite powerful.

27
List Annotation (Cont.)

• In addition, list annotation can be done on a
  output.
• On an output terminal, list annotation causes the
  system to put together all the outputs at this
  terminal for every iteration of the operation and
  to pass as the final output of the terminal
  this collection of results as an output list.

28
List Annotation (Cont.)

• List annotation, then, enables the programmer to
  easily make an operation into a loop that either
  breaks down a list into its component elements
  and runs that operation on the elements, or to
  builds up a list from the multiple executions of
  an operation.
• An individual operation can have any number of
  its inputs or outputs with list annotations.

29
List Annotation (Cont.)

• Next Figure shows several examples of list
  annotation, an efficient mechanism for iterating
  over a list.
• The operation will automatically be called
  repeatedly for each element of a list, or its
  outputs will be packaged together into a list.

30
(No Transcript)
31
(No Transcript)
32
(No Transcript)
33
Inject

• Inject lets you pass a name at run-time for an
  input which expects a function.
• This is similar to Smalltalks perform, procedure
  variables in Pascal or function pointers in C.
• Suppose, for example, that you want to implement
  a function FooMe that takes two arguments a list
  of objects, and a reference to a method to be
  applied to each of those objects.

34

• Next Figure shows a Prograph implementation of
  FooMe.
• Note that just the name - as a string - of the
  method to be applied to each object is passed to
  FooMe.
• This string is turned into a method invocation by
  the inject.

35
(No Transcript)
36
Inject (Cont.)

• The Prograph representation of inject - a
  nameless operation with one terminal descending
  into the operations icon - is a particularly
  well-designed graphic representation for this
  programming concept.
• When properly used, inject can result in
  extremely powerful and compact Prograph
  implementations of complex functions.
• However, when used improperly, it can result in
  code that is very difficult to read or debug,
  like the computed GOTO of FORTRAN.

37
Control Flow

• Control flow is a combination of annotations on
  operations and a case structure.
• A Prograph method can consist of a number of
  mutually exclusive cases. These cases are
  somewhat similar to the cases in a Pascal CASE
  statement or a C switch expression.
• The main difference is that unlike Pascal or C,
  the code to determine which case will be executed
  is inside the case, not outside it.

38
Example

• Suppose that we want to implement a small
  function that has one integer input, and
• if that input is between 1 and 10, the value of
  the function is computed one way
• if it is between 11 and 100, another way, and
• if it is anything else, yet a third way.
• In Pascal-like pseudo-code, this function would
  look something like this

39

• Function Foo( i Integer) Integer
• Begin
• Case i of
• 1..10 Foo Calculation_A(i)
• 11..100 Foo Calculation_B(i)
• OtherwiseFoo Calculation_C(i)
• End Case
• End Foo

40
Control Flow (Cont.)

• The implementation of Foo in Prograph would also
  involve three cases, as shown in the next Figure.
  
• The control annotations are the small boxes on
  the right of the match primitives at the top of
  the first two cases. (Note that the window titles
  show the total number of cases in a method, and
  which case this window is, as in 23 the second
  of three cases.)

41
(No Transcript)
42
Control Flow (Cont.)

• In this simple example, the same annotation - a
  check mark in an otherwise empty rectangle - is
  used.
• The semantics of this annotation are If this
  operation succeeds, then go to the next case.
  The check mark is the iconic representation of
  success, and the empty rectangle represents the
  go to the next case notion. If the check mark
  were replaced by an x, then the semantics would
  have been If this operation fails, then go to
  the next case.

43
Control Flow (Cont.)

• In addition to the otherwise empty rectangle,
  there are four other possibilities, and the five
  different semantics of control annotations are
  shown together in the next Figure.
• It is a run-time error and a compile-time warning
  to have a next-case control annotation in a
  location where it cannot execute, for example, in
  the last case of a method.

44
(No Transcript)
45
Prograph and OOP

• Prograph represents the following OOP concepts
  visually
• Classes
• Methods
• Parallelsim
• Sequencing
• Iteration
• Conditional

46
Classes

• The Classes window contains a visual
  representation of the current forest of classes.
• There are two types of classes in Prograph
  system classes and user classes.
• System classes are distinguished from user
  classes by a double bar at the bottom of the
  class icon.

47
(No Transcript)
48

• A class may have class attributes which are
  invariant for all instances of the class and
  instance attributes which may have distinct
  values for individual instances.
• A horizontal line separates class from instance
  attributes in an attribute window.
• An attribute inherited from an ancestor is
  indicated by an arrowhead in the attribute's
  icon.
• Each attribute has a value displayed on top.
• Next Figure shows class CAR with one class
  attribute and three instance attributes.

49
(No Transcript)
50
Methods

• A Prograph method is either a class method or a
  universal method belonging to no class.
• Universal methods include built-in Prograph
  primitives.
• Class methods are represented as named icons in a
  Methods window for the class
• User-defined universal methods are represented by
  icons in the Universal window.

51
Cases

• A method consists of a sequence of cases, where
  each case is a dataflow structure, consisting of
  data inputs, data outputs, a set of operations
  and connections between them.
• The definition of a case is illustrated
  graphically within a window for the case.
• Input into the case is indicated by roots on an
  input bar at the top, and output by terminals on
  a bottom output bar.

52
Operations
53
Operation and Constants

• The input operation of a method's case copies
  data values from the terminals of the calling
  operation to the corresponding roots of the input
  bar. Similarly for the output operation.
• The constant operation is labelled by a constant
  which is produced as the value of its output.

54
Persistent Object

• Prograph has a mechanism for the permanent
  storage of data in objects called persistents.
• A persistent may contain data of any type and is
  retained during and between executions of
  Prograph methods.
• The value of a persistent is accessed within a
  method through the persistent operation which is
  represented by an oval icon labelled by the name
  of the persistent.

55
Instance and Local

• A new instance of a class is generated by the
  instance operation which is labelled by the name
  of the class and outputs the new instance.
• Attribute values of a class instance are accessed
  through the get attribute and set attribute
  operations.
• Finally, a local operation is a call to an inner,
  locally defined method which cannot be called by
  other operations.

56
Methods Window
57
Execution of a method

• Execution of a Prograph method begins with a call
  to the method and the passing of input data to
  the input roots.
• The first case in the method's case sequence then
  begins execution. An operation is not called
  within an executing case until it receives all
  its input data.
• Output from a case is available only when the
  case's execution terminates.
• Normally, a case does not terminate until all
  operations within the case have executed.

58
Comment

• A comment may be attached to any icon or program
  element and serves only to provide additional
  information for the viewer.
• Thus the comment "Index" attached to the input
  root for the first case of method Index/Sort in
  Figure 3.3(a) reinforces the interpretation that
  the input to Index/Sort should be an instance of
  class Index.

59
Iteration and parallelism

• Iteration and parallelism are common programming
  paradigms and Prograph provides a rich set of
  iteration and parallelism mechanisms through
  multiplexes.
• Again, multiplexes in Prograph are represented
  pictorially.
• Figure 3.6 shows an example of iteration

60
(No Transcript)
61
Parallesim

• Generally, operations between which there are no
  input/output dependencies are considered to
  execute in parallel.
• Thus, for example, there is parallelism in the
  two recursive calls to Quicksort within case 2 of
  method Quicksort.

62
(No Transcript)
63
Sequence

• When it is necessary to specify that one
  operation must execute before another the user
  can sequence operations with the synchro
  mechanism.
• Figure 3.6b illustrates sequencing of the
  importing of review data from an input file,
  followed by the closing of the file.

64
(No Transcript)
65
Environment

• The Prograph environment has three main
  components, the editor, interpreter, and
  application builder.
• The editor is used for program design and
  construction,
• The interpreter executes a program and provides
  debugging facilities, and
• The application builder simplifies the task of
  constructing a graphical user interface for a
  program.

66
Editor

• The editor is used to define any data attached to
  Prograph elements.
• Each major component of a program is displayed
  and edited within an appropriate edit window.
• There are edit windows for classes, attributes,
  persistents, methods, cases and instances

67
Editor (Cont.)

• The user interacts with the editor through mouse
  and keyboard actions
• For example, the different cases of a method can
  be accessed by clicking on boxes on the right
  side of the title bar of a window for one of the
  method's cases, or from the Cases Pane, as shown
  in Figure 3.8.

68
Editor (Cont.)

• Manipulation of cases in the Case Pane is
  consistent with the general mouse operations of
  the Prograph environment.
• For example, a new case between the current cases
  1 and 2 of Quicksort's case sequence is added by
  clicking in the background of the Case Pane
  between the icons for cases 1 and 2.

69
(No Transcript)
70
Editor (Cont.)

• The editor provides mechanisms to help prevent
  the creation of syntactic and logical errors.
• For example, the user is not permitted to make
  incorrect connections, such as a root to a root.
• In order to assist the programmer with arities,
  the editor has features to ensure that newly
  created or modified methods, cases and operations
  have arities which match their corresponding
  Prograph components.

71
Interpreter

• The interpreter contains many features which
  facilitate the edit-execute cycle of program
  development and debugging.
• When an error in an executing program is detected
  by the interpreter, it immediately localises the
  error, provides access to the editor for
  modification of the program's components,
  including active data values, and may
  intelligently suggest a correction of the error.
• The programmer can use other debugging facilities
  of the interpreter to eliminate logical program
  errors.

72
Interpreter (Cont.)

• A program execution will be suspended when the
  interpreter detects an error.
• For example, a case may call a primitive
  operation with input that is outside the
  acceptable range for the primitive.
• If such an error occurs, the interpreter suspends
  execution at the operation call, opens an
  execution window for the case, and presents an
  error message.

73
Interpreter (Cont.)

• An execution window for a case illustrates the
  current execution state of the case and is based
  on its edit window.
• Operations which have already executed are shown
  normally, the suspended operation call is
  flashing, operations which have not yet executed
  are dimmed, and the background is dotted to
  distinguish this window from the case's edit
  window.

74
Interpreter (Cont.)

• Note that there may be several occurrences of a
  case on the execution stack, each with an
  associated execution window.
• Figure 3.9a shows an execution window for case 1
  of method Book/ltlt gtgt, with execution suspended at
  the call to primitive attach-r

75
(No Transcript)
76
Interpreter (Cont.)

• The programmer can set breakpoints on operations
  so that the interpreter will suspend execution of
  the case just before calling an operation with a
  breakpoint.
• When a case is suspended because an operation
  breakpoint is reached by the interpreter, the
  system opens an execution window in which the
  operation with the breakpoint is highlighted.

77
Interpreter (Cont.)

• The Prograph interpreter provides a powerful tool
  for the top down development of a program.
• During top down refinement of a program,
  operations may be included for which there are no
  corresponding method definition.

78

• When attempting to execute such an operation, the
  interpreter generates a message indicating that
  the corresponding method does not exist and
  asking if it should be created.
• Given a positive response, the interpreter
  creates the required new method with arity the
  same as that of the calling operation, and begins
  to execute it in stepwise manner, opening an
  execution window on its first case.

79
Stack of active calls

• A stack window illustrates the current stack of
  active calls, each represented by a method icon.
• As the interpreter adds calls, the stack in this
  window grows from top to bottom
• An execute window for any case in the stack
  window can be opened by double clicking on the
  case's icon.
• Figure 3.9b illustrates the stack window during a
  sort of the index entries.

80
(No Transcript)
81
Interpreter (Cont.)

• The programmer may also trace execution through
  dynamic views of program execution.
• In one such view, an execution window of a case
  is used to highlight the operation icons and
  segments of the case during execution.
• If the stack window is open during program
  execution, the window is updated dynamically as
  the stack of calls to user methods changes.

82
Application Builder

• Prograph's application builder is a UIMS(User
  Interface Management System) .
• Using graphical editors, the programmer
  constructs menu, window, and window item objects
  which form the graphical interface of an
  application.

83

• The application builder has editors for the
  different system classes.
• Figure 3.10 illustrates the application editor,
  with which the programmer can, among other
  things, name the application, add windows and
  menus to the application, and specify a method to
  call when the user selects the "About" menu
  command while the running application is running.

84
(No Transcript)
85

• Each application window can be edited via the
  window editor with which the user specifies a
  window's size, type, and run-time behavior.
• The user can add items such as buttons, lists and
  text to a window and determine the static and
  run-time behavior of these items.
• Figure 3.11 illustrates the edit window for a
  window titled "Index" and the dialog that opens
  when the programmer double-clicks the "Go to"
  button.
• Here, the programmer has specified that a method
  Go To is to be called when, at run-time, the user
  clicks the "Go To" button.

86
(No Transcript)
87

• The menu editor for a menu is a dialog which
  depicts the menu as it will appear when the user
  pulls it down.
• The programmer can add and delete menu items,
  specify their appearance, and give the names of a
  methods to call at run-time when the user selects
  menu items