1. 1 Muhammed Al-MulhemVisual Languages Visual Programming Languages ICS 539 Prograph ICS Department KFUPM Sept. 1, 2007

2. 2 Muhammed Al-MulhemVisual Languages Examples of VPLs Prograph (1989) – Dataflow programming DataLab (1990) – Programming by example Form/3 (1994) – Form-based programming Clarity (2001) – Functional programming

3. 3 Muhammed Al-MulhemVisual Languages 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. 4 Muhammed Al-MulhemVisual Languages Simple program A simple Prograph code which sorts, possibly in parallel, three database indices and updates the database.

5. 5 Muhammed Al-MulhemVisual Languages Paragraph’s 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. 6 Muhammed Al-MulhemVisual Languages

7. 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. 8 Muhammed Al-MulhemVisual Languages Icon (Cont.) Triangles represent instance variables in a class’ Data Window to show that they’re 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. 9 Muhammed Al-MulhemVisual Languages Icon (Cont.)

10. 10 Muhammed Al-MulhemVisual Languages Prograph It is an is object-oriented language. –Class-based, –Single inheritance (a subclass can only inherit from one parent), –Dynamic typing

11. 11 Muhammed Al-MulhemVisual Languages 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 Prograph’s syntax. The concept of ‘message sending’ per se is not used in Prograph.

12. 12 Muhammed Al-MulhemVisual Languages Annotation Annotation on the name of an operation is used for Polymorphism. There are four cases: 1.No annotation means that the operation is not polymorphic. 2.‘/’ 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. 13 Muhammed Al-MulhemVisual Languages 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. 4.‘//’ 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. 14 Muhammed Al-MulhemVisual Languages 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. 15 Muhammed Al-MulhemVisual Languages Example

16. 16 Muhammed Al-MulhemVisual Languages 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 operation’s 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. 17 Muhammed Al-MulhemVisual Languages

18. 18 Muhammed Al-MulhemVisual Languages 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. 19 Muhammed Al-MulhemVisual Languages 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. 20 Muhammed Al-MulhemVisual Languages 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. 21 Muhammed Al-MulhemVisual Languages

22. 22 Muhammed Al-MulhemVisual Languages Same Example Next Figure is the same code with the use of Prograph locals to factor the code.

23. 23 Muhammed Al-MulhemVisual Languages

24. 24 Muhammed Al-MulhemVisual Languages 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. 25 Muhammed Al-MulhemVisual Languages Syntax Three of the most interesting aspects of the Prograph syntax are: –list annotation, –injects, and –control annotation.

26. 26 Muhammed Al-MulhemVisual Languages 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. 27 Muhammed Al-MulhemVisual Languages 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. 28 Muhammed Al-MulhemVisual Languages 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. 29 Muhammed Al-MulhemVisual Languages 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. 30 Muhammed Al-MulhemVisual Languages

31. 31 Muhammed Al-MulhemVisual Languages

32. 32 Muhammed Al-MulhemVisual Languages

33. 33 Muhammed Al-MulhemVisual Languages Inject Inject lets you pass a name at run-time for an input which expects a function. This is similar to Smalltalk’s 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. 34 Muhammed Al-MulhemVisual Languages 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. 35 Muhammed Al-MulhemVisual Languages

36. 36 Muhammed Al-MulhemVisual Languages Inject (Cont.) The Prograph representation of inject - a nameless operation with one terminal descending into the operation’s 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. 37 Muhammed Al-MulhemVisual Languages 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. 38 Muhammed Al-MulhemVisual Languages 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. 39 Muhammed Al-MulhemVisual Languages 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. 40 Muhammed Al-MulhemVisual Languages 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 “2:3” the second of three cases.)

41. 41 Muhammed Al-MulhemVisual Languages

42. 42 Muhammed Al-MulhemVisual Languages 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. 43 Muhammed Al-MulhemVisual Languages 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. 44 Muhammed Al-MulhemVisual Languages

45. 45 Muhammed Al-MulhemVisual Languages Prograph and OOP Prograph represents the following OOP concepts visually: 1.Classes 2.Methods 3.Parallelsim 4.Sequencing 5.Iteration 6.Conditional

46. 46 Muhammed Al-MulhemVisual Languages 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. 47 Muhammed Al-MulhemVisual Languages

48. 48 Muhammed Al-MulhemVisual Languages 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. 49 Muhammed Al-MulhemVisual Languages

50. 50 Muhammed Al-MulhemVisual Languages 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. 51 Muhammed Al-MulhemVisual Languages 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. 52 Muhammed Al-MulhemVisual Languages Operations

53. 53 Muhammed Al-MulhemVisual Languages 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. 54 Muhammed Al-MulhemVisual Languages 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. 55 Muhammed Al-MulhemVisual Languages 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. 56 Muhammed Al-MulhemVisual Languages Methods’ Window

57. 57 Muhammed Al-MulhemVisual Languages 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. 58 Muhammed Al-MulhemVisual Languages 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. 59 Muhammed Al-MulhemVisual Languages 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. 60 Muhammed Al-MulhemVisual Languages

61. 61 Muhammed Al-MulhemVisual Languages 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. 62 Muhammed Al-MulhemVisual Languages

63. 63 Muhammed Al-MulhemVisual Languages 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. 64 Muhammed Al-MulhemVisual Languages

65. 65 Muhammed Al-MulhemVisual Languages 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. 66 Muhammed Al-MulhemVisual Languages 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. 67 Muhammed Al-MulhemVisual Languages 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. 68 Muhammed Al-MulhemVisual Languages 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. 69 Muhammed Al-MulhemVisual Languages

70. 70 Muhammed Al-MulhemVisual Languages 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. 71 Muhammed Al-MulhemVisual Languages 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. 72 Muhammed Al-MulhemVisual Languages 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. 73 Muhammed Al-MulhemVisual Languages 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. 74 Muhammed Al-MulhemVisual Languages 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/ >, with execution suspended at the call to primitive attach-r

75. 75 Muhammed Al-MulhemVisual Languages

76. 76 Muhammed Al-MulhemVisual Languages 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. 77 Muhammed Al-MulhemVisual Languages 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. 78 Muhammed Al-MulhemVisual Languages 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. 79 Muhammed Al-MulhemVisual Languages 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. 80 Muhammed Al-MulhemVisual Languages

81. 81 Muhammed Al-MulhemVisual Languages 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. 82 Muhammed Al-MulhemVisual Languages 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. 83 Muhammed Al-MulhemVisual Languages 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. 84 Muhammed Al-MulhemVisual Languages

85. 85 Muhammed Al-MulhemVisual Languages 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. 86 Muhammed Al-MulhemVisual Languages

87. 87 Muhammed Al-MulhemVisual Languages 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