A n i m a t i o n of Java Linked Lists
Ngozi Uti
Northern Kentucky University
Highland Heights, KY 41099
uti@nku.edu
Herbert L. Dershem and Ryan L. McFall
Department of Computer Science
Hope College
Holland, MI 49423
{dershem mcfall}@cs.hope.edu}
Abstract
2
Linked lists are an important component o f the computer
science curriculum. J V A L L is a software package that
provides an animation o f linked list operations that is fully
compatible with the Java LinkedList class. The animations
are driven by a client program that can be either an applet
or standalone application. It provides an effective w a y for
students to learn, experiment with, and debug linked list
based classes.
1
Design Objectives
The objective o f this project is to produce a linked list
visualization tool with the following capabilities:
User-controlled
algorithms
animation
of
basic
linked
list
Operations are animated at a speed that is controlled by the
user and allows the user to observe the construction and
modification o f nodes in the list. Likewise the user
determines the implementation model for the linked list, the
context where the operations are called, and the colors o f
the components o f the animation.
Introduction
One o f the most popular models for the implementation o f
data structures is the linked list. This model and its
associated operations are an important topic in the
traditional data structures course. The linked list operations
are virtually always introduced through a visualization,
both in textbooks and on chalkboards. This paper describes
a useful tool that has been developed that enables linked
list structures to be visualized through animations o f the
standard operations.
Animation of pre-existing code that uses linked lists
The animation class provided is an extension o f the Java
LinkedList class. Therefore, any program that uses the Java
class is easily modified to enable its linked list operations
to be animated.
Support for multiple linked list implementation models
The presentation o f algorithm visualizations on the web has
many advantages, particularly in distance education
settings. This has been the focus o f much recent work. [1]
[3] [4] [5] Animations that can be generated and controlled
by students have also been shown to be effective in
instruction. [7] Another technique that has proven to be
useful is the visualization o f pre-existing code to enhance
student understanding. [2]
The present version supports both linear and circular
singly-linked lists. Future versions will add support for
doubly linked lists and header node lists as well.
Animations within both Java applets and applications
The tool is easily applied in both o f these environments via
a parameter passed when the animated linked list object is
constructed.
The present work is intended to provide an effective tool to
support student learning and understanding o f linked list
operations as well as assist students in understanding
applications that use linked lists. It is fully compatible with
the Java LinkedList class and can be used b y client
programs that axe either Java standalone applications or
applets. A general-purpose client program is included that
provides an effective user interface for the visualization o f
all linked list operations under user control.
3
Design and Features
The package that provides the linked list animation is
called J V A L L (Java Visual Automated Linked List).
Important features o f this tool are described below.
Visualization
The J V A L L animation '~rindow is shown in Figure I. The
window is divided into three areas. The top area contains
controls that allow the user to modify the colors, speed, and
implementation model o f the animation. The middle area is
the animation display that contains the nodes in the list.
List nodes contain data and reference components. The data
component displays the String representation o f the node
Permission to make digital or hard copies of all or part of this work for
pe~onal or classroomuse is granted without fee provided that copies are
not made or distributed for profit or commercial advantage and that
copies bear this notice and the full citation on the first page. To copy
otherwise, or republish, to post on servers or to redistribute to lists,
requires prior specificpermission and/or a fee.
SIGCSE'02, February 27- March 3, 2002, Covington, Kentucky, USA.
Copyright2002 ACM 1-58113.-473-8/02/0002...$5.00.
53
references to Jvall. The remainder o f the code is left
unchanged.
J V A L L is designed be driven by a client
program that propagates the animation display. "Client"
program in this paper refers to a user supplied program
using J V A L L for its linked list animation. In [8], Stasko
and Lawrence affirm that animations are most effective
when students are actively engaged. For example, the
client program should provide an avenue for a user to type
in values to be inserted into the linked list. The code
segment below demonstrates how J V A L L can be used to
animate an existing program.
data object as given by the application o f the Java toString
method. The reference component contains the source o f a
pointer from the node to the next node in the linked
structure. The bottom area contains text reporting the
animation status and buttons to undo and redo operations.
Figure 3 is a snapshot taken in the midst o f an insert
animation. The inserted node ("Frank O") is moved into
place after new references have been assigned. The
discarded reference between the previous and succeeding
nodes remains beneath the inserted node and is marked as
such while the inserted node is being m o v e d into place.
This reference disappears upon completion o f the
animation. Similar animations exist for all Java LinkedList
class operations.
Existing program:
LinkedList
Due to the limitations on screen sizes, most animations
restrict their users to input only digits or a limited number
o f characters for display. Instead o f limiting user inputs,
and in order to be consistent with the flexible nature o f the
linked list data structure, the "click, hold to expand" node
was used. JVALL's node is capable o f displaying lengthy
values by displaying an abbreviated text with dots at the
end to indicate that it contains more characters than can be
displayed in the basic code rectangle. To view the entire
text, the user can click and hold on a node with a lengthy
value.
• ""
"""
'-
.......
"'
~'
.:.........?.!!~ ~.:i.~.-~.
:... -...~ ..-:i...".'~~ ~;~
.,'"~'~,
~~".~
~G:.-,'~
'.''g~g,-*~.-e~
~'~'
~'
.?t...h~ ' . ~ . ~ E i ~ . . ; . " t . . i ~
~'~'..-;"..~.'. ~"...
~ .~r...--~%~?~,.~.:..
~!~~?:E~b.~.~..~.
~: } . J ~
........ ~.~._._..~_.__....:....."~i::.;
...:.
LinkedList
() ;
mylist
=
new
Jvali(Jvali,STANDALONE)
;
Linear and Circular Models
:
:.il!. " ~.";::!:.:::;;:i:;;/: ::::~:'.;::}[:.;~::!.'~;!i':~:.;,i;.i::!:...".."!!~::
::;;~:;-.;;:; -:.
.,-,~..,~,~ ?.."."..~.."-....--:~-::~:.-"~77:?L
new
In the code segment above J V A L L will appear as a
standalone application that will respond to animation calls
from the client program. J V A L L will provide automatic
linked list visualization as the client program requests
operations. Using a different parameter in the constructor
call enables J V A L L to be used in an applet.
.....
"
=
J V A L L animated client program:
Jvall
. -...i.....~._..-...
.! !:...2i &.:..i~i.--:,,.',:~...>_.-...
~!~...--::i~i ~i~.:
:::.:::-:',::: :.~::.c.~<~:~6i~!~i~-~~.'..::i~-:.i!~..."....".:......"~
.~: ~i~ ~ ~..~i:.'.~. ?...-"!::~¢~!~¢:'~:.~::~...:.:..
:L:i~i~:...-.~':_.~.'...~..:__...-_~.......-_::.:i~g!:~L~'
.._.~__..__.~_...~
!.!~,.:.:~ ~ .
~
mylist
..-..
B y making a selection on a menu bar, the user can change
the visualized model at any point during the animation
between a linear and circular list. Figure 2 shows J V A L L ' s
view o f a circular linked list.
~
:
•
=-
....-.
. . . .
....~ t .............
.......................
..
". . . . .
.
..
:.:
~:maa
~ . , / a % . ' / ~ - i ~ i ~
.
i :..:: :: . .F:~-i. .:-ii~:~,J::':
.
.
.
.
.
" "
-...~,t.t.,~,~.~.~
.
...........
.
.
.
""r-:".".
.
"":"
". . . .
:
,
: ' .......
.
.
~'--~"-'-"~=~=->-"--"-:':--" "
,
. . . . . .
,
-<
. . . .
• -....;
...
• -...
.
::
•
"
•
Figure 1
Compatibility with Java L i n k e d L i s t Class
J V A L L was designed to be an animation that can be used
for visualization o f existing Java programs as well as for
teaching and learning the linked list data structure. For easy
adaptation by existing Java programs, J V A L L is fully
compatible with the Java LinkedList class.
Each o f
I V A L L ' s methods
animates
and carries
out the
corresponding Java LinkedList method.
Figure 2
Since the linked list operations are independent o f the
model used for representation, any list can be viewed with
either model. When in the mode to view one model,
J V A L L can be used to animate a program by simply
replacing the references to the Java LinkedList class with
54
:
'i
.
•
operations are animated in a manner consistent with that
model.
speed them up when the process is familiar but the
visualization o f the result is important.
Animation Status Report
Applet and Standalone Application
At the bottom o f the I V A L L window is an animation status
report. In this text field, the user can read a description o f
the operation that is currently being animated and receive
reports on any exceptions that are thrown during the
operation.
Education today has gone beyond regular classroom
instruction to harness the versatility and availability o f the
Intemet. Many students and teachers now use the Internet
for learning and teaching purposes. JVALL is well suited
for use on web browsers since it can be added to an applet
or used as a standalone Java application. Shown below are
examples o f how a client can declare JVALL to be added to
an applet or a standalone application.
Undo/Redo Capability
A client that uses JVALL automatically receives a set o f
visualization controls, including unlimited multiple undo's
and redo's, speed control, dynamic status updates, and full
color customization. A user can utilize the multiple undo's
and redo's to rewind and review previous stages of the
animation for better understanding. This capability is most
appropriate with an interactive client that waits for the user
to enter requested operations on the linked list. When used
during non-interactive applications, unpredictable actions
may result.
As an a p p ~ t :
Jvall
mylist
JPanel
//retuzns
=
new Jvall(Jvall.MAKEAPPLET);
panel
a JPanel
=
that
this.getContentPane()
mylist.getDisplay() ;
can be a d d e d to an a p p l e t
.setLayout(new
BorderLayout());
//set
File load and save
applet
Bordered
layout
this.getContentPane() .add(panel,"Centez,');
When declared as standalone, JVALL provides the ability
to save or open a text file in order to construct the
visualized linked list. The save and open options are not
provided when JVALL is used in an applet because o f Java
security restrictions.
//add JVALL
As
Jvall
The open and save buttons can be observed in Figure 2.
These buttons, when clicked, open a file chooser window
allowing the user to load or save the linked list as a text
file. The file chooser window has provision for the user to
select and view the content of a text file before loading it
into the linked list.
Only text files with the ".txt"
extensions can be loaded. JVALL loads a text file by
reading each line as a node into the linked list. The
populated linked list is then displayed on the screen.
a
to the c e n t e r
of
the a p p l e t
standalone:
mylist
= new Jvall (Jvali.STANDALONE) ;
In the case o f standalone, JVALL will automatically appear
ready to display animations. Figure 3 shows an example of
standalone JVALL along with a client program. As an
applet, the getDisplay 0 method returns a JPanel that a
client can add to its applet. Figure 1 shows JVALL as an
applet appearing within a browser.
J V A L L Client
It is essential for JVALL to communicate the vital stages o f
the animation to the client program. J'VALL communicates
with clients through an event interface to inform the client
o f animation stages such as when the animation is running
or ending. It also provides the current textual status o f the
animation. This information will enable the client to track
all animation stages and respond to the animation in a
synchronized manner.
Linked list operations, such as insert, delete, replace etc.,
can be carried out on the loaded linked list. While saving,
JVALL stores each node as a line in the text file.
While this feature presently saves and reads the nodes as a
text file, a future improvement to this software will permit
any serialized objects to be saved and restored.
Color Selection
For example, a client might want to disable certain buttons
to prevent the user from clicking them while the animation
is running and re-enable them when the animation is ended.
Through the event interface, the client can call and execute
the code to disable and enable the buttons within the
interface methods
JVALL provides smooth animation and quality graphics
that are fully customizable by the user. The default settings
are designed to highlight important aspects of the
animation. Several colors are used to distinguish among
components of the animation including nodes, node
pointers, arrows, traversing arrow and background. The
color selection panel is designed so that color selections
automatically display text in contrasting colors, ensuring
that the content of the node is always properly displayed.
4
Educational Uses of J V A L L
Interactive Linked List Client
The distribution o f the JVALL package includes one
generalized, interactive client that provides a user interface
that permits the user to interactively perform linked list
operations and watch their animation. The client window
appears directly beneath the JVALL window as shown in
Figure 3.
Speed Control
The user has the ability to control the speed o f the
animation. This permits a student to slow down animations
to follow each step when first learning the operation, and to
55
Students could view the animations with code in hand or be
asked to generate appropriate code.
A user can type into the value and position text boxes to
insert nodes into the specified position in the linked list. In
standalone mode, a user has the option of opening a text
file, loading it into the linked listand continuing with the
normal linked listoperations, such as insert,delete, replace,
etc. Each time a button is clicked, JVA.LL gets a request
from the client and the animation is displayed accordingly.
If, for example, a user tries to insert or delete a node from
an invalid position in the list, J'VALL will throw the
appropriate exception and also inform the user of valid
positions. The General Linked List Operation client
responds in an appropriate w a y to such an exception. The
client also provides a variety of operations including insert
position, insert first, insert last, replace, find, delete
position, delete first, delete value, and clear all. All of
these operations are animated appropriately by J V A L L .
Classroom Demonstration
Since J V A L L m a y be used with any user-provided client,it
is cosy for an instructor to construct an appropriate client
for classroom demonstration. In addition, with the open and
save file capability, demonstrations can be performed on a
substantial list without requiring the tedious process of
populating that list.
Debugging Student Programs
J V A L L is particularly useful in assisting students when
debugging their programs that make use o f the Java
LinkedList class. In addition to the benefit o f being able to
visualize LinkedList operations, using J V A L L in
conjunction with a traditional debugger can be especially
powerful in discovering errors in the logic o f an application
that uses the Linked List class. This enables the student to
step through the code with the debugger and watch the
results o f operations evolve within the J V A L L window.
This is an improvement over use o f a debugger alone
because debuggers typically show addresses and not the
actual structure o f a linked list.
Laboratory Activities
This client supports m a n y classroom uses. O n e such use is
as a laboratory activity where the students are asked to
perform a sequence of list operations and observe their
animations. This can be done with several implementation
models to emphasize the different algorithms used.
COLOR.
SFJ_ECIK3NP A N I E L
Ch=L,,-I ~ro,,,'llR~l
" :.: ,. . . . . . . . . . . .
...........................
'................... ~ !;~:~':~"~ ....:i . - ~ _ . , t c o ~ o =
.
...............................
--
"
. . . . . . . . . .
-
....
T,=,,,-, :
~k~=,~....._.choose
.- . ..-.....:
. . ..........~
, .........
.........................
9
5,,
10
" 15
Singly Linked List Animation Display
Head
3
4
5
......
.S;t~us:
~,........: .: :.:: ..~ ............ :. L:.i:.- i:: .................. : :.'X-...'::., I.......
[ A d d i n g ' F r a n k O l u k u ' in p o s i t i o n 1
t
Fieure 3
56
Client
Since any program that uses the LinkedList class can be
easily animated, no special code needs to be added to
realize this benefit.
According to these criteria, JVALL is a very effective tool
to enhance the learning o f the algorithms and applications
o f linked lists.
Visualization of Classes Implemented Using Linked
Lists
6 Acknowledgments
This work was supported in part by the National Science
Foundation Research Experiences for Undergraduates
program through grant #EIA-0097464.
A final educational use of.IVALL is the visualization of the
operations of classes that are implemented using the Java
LinkedList class. Complex data are often implemented with
linked lists and JVALL provides an effective way for
understanding
their
operations
under
such
an
implementation. The distribution of JVALL includes a
client that implements the stack ADT using linked lists as
an illustration o f this capability.
5
References
[1] Cordova, J.A comparative evaluation o f web-based
algorithm visualization systems for computer science
education, Journal of Computing in Small Colleges
14,3 (1999), 72-77.
[2] Dershem, H.L. and Vanderhyde, J. Class visualization
for teaching object-oriented concepts, SIGCSE Bulletin
30,1 (1998), 53-57.
Conclusion
Several animation strategies have been developed and
implemented for effective use as teaching and learning
tools.
The qualities that an effective algorithm
visualization package should possess have been classified
by Cordova in [1]. Below, we apply these five criteria to
JVALL.
•
•
[3] Naps, T.L. Algorithm visualization served off the
World Wide Web: Why and how. SIGCSE Bulletin
28,1 (1996), 66-71.
Flexibility. JVALL is flexible in the sense that it
is capable of animating any program that uses the
Java LinkedList class. YVALL can be used and
represented in different ways to meet the needs o f
the client program. JVALL can also animate
applets as well as standalone applications.
[4] Naps, T.L., Eagan, R., and Norton, L. JHAVE - An
environment to actively engage students in web-based
algorithm visualization, SIGCSE Bulletin 32,1 (2000),
109-113.
Integration of algorithm text and visualization.
[6] Roessling, G. and Freisleben, B. AnimalSclipt:
An
Extensible Scripting Language for Algorithm
Animation, SIGCSE Bulletin 33,1 (2001), 70-74.
[5] Rodger, S. JAWAA, 1997. [Online] Available at
http://www.cs.duke.edu/-rodger/tools/tools.html.
JVALL provides dynamic textual updates o f the
animation stages to the user and the client
program. Because IVALL was built upon the
Java LinkedList class and is independent o f
implementation, it is unable to provide code
display o f the linked list.
•
[7] Stasko, J.T. Using student-built algorithm animations
as learning aids, SIGCSEBulletin 29,1 (1997), 25-29.
[8] Stasko, J.T. and Lawrence, A.
Empirically assessing
algorithm animations as learning aids, in Software
Visualization:
Programming as
a Multimedia
Experience, The MIT Press, 1998, 419-438.
Ease of modification. All the components o f
JVALL are fully customizable. JVALL comes
with a full color control panel for customizing all
aspects o f the animation display. The linked list
nodes, pointers, arrows, traverse arrow, and
background colors can be changed to suit the
user's taste.
•
Execution
control features. YVALL's speed
control and multiple undo's and redo's give the
user the ability to rewind and adjust the speed o f
the animation to aid learning at a user's pace.
•
Support for animation of algorithms supplied
by the user. A user can utilize JVALL animation
for debugging purposes.
JVALL is fully
compatible with the Java LinkedList class. Hence,
JVALL throws the same exceptions as Java
LinkedList and, in addition, suggests possible
causes o f such exceptions in natural language to
aid faster debugging.
57