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.
Figure 23. Progranimate’s Visual Composure.
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 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.
-
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.
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.
Changing the Visual Representation of the Inspectors
Figure 26. Inspector representations.
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.
Adjusting the Font Size of the Variable and Array Inspectors
Figure 27. Font size options
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 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.
Figure 28. The settings Panel.
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.
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.
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.
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’.
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”.
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.
9.0Error 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.
10.0Deploying 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].
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
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.
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.
-
Open a text editor such as notepad.
-
Copy the following XML template into the text editor.
Progranimate 1.5
Andrew Scott - University of Glamorgan
Graphical programming for novices
ApplicationType=
web
-
Edit the code base parameter to contain the URL of Progranimate’s jar file, excluding the file name itself (shown in blue).
-
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.
-
Copy the recently created file to the web server, and place it in the same directory as Progranimate’s Jar file.
-
Create a HTML web page with hyperlink to the JNLP file, for example:
Progranimate Launch Page.
Launch Progranimate.
Share with your friends: |