Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Progranimate User Manual
For Prototype Version 3.5
©2005- 2008 Andrew Scott
Faculty of Advanced Technology
University of Glamorgan
Page 1
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Contents
1.0
1.1
1.2
2.0
Introduction .......................................................................................................................................... 4
Document Scope ...................................................................................................... 4
What is Progranimate? ............................................................................................. 4
Progranimate Overview ....................................................................................................................... 5
2.1
Feature Overview ..................................................................................................... 5
2.2
User Interface Overview .......................................................................................... 7
2.2.1
Flowchart View ................................................................................................ 7
2.2.2
Code View ........................................................................................................ 7
2.2.3
Variable Inspector ............................................................................................ 8
2.2.4
Palette ............................................................................................................... 8
2.2.5
Toolbar ............................................................................................................. 8
2.2.6
Console ............................................................................................................. 8
2.2.7
Menus ............................................................................................................... 9
3.0
Creating Programs With Progranimate ........................................................................................... 10
3.1
Variables................................................................................................................. 11
3.1.1
Adding Variables,........................................................................................... 11
3.1.2
Default Variable Values ................................................................................ 12
3.1.3
Deleting Variables .......................................................................................... 12
3.1.4
Editing Variables ............................................................................................ 13
3.2
Arrays ..................................................................................................................... 13
3.2.1
Adding Arrays ................................................................................................ 14
3.2.2
Default Array Values ..................................................................................... 15
3.2.3
Deleting Arrays .............................................................................................. 15
3.2.4
Editing Arrays ................................................................................................ 15
3.3
Adding Components or Structures ......................................................................... 16
3.4
Nesting Structures .................................................................................................. 17
3.5
Defining Components and Structures .................................................................... 18
3.6
Deleting Components and Structures ..................................................................... 18
3.7
Editing Component and Structures ........................................................................ 19
3.8
Copying, Cutting and Pasting Components and Structures. .................................. 19
3.8.1
Copying and Cutting ...................................................................................... 19
3.8.2
Pasting ............................................................................................................ 20
3.9
The Components and Structures in Detail.............................................................. 21
3.9.1
The Print Component. .................................................................................... 21
3.9.2
The Read Component ..................................................................................... 23
3.9.3
The Assign Component .................................................................................. 23
3.9.4
Control Structures. ......................................................................................... 26
3.9.4.1 The If Structure .......................................................................................... 26
3.9.4.2 The If_Else Structure ................................................................................. 27
3.9.4.3 The While Structure ................................................................................... 29
3.9.5
Constructing Logical Expressions .................................................................. 35
3.9.5.1 Comparison Operators................................................................................ 36
3.9.5.2 Entering Simple Boolean Expressions ....................................................... 36
3.9.5.3 Using AND, OR and XOR ......................................................................... 37
3.9.5.4 Complex Boolean Expressions................................................................... 38
3.9.6
Expression Analysis and Evaluation .............................................................. 39
3.9.6.1 Syntax Analysis .......................................................................................... 39
3.9.6.2 Operator Precedence .................................................................................. 40
4.0
Animating a Program ......................................................................................................................... 41
Page 2
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
4.1
4.2
4.3
5.0
©2008 Andrew Scott
The Animation Controls ......................................................................................... 42
The Console............................................................................................................ 43
Skipping through links ........................................................................................... 43
Loading and Saving a Program ......................................................................................................... 44
5.1
Saving a Program ................................................................................................... 44
5.2
Loading a Program ................................................................................................. 44
5.3
Auto Loading...................................................................................................... 45
6.0
Language Selection Code Generation and Translation ................................................................... 45
6.1
The Languages Available ....................................................................................... 45
6.2
Language Translation ............................................................................................. 45
6.3
The Code Generation Menu ................................................................................... 46
6.3.1
Language Selection ........................................................................................ 46
6.3.2
Code Commenting Level ............................................................................... 47
6.3.3
Font Size ......................................................................................................... 49
6.3.4
Font Style ....................................................................................................... 49
7.0
7.1
7.2
7.3
7.4
8.0
8.1
8.2
8.3
9.0
10.0
Visual Settings and Adjustments ....................................................................................................... 50
The View Menu ...................................................................................................... 51
Resizing Parts of the User Interface Using Split Dividers ..................................... 52
Changing the Visual Representation of the Inspectors .......................................... 53
Adjusting the Font Size of the Variable and Array Inspectors .............................. 54
Advanced Settings Menu .................................................................................................................... 55
Variables................................................................................................................. 55
Animation ............................................................................................................... 56
Programming .......................................................................................................... 57
Error Handling ................................................................................................................................... 58
Deploying Progranimate .................................................................................................................... 59
10.1 Web Server Installation .......................................................................................... 59
10.2 Java Web Start Deployment ................................................................................... 59
10.2.1 Creating a Basic Launch File ......................................................................... 59
10.2.2 Launching Progranimate Via Java Web Start ................................................ 61
10.2.3 Passing Parameters Via WJS.......................................................................... 62
10.2.4 Troubleshooting Java Web Start Deployment ............................................... 64
10.3 Applet Deployment ................................................................................................ 69
10.3.1 Creating a Basic Web Page To Contain Progranimate. ................................. 69
10.3.2 Launching an Applet ...................................................................................... 71
10.3.3 Passing Parameters to the Applet ................................................................... 73
10.3.4 Troubleshooting Applet Launching ............................................................... 74
10.4 A Complete List of Parameters .............................................................................. 79
Page 3
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
1.0
©2008 Andrew Scott
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.
Page 4
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
2.0
©2008 Andrew Scott
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.
Page 5
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
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.
Page 6
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
2.2
©2008 Andrew Scott
User Interface Overview
In this section an overview of Progranimate’s user interface and it’s features is given.
Palette
Menu
Flowchart view
Code view
Console
Toolbar
Figure 1. Progranimate’s User-Interface
2.2.1
Variable/ array
inspector
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
Page 7
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
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.
Page 8
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
2.2.7
©2008 Andrew Scott
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.
Page 9
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
3.0
©2008 Andrew Scott
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.
Figure 3. The Default Components and Java Code.
Any components added to the program will be placed between the starter and terminator
components. Any variables or arrays declared will be displayed in the code view only, as
variable declarations play no part in visualising the logical flow of a program. Progranimate
minimises the work performed by the user by automatically managing the layout of
flowcharts and code indentation as components are added. This means the user can focus
purely on algorithm development rather than wasting valuable learning time fiddling with
the intricacies of the visual representation.
Page 10
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
3.1
©2008 Andrew Scott
Variables
Before any meaningful components can be
defined, some variables need to be added for
the programs to work with. Progranimate
allows for the Integer, Double, Char, String
and Boolean data types to be used within
programs. Some languages may not support
all these data types. For example, Visual
Basic 6 does not support the Char data type.
However, most languages such Java and
Visual Basic.Net support all of
Progranimate’s data types.
Any defined variables are held and displayed
in the variable inspector. This allows
variables to be referenced for error checking
Figure 4. The Variable Inspector.
purposes when defining component or
structure parameters. It also displays the changing state of variable data during
animation by visualising the effect that program statements can have on the data it
contains. Figure 4 shows the variable inspector when Progranimate is set to work
with the Java programming language.
3.1.1
Adding Variables,
To add a variable to the
inspector, click on the
variable button of the
palette. This will cause the
variable definition window
to pop up where the
variable can be defined.
Figure 5 shows an example
of the variable definition
window.
Figure 5. The variable definition window
Firstly, the variable’s name must be entered. The name must begin with a
lowercase letter and contain only letters, numbers or the underscore
character. Next, the variable’s data type must be selected. A drop down list
allows the data type to be selected i.e. Int, Double, Char, String and Boolean
in the case of Java. If direct value entry is permitted in the advanced settings,
an initial value can be entered for the variable. If direct value entry is not
permitted, the value field will not be shown and the variable will be set to its
Page 11
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
default value. See section 3.1.2 for the information on Progranimate’s default
values. See section 8.1 for more information on enabling or disabling direct
value entry. Once all the needed information has been entered, the ok button
should be clicked (or enter key pressed). At this point, the name, data type
and value will be validated. If there are problems, an error message will be
displayed beneath the relevant field and the user can edit their entry. If all is
ok, the definition window will close and the variable will appear in the
inspector. Clicking cancel or pressing the escape key will close the definition
window without adding a variable.
If desired, quotation marks can be placed around string and char data during
entry (double quotes for stings, single quotes for chars). However, this is not
mandatory. Whether or not quotes are added, the inspector will display the
appropriate quotes around String and Char data in the value field of the
inspector.
By default the maximum number of variables allowed is fifty. If a user
attempts to add another variable once fifty variables have been defined, they
will be presented with an error message. It is possible to increase the
maximum number of variables permitted in the advanced settings; see section
8.1 for more information.
3.1.2 Default Variable Values
When no data is entered in the value field of the variable definition window,
or direct value entry is turned off in the advanced settings, the value of a
variable will be set to its default. The default values for the differing data
types are as follows.
Data Type
Default Value
Integer
0
Double
0.0
Char
Char will contain ASCII char 0
String
String will contain ASCII char 0
Boolean
False
Table1. The default data types for variables
3.1.3 Deleting Variables
Removing variables from a program is easy; this can be achieved in a
multitude of ways, depending on what program settings have been enabled.
The main way of deleting a variable is to click the delete button on the palette
and then select the variable to be removed either in the code or the inspector.
Another way (settings permitting) is to select the variable in the code or
inspector and then click the delete button of the palette. It is also possible to
achieve this by right clicking the variables declaration in the code view
Page 12
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
(settings permitting). Doing so makes a popup menu appear where the user can
select delete. If a variable is in use within a program, the use is unable to
remove it and presented with an appropriate method. Do delete a variable the
user must first remove all uses of it. This helps prevent mistakes that may lead
to a program error and unnecessary confusion.
Depending on the advanced settings, some of the deletion methods described
on this section may be inhibited. See section 8.3 for more details on adjusting
the selection methods.
If a variable has been removed in error, the undo option of the edit menu will
bring it back providing no other command has been performed in
Progranimate.
3.1.4 Editing Variables
A user may want to edit a variable to change its initial value or data type.
Editing variables of a program is simple. Like the deletion of variables, it can
be achieved in various ways (advanced settings permitting). The simplest way
to edit a variable is to double click it either in the code or in the inspector.
Another way is to select the edit button from the palette and then the variable
in the code or variable inspector. This can also be achieved the other way
round by clicking the variable in the code or variable inspector and then the
edit option from the palette (settings permitting). All of these methods will
cause a pre-filled variable definition window to pop up where the user can edit
the variable’s value and data type. When a variable is renamed all instances of
the variable in the program (flowchart and code) are also updated.
Depending on the advanced settings, some of the editing methods described in
this section may be inhibited. See section 8.3 for more details on adjusting the
selection methods.
3.2
Arrays
It is possible to include arrays into user
programs. The data types permitted by
Progranimate’s arrays match those of the
variables. All arrays in Progranimate are
zero based, even when using languages
such as Visual Basic 6, where zero based
arrays are not mandatory. Allowing nonstandard array element indexing may lead
to unnecessary confusion when graduating
to other languages.
Any defined arrays will be held and
displayed in the array inspector. This
allows array elements to be used by
component parameters. It also displays the
Page 13
http://www.glam.ac.uk/progranimate
Figure 6. The array inspector
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
changing state of an array’s elements during animation, showing the effect that a
program statement can have on the data it contains. Figure six shows the array
inspector with Progranimate set to work in the Java programming language.
When no arrays have been defined, the array inspector will remain invisible; the
variable inspector will then take up the entire right side portion of the screen. This
means Progranimate is free of unnecessary complication for users who has yet to learn
arrays. When one or more arrays have been defined the array inspector will appear,
the right side will be split equally between the variable and array inspectors. By
placing the mouse pointer between the two inspectors and performing a click and
drag, it is possible to change the proportions of the screen devoted to each inspector.
3.2.1 Adding Arrays
To add an array to the array inspector, simply click the button marked array on
the component palette. Doing so will cause an array definition window to pop
up where an array can be defined and added to the array inspector.
Firstly, the user must enter a name to be used by the array. This must begin
with a lowercase letter and contain only alphanumeric characters or the
underscore character. It must also be unique, a name not used by other arrays
or variables. Secondly, the data type to be used must be selected. This is
achieved via the drop down menu. If direct input has been enabled in the
settings, the initial values must be entered for the array. Commas must
separate values; this allows the size of the array to be automatically calculated.
If direct input has been disabled, the value field will not be shown and the user
must enter the size of the array instead. In this instance, the array elements are
filled with the default values for the selected data type.
Once all the data is entered, the ok
button can be clicked or the enter
key pressed. This causes the data
to be validated. If the data is found
to be valid, the definition window
will close, and the array will
appear in the inspector. Any errors
found are presented via a dialog
window in plain English; technical
jargon has been limited where
possible. It is possible to cancel the
adding of an array at any time by
pressing the cancel button or the
escape key. Figure 7 shows the
array definition window.
Page 14
Figure 7. The array definition window.
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
3.2.2 Default Array Values
When no data is entered in the values field of the array definition window, or
direct value entry is turned off in the advance settings, the value of an array’s
elements will be set to the selected data type’s default. The default values for
the differing data types are as follows.
Data Type
Default Value
Integer
0
Double
0.0
Char
Char will contain ASCII char 0
String
String will contain ASCII char 0
Boolean
False
Table 2. The default data types for Arrays
3.2.3 Deleting Arrays
There are multiple ways a user can delete an array in Progranimate. One way
of deleting an array is to select the delete option in the palette and then select
the array to be removed, either in the code or on the array inspector. Another
way is to select the array first (either in the code or the array inspector) and
then to select the delete option from the palette. A third and final way of doing
this is to right click the array’s code in the code view. This will cause a small
pop up menu to appear, where a delete option is provided. Depending on the
advanced settings, some of these deletion methods may be inhibited. See
section 8.3 for more details on adjusting the selection methods for deleting.
If an array has been removed in error, an undo option is available in the edit
menu.
3.2.4 Editing Arrays
As with variables, there are multiple ways you can edit an array. The first way
is to double click it. Another way is to select the edit button from the palette
and then click on the array in the code view or the array inspector. A third way
is to select the array in the code or the array inspector and then select the edit
button from the palette. The final way is to right click edit the array’s
declaration in the code view. This should cause a small popup menu to appear
where the edit option is provided. When an array is renamed any references to
it in the program are also updated.
Depending on the advanced settings, some of these editing methods may be
inhibited. See section 8.3 for more details on adjusting the selection methods
for editing.
Page 15
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
3.3
©2008 Andrew Scott
Adding Components or Structures
To add a component to the program, the user must first select a component from the
palette. To select the intended location of the new component, mouse click on an
existing flowchart component, a valid vertical line of flow, or a line of code in the
code view. A definition window then pops up; this is where the expression to be used
with the component is defined. See section 3.4 for more information on defining
component and structures. Once defined, the component is automatically inserted into
the flowchart and code below the selected component or code line, or on the selected
vertical line of flow. The code and the flowchart views are synchronised; adding a
component to the flowchart view will cause the code view to update appropriately and
visa versa. Figure 4 below demonstrates a program being constructed from the default
components of a blank program. The highlighted components show where the mouse
clicks were made.
Figure 8. Adding Components
Below is a description of how a user may transition from the initial to the final state of
figure 8. This process was achieved in three simple steps described below.
Stage 1: An integer called x with the value 1 is added to the inspector. The Print
option is then selected in the palette. The start component is selected, causing a
definition window to pop up. In the definition window, the value x is entered. This
will cause the value of variable x to be printed at run time. The OK button is clicked,
Page 16
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
and the Print component is then added to the program in both the code and flowchart
views.
Stage 2: The If option of the palette is selected; then the print component is clicked
on in either the code or flowchart view. The Boolean expression to be associated with
the IF structure is then defined, in this case X > 1. Once ‘OK’ is clicked on, the
definition window disappears, and the IF structure is added to the program in both
code and flowchart views.
Stage 3: The assign option is selected in the palette. The If component is then clicked
on in either the code or flowchart views. This causes the definition window to pop up,
where the expression to be associated with an assign statement is entered. In this case,
the assignment expression X = 1 is entered. Once ‘OK’ is clicked, the assignment
statement is added to the code, and an assignment component is added to the
flowchart. The final state of the program is shown in image 4 of figure eight.
For more information on defining components, see sections 3.5 ‘Defining Structures
and Components’ and 3.9 ‘The Components and Structures in Detail’.
3.4
Nesting Structures
In Progranimate it is possible to nest
the If, If_Else, While and For control
structures to infinitesimal levels, in
any valid combination. The method
for adding structures within structures
is no different from the method for
adding a standard component within a
structure. It is also possible to cut an
entire structure, including its
components and sub-structures for
pasting within another structure. This
ability makes Progranimate capable
of handling a very large number of
programming problems, increasing
the complexity of the programs it can
model and thus its educational scope.
Figure 9 demonstrates the structure
nesting abilities of Progranimate
using the VisualBasic.Net language.
Figure 9. An example of the nesting possibilities.
Page 17
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
3.5
©2008 Andrew Scott
Defining Components and Structures
When a component or structure is
selected from the palette and its location
is selected within the flowchart or code
views, a component definition window
pops up. This definition window is where
the expression to be associated with the
component or structure to be added is
defined. Each component has its own
dedicated definition window. All
definition windows look similar, except
for subtle differences in the descriptive
text contained within them.
Figure 10. The assignment definition window.
Figure 10 shows the definition window associated with the assignment component. In
this example an incremental statement has been entered. If the user is defining a
structure such as an If or While loop then they only need enter the argument to be
associated with that structure i.e. x <= 100. Once ok is clicked the rest is taken care of.
Once definition window that does vary on the standard is the definition window for a
For loop, this will be discussed further in section 3.9. The syntax of parameters
entered into the definition window depends on the language selected. For information
relating to the definition of each component or structure, see section 3.9 ‘The
Components and Structures in Detail’, where this is discussed in detail.
If an error is encountered during the definition of a component the an error message
will appear in read beneath the textbox where the error exists.
Each definition window comes with two short cut buttons for adding variables and
arrays. These perform the same function as the Variable and Array buttons of the
palette. They allow variables or arrays to be added without the need to close the
definition window.
3.6
Deleting Components and Structures
There are multiple ways to remove a component or structure from a program. One
way is to select ‘delete’ from the palette and then select the component or structure to
be removed in either the code or flowchart view. Another way is to do this in reverse
by first selecting the component or structure and then the delete option of the palette
(advance settings permitting). A component or structure can also be removed by right
clicking it in either of the two program views. A popup menu will appear, and the
delete option can be selected from it. This will remove the component that clicked
upon. Depending on the advanced setting, some of these methods may be disabled.
For more information on setting the selection methods, see section 8.3.
Page 18
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
When a component is removed, both the flowchart and the code representations of a
program are updated in a tidy manner with no adjustment needed by the user. When a
structure such as an If, If_Else or While is removed, all internal components and sub
structures are also removed. The diagram and code is then redrawn tidily with no
adjustment needed by the user. If a component or structure has been removed in error,
an undo option is available in the edit menu.
3.7
Editing Component and Structures
Occasionally, it may be required to edit the expressions associated with a component
or structure. This can be achieved in multiple ways. The simplest way is to double
click the component. Other ways are to select edit from the palette and then the
component or structure to be edited. This can also be achieved in reverse (advanced
settings permitting), where the component or structure is first selected and then the
edit option from the palette is selected. A final way to edit a component is to right
click it. If the popup menu has been enabled in the advanced settings, the user should
be able to select the option edit. Depending on the advanced settings, some of these
editing methods may be inhibited. For information on adjusting the selection methods
in the advanced settings, see section 8.3.
All of these methods cause a pre-filled definition window to appear. Via this window,
the expression belonging to the selected component can be edited. If desired, the name
of the program can be changed. This is achieved by editing the starter component of
the flowchart or the program delectation in the code view. In Java, program
declaration is also known as class declaration.
3.8
Copying, Cutting and Pasting Components and Structures.
Progranimate provides features for copying, cutting and pasting components or
structures. This is achieved via a right click popup menu or by using Progranimate’s
edit menu.
3.8.1
Copying and Cutting
To copy or cut a component or structure, right
click it in the flowchart or code views. A popup
menu will then appear where the user can select
from the options Copy or Cut (see figure 11).
Selecting the component and clicking copy
from Progranimate’s edit menu will have the
same result.
When the copy option is selected, a copy of the
component or structure selected is stored in the
computers memory, leaving the copied
Page 19
http://www.glam.ac.uk/progranimate
Figure 11. The popup menu
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
component remaining. When copying a structure such as an If, If_Else or
While, all of its internal components and sub structures will also be copied.
When the cut option is selected, a copy of the component or structure selected
is stored in the computer memory as with copy. However, this time the
component selected is cut (removed) from the flowchart. When cutting a
structure such as an If, If_Else, While or For all of its internal components and
sub structures are also cut.
3.8.2
Pasting
Pasting a component or structure that has been copied or cut is achieved very
easily. This can be done in two different ways, depending on what settings
have been enabled in the advanced settings. The first way is to right click the
intended location of the component in the flowchart or code views. This will
cause the popup menu to appear where the paste option is available. The other
way is to select the intended location with a left click. This will highlight the
component. The paste option can then be selected from the edit menu. If a
component or a line of code is selected, the pasted component or structure will
be inserted below it. If a valid vertical link is selected, the pasted component
or structure will be inserted by replacing the link.
There will be no need for the user to tidy up the flowchart or code once a
component has been pasted; the code and flowchart will be adjusted and tidied
automatically. Figure 12 below shows an example of a cut and paste operation
in Progranimate.
Figure 12. Cutting and pasting a structure.
Page 20
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
3.9
©2008 Andrew Scott
The Components and Structures in Detail
This section discusses each programming component or structure available to
Progranimate. It provides information on the usage and possibilities of each
component or structure. The syntax used within the components and structures of
Progranimate depend on the language selected. In this section we will discuss the
syntax in relation to Java and VisualBasic.Net. For more information on the language
selection possibilities of Progranimate, see section 6.1.
3.9.1
The Print Component.
At run time, the print component will evaluate an
expression and display the result in the console as it
is animated.
Entering Data to be Printed
To define a print component, the user
enters the expression they wish to be
printed at run time. This could be a
singular variable such as X. It could
also be a mathematical expression
involving more than one variable
such as X + Y * Z. Complex
expressions using brackets and array
elements are also permitted. Where
any variable may be used, an array
Figure 13. The Print definition window
element may also be referenced.
Logical expressions such as x > = y are also allowed in the Print component.
In this case, the true or false result is output to the console. It is not permitted
to use the assignment operator in the expressions used by the print component.
In the Java and VisualBasic programming languages, the assignment operator
is an equals ‘=’ symbol.
Concatenating Strings
Page 21
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
In Java, String items are concatenated together using the plus ‘+’ operator. (In
VisualBasic.Net it is an ampersand ‘&’.) Therefore, the print definition
window will allow us to enter the parameters: A + B + C when Progranimate
is setup for the Java Language. Given that A, B and C are String variables, at
run time the values of variables A,B and C will be concatenated together and
printed in the console window as the print component is animated.
Entering Literal Strings and Characters Directly
Users may enter a literal string directly; in this case they would encase the
string in double quotes i.e. “Please enter your name”. They may also
combine litteral strings with other variables and array elements, i.e. “Your
name is” + name or “Your name is “ + n[3].
Characters may also be entered directly, in this case they are encased in single,
i.e ‘ stringValue + ‘s’.
Mixing Data Types.
If the expression to be printed contains a mixture Strings and other data types
all data types will be handled as if they were strings inline with the semantics
of the languages implimented. For example:
Variable X is an integer type containing the value 1,
Variable Y is a Double type containing the value 3.5,
Variable S is a String data type containing the value “ + ”.
In this example X + S + Y would point out 1 + 3.5.
As another example, one may enter the following expression with the intention
of performing a calculation.
We could enter the following: X + S + Y + “ = ” + X + Y.
This would print out:
1 + 3.5 = 13.5.
However, the result of the calculation appears wrong. This is because no
calculation is taking place; all the values are being concatenated as strings
because they are of mixed data types.
To overcome this problem, encase the section to be calculated in parenthesise,
i.e. X + S + Y + “ = “ + ( X + Y). This will ensure the correct calculation is
displayed on screen i.e. X + Y = 4.1.
Page 22
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Another way to overcome this problem is to perform the calculation X + Y
individually, assign the result to another variable, and then construct the
expression to be printed. To do this you will need to use the assign component;
see section 3.9.3 for more details.
3.9.2
The Read Component
At run time, the read component is used to take input
from the keyboard and place it in a variable or array
element. As the read component is animated, the console
window pops up, and there, the user enters a value to be
stored. If valid, this value is then placed in the variable or
array element referenced in the read component’s parameters. At this time,
animation is halted until the information is entered into the console and either
the enter key or the on screen enter button is pressed.
Entering A Variable or Array Element to Read In To
The read component can only take one variable or array element. Expressions
are not permitted in a read component unless the expression is used to
reference the index of an array element.
For example:
anArray[x+(2*y)]
Runtime Validation of User Input
At run time, the user input is validated against the data type of the variable.
For example, an error would be generated if the user were to enter Hello when
the read component was referencing an integer. The user would then have to
re-enter the information where it would then be re-validated.
3.9.3
The Assign Component
The assign component is used to assign a value to a
variable or the value of one variable into another. It is
also used to assign the result of an expression into a
variable, providing the expression result matches the
data type of the variable to be assigned to. When the
assign component is animated at run time, the assignment expression is
Page 23
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
evaluated and calculated. The changes to program data are displayed in the
variable or array inspector. In this section, we will refer to the variable being
assigned to as the assignee.
Assigning a value to a Variable or Array Element
The most primary function of the assignment component is to directly assign a
value to a variable. For example, we may want to assign the value 1 to an
integer variable called X. In this case, we would enter:
X = 1.
The same can also be performed by an array’s element, for example:
anArray[4] = 1.
This would assign the value ‘one’ to the fifth element of an array (fifth
because arrays are zero based).
The assignment of literal stings and characters is also possible. A few
examples are shown below.
name = “Mike”
sex = ‘M’
months[0] = “Jan”
When assigning a value to a variable or array, the assignee and value to be
assigned must be compatible. This compatibility may vary depending on the
language selected.
Assigning The Value of one Variable or Array Element to another.
Assigning one variable to another is simple. For example, to assign the value
of integer Y to integer X, the following expression could be entered:
X = Y.
To assign the value of an array element to a variable, the following expression
could be entered.
X = anArray[3].
To assign the value of a variable to an array element, an expression like the
following example could be entered.
anArray[3] = X.
To assign the value of one array element to another, the following expression
could be entered.
anArray[2] = anotherArray[4].
When assigning one variable or array to another. you must ensure that the data
type of the assignee is compatible with that of the value to be assigned. This
compatibility may vary depending on the language selected.
Assigning an Entire Array to Another Entire Array
Page 24
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
In Progranimate it is not possible to assign one array directly to another. To
achieve this you must assign each array element individually. This can be
achieved by using an assignment statement within a looping structure.
Assigning the Result of an Expression to a Variable or Array.
It is possible to assign the result of an expression to an array, providing the
evaluated result of the data type is compatible with that of the assignee.
An example of a simple expression is shown below. In this example, the
expression is used to increment the integer variable x:
X=X+1
Progranimate does not understand the Java short cuts for incrementing and
decrementing such as X ++ or X --. These shortcuts were not included, as they
hide the logical process behind such an assignment operation.
The assign component also allows for the results of Boolean expressions to be
assigned to a Boolean type variable, for example:
bool1 = X >= Y
The logical operators used will be in line with the operators of the selected
programming language being used by Progranimate.
More complex logical expressions can be used using the AND, OR and XOR
operators native to the selected language. For example, when the Java
language is selected, the following expression is permitted:
bool1 = X >= 1 && X <= 10
If VisualBasic.Net is selected the following expression would be permitted:
bool1 = X >= 1 AND X <=10
Progranimate allows for complex expressions to be entered, involving many
parenthesise to multiple levels. The following is an example of a more
complex calculation permissible by Progranimate:
X = X + ( na[5]* 2 ) * (X*2 +(na[3*Y]) /2) - 1
Once the expression has been entered into the assign definition window and
the ok button (or enter key) is pressed, then the expression undergoes
evaluation. Any errors are fed back to the user using plain English. For more
on expression analysis and evaluation, see section 3.9.6.
Page 25
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
3.9.4
©2008 Andrew Scott
Control Structures.
The If, If_Else, While and For structures are the three control structures used
by Progranimate. The If and If_Else form decisional structures. The While,
and For structures form the looping structures implemented by Progranimate.
Each of these structures utilises a Boolean expression. Boolean expressions are
expressions that evaluate to a true or false result. These three structures are
discussed in the following sections. This section also contains further reading
on creating logical expressions. For more information on constructing logical
expressions, see section 3.9.5 “Constructing Logical Expressions”.
3.9.4.1
The If Structure
Progranimate’s If structure
allows decisions to be
made within a program.
Like all of Progranimate’s
control structures, it must
contain a Boolean
expression. This Boolean
expression is entered
during its definition.
At run time, the If
component directs the flow
of execution down one of
Figure 14. The If Structure
two paths, based on the
evaluated result of the expression it contains. If the argument evaluates
to true, the flow of code is directed inside the If’s structure. If the
argument evaluates to false, the flow of execution is directed to skip
over the If’s structure. As the expression is evaluated, the If _Else’s
diamond will highlight two of its edges, pointing either left or
Page 26
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
downward. This is to indicate the direction in which the flow of control
will move.
Components and sub structures that reside within the If’s structure are
placed on the true path between an If and its end component. When
interacting with the flowchart, attempting to add component to the
false path of a standard If will cause a placement error to be generated
and displayed.
Table 3 below shows an example of the code generated for an If
structure with one internal component. The blue arrows show how the
flowchart component relates to the lines of code.
Flowchart
Java
Visual Basic
if ( x >= 5)
{
If x >= 5
Console.Writeline(“Hello”);
System.out.println (“Hello”);
End If
}
Table 3. How code relates to the flowchart.
For more information on constructing the logical conditions needed by
the If structure, see section 3.9.5.
3.9.4.2
The If_Else Structure
The If_Else structure
differs from the
standard If structure,
as it has two possible
paths of execution. As
well as having a
slightly different
visual appearance,
components can be
placed on both the
true or false paths of
Page 27
Figure 15. The If Else Structure
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
this structure, as shown in figure 15.b
Like the other control structures of Progranimate, the If_Else takes a
Boolean expression during its definition. At run time, the flow of
execution is determined by evaluating the expression it contains. If the
result is true, control is passed down the true left side path of the If
structure. If the result is false, control is passed down the left side of
the If_Else’s structure. In code, the IF and the Else parts of the
structure represent the true and false paths of the flowchart. As the
Boolean expression is evaluated, it will highlight either the left or right
edges of the If _Else structure’s diamond to indicate the direction in
which the flow of control will move. Table 4 below demonstrates this.
The blue and red lines and arrows demonstrate how the flowchart
relates to the generated code.
Flowchart
Java
Visual Basic
if ( age >= 18)
{
If Age >= 18
System.out.println (“Adult”);
Console.Writeline(“Adult”)
}
else
{
Else
System.out.println (“Child”);
Console.Writeline (“Child”)
End Else
}
Table 4. How the code relates to the flowchart.
For information on constructing the logical conditions needed by the If
structure, see section 3.9.5.
*NOTE*:Synchronised Highlighting With the IF_Else Structure.
The IF_Else structure has some minor enhancements to its visual
components that make it easier to relate its flowchart representation to
its code representation. Clicking on the left side of the If structure’s
diamond in the flowchart view will cause the code associated with its
If to highlight. Clicking on the right side of the If’s diamond will cause
the code relative to the structure’s Else to highlight. When the left side
of the End_If is clicked in the flowchart, the relevant closing bracket or
End_If statement will be highlighted in the code view. When the right
side of the End_If is clicked the relevant closing curly bracket or End
Else statement will be highlighted in the code view. The same is true in
reverse; clicking a line of code relating to the If_Else structure will
cause the relevant side of the relevant component in the flowchart view
to highlight.
Page 28
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
3.9.4.3
©2008 Andrew Scott
The While Loop Structure
The While control structure allows for looping within programs. Its
role is to continually re-direct the flow of control though a set of
components or sub structures, until the expression it contains evaluates
to false. Figure 16 shows the flowchart representation of a While loop
with and without internal components.
Like the If and If_Else
structures, the While
structure is associated
with a Boolean
expression during its
definition. During
animation, when the
While is reached, its
expression is
evaluated. If its
expression evaluates to
true, then the flow of
execution is directed
downwards within the
While’s structure. The
components and sub
Figure 16. The While Looping Structure
structures inside the
While loop are then executed in order until the End_While is reached.
The flow of execution is then redirected to the top of the loop, where
its expression is re-evaluated and the flow is directed appropriately.
Looping continues until the expression evaluates to false. If and when
the expression evaluates to false, the flow of execution is directed
down the exit path, past the While loop, and on to the next component
or structure below.
To add the first component within a While’s structure the user must
click on its decisional diamond in the flowchart, or on the While line of
text in the code. This will add a component inside its structure inbetween the While and End_While in both the flowchart and code.
Other components or structures can then be added inside a While’s
structure by interacting with the code and flowchart in the standard
way. Components cannot be added to the loop return or exit paths of a
While loop. Doing so causes a placement error to be generated and
displayed.
Table 5 demonstrates the relationship between the visual flowchart
structure and the code generated for a While structure. For information
on constructing the logical conditions needed by the While structure,
see section 3.9.5
Page 29
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
Flowchart
©2008 Andrew Scott
Java
Visual Basic
while (x < 10)
{
x = x + 1;
While x < 10
}//End While
End While
x=x+1
Table 5. How the code relates to the flowchart
3.9.5
The For Loop Structure
The For loop provides an additional looping structure. The for loop
behaves like a while loop except it increments a variable without the
need for an additional assignment statement. Depending on the language
chosen the format and semantics of the For loop differs.
Visual Basic For Loop
Visual Basic (.Net and 6.0) utilizes a traditional style for loop with start ,
end and step values as follows.
For controlVariable = start TO end STEP stepValue
‘Code to be looped goes here.
Next ‘(the end of the loop)
The control variable can be a integer or double type variable or array
element. Its value will change with each loop.
Page 30
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
When the loop begins the control variable is assigned a starting value:
controlVariable = start
The loop will terminate when the controlVariable equals the end value.
With each loop the value of the control variable is incremented by the
amount specified by the step value. If no step value is specified this value
is assumed to be one.
Table 6 demonstrates the relationship between the visual flowchart
structure and the code generated for a While structure The code shown
below will loop 100 times during which the value of variable i will be
printed. This will result in the values 1 to 100 being printed.
Flowchart
Visual Basic
For i = 0 TO 100
Console.WriteLine (i)
Next'End For
Table6. The For Loop in VB
Using the Step Value
If you modify the above to add a step the control variable will
increment by a different amount with each loop. In the example
below we supply a step value of 2. The program should loop 50
times printing 1,3,5,7,9 and so on until the control variable
exceeds 100.
For i = 0 TO 100 STEP 2
Console.WriteLine(i)
Next
Negative Increments (Looping Backwards)
It is also possible to loop backwards in this case the start value
needs to be higher than the end value and the step needs to be
negative for example:
For I = 100 TO 1 STEP -1
Console.WriteLine(i)
Next
Page 31
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
In this example the loop will loop 100 times from 100 down to
1 whilst printing the value of variable i. This will result in the
numbers 100 down to 1 being printed to the screen.
Looping in Decimals
It is also possible to loop in decimal increments providing the
control variable and step value are of the double data type. For
this example imagine the variable d is a double.
For d = 1.0 to 5.5 STEP 0.1
Console.WriteLine(d)
Next
In this example 55 values will be printed out from 0 to 5.5 i.e.
1.0, 1.1, 1.2, 1.3, 1.5, 1.6……and so on until 5.5.
Complex For Loops
The for loops can handle the same level of complexity that VB
allows. For example all of the following examples are value.
Example A.
For x = y+2 TO z -2
Next
Example B
For values[1] = anArray[0] TO anotherArray[x] STEP otherArray[0]
Next
Example C.
For values[i] = 1+ x TO y 2 STEP z/2 + (2 * z )
Next
The Definition Panel a Visual Basic For Loop
The definition panel For a Visual Basic for loop is the most
complex of all the definition panels. However, it is still very
simple and intuitive to use.
Figure 17 The Visual Basic For Loop Definition Panel
All fields of this panel are mandatory except step which is
optional. When no specified the step will not show in the code
but will cause a default increment of 1.
Page 32
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
The control variable must be an integer or decimal variable or
array element. In all other fields literal values, variables and
expressions may be entered as long as they result in an integer
or a double data type.
Any user errors will appear below the relevant field where the
error has been detected.
Java Style For Loops
In the Java language the format of the For loop is significantly different
than with Visual Basic. The for loop in this language relates more closely
to a while loop where it relies in the use of a Boolean condition. Like the
for loop it also manages the initialization and incrementation of a control
variable. In Java the for loop takes the following form:
for ( initialization; boolean expression; increment )
{
//Code goes here
}
The initialisation section is used to initialize the control variable with an
initial value as the loop begins.
The Boolean expression is evaluated with each loop and while true
looping continues. When false looping stops and the flow of execution is
diverted past the for loop and onto the next instruction. It is common
practice to have a Boolean expression which tests the value of variable
initialized in the initialization section, though any valid Boolean
expression may go here.
With each loop the value of the expression contained in the increment is
evaluated. It is common practice to include in here an expression to
increment the a control variable specified in the initialization and
Boolean expression of this component. However any valid assignment
expression may go here.
Flowchart
Page 33
Java
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
For ( i = 0; i <= 100 ; i = i + 1)
{
System.out.println (i)
}
Table7. The For Loop in Java
The expressions contained within the Java for loop may include anything
that is permitted by the Java language. Some examples are shown below.
Basic Looping
Printing numbers 1 to 100 in increments of two
For ( i = 0 ; i <= 100; i= i + 2)
{
System.out.println (i);
}
Negative Increments (Looping Backwards)
Printing number from 100 down to 1.
For ( i = 10; i > 0; i= i – 1)
{
System.out.println(i);
}
Decimal Increments
Outputting 55 numbers between 1.0 to 5.5. in increments of 0.1
For ( d = 0.1; d <= 5.5; d = d + 0.1)
{
System.out.println(i);
}
Complex Examples:
Any valid expression permitted in the for loops of the Java language are also
facilitated in Progranimate this means complex loops can be constructed if
needed.
Example A:
For (x = y +2; x => y+(z*3); x = x * y)
{
//Code here
Page 34
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
}
Example B:
For (anArray[i] = 0 ; anArray[1] <= anotherArray[5]; anArray[i] =
anArray[i] + 1
{
//Code here
}
For loop Definition
The definition panel for a Java For loop consist of three parameters, the
control variable, the condition and the increment. Inline with the rules of
the Java language all these parameters are optional. Should the user entry
any syntactically incorrect expressions, or non existent variables an error
will be presented below the relevant field.
Figure 18 The JavaFor Loop Definition Panel
3.9.6
Constructing Logical Boolean Expressions
All of the control structures of Progranimate rely on the use of a Boolean
expression as a necessity. Boolean expressions are expressions that produce a
true or false result when evaluated. Other components such as Print and
Assign can also make use of Boolean expressions. This section aims to
highlight the possibilities relating to the creation of Boolean expressions in
Progranimate.
In Progranimate the syntax of any entered expression is native to the
programming language selected. In this section, we will look at the creation of
expressions in relation to the Java and VisualBasic.Net programming
languages. However, this section will be of use to those wishing to use other
languages, as there are many similarities between third generation
programming languages.
The rules regarding the formation of Boolean expressions conform to that of
the programming language selected. The main rule that tends to be uniform
amongst most third generation programming languages is that the data being
compared must be of the same data type. Some languages such as Java and
VisualBasic allow for mixed data type comparison. For example, it is okay to
compare an Integer with a Double, and visa versa. This ability has also been
Page 35
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
facilitated in Progranimate (when these languages have been selected). Java
permits the comparison of an Integer with a character, via its ASCII code. This
feature is not available in Progranimate; it was seen as an unessential feature
that it introduced a level of complexity not needed by the novice.
3.9.6.1
Comparison Operators
The comparison operators available to Progranimate are in line with
the basic operators provided by the selected language. These are shown
below in table 8.
Java
>
<
>=
<=
==
!=
Visual Basic.Net
>
<
>=
<=
=
<>
Meaning
Greater
Less
Greater or Equal
Less or Equal
Equal
Not Equal
Table 8. Comparison operators
3.9.6.2
Entering Simple Boolean Expressions
Creating simple Boolean expressions in Progranimate is very easy.
They are entered when defining or editing one of Progranimate’s
control structures (see figure 19).
Figure 19. Condition definition
Below are some examples of simple logical expressions in the Java and
VisualBasic.Net programming languages.
Page 36
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Java
Visual Basic.Net
X >= 5
X >= 5
X < 2.5
X < 2.5
name != “Bob”
name <> “Bob”
chr == ‘C’
chr = ‘C’
answer == True
ansert = True
array[ 1 ] >= anotherArray[ 4 ]
array( 1 ) >= anotherArray( 4 )
Table 9. Example Boolean expressions
For information relating to more complex Boolean expressions, see
section 3.9.5.3 ‘Using AND, OR and XOR’ and 3.9.5.4 ‘Complex
Boolean expressions.’
3.9.6.3
Using AND, OR and XOR
Progranimate allows the use of three basic logical operators these are
AND, OR and XOR. The form these operators take is dependant on the
language selected. Below table 10 shows the logical operators in
relation to the Java and VisualBasic.Net programming languages.
Java
Visual Basic.Net
&&
AND
||
OR
^
XOR
Meaning
And
Or
Exclusive or
Table 10. The logical operators
The logical operator NOT is not included in the logical operators used
by Progranimate. It is felt more educationally beneficial to for the users
to learn how to negate their logic statements, rather than using the NOT
operator.
Using the thee logical operators the user can construct a very diverse
range of Boolean expressions. The examples shown in table 11 below
demonstrate some of the possibilities.
Page 37
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Table 11. Examples of Boolean expressions with logical operators
3.9.6.4
Complex Boolean Expressions
It is possible to use complex Boolean expressions if required. It is
permissible to use multiple levels of parenthesise and mathematical sub
expressions to build up complex Boolean expressions. However, with
n
Java
Visual Basic.Net
o
x >=
x >= 1 AND X <= 10
v 1 && X <= 10
i
x < 2 . 5 || y < 2 . 5
x < 2 . 5 OR y < 2 . 5
c
e != “Bob” && age == 58
name
name <> “Bob” AND age = 58
s
chr, == ‘C’ || chr = ‘c’
chr = ‘C’ OR chr = ‘c’
answer == True ^ fail == False
t
h 1 && x <= 5 && check == true
x >=
e
answer = True XOR fail = false
chr == ‘C’ || chr = ‘c’ && x >= n[ 5 ]
chr = ‘C’ OR chr = ‘c’ AND x >= n( 6 )
x >= 1 AND x <= 5 AND check = true
u
s
e of complex expressions should be minimised or eliminated, if at all
possible. Some examples of what is possible are shown in table 12
below.
Page 38
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Java
x + ( 3 *y) >= y * 3 + (x - -1)
x + nA[ 5 ] <= 2 | | y + (2*x) <= d
name = = “Bob Coomber” && duration <= (hours / 24) + days
nA[ 5 + (2*x) ] >= bA[ y ]
Visual Basic
x + ( 3 *y) >= y * 3 + (x - -1)
x + nA( 5 ) <= 2 OR y + (2*x) <= d
name = = “Bob Coomber” AND duration <= (hours / 24) + days
nA( 5+(2*x) ) >= bA( y )
Table 12. Examples of complex Boolean expressions
3.9.7
Expression Analysis and Evaluation
Once an expression is entered into a component, it undergoes evaluation to
check for errors. The aim of Progranimate is to inform the user of the error in
plain English and to limit the use of technical jargon where possible.
3.9.7.1
Syntax Analysis
Once entered, an expression is evaluated for syntactical errors. The
following ten checks are carried out to validate the expression’s syntax.
1. Ensure the count of opening parenthesise matches the count the
closing parenthesise.
2. Ensure the count of opening array index brackets matches the
number of closing array index brackets.
3. Ignoring brackets, ensure the syntax is in the form Value Operator
Value Operator Value etc.
4. Ensure all named variables or arrays exist in the inspector.
5. Ensure the data types of all values to be calculated or compared are
compatible with each other.
6. Ensure all operators are valid.
7. Ensure the operators used are compatible with the values and sub
values of the expression.
8. Ensure one assignment operator is used for all assign components
and no assignment operator is used for all others.
Page 39
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
9. Ensure the assignment operator is the second item of an assignment
expression.
10. Where assignment takes place, ensure the result of the expression is
compatible with the variable or array element being assigned to.
There is a very wide rage of syntax errors generated by Progranimate.
With respect to syntax error handling, Progranimate aims to be more
contextual than most standard development environments. Furthermore,
all of the errors generated by Progranimate are in plain English;
technical Jargon has been limited where at all possible. Four examples
of Progranimate’s syntax errors are shown below.
Example 1:
A user may attempt to reference a non-existent variable or array
when defining a component or structure. In this case, Progranimate
should display the following syntax error:
The variable X does not exist.
Example 2:
An error will be generated when a user attempts to enter an
unrecognised operator or symbol. For example, using Java’s not
equal operator != when VisualBasic.net is selected causes the
following error message to appear:
!= is invalid. Ensure you have typed the expression correctly.
Example 3:
Look at the following erroneous Java expression. Can you see what
is wrong with it?
x=x++2
Example 4:
The user has entered two pluses. This is either because they entered
a plus one to many times or because a value is missing between the
two plus operators. In any case, the following error message is
generated.
The symbol + is in an invalid location within the expression.
3.9.7.2
Operator Precedence
Each expression entered into Progranimate is evaluated using the
normal order of precedence pertaining to the selected Language. When
it comes to the order of mathematical expressions, most languages
Page 40
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
conform to normal mathematical rules of precedence. However, when
it comes to the precedence of logical and other operators, the order of
precedence may differ very subtlety. Table 13 demonstrates the subtle
differences in operator precedence between the Java and
VisualBasic.Net languages.
During both entry and run time, Progranimate evaluates and calculates
its expressions in accordance with the rules of precedence. During
entry the expressions are evaluated for validation purposes. During run
time, expressions are evaluated so that the variable and array inspectors
can be appropriately updated.
Precedence
Java
Visual Basic
1
Array Brackets: [ ]
Array Brackets: ( )
2
Parenthesise: ( )
Parenthesise: ( )
3
Multiplicative: * and /
Multiplicative: * and /
4
Additive: + and –
Additive: + and -
String concatenation: +
5
Comparison:
String concatenation: &
>, < , >= and <=
6
Comparison:
Comparison:
!= and = =
>, <, >=, <=, = and <>
7
Logic AND: &&
Logic AND: And
8
Logic OR: | |
Logic OR: Or
9
Logic XOR: ^
Logic XOR: Xor
Table 13. Operator precedence
For precedence relating to the operators of other languages
implemented by Progranimate, see the technical documentation
relating to that language. It may be worthwhile to take a look on the
Internet. For most popular programming languages, the Internet is a
great resource for finding information about operator precedence.
4.0
Animating a Program
The animation of user or pre created programs is one of Progranimate’s main features. The
animation of the flowchart and code representation of a program is synchronised. The
animation features of Progranimate aim to reinforce students’ understanding of program
flow and execution in both the flowchart and code representations. These features also help
Page 41
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
students to learn effective debugging techniques, a transferable skill that should stay with
the student once their abilities have graduated past the scope of Progranimate.
The animation works by stepping through a program, highlighting the flow of execution one
component and line of code at a time. As each component or line of code is highlighted,
Progranimate performs a relevant action relating to that component. As changes are made to
a program data, it is shown as it happens via the variable and array inspectors. A console is
also utilised to handle input and output from the print and read components.
For example, when a print is reached, the expression it contains is evaluated; the result is
then printed to screen via the console. When a read is reached, the animation halts while the
user enters data from the keyboard into the console. The variable referenced by the read
component is then updated; the changes are shown in the variable inspector and animation
recommences . When an assignment statement is reached, its expression is evaluated; the
variable inspector is then updated appropriately. If, If_Else and While structures contain
decisional components that alter the flow of execution down one of two possible paths. This
is dependant on the result of the Boolean expression they contain.
4.1
The Animation Controls
The animation controls are situated on the tool bar above the workspace. They allow
the user to run an animation from start to end, step though an animation one
component at a time and pause or stop an animation. The animation controls are
shown below in figure 20.
Figure 20. The animation controls.
Run
Select this option to run an animation from start to end.
Step
This option steps through a program one component and line of code at a time. If an
animation is running when this option is pressed, Progranimate will pause. When
paused, the step function can be used to step through the remainder of a program’s
execution manually. Progranimate begins a new animation if an animation is not
already running when this option is selected. At any time during step mode, the user
may click run to begin automatic animation from the current point onwards.
Pause
At any time during an animation the user can click pause to halt the animation. When
it is paused, the user can click pause again to resume animation. The step feature can
also be used to manually step through the remainder of the program’s execution.
Stop
Page 42
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
During animation, the stop button will stop the animation. Once stop button is clicked,
the current animation cannot be resumed. Once the last component (the terminator) is
reached, the stop button will be automatically engaged. Once the animation has
stopped, the inspector’s values will remain in the post animation state until the user
performs the next mouse click. Once the next mouse click has been detected the
inspectors will reset to the state they were in prior to animation. This allows for
observation of the changes made by the executed program.
Speed Slider
The speed slider is used to control the speed of animation where one is slow and ten is
fast. The speed slider is useful for speeding through programs that have loops with
many iterations.
4.2
The Console
The console is activated during
animation to perform input and output
tasks for the print and read
components. An example of the
console is shown below in figure 21.
When a print component is reached, the
expression it contains is evaluated. If
not currently active, the console is
displayed, and the result of the
analysed expression is then printed
within it.
When a read component is reached, the
console pops up to take keyboard input
Figure 21. The input output console.
from the user. At this point the program
pauses until valid data has been entered. The entry is then validated to make sure it is
compatible with the data type of the variable or array element referenced by the read
component. Once data is entered, the on screen enter button is clicked. If the input is
valid, then animation resumes, and the relevant variable or array is updated in the
inspectors. If the input is invalid, an appropriate error is displayed. In this case, data
must be re-entered and revalidated.
4.3
Skipping through links
In the animation tab of the advanced settings, an option is provided to skip through
links at high speed. This option benefits the flowchart view only. It causes the
animation to momentarily speed up through paths of flow that do not contain
Page 43
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
components. The advanced settings panel can be found on Progranimate’s file menu.
For more information on the advanced settings, see section 8.0.
5.0
Loading and Saving a Program
At any time except during animation, Progranimate allows programs to be loaded and saved.
The load and save options are located on the tool bar and on the file menu of Progranimate.
5.1
Saving a Program
When a program is saved, all of Progranimate’s settings, including the selection of
language, advanced options and its visual appearance are saved alongside program
data. This means that the visual state of Progranimate at the time of saving will be
retained in a file. When a file is loaded this visual state is reinstated by Progranimate,
as are all of Progranimate’s other settings including language selection and advanced
options.
The save feature uses the file selection method native to the operating system used.
It is recommended that when a file is saved in Progranimate, the file extension .prg
is used. In the Microsoft Windows operating system, Progranimate can save and load
a file with no extension, but this is not recommended.
5.2
Loading a Program
A Progranimate file should end in the .prg extension. When a file is loaded the
settings of Progranimate may change. This is because a file retains all of
Progranimate’s settings when saved and re-instates them when loaded.
The load feature uses the file selection method native to the operating system used.
Page 44
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
5.3
©2008 Andrew Scott
Auto Loading
When Progranimate is launched via Java Web Start of Applet deployments the
launching JNLP file or HTML page can specify a program file stored locally or on a
web server. This program file will then be loaded automatically as Progranimate
starts up. This is ideal for demonstrating concepts to users via an online tutorial. It
can also be used for providing partially completed problems to solve. This makes
Progranimate an ideal accompaniment to an online tutorial involving the basic
imperatives of programming.
If Progranimate is launched via the Java Web Start or Applet deployments, the
parameters specified in the JNLP file or Applet calling code will override the settings
of any file being launched automatically at start up. Section 1.0, entitled ‘Deploying
Progranimate’, will provide more information on pre-specifying a file to load in at
start-up. It also explains how to externally configure almost all of Progranimate’s
settings externally via parameters.
6.0
Language Selection Code Generation and Translation
So that the user is not bogged down with the complexities of syntax, lines of code are not
directly entered into Progranimate. Programming components and structures are defined
individually and added to a program by interacting with either the flowchart or code views.
The flowchart and code views update synchronously and tidily. When a component or
structure is added to the flowchart view, corresponding components or structures will appear
in the code view, and vice versa. The code generation features of Progranimate
automatically generate code as components are added to a program.
6.1
The Languages Available
Progranimate has the ability to generate code in a variety of languages. The current
range of implemented languages is as follows:
Java,
VisualBasic.Net
VisualBasic6.0.
When a language is selected in Progranimate, any entered expression must conform
to the rules governing the selected language. For information on selecting the
language, see section 6.3.1, which discusses the code generation menu options.
6.2
Language Translation
Progranimate provides the unique ability to translate a program between languages.
This is because Progranimate utilises a subset of the primary programming
Page 45
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
components and structures that are common to most third generation languages. This
makes it possible to analyse and translate a program and its data between languages.
To translate from the current language to another, a different language must be
selected from the code generation menu. This can be done at any time other than
during animation. Once the selection has been made, the current program is
automatically analysed and translated to the new language. The flowchart, code and
variable inspectors are then immediately updated to reflect the syntax of the new
language.
Occasionally, there may be an inconsistency between the current language and the
selected language. For this reason, the translated program is checked for syntax
errors immediately after translation. For example, VisualBasic6.0 does not have an
implementation of the character data type, but Java and VisualBasic.Net do.
Therefore, it is not possible to translate programs containing characters to
VisualBasic6.0; this causes an error. However, a simple way to overcome this
limitation is to manually convert all character data types to string data types.
6.3
The Code Generation Menu
Progranimate has a dedicated menu for customising the code generation features of
Progranimate. The code generation menu is shown below in figure 22. Its options are
discussed further in the following three sections.
Figure 22. The code generation menu.
6.3.1
Language Selection
The Code Generation menu allows the user to select from a range of different
languages. Progranimate can generate computer code in a range of languages.
Currently, this includes:
Java,
VisualBasic.Net
Visual Basic6.
Page 46
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Selecting a language will cause the current program to be translated to the
newly selected language. See section 6.2 for more details on language
translation.
6.3.2
Code Commenting Level
The program code can also contain commenting in the form of grey coloured
text. The commenting is automatically generated and signifies the purpose
ofclosing brackets in Java or End statements in Visual Basic. For example, in
Java the commenting can signify: end of class, end of method, end While or
end If, e.tc. The commenting features are also used by other languages such
as VisualBasic.Net and Visual Basic 6.0 to comment the end statements
belonging to While, If and If_Else structures, as well as the end statements
belonging to sub procedures and modules. The table below shows how
commenting is used in the Java and VisualBasic.Net languages.
Java
Visual Basic.Net
public class Untitled
{
public static void main(String[] args)
{
int x = 1;
String name = "";
while (x < 10)
{
x = x + 1;
}//End While (x < 10)
if (x > 2)
{
System.out.println("Hello");
}//End If (x > 2)
Module Untitled
Sub Main
Dim x as Integer = 1
Dim name as String = ""
While x < 10
x=x+1
End While'(x < 10)
If x > 2
Console.WriteLine ("Hello")
End If'(x > 2)
End Sub'End of Main sub
End Module'End of Modlule Untitled
}//End Main
}//End Class
Table 14. Examples of Commenting
Three levels of commenting are available. These are: none, basic and
advanced.
Selecting none will mean no commenting is generated at all.
Selecting basic means that basic commenting will be generated, for
example:
Java
Page 47
Visual Basic.Net
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
If ( x > 1)
{
System.out.println(msg1);
}//end If
©2008 Andrew Scott
Module Untitled
Sub Main
Dim x as Integer = 1
If x > 1
Console.WriteLine ("hello")
End If
End Sub'Main
End Module'Untitled
Table 15. Examples of basic commenting
The syntax of VisualBasic.Net and VisualBasic6.0 has a tendency to be more
intuitive in respect to its structure ending syntax. Therefore, when basic
commenting is selected for these languages, much of the commenting is
redundant. For this reason, in VisualBasic.Net and VisualBasic6.0 basic,
commenting only appears on End Sub and End Module statements.
A third advanced commenting option is also available; this provides a more
detailed level of commenting. By adding arguments to the commenting of
structure ends, it becomes easier to spot which structure the end bracket or
end statement belongs to. The need for this becomes apparent with more
complex programs, when multiple Ifs or Wiles are nested within each other.
Table 13 below demonstrates this:
Java
VisualBasic.Net
public class Untitled
{
public static void main(String[] args)
{
int x = 1;
if (x > 1)
{
System.out.println("hello");
if (x > 2)
{
while (x < 1)
{
x = x + 1;
}//End While (x < 1 )
}//End If (x > 2 )
else
{
if (x > 3)
{
System.out.println(x);
}//End If (x > 3 )
}//End Else (x > 2 )
}//End If (x > 1)
Module Untitled
Sub Main
Dim x as Integer = 1
If x > 1
Console.WriteLine ("hello")
If x > 2
While x < 1
x=x+1
End While'(x < 1)
End If '(x > 2 )
Else
If x > 3
Console.WriteLine (x)
End If '(x > 3)
End Else'(x > 2 )
End I f'(x > 1)
End Sub'End of Main sub
End Module'End of Modlule Untitled
}//End Main
}//End Class
Page 48
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Table 16. Complex nesting and advanced commenting.
6.3.3
Font Size
It is possible to change the size of the font used in the generated code. There
are five options available in the code generation menu. These are:
Largest
Large
Medium
Small
Smallest
6.3.4
Font Style
The font style options of the code generation menu make it possible to
change the font type of the generated code. There are three options available.
These are:
Sans_Serif,
Serif ,
Monospaced.
Page 49
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
7.0
©2008 Andrew Scott
Visual Settings and Adjustments
Progranimate can be visually adjusted in many ways. Via the view menu, the various visual
features of Progranimate can be turned on or off. Advanced settings enable the user to
change the representation of the variable inspectors from a table to a tree based
representation. This section discusses the many options for visually adjusting Progranimate.
Figure 23 below highlights how Progranimate’s user interface is visually composed.
Page 50
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Figure 23. Progranimate’s Visual Composure.
7.1
The View Menu
The view menu is the third menu of Progranimate’s menu bar. It allows the user to
show or hide the various visual features of Progranimate’s user interface. The view
menu provides six options, which are discussed below.
Figure 24. The view menu.
Flowchart
The flowchart menu item toggles the flowchart view on or off. The program
workspace area is normally split equally between the flowchart and code
Page 51
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
views. However, when the flowchart view is deactivated, the code view
expands, taking up the entirety of the workspace area.
Code
The code menu item toggles the flowchart view on or off. The program
workspace area is normally split equally between the flowchart and code
views. However, when the code view is deactivated, the flowchart view
expands, taking up the entirety of the workspace area.
Palette
This option toggles the palette on or off. When the palette is deactivated, the
area available to the workspace is increased.
Toolbar
This option toggles to tool bar on or off. When the tool bar is deactivated, the
area available to the workspace is increased.
Variable Inspector
This option toggles both the variable and array inspectors on or off. When the
variable inspectors are inactive, the remaining space is taken up by the
workspace. This increases the screen space available to display the flowchart
and code views.
Component Info
This menu item toggles the component info panel on or off. The component
info panel resides below the workspace. When inactive, the workspace
expands to take up the remaining space. This increases the screen space
available to display the flowchart and code views.
7.2
Resizing Parts of the User Interface Using Split Dividers
Progranimate’s user interface contains three split panes. These split panes divide the
screen space between two visual features. The dividers of these split panes can be
dragged by the mouse. This allows the user to adjust the amount of screen space
allocated to each feature. Figure 25 below demonstrates the three split pane dividers
by highlighting them in blue.
Page 52
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Figure 25. The spit pane dividers.
Flowchart / Code Split
There is a vertical divider between the flowchart and code views. Dragging this left
or right changes the proportion of the screen devoted to each program view.
Workspace/ Inspector Split
Another vertical divider resides between the workspace and the inspectors. Dragging
it left or right will change the proportion of the screen devoted to the workspace and
inspector.
Variable / Array Inspectors Split
A divider is located between the variable and array inspectors. This divider is
vertical; when it is dragged up or down, the proportion devoted to the variable and
array inspectors changes.
7.3
Changing the Visual Representation of the Inspectors
Page 53
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
By default the variable and array
inspectors are represented as tables. It
is possible to change this
representation so that its variables and
arrays are represented by a tree
structure.
The option for changing the
inspector’s representation is in the
advanced settings panel. This can be
found by going to the File menu and
clicking the option, Advanced
Settings.
If a variable representation is not
already visible, click the tab marked
variables. Via the option marked
‘Variable Visual Representation’ it is
possible to select from either a table
or tree representation. Select tree and
then click ok. The variable and array
inspector should now be presented as
a tree structure.
Figure 26 shows the two
representation types, table and tree.
Figure 26. Inspector representations.
7.4
Adjusting the Font Size of the Variable and Array Inspectors
There may be times when the inspector’s
default text size is too small or too large.
Their font size can be adjusted easily via the
advanced settings panel. To open the
advanced settings panel, click on the file
Figure 27. Font size options
menu and then on the Advanced Settings
option. The advanced settings panel should then pop into view. If not already visible,
click on the tab marked Variables. The bottom most setting should have six radio
buttons as shown in figure 27. The function of the first five buttons sets the text size
of the inspector. The option marked ‘auto’ makes the font size of the inspector match
that of the code view. In this case, the font size of the inspector is adjusted when the
font of the code view is changed.
Page 54
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
8.0
©2008 Andrew Scott
Advanced Settings Menu
If a novice user is exposed to a vast array of
features and options, they may quickly
become overwhelmed. For this reason, the
more technical features of Progranimate
have been neatly tucked away in the
advanced setting panel, keeping them out of
view of the novice.
The settings panel can be accessed from the
File menu by clicking the option Advanced
Settings. The advanced settings panel is
shown in figure 28.
This panel consists of three tabbed panes
that contain settings for Variables,
Animation and Programming. These are
discussed further in the following sub
sections 8.1 to 8.3.
Figure 28. The settings Panel.
Once the chosen settings have been altered, they will not be applied until the ok button is
clicked (or enter key pressed). Once OK is clicked, the new settings will be applied; the
interface will then update relevantly. When a file is saved, the advanced settings will be
saved with it. When the file is loaded, the advanced settings will be retained and reinstated.
If the settings are not to be applied, the cancel button or escape key will cause the panel to
close without applying any changes.
8.1
Variables
The variable tab (shown in figure 26) has five settings relating to the use of variables
and arrays within Progranimate. These are discussed below.
Max Number of Variables
This option is used to set the maximum number of variables allowed in
Progranimate. The default value of this option is fifty. If an attempt is made
to exceed this number of variables, an error message will be displayed.
If the number of variables already in use exceeds that of the selected
maximum value, an error message is generated. The user will then be asked
to reselect another value no less than the number of variable in use.
This option can be useful for placing constraints on a programmer; for
example, a user could be given a problem to solve using five or less
variables.
Page 55
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Max Number of Arrays
This option is used to specify the maximum number of arrays permissible in
Progranimate. The default value for this option is twenty. If an attempt is
made to exceed this figure, an error message will be displayed.
If the number of arrays already in use exceeds that of the selected maximum
value, an error message is generated. The user will be asked to reselect
another value no less than the number of arrays in use.
This option for can be useful for placing constraints on a programmer; for
example, a user could be given a problem to solve using a maximum of two
arrays.
Inspector Visual Representation
This option allows the user to choose the visual representation of the variable
and array inspectors. The choices are table based or tree based
representations. For more information, see section 7.3, entitled “Changing the
Visual Representation of the Inspectors”.
Direct Value Entry
This option enables or disables the ability to give variables and arrays initial
values during definition. When this feature is disabled, the user is unable to
specify an initial value or values. In this case, variable and array elements are
initialised with the default value pertaining to their data type. Values are then
set using the assignment component only.
When direct value entry is disabled, the value field of the variable and array
definition windows will not be present. Usually, the number of elements is
worked out by the number of comma-delimited values entered into the value
field. However, no values will be entered, therefore the size must be defined
manually. See section 3.0 for more information on defining variables and
arrays.
Font Size of Inspector
This final option is used to adjust the font size of the variable and array
inspectors. There are five sizes, ranging from smallest to largest. There is also
an auto option that synchronises the font size of the code view and inspectors.
For more information on this option, see section 7.4 entitled, ‘Adjusting the
Font Size of the Variable and Array Inspectors’.
8.2
Animation
The animation tab currently contains only one option, the option to skip through
flowchart links. During animation, this option momentarily speeds up animation
through the links that have no components, such as loop return and exit paths. For
more information on this option,b see section 4.3, entitled “Skipping Through
Links”.
Page 56
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
8.3
©2008 Andrew Scott
Programming
The final tab of the advanced settings panel contains options relating to
programming.
Allow Blank Parameters
When this feature is enabled, components and structures can be added to a program
with no parameters. This allows the users to focus on the design of a solution before
constructing the expressions needed to make the program function. This is also
handy for creating partially completed solutions, where users must fill in the blanks.
Right Click Popup Menu
This option enables or disables the right click popup menu that allows the user to
Edit, Delete, Cut, Copy or Paste components and structures in the code and flowchart
views.
Double Click Edit
When this feature is enabled, the user can then double click on a component,
structure variable or array to edit its attributes.
Edit / Delete Selection Methods
This final option sets the selection methods for editing or deleting components,
structures, arrays and variables (collectively referred to as items). There are three
options available. These are discussed below:
Select then Option
When this option is enabled, an edit or delete is performed by clicking the
item and then the option in the palette.
Option then Select (default)
When this option is enabled, an edit or delete is performed by clicking the
option in the palette and then the item.
Both
When this option is enabled, both of the above methods will work for editing
and deleting items within Progranimate.
Page 57
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
9.0
©2008 Andrew Scott
Error Handling
Progranimate handles a very large number of errors. All of the errors generated by
Progranimate aim to be in plain English; technical Jargon has been limited where at all
possible.
The full range of errors generated by Progranimate is too large to list. The errors can be
categorised into six error types; these are given below.
Syntax Errors
Syntax errors are most commonly encountered when the user is defining expressions
to be associated with components or structures. They can also be encountered when
translating incompatible features between languages. See section 3.9.6 for more
information on syntax errors and 6.2 for more information on language translation.
Run Time Program Errors
Run time programming errors are due to poor program design. For example, they are
generated when the user exceeds the maximum value that can be stored in an integer
variable, or when the user exceeds the bounds of an array with an arbitrary value, as
shown below.
X = anArray[Y]
As with the two previous examples, this type of error message is due to errors in the
programs design and cannot be detected until run time. When run time errors occur,
the user animation is halted and the user is informed appropriately.
Non-existent Variable or Array Errors
This type of error is generated when a user attempts to reference a non-existent
variable or array from within an expression.
Variable or Array Definition Errors
This category of error is generated when a variable or array is defined. This could be
an error with the name entered or a mismatch between the selected data type and the
entered initial value.
Component or Structure Placement Errors
Where the user attempts to add a component or structure in an invalid location within
the code or flowchart representations of a program.
Progranimate System Errors
These Errors are due to the incorrect use or operation of Progranimate. System
errors and bugs can also cause this type or errors. They usually indicate partial
program failure of Progranimate such as failure to load a file. These errors are very
uncommon when Progranimate is used correctly. They should not be encountered
under normal usage conditions.
Page 58
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
10.0 Deploying Progranimate
This final section explains how to deploy Progranimate on a standard web server and launch
it via the Java Web Start (JWS) and Applet deployment methods. Also discussed in this
chapter is the full range of parameters for externally customising Progranimate. These
parameters allow the web master to pre-specify how Progranimate will look, what file to
load, and many other settings.
This section assumes users have a basic understanding of HTML and web page creation via
the World Wide Web. Knowledge of Java Web Start and JNLP is beneficial but not
essential. For information on these technologies, see [REF].
10.1
Web Server Installation
All that is needed to deploy Progranimate over the World Wide Web or intranet is a
single Jar file Called ProgranimateV3.Jar. Place this file in a convenient and
logical location on your web server. That’s it!
This Jar file cannot be reliably launched directly. To launch Progranimate via this
file, you will use either the Java Web Start or Java Applet deployment methods. For
information, please see sections 10.2 Java Web Start Deployment and 10.3 Applet
Deployment.
Please note the ProgranimateV3.Jar file is not currently publicly available. If you
would like a copy, please get in touch with the author at the following email address:
ASScott@glam.ac.uk
10.2
Java Web Start Deployment
Once you have placed a copy of Progranimate’s Jar file on your web server, it can be
launched via the Java Web Start (referred to as JWS from here in) deployment
method. JWS is program delivery mechanism that works via a standard web server.
It allows server-stored Java programs to be launched as stand alone applications on
client computers. With JWS, programs are initiated by a JNLP (Java Network
Launch Protocol) file. This file is usually called from a hyper link contained within a
standard web page. The following section explains how to create a basic JNLP file
and link it to a web page in order to launch Progranimate. The following sections
contain information on passing parameters to Progranimate, as well as trouble
shooting tips.
10.2.1 Creating a Basic Launch File
JNLP is the underlying delivery and security protocol that allows JWS to
function. To launch Progranimate via JWS, a JNLP file will need to be
constructed. This section explains how to create a basic JNLP so that
Progranimate can be launched from a web server to a client computer.
Page 59
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
1. Open a text editor such as notepad.
2. Copy the following XML template into the text editor.
<?xml version="1.0" encoding="UTF-8"?>
<jnlp codebase="http://www.webserver.com/Progranimate/" href="progranimate.jnlp">
<information>
<title>Progranimate 1.5</title>
<vendor>Andrew Scott - University of Glamorgan</vendor>
<description>Graphical programming for novices</description>
</information>
<security>
<all-permissions/>
</security>
<application-desc>
<argument>ApplicationType=</argument>
<argument>web</argument>
</application-desc>
<resources> <j2se version="1.5+"/>
<jar href="progranimateV3.jar"/>
</resources>
<application-desc main-class="GPTool.Standard_Interface"/>
</jnlp>
3. Edit the code base parameter to contain the URL of Progranimate’s jar
file, excluding the file name itself (shown in blue).
4. Save the created text file as Progranimate.jnlp to somewhere convenient.
* Note the href attribute in red must point to the location and name of this
JNLP file relative to its code base attribute.
5. Copy the recently created file to the web server, and place it in the same
directory as Progranimate’s Jar file.
6. Create a HTML web page with hyperlink to the JNLP file, for example:
<html>
<head>
Progranimate Launch Page.
</head>
<body>
<a href=”http://www.webserver.com/Progranimate/Prograimate.jnlp”>
Launch Progranimate.
</a>
</body>
</html>
7. Save this HTML document to a convenient location on the web server.
Now that the JWS deployment of Progranimate is complete, it can be
launched. The following section covers the launching process.
Page 60
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
10.2.2 Launching Progranimate Via Java Web Start
Once all files are in place, starting Progranimate via Java Web Start is simple.
Via a Java Plugin enabled web browser, go to the URL of the web page
created in the last section. Now click on the link ‘Launch Progranimate’; this
will initiate the launching process. You should then see the standard Java
splash screen, followed by a download progress window. These are shown in
figure 29 below.
Figure29. The default splash screen and download progress window.
The speed of the Internet connection will greatly effect the time Progranimate
takes to download. A high-speed Internet connection above 2mbps should
download Progranimate for the first time in less than a minute. If the client
and web server share the same network, then the download should in normal
circumstances complete in under twenty seconds (depending on network
traffic). Subsequent downloads will be quicker, as the Jar file is cached on the
client’s computer. Only when the server side program file changes will the
client need to download the program file again. Because of the size of
Progranimate’s program file (approximately 2mb), this method of
deployment may not be suitable for traditional dialup connections or
connections with speeds under 256kbps.
Figure 30. Security Warning.
Once the file is downloaded for the first time, the computer will display a
security warning, as in figure 30. Click the box marked “Always trust content
from this publisher”. This will ensure that this window is not displayed the
next time Progranimate launches. Finally, click OK, and Progranimate will
begin shortly afterwards.
Page 61
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
10.2.3 Passing Parameters Via WJS
It is possible to pass parameters to Progranimate via the JNLP launch file. An
inconsistency between the web start and applet deployment methods is that in
JNLP, parameters are known as arguments. However, these arguments
provide the same function as an applet’s parameters. The arguments can be
used to load program files or change the appearance and functionality of
Progranimate. Any number of JNLP files may reside on the web server, each
providing a unique set of customised options and settings.
The location of the arguments is governed by the syntax rules relating to
JNLP file. See [1] for more information on JNLP syntax. The arguments
reside within the <application-desc> elements of the JNLP file. In the code
below, these arguments are shown in red.
<?xml version="1.0" encoding="UTF-8"?>
<jnlp codebase="http://www.webserver.com/progrranimate/" href="progranimate1.jnlp">
<information>
<title>Progranimate 1.5</title>
<vendor>Andrew Scott - University of Glamorgan</vendor>
<description>Graphical programming for novices</description>
<icon href="splash1.jpg" kind="splash"/>
</information>
<security>
<all-permissions/>
</security>
<application-desc>
<argument>ApplicationType=</argument>
<argument>web</argument>
<argument>FileURL=</argument>
<argument>http://www.webserver.com/Progranimate/prog1.prg</argument>
</application-desc>
<resources> <j2se version="1.2+"/>
<jar href="proganimate1.jar" download="eager"/>
</resources>
<application-desc main-class="GPTool.Standard_Interface"/>
</jnlp>
For each of Progranimate’s settings, two argument elements are required. The
first argument is used to specify the argument name. The second is for
specifying the argument value. The argument name must be followed by an
equals symbol to signify it as an argument name.
<argument>Argument Name=</argument>
<argument>Argument Value</argument>
For example: To specify a file to be loaded at start-up, the following
parameters would be used:
<argument>FileURL=</argument>
<argument>http://www.webserver.com/Progranimate/prog1.prg</argument>
Page 62
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Some arguments contain composite values. These values are enclosed in
square brackets and delimited with commas. One example of this is the
settings used to specify the view options; this is shown below.
<argument>Visual=</argument>
<argument>[code, flowchart ,toolbar,]</argument>
This example will make only the code, flowchart and toolbar components
visible when Progranimate starts up. The other non-referenced components
then remain inactive and invisible until turned on via the menu settings.
However, in this example the menu was not specified, therefore, it is not
visible. This means the user cannot change its settings. This is a simple way
to prevent the user from changing these settings if need be. When the
previous two sets of arguments are used in the JNLP file, Progranimate will
launch as shown below in figure 29.
Figure 31. Web Start Example.
When deploying Progranimate via JWS, it is necessary to include the
following arguments.
<argument>ApplicationType=</argument>
<argument>web</argument>
These inform Progranimate of the deployment method in use, thus allowing it
to refine its look and feel appropriately.
For more information on the full range of available arguments and their
function, see section 10.4.
Page 63
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
10.2.4 Troubleshooting Java Web Start Deployment
If problems or error messages were encountered when launching the
Progranimate via JWS, read on. This section provides tips that may help
identify the cause of the problem. A list of common errors and their solutions
is provided below.
The Page Cannot Be Displayed or HTTP 404 Error
Problem:
When using an HTML hyper link to reference the JNLP file, the
browser displays a HTTP 404 Error or says that The page cannot be
displayed.
Possible Solutions:
Check that the URL of the HTML file is supplying the link. Has it been
typed correctly?
Check the location and file name of the JNLP file on the server. Has it
been typed correctly, and is it in the right folder?
The Link Does Not Work and Seems To Do Nothing.
Problem:
Clicking the hyperlink ‘Launch Progranimate’ appears to do nothing.
Possible Solutions:
Check the syntax of the HTML file. Have the anchor <a> elements
been used properly?
Have the attributes (i.e. href=“webserver.com/file.jnlp”) been entered
correctly?
Check that the HTML within the file is not malformed, invalid or
erroneous in any way.
Page 64
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Unable To Launch Progranimate or Unable to Launch The
Application
Problem
A splash screen is displayed, followed by an error saying ‘unable to
launch Progranimate’ or ‘unable to launch the application’, as shown
in figure 32 below.
Figure 32. Two Unable to Launch Messages.
Cause:
This error usually indicates that Progranimate’s Program file
(ProgranimateV3.jar) cannot be found on the server. This could be
caused by a number of faults.
Possible Solutions:
Firstly, check that the URL of the Jar element is located in the JNLP
file; this is show below. The href= attribute should point to
Progranimate’s Jar archive file on the server, either directly or
relatively. Check this carefully for typing errors or misspellings.
<jar href="webserver.comprogranimate/proganimateV3.jar" download="eager"/>
Check the Jar file on the server- has it been placed in the correct folder, and
is its file name correct? It should be called ProgranimateV3.Jar
Check which version of Java is installed on the client’s computer. It should
be running J2SE 1.5 or greater. If the version installed is below V1.5, the
above error dialog will be generated.
Page 65
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
The File Specified Will Not Load
Problem:
The file specified in the JNLP file’s arguments does not load, and the
following error message is displayed on screen.
Figure 33. Error Loading File.
Cause:
This type of error means that Progranimate cannot locate the file at
the URL or directory specified. Check that you have typed the URL
and file name correctly in the arguments of the JNLP file.
Possible Solutions:
It may be worth checking that the file exists on the server and that it
has not been placed in the wrong directory.
If the previous checks have been done and this error appears, then
there may be a problem with the MIME types of the server. Ask the
server administrator to enable the .prg file extension in the web
server’s MIME types. If you don’t know what MIME types are, do
not worry; your web server administrator should know.
I Cannot See All Of The Flowchart
Problem:
The entire flowchart is not visible when loaded.
Cause:
Large flowcharts may not fit on a single screen when drawn at normal
scale. However, the flowchart window has scroll bars that allow
navigation though large programs. Using the zoom slider, a flowchart
can be scaled down so that it fits on screen.
Possible solution
Upon loading, it may be desirable to fit the flowchart within a single
screen. This can be achieved by using the zoom= argument. For use
on the zoom arguments, see section 10.4.
Page 66
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
I Cannot See All Of The Program Code
Problem:
The program code does not fit on a single page; some of it is out of
view.
Cause:
Large programs may require more than a single page of code. For this
reason, the code view is scrollable both vertically and horizontally,
allowing the user to view all of the code.
Possible Solutions:
It may be desired to fit the code within a single page without the need
for scrolling. This can be done manually, using the font size settings
in the code generation menu.
However, it may be required to have the code fit on screen upon
loading. To achieve this, the text size can be adjusted using the
FontSize= argument. For more information on using this argument,
see section 10.4.
Progranimate Did Not Appear As Expected
Problems:
Progranimate did not appear as intended. Some of the visual features
specified in the parameters are not shown.
All of the visual features were shown when only a few were specified
in the parameters.
Possible Solutions
The visual= arguments may be at fault. If not all expected
components appeared, check the associated value element for the
following problems.





Page 67
Have you miss-typed the argument name ‘Visual=’?
Have you miss-typed the names of the features to be
displayed?
Is one of the opening or closing square brackets missing from
the values?
Are all of the values separated by a comma?
Have the opening <argument>and closing </argument>
elements been typed correctly- are there any missing angled
brackets or typing errors?
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
If all of Progranimate’s visual features appeared when only a few
were specified, check for typing errors in the Visual= argument
element and associated value element. If these arguments are
syntactically incorrect, they may not be passed to Progranimate.
When no Visual= arguments have been detected, Progranimate turns
all of its visual features on by default.
The Flowchart, Code or Inspector is Displayed Disproportionately.
Problem:
All intended components are visible but displayed to incorrect or unaesthetic proportions. For example, the variable inspector may take up
most of the applet when it should only occupy about twenty percent
of its right side.
Cause:
The split dividers’ locations are set wrong, causing visual features to
be displayed disproportionately.
Possible Solution:
The location of the split dividers can be changed manually by
dragging them with the mouse. However, a more elegant solution is to
pre-specify their location via the parameters WorkspaceDivider= and
VarinspecDivider= .
The WorkspaceDivider= divides the workspace area between
the flowchart and code views.
The VarinspecDivider= divides screen space between the
workspace and variable/array inspector.
The value attribute of these parameters sets the location of the divider.
The locations are specified in percentage terms; 0 is far left, 100 is far
right and 50 is in the middle. For more information on the split
dividers, see section 7.2, entitled ‘Resizing Parts of the User Interface
Using Split Dividers’.
Page 68
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
10.3
©2008 Andrew Scott
Applet Deployment
The applet deployment allows Progranimate to be contained within a web page.
Progranimate provides a diverse range of options and settings for the web master to
utilise. This allows Progranimate’s applet deployment to be customised in many
ways, making it an ideal focus point of an online tutorial involving imperative (non
object oriented) programming. Shown below are four examples of what is possible
with Progranimate’s web start deployment.
Figure 34. Four examples of applet deployment.
Once Progranimate’s application file (ProgranimateV3.jar) has been placed on a
web, it can be used to applet deployment. The following section explains how to use
the applet deployment method to integrate Progranimate into a web page. For more
information on applets, see: http://java.sun.com/applets/.
10.3.1 Creating a Basic Web Page To Contain Progranimate.
In order to deploy Progranimate as an applet, a web page must be constructed
to contain it. The following eight steps demonstrate the relative simplicity of
deploying Progranimate as an applet.
Page 69
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
1. Open a text editor such as note pad.
2. Copy the following HTML template into the text editor.
<html>
<head>
</head>
<body>
<center><h1>Progranimate Applet Example</h1></center>
<table width="100%">
<tr><td>
<center>
<applet code="GPTool.Applet_Container.class"
codebase="http://webserver.com/Progranimate/ " archive="progranimateV3.jar"
width="90%" height="800">
<param name="ApplicationType=" value="Applet"></param>
<param name="Zoom=" value="100"></param>
<param name="Speed=" value="6"></param>
<param name="ToolBarType=" value="Normal"></param>
<param name="FontSize=" value="Medium"></param>
<param name="FontType=" value="Serif"></param>
<param name="WorkspaceDivider=" value="35"></param>
<param name="VarInspecDivider=" value="70"></param>
<param name="Visual="
value="[flowchart,code,ToolBar,componentInfo,variables,Palette]"></param>
<param name="ApplicationType=" value="Applet"></param>
<param name="Zoom=" value="100"></param>
<param name="Speed=" value="6"></param>
<param name="ToolBarType=" value="Normal"></param>
<param name="FontSize=" value="Medium"></param>
<param name="FontType=" value="Serif"></param>
<param name="WorkspaceDivider=" value="35"></param>
<param name="VarInspecDivider=" value="70"></param>
<param name="FileURL=" value="http://websever.com/Progranimate/file1.prg">
</param>
</applet>
</center>
</td></tr>
<table>
</body>
</html>
3. Save the newly created text file as a HTML document. Name it
something memorable such as “Applet.html”. Do not close the file, as
you will continue to edit it.
4. Edit the code base parameter so that it matches the directory of
ProgranimateV3.Jar on your web server. The code base parameter has
been coloured blue in the text above.
5. Create a small test program file using Progranimate. To do this, use a
local copy of PrograimateV3.Jar. When the file is double clicked, it
should run as a local application. Name the created “file1.prg”. Save
this program file alongside the HTML file created in the last step.
Page 70
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
6. Arguments are passed to Progranimate using <Param> elements
containing ‘name=’ and ‘value=’ attributes. These are coloured red
and shown in the text above. The name attribute is used to name the
argument. The value attribute is used to pass the argument value.
7. Take a look at the green text in the example above. This parameter
tells Progranimate to load a file from the URL specified in the value
attribute. Edit this URL to that which the program file will have once
uploaded to the server. Resave the HTML file and close the text
editor.
8. Upload the Applet.HTML and file1.prg to the web server. For this
example, ensure they are placed in the same directory as
ProgranimateV3.jar.
The applet deployment is complete. The following sections show how to
launch the applet via the uploaded web page created in this section.
10.3.2 Launching an Applet
Point your web browser to the URL of the recently uploaded file
‘Applet.HTML’.
Because this will be the first time you have loaded the Progranimate applet, it
may take time to load. The loading times depend on the speed of the Internet
connection available. A high-speed connection such a broadband connection
above 1MB should take between 30 seconds to a minute to load. If the server
and client computer share the same network, this time will be significantly
reduced. *Please note traditional dialup connections or connections under
256Kbps may take a while to load. These speeds of connection are
considered impractical for accessing Progranimate online. Depending on
what version of Java is installed on the client computer (J2SE 1.5 or greater
required), you will get one of two loading screens. These are shown below.
Page 71
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Figure 35. The two varieties of Java’s of applet loading screens
As Progranimate’s program file is stored in the client computer’s cache,
subsequent loading times should be much quicker, if not almost
instantaneous. Once Progranimate has loaded, the following security
warning will be displayed on screen.
Figure 36. Applet Security Warning
As Progranimate is currently a prototype, a self-signed security certificate has
been used to reduce costs. As a result, the security warning states that the
publisher cannot be verified, but do not worry about this. Click the check
box, ‘Always trust content from this publisher’. This will ensure that this
security warning does not appear again. Now click the continue button, and
the applet should start and look something like the example below.
Figure 37. A Web Applet Example.
Successive launches should work instantly with no dialog boxes and only
momentary loading screens. If problems or error messages are encountered,
read the following chapter for trouble shooting advice.
Page 72
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
10.3.3 Passing Parameters to the Applet
In the example shown in section 10.3.1, a large selection of parameters were
passed to Progranimate via the HTML page used to contain the applet.
Unlike the web start deployment, each parameter only requires one set of
elements called <param>. These perform the same functionality as the JNLP
files <argument> elements. However, the <param> elements are formatted
differently. The opening element contains two attributes, name= and value=.
The name attribute contains the name of the parameter, for example:
<param name=”FileURL=” value=”webserver.com/file1.prg”>
As with all parameter names, the name must end in an equals ‘=’ symbol.
The value attribute contains the value of the parameter, for example:
<param name=”FileURL=” value=”webserver.com/file1.prg”>
These <param> elements are then placed inside the <Applet> </Applet>
elements of the HTML file, as shown below.
<applet code="GPTool.Applet_Container.class"
codebase="http://webserver.com/ " archive="progranimateV3.jar" width="90%"
height="800">
<param name="ApplicationType=" value="Applet"></param>
<param name=”FileURL=” value=”Webserver.com/file1/>
<./applet>
When deploying Progranimate via an applet, it is necessary to contain the
following argument.
<param name="ApplicationType=" value="Applet"></param>
This tells Progranimate what deployment method is in use, allowing
Progranimate to refine its look and feel appropriately.
For more information on the full range of available parameters, see section
10.4.
Page 73
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
10.3.4 Troubleshooting Applet Launching
If problems or error messages are encountered when launching the applet,
this section aims to help.
Browser Error -Page Cannot Be Found
Problem:
The web browser gives a ‘Page cannot be found’ or 404 or error when
the user is trying to view the HTML page containing the applet.
Possible Solutions:
Check that you have typed the URL correctly and that the HTML file
is in the correct location on the server.
Some web (Unix and Linux) servers are case sensitive. Check that the
case of the URL is correct.
Check the name of the HTML file. Does it have the file extension
.HTML or .HTM?
I Got a Red X in the Top Left Corner & Progranimate Does Not Start
Problem:
Progranimate does not start, and there is a red X in the top left of the
applet area of the web page, as in figure 36.
Figure 36. The Red X
Possible Solutions:
This error can be caused by a number of problems. The most common
error is that the CodeBase=or the Archive= attributes do not point to
Progranimate’s application file (ProgranimateV3.jar). This may be
caused by something as simple as a typing error.
Another cause of this error is that the code= attribute does not point to
a valid or correct class file. Ensure that the Code= attribute points to
the correct class file of Progranimate’s Jar file. It should point to
‘GPTool.Applet_Container.class’.
For the more technically minded, the red X icon can be right clicked.
The subsequent popup menu gives the option for viewing the Java
console. This will allow the error stack to be viewed. This may give a
more precise indication of the cause of the fault.
Page 74
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
The File Specified Will Not Load
Problem:
The file specified in the Program parameters does not load.
Progranimate displays following error message.
Figure 37.. Error Loading File.
Possible Solutions:
This type of error means that Progranimate cannot locate a program
file at the URL specified. Check that you have typed the URL and
File name of the file correctly in the parameters of the HTML file.
Some web servers are case sensitive. Ensure that the URL has been
typed to the correct case.
It may be worth checking that the file exists on the server and that it
has not been placed in the wrong directory.
If the previous checks have been done, and this error appears, then
there may be a problem with the MIME types of the server. Ask the
server administrator to enable the .prg file extension in the web
servers MIME types. If you don’t know what MIME types are, do not
worry; your web server administrator should know.
I Cannot See All Of The Flowchart
Problem:
The entire flowchart is not visible when the applet is loaded.
Possible Solutions
Large programs may not fit on a single screen when drawn, especially
when the size of the applet is relatively small. However, the flowchart
window has scroll bars to allow navigation though large programs.
However, if it is desired, the flowchart can be fit onto the screen by
drawing it at a lower scale. This can be achieved manually by
adjusting the zoom control.
Page 75
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
However, a more elegant solution is to modify the value of the
Zoom= parameter in the applet’s HTML file. The value is a
percentage can be set between 10%-300%.
Another way is to increase the size of the applet within the web page.
This will provide more space with which to contain the flowchart. To
increase the size of the applet, modify the width and height attributes
of the <applet> element in the applets HTML file. Be careful to keep
the applet smaller than the screen size of the client, otherwise the user
will have to constantly scroll when using Progranimate. In this case, it
may be wise to scale the flowchart down or consider using JWS
deployment.
I Cannot See All Of The Program Code
Problem:
The program code does not fit within the applet’s available screen
space.
Possible Solutions:
Large programs may not fit within the screen space available to an
applet. However, the code view is scrollable both vertically and
horizontally, allowing the user to view all of the code.
It may be desired to fit the code within a single page without the need
for scrolling. To achieve this, the text size can be adjusted (larger or
smaller) via the code generation menu.
However, a far more elegant solution is to have the text fit without
user interaction. To do this, change the value attribute of the
parameter FontSize= from medium to small or smallest. This will
allow more code to be displayed within the applet.
Some fonts are drawn smaller by design, allowing more text on a
single page. Therefore, it may be desirable to set the font type. To
achieve this, change the value of FontType= parameter to another
font. For more information about these and more parameters, see
section 10.4.
Another way is to increase the size of the applet within the web page.
This will provide more space with which to contain the code. To
increase the size of the applet, modify the width and height attributes
of the <applet> element in the applets HTML file. Be careful keep the
applet smaller than the screen size of the client, otherwise the user
will have to constantly scroll when using Progranimate. In this case, it
may be wise to scale the flowchart down or consider using JWS
deployment.
Page 76
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Progranimate’s Applet Did Not Appear As Expected
Problems:
Progranimate’s applet did not appear as intended. Some of the visual
features specified in the parameters are not shown.
or
All of the visual features were shown when only a few were specified
in the parameters.
Possible Solutions:
If some visual components were not shown once the application has
loaded, check the values filed of the Visual= parameter for the
following problems.
o
o
o
o
o
Have you referred to the correct visual elements?
Have you miss-typed the names of the visual elements?
Is one of the opening or closing square brackets missing?
Are all of the values separated by a comma?
Have the opening and closing <param> elements been typed
correctly, or are there any missing brackets?
o Are any attribute names missing or misspelled?
If all of Progranimate’s visual features appeared when only a few
were specified, check for the typing errors in the Visual= argument
element and associated value element. If these arguments are
syntactically incorrect, they may not be passed to Progranimate.
When no Visual= arguments have been detected, Progranimate turns
all of its visual features on by default.
The Flowchart, Code or Inspector is Displayed Disproportionately.
Problem:
All intended components are visible but displayed to incorrect or unaesthetic proportions. For example, the variable inspector takes up
most of the applet, when it should only occupy about twenty percent
of its right side.
Cause:
The split dividers’ locations are set wrong, causing visual features to
be displayed disproportionately.
Page 77
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Possible Solutions:
The location of the split dividers can be changed manually by
dragging them with the mouse. However, a more elegant solution is to
pre-specify their location via the parameters WorkspaceDivider= and
VarinspecDivider= .
The WorkspaceDivider= divides the workspace area between
the flowchart and code views.
The VarinspecDivider= divides screen space between the
workspace and variable/array inspector.
The value attribute of these parameters sets the location of the divider.
The locations are specified in percentage terms; 0 is far left, 100 is far
right and 50 is in the middle. For more information on the split
dividers, see section 7.2, entitled ‘Resizing Parts of the User Interface
Using Split Dividers’.
Page 78
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
10.4
©2008 Andrew Scott
A Complete List of Parameters
This section contains a complete list of the parameters available to Progranimate. It
also contains an explanation of each parameter’s function and syntax.
For information on passing parameters to Progranimate, see section 10.2.3, ‘Passing
Parameters Via WJS’ and 10.3.3,‘Passing Parameters to the Applet’.
Application Type
This ensures that Progranimate knows the deployment method in use, allowing it to
refine its UI appropriately.
Parameter Name: ApplicationType=
Value Parameters
StandAlone (default)
Signifies that the program is being started locally as a standalone tool .
WebStart
Signifies that the program is being launched via Java Web Start Over the
Internet or over a local network,
Applet
Signifies that the program is being deployed as an applet within a web page,
Auto loading a File Contained on the Client
This parameter enables Progranimate to load a file contained on the client computer
as it is launched. This feature is available for both the applet and JWS deployment
methods. This File= parameter cannot be used with URLs; use the FileURL=
parameter for this purpose. If the File and FileURL parameters are unused,
Progranimate will launch with a blank canvas.
Parameter name: File=
Value Parameters
This parameter should contain the location of a file stored on the client
computer, for example:
D:\Program_Files\program1.prg
Auto Loading a File Contained on a Web Server
Page 79
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
This parameter enables Progranimate to load a file contained on a web server as it
starts. This feature is available for both the applet and JWS deployment methods.
The FileURL= parameter cannot be used to load files contained on the client. For
this, the File= parameter is needed. If the File and FileURL parameters are unused,
Progranimate will launch with a blank canvas.
Parameter name: FileURL=
Value Parameters
Enter the URL of the file to be loaded, for example:
Http://webserve.com\progranimate\program1.prg
Visual Settings
This parameter selects which of Progranimate’s visual features will be displayed at
start up. If no visual= parameter is specified, then all visual features are turned on by
default.
Parameter name: Visual=
Value Parameters
Each visual feature to be displayed must be referenced within the value
parameter.
The list of features to be displayed is contained in square brackets. A comma
is then used to separate each feature name, for example:
[Flowchart,ToolBar,VarInspec]
These settings will launch Progranimate with only the flowchart, tool bar and
variable inspector visible.
A complete list of the permitted features is given below.
Menu
When specified in the parameters, the menu will be displayed on start
up. Disabling the menu will mean that users cannot change any visual,
language or advanced settings once the tool has started.
ToolBar
When specified in the parameters, the toolbar will be displayed on
start up.
ToolBarSmall
Page 80
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
When specified, the small toolbar will be displayed instead of the
standard tool bar. The small toolbar does not contain load, save and
new buttons and has smaller zoom and speed controls.
ComponentInfo
When specified, the component information panel will be displayed
underneath the workspace on start up.
Palette
When specified, the palette will be displayed on start up. Disabling
the palette with the menu will mean that users cannot add components
or variables to a program. However, depending on the other settings,
users may still be able to edit and delete via the menu or right click
popup, or by a double click method. To inhibit editing and deleting,
the double click, popup and menu features have been disabled.
Code
When specified, the generated computer code will be displayed at
start up.
Flowchart
When specified, the flowchart visualisation will be enabled at start up.
Variables
When specified, the variable and array inspectors will be visualised at
start up. The array inspector will only be visible when one or more
variables exist within a program.
Zoom Level or Flowchart Scale
This parameter affects the scale at which the flowchart is drawn. This parameter is
useful for ensuring that an entire flowchart is displayed on screen at start-up. The
parameter is used to scale the drawing size of the flowchart in percentage terms.
Permitted values are between 0 and 300 percent.
Parameter name: Zoom=
Value Parameters
This must be a number between 0 and 300. Entering < 0 will result in 0 and >
300 will result in 300.
Speed of Animation
Page 81
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
This parameter controls the animation speed of Progranimate. When Progranimate
starts up, the speed control will reflect the value specified in this parameter.
Parameter name: Speed=
Value Parameters
A number between 1 and 10, where 10 is fastest and 1 is slowest. Entering a
value greater than 10 will result in 10 being selected. Entering a value lower
than 1 will result in 1 being selected.
Font Style
This parameter controls the font style of the code view.
Parameter name: Font=
Value Parameters
The following list of fonts may be specified in the parameters of font style. If
anything else is entered, Progranimate will use the default setting (SansSerif).
SansSerif, **Default**
Serif,
Monospaced.
Font Size
This parameter sets the font size of the code view.
Parmeter name: FontSize=
11.0
Value Parameters
The following list of font sizes may be used. Anything else entered will cause
Progranimate to use its default setting (medium).
Largest,
Large,
Medium, **Default**
Small,
Smallest.
Commenting
Page 82
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
This parameter controls the commenting level of the code generation features at start
up. For more information on commenting, see section 6.3.2.
Paramiter name: Commenting=
Value Parameters
The following list of commenting levels may be specified. If anything else is
entered, Progranimate will revert to its default (Basic).
None,
Basic,
Advanced.
Language Selection
This setting controls the language of the code generation features at start up. If a file
is specified in the File= or FileURL= parameters, it is loaded in the language
specified by the Lang= parameter, regardless of what language it was saved in.
Parameter name: Lang=
Value Parameters
The following languages can be chosen. If anything else is entered,
Progranimate will use the default Java language.
Java_Code
VisualBasic.Net
VisualBasic-6.0
ToolBar Type
When the tool bar is used this parameter can be utilised to select from a range of tool
bar types.
Parameter name: ToolbarType=
Value Parameters
Normal:
A normal tool bar with all the options,
Mini:
A smaller tool bar missing the load save and new options
Micro:
Page 83
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
The smallest tool bar available. It is missing load, save and new options. Has
a JSspinner instead of a slider for speed selection. This enables it to be more
compact.
Allow Blank Parameters
This parameter allows the Programming components to be created without expressions. This
facilitates the creation of partially completed solutions for others to solve.
Paramiter name: BlankParam=
Value Parameters
True - allow Blank parameters
False - do not allow blank parameters **Default**
Setting The Divider Between the Flowchart and Code Views
This parameter sets the location of the workspace divider so that space can be
arbitrarily divided between the flowchart and code views. See section 7.2 for more
information on Progranimate’s dividers.
Parameter name: WorkspaceDivider=
Value Parameters
The divider location is specified as a percentage. A value of 100 places the
divider as far right as possible. A value of 0 places the divider as far left as
possible. Therefore, a value of 50 will divide the area of the workspace
equally between the flowchart and code views.
If the value entered is over 100, the value will be set to 100. If the value
specified is under 0, the value will be set to 0.
Page 84
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Setting the Divider Between the Workspace and the Variable Inspector
This parameter sets the location of the workspace / variable inspector divider so that
space can be arbitrarily divided between the flowchart and code views. See section
7.2 for more information on Progranimate’s dividers.
Parameter name: VarInspecDivider=
Value Parameters
The divider location is specified as a percentage. A value of 100 places the
divider as far right as possible. A value of 0 places the divider as far left as
possible. Therefore, a value of 50 will divide the area of the workspace
equally between the flowchart and code views.
If the value entered is over 100, the value will be set to 100. If the value
specified is under 0, the value will be set to 0.
Selection Methods
This parameter is used to adjust the selection method for editing and deleting
components, variables and arrays.
There are two parameters to adjust the selection method for editing and deleting
components, variables and arrays. It is possible to have one or the other or both
selection methods enabled. These settings can also be found in the advanced setting
panel of Progranimate. See section 8.3 for more information.
The first of these methods allows a component, variable or array to be edited by
selecting the component, variable or array, and then selecting the option from the
palette.
Parameter name: SelectClick=
The second of these methods allows a component, variable or array to be
edited/delete by first selecting the option from the palette, and then selecting the
component, variable or array.
Parameter name: ClickSelect=
Value Parameters
The values associated with these parameters take the values True (on) and
False (off). If anything else is used, the default setting will be enabled.
The default setting for SelectClick= is True,
The default setting for ClickSelec= is False.
Page 85
http://www.glam.ac.uk/progranimate
Progranimate User Manual for Prototype V3.0
©2008 Andrew Scott
Double Click to Edit
This parameter is used to enable or disable double click editing or components,
structures and variables. The default setting for this component is on. When this
parameter is not specified, double click editing will be enabled. This setting can also
be found in the advanced setting panel of Progranimate. See section 8.3 for more
information.
Parameter name: DoubleClickEdit=
Value Parameters
This parameter can take the values True (on) or False (off). If anything else is
typed, the default setting (on) will be activated.
Popup Menu
This parameter controls the setting that enables the popup menu. The popup menu
contains options for Edit, Delete, Copy, Cut and Paste. When enabled, this menu is
activated by right clicking a component, variable or array in the flowchart or code
views.
Paramiter name: PopupMenu=
Value Parameters
This parameter can take the values True (on) or False (off). If anything else is
typed, the default setting (on) will be activated.
Page 86
http://www.glam.ac.uk/progranimate