Progranimate User Manual for Prototype V3.0 ©2008 Andrew Scott
Contents
1.0 Introduction 4
1.1 Document Scope 4
1.2 What is Progranimate? 4
2.0 Progranimate Overview 5
2.1 Feature Overview 5
2.2 User Interface Overview 6
2.2.1 Flowchart View 7
2.2.2 Code View 7
2.2.3 Variable Inspector 7
2.2.4 Palette 7
2.2.5 Toolbar 8
2.2.6 Console 8
2.2.7 Menus 8
3.0 Creating Programs With Progranimate 9
3.1 Variables 10
3.1.1 Adding Variables, 10
3.1.2 Default Variable Values 11
3.1.3 Deleting Variables 11
3.1.4 Editing Variables 12
3.2 Arrays 12
3.2.1 Adding Arrays 13
3.2.2 Default Array Values 13
3.2.3 Deleting Arrays 14
3.2.4 Editing Arrays 14
3.3 Adding Components or Structures 14
3.4 Nesting Structures 16
3.5 Defining Components and Structures 16
3.6 Deleting Components and Structures 17
3.7 Editing Component and Structures 17
3.8 Copying, Cutting and Pasting Components and Structures. 18
3.8.1 Copying and Cutting 18
3.8.2 Pasting 18
3.9 The Components and Structures in Detail 20
3.9.1 The Print Component. 20
3.9.2 The Read Component 22
3.9.3 The Assign Component 22
3.9.4 Control Structures. 25
3.9.4.1 The If Structure 25
3.9.4.2 The If_Else Structure 26
3.9.4.3 The While Structure 27
3.9.5 Constructing Logical Expressions 29
3.9.5.1 Comparison Operators 29
3.9.5.2 Entering Simple Boolean Expressions 30
3.9.5.3 Using AND, OR and XOR 31
3.9.5.4 Complex Boolean Expressions 32
3.9.6 Expression Analysis and Evaluation 32
3.9.6.1 Syntax Analysis 32
3.9.6.2 Operator Precedence 34
4.0 Animating a Program 35
4.1 The Animation Controls 35
4.2 The Console 36
4.3 Skipping through links 37
5.0 Loading and Saving a Program 38
5.1 Saving a Program 38
5.2 Loading a Program 38
5.3 Auto Loading 38
6.0 Language Selection Code Generation and Translation 39
6.1 The Languages Available 39
6.2 Language Translation 39
6.3 The Code Generation Menu 40
6.3.1 Language Selection 40
6.3.2 Code Commenting Level 40
6.3.3 Font Size 42
6.3.4 Font Style 43
7.0 Visual Settings and Adjustments 44
7.1 The View Menu 44
7.2 Resizing Parts of the User Interface Using Split Dividers 46
7.3 Changing the Visual Representation of the Inspectors 47
7.4 Adjusting the Font Size of the Variable and Array Inspectors 47
8.0 Advanced Settings Menu 48
8.1 Variables 48
8.2 Animation 49
8.3 Programming 50
9.0 Error Handling 51
10.0 Deploying Progranimate 52
10.1 Web Server Installation 52
10.2 Java Web Start Deployment 52
10.2.1 Creating a Basic Launch File 52
10.2.2 Launching Progranimate Via Java Web Start 54
10.2.3 Passing Parameters Via WJS 55
10.2.4 Troubleshooting Java Web Start Deployment 57
10.3 Applet Deployment 62
10.3.1 Creating a Basic Web Page To Contain Progranimate. 62
10.3.2 Launching an Applet 64
10.3.3 Passing Parameters to the Applet 66
10.3.4 Troubleshooting Applet Launching 67
10.4 A Complete List of Parameters 72
1.0 Introduction
1.1 Document Scope
This document is intended as a user guide for Progranimate. It is aimed at instructors and system administrators rather than the complete novice programmer. Detailed in this document are Progranimate’s (Version 3.0) range of features and instructions on their use, as well as information regarding the deployment of Progranimate. Details regarding the technical implementation of Progranimate are not covered in this document.
1.2 What is Progranimate?
Progranimate is an interactive and dynamic web enabled visual problem solving tool and code generator aimed at novice programmers. The application of the tool aims to increase student comprehension and maintain student motivation when engaging in the introductory levels of programming. It removes the focus from syntax and focuses on the logic skills needed to solve introductory programming problems.
The use of the tool focuses on using flowcharts to develop visual solutions to basic programming problems from which syntactically correct program code is generated. Progranimate provides the ability to generate program code in a variety of languages that currently includes Java, Visual Basic.Net and Visual Basic 6.0. Progranimate allows user or pre-created programs to be animated, where each step of a program’s execution is highlighted in both the flowchart and code representations. A variable inspector is provided to allow users to see the effect each instruction has on any variables and arrays used within a program. The animation features and the synchronised interaction between the visual and code representations aim to reinforce student understanding of both the visual solution and program statement flow.
Progranimate integrates with the World Wide Web and is deployable via Java Web Start or as an applet within a web page. This makes Progranimate an ideal centrepiece or valuable accompaniment to an online tutorial covering the basics of imperatives (non object oriented) programming. Progranimate can also be installed locally as an executable Java JAR file on computers without Internet access.
2.0 Progranimate Overview
2.1 Feature Overview
Progranimate provides a wide array of features to support the novice programmer. These features are outlined below.
Program Creation
Progranimate is a programming tool that focuses on the algorithmic problem solving skills of programming. So that the user is not bogged down with the complexities of syntax, lines of code are not directly entered into Progranimate. The code is generated automatically and in a variety of selectable languages. As is the structure of the flowchart as the creation of this its self could prove a distraction. The user simply needs to decide where a component or structure will go (by interacting with the flowchart or code), define any associated parameters and the rest is taken care of, allowing the user to focus purely on problem solving and algorithm design. Cut, Copy, Paste and Undo features are also provided to make the process easier and quicker.
Program Visualisation
The basic concept behind the tool is to visualise the programming task via flowcharts and automatically generated computer code. The flowchart and code representations are synchronised graphically. Highlighting a component in the flowchart causes the relevant component in the code to also be highlighted and vice versa. This allows the user to see the relationship between a flowchart and textual code structure that subsequent design would likely produce.
Auto Code Generation in Multiple Languages
An aim of Progranimate is to prevent users from being bogged down with the complexities of programming language syntax. Therefore programs are constructed from automatically generated code rather than direct text input. Progranimate provides the capability to generate code in one of three languages; these are Java, VisualBasic.Net and VisualBasic6.0,
Language Translation
Progranimate enables users to translate a program across all its available languages. This allows the user to see how an algorithmic solution may be represented in multiple languages.
Animation
Progranimate allows programs to be animated so that each step of execution is visualised synchronously in both the flowchart and code representations of a computer program. The animation features reinforce student understanding of program statement flow in both the flowchart and code representations of a program.
Variable / Array Inspection
A variable and array inspector is provided so that Progranimate may visualise the effect that each program statement has on the data of a program. This is very important for communicating programming concepts and ideas to students. It also emphasises debugging skills from an early stage, something that many novice environments forget.
Saving and Loading of Programs
Any programming environment would not be complete without the ability to save user programs and load user created programs.
Printing of Flowcharts and Code
Progranimate provides the ability to print out both the generated code and flowcharts, enabling the users to communicate their ideas.
Saving Flowchart Graphics and Generated Code
It is possible to save the flowchart graphics in a variety of formats allowing users to easily add their flowcharts to various documents. Also the code generated by Progranimate can be exported to an external text file.
Visual Customisation
Progranimate provides a wide rage of settings for visually customising the way Progranimate appears to the user. These features are very useful when Progranimate is used as an applet or when certain features need to be emphasised.
WWW Integration
Progranimate can be integrated via the World Wide Web. It can easily be deployed as a Java Web Start or Applet application, making it ideal as a centrepiece to an online learning environment or tutorial covering the imperatives of programming.
2.2 User Interface Overview
In this section an overview of Progranimate’s user interface and it’s features is given.
Figure 1. Progranimate’s User-Interface
2.2.1 Flowchart View
The flowchart view presents the user with a flowchart representation of the stored program. The user can interact with the flowchart to add, edit or remove components and structures from a program. As a component or structure is added to the flowchart view the code view updates by generating and displaying associated program code. The flowchart view animates a program in synchronisation with the code view by highlighting each relevant flowchart component in turn until the terminate component is reached.
2.2.2 Code View
The code view presents a code-based representation of the stored program in the selected language. The code view can be interacted with to add, edit or remove components or structures. As a component or structure is added to the code view the flowchart view updates by adding the relevant flowchart components and structures. Declarations for variables and arrays are also displayed in the code view. During animation the code view animates a program in synchronisation with the flowchart view highlighting each relevant line of code in turn until the end of the program is reached.
2.2.3 Variable Inspector
The variable inspector displays the variables and arrays used by the programs of Progranimate. The inspector is used to add, edit, and delete the variables and arrays of a program. During animation cycles, the variable inspector visualises the effect that each program statement has on the variables and arrays used. The data types used by the inspector are dependent on the programming language selected. However, the data types commonly include: Integer, Double, String, Character and Boolean types.
2.2.4 Palette
The palette provides options for adding program variables, arrays statements and structures to a program. These include assignment, print and read statements and If, If_Else and While structures. The palette also provides edit and delete options. These can be used to edit or remove program statements and structures, as well as variables and arrays. To add a component to a program, the user selects the relevant option from the palette, then selects the relevant part of the flowchart or code . To edit or delete a program component, structure, variable or array, the user selects the edit/delete option from the palette then clicks on the relevant component, structure, variable or array in the flowchart, code or variable inspector (or visa versa if settings allow).
2.2.5 Toolbar
The toolbar contains the options for saving, loading and clearing programs. It also contains controls to run, pause, step and stop animations. The two sliders control the speed of animation and the scale at which the flowchart is drawn.
2.2.6 Console
The console handles the input and output of data; it is invoked during animation. When a print statement is reached, it is called to output information and data to the screen. It is also called when a read statement is reached to take input from the user and place it in a variable or array element.
2.2.7 Menus
The menus control many major and minor functions.
File
The File menu allows for saving, loading, program clearing and closing Progranimate. Options are also provided to printing or saving the flowchart graphics or generated code. It also provides access to the advanced menu where Progranimate can be customised in many ways.
Edit
The Edit menu allows the user to undo the previous command, and perform copy, cut and paste operations on a selected component or structure.
View
The View menu is used to select which of Progranimate’s GUI elements are visible and enabled. For example the user may wish turn off the flowchart view, the code view, variable, palette, or toolbar etcetera.
Code Generation
The Code Generation menu is used to select the language implemented by Progranimate. It also provides options for setting the size and font of text in the code view. This menu also allows users to adjust the level of detail used in the automatically generated commenting.
Help
Finally, the Help menu allows the user to access the manual, and program information. In the future it will contain other help based features to assist the users of Progranimate.
3.0 Creating Programs With Progranimate
In Progranimate, a program may be constructed by interacting either with the flowchart or code views. Unlike in regular programming environments, users do not enter code directly. Programs are constructed from a palette of programming components and structures that the user can select from. Once selected, these component and structures are placed within the program and any associated parameters are defined. Once a component’s or structure’s parameters are defined, the flowchart is redrawn and the code is automatically generated to show the newly added component or structure. Progranimate can create programs in a variety of languages. However, in the examples in this section, we will use the Java and VisualBasic.Net programming languages. For a list of the languages supported by Progranimate, see section 6.1 entitled ‘The Languages Available’.
Clicking the toolbar (or file menu) option marked ‘New’ clears the current program to present the user with a fresh canvas with which to create a program. The user is then prompted to name the new program via a dialogue box that pops up.
Figure 2. Naming a Program
When creating a new program, Progranimate starts by displaying the default starter and termination icons and code. There should also be no data displayed in the variable inspector.