Java Class Visualization
for Teaching Object-Oriented
Concepts
Herbert L. Dershem and James Variderhyde
Department of Computer Science
Hope College
Holland, MI 49422-9000
dershem@cs.hope.edu
Abstract
Visualization is a useful tool in many areasof computerscil
enceeducation.This paperdescribesthe useof visualization
in the introduction of object-orientedconcepts.A Javaapplication has been developedthat allpws the user’to interact
with a visualiza.tionof any Java class through the instantiation of objects, the movement of those objects around the
class environment, and the activation of classmethods.The
user may also move conveniently between classesin this
visualization.
This Object Visualizer is useful for classroomdemonstration, individual student use in the laboratory,. and class
debuggingand testing.
1. Introduction
Studentswho are learning object-orientedprogrammingfrequently have adiicult time understandingthis new paradigm and how it operates.As with any difficult subject,
studentsbest learn this topic if a variety of learning modes
are used. In particular, visual learning can be effective and
the visualization of classes,objects,and methodscan be an
important learning tool.
Previouswork on the visual approachto learning object-oriented conceptsincludes that of Kijlling and Rosenberg[l]
who have created’ a program development environment
including a language,debugger,and editor, that usesgraphics for the visualization of classinheritancerelations and the
dynamic creations of objects. Another approachis that of
Haddad,Curtis, and Brage [2]. They have built a graphical
user interface for the visualization of object-orientedconcepts.Jerding and Stasko[3] have developeda tool for visualizing the execution of C-t-+programs with the intent of
enhancingprogramunderstanding.
Permissionto makedigitaLhrd copiesof all or part of this matcrialfor
personalor classroomuseis grantedwithout fee providedthat the copies
are not madeor distributedfor profit or commercialadvantage,the copyright notice,the title ofthe publicationandits dateappear,andnoticeis
given that copyrightis by permissionof the ACM, Inc. To copy otherwise,
to republish,to poston serversor to redistributeto lii requiresspecific
permissionand/orfee.
The testing of object-orientedprogramsis also a problem for
both teachersandstudentsin beginning courses.Sinceteachers focus on the design and implementation of encapsulated
classes,studentconstruction of a test program is usually an
unwelcome diversion, introducing many details in its user
interface that distract the student from the issues of class
design and implementation.The actual evaluation of the test
can also be difficult due to the encapsulatednature of
classes.The useof a symbolic debuggeris less than satisfactory since it operatesbelow the conceptuallevel of the class
structure.The relationship betweenvisualization and debugging and testing is well-known and has been explored by
Baecker,DiGiano, and Marcus [4]. The applicationsof visualization to object-oriented debugging has been demonstratedby Mukherjea and Stasko[5].
The needfor a visual environmentthat will enhancestudent
understandingof object-orientedconceptsand facilitate testing and debugging is therefore desirable. Rosenberg and
Kiilling [6] haveprovided suchfacilities within their system.
Their work requires the developmentof the system within
the Blue environmentwhereasthe presentwork permits the
visualization of any Javaclass.
This paper describesa tool that can be used by studentsto
visualize the interaction of class componentsand assist in
debuggingstudent-written classes.This tool is a Java application that acceptsa Javaclassas input and producesa window that contains a visualization of the class’ methods.
Objects of this class may be instantiated and manipulated
within the environment.In particular, objectsmay be placed
as arguments for the invocation of methods, which may
result in the instantiation of further objects.This visualization and manipulation of classcomponentsprovides a useful
tool for learning object-orientedconcepts.
The Object Visualizer
We will illustrate the features of the Object Visualizer
through the examination of a simple examplefraction class
called Frac. The Javaview of this classis found in Figure 1
and the view of this classproducedby the Object Visualizer
is shownin Figure 2.
SIGSCE 98 Atlanta GA USA
Copyright 1998Q-89791-994-7/98/2..S5.00
53 .
public
synchronized
class Frac extmds
Each classis representedby a unique color. Thesecolors are
difficult to discern in the Figures found in this paper since
they are representedby shadesof gray. Each method in the
classis representedby a button-box along the left edgeof the
window. Eight methods including two constructors are
definedin the classFrac. The box containsthe nameof the
method and the color of the box is the color associatedwith
the return value of the method. For example, the two constructors and functions add, subtract, multiply,
and
divide all return an object of class Frac and have their
function boxescolored with Frac's assignedcolor. Methods
that return void, such as reduce, are colored black. The
function tostring
returns an object of String classand
is colored appropriately.
java.lang.Qjed
I
public
public
public
public
public
public
public
public
public
public
int NLAG
irk Den;
Fracb.rLint~;
FracO;
void reduce0 ;
static Frac add(Frac,Frac) i
static Frac subtract (Frac,Frac) i
static Frac multiply (Frac,Frac) ;
static Frac divideErac.Fracl
i
java.larg.String
toString
i ’
t
At the bottom ofi the left eclge are three boxes that are
included by the Object Visualizer in every class. The first
Figure 1. Frac classmethods definedin Java
WL directory
http://www.cs.hope
:lass name
hC
Figure 2. ObjectVisualizer view of Frac class
54
two enablearrays of the classto be.instantiatedand assigned
values.The third is a Waste box whereobjectsareplacedto
removethem from the environment.
To the right of each method box, ‘a prototype
-- of .that
method’s invocation is found. Within that prototype, container boxes represent method arguments and, for each
object method, a container box of the defining class repre
sentsthe invoking instance.Once again, all boxes are colorcoded to the class or type that is represented.For example,
the top constructorhas two arguments,both of int type, so
the boxes are of int’s color. All other boxes in the class
methodsof Figure 2 are of classFrac.
FTXC
Figure 4. Instantiation of Frac 517
The “517” Frac object can now be draggedto any location
in the &me. Figure 5 shows the result of clicking function
add after the two Fkacs shown have been draggedto the
argumentholders.
a
The right frame of the window in Figure 2 contains initializer buttonsfor the Javaprimitive datatypesandfor the class
String. This frame remains the samefor any class being
visualized. Each of thesebuttons permits the creation of an
object of the correspondingtype when a value is typed into
the adjacenttext field and the button is clicked.
‘Figure 5. Activation of add function
Object methodssuch as reduce may modify the contents
of the invoking object. Figure 6 shows a before and after
view ‘ofI, a reduce methodinvocation.
,
The directory and class text fields at the bottom of the right
frame are used to specify the location of the class that is
being visualized. These can be changed at any time, and
pressingthe “Read Class” button resultsin the loading of the
new classinto the viewer.
‘., J
mlpgll.r*w
0;
Figure 6a. Before activation of reduce
Object Manipulation
We will now work through some manipulations of objects
within the class visualization shown in Figure 2. This will
illustrate someimportant featuresof the ObjectVisualizer.
Figure 6b. After activation of reduce
The text that appearsin the object box is the result of the
tostring
( 1 method applied to the object. To view the
data componentsof an object, the user must meta-click the
mousebutton on the’objectasshownin Figure 7.
y IIEm
Figure 3. Instantiation of 5
In order to instantiate an object of classFrac, we must first
instantiate some &r&s. Figure 3 illustrates the instantiation
of the integer 5. The user first types 5 in the text field next to
the int button. A mouseclick on that button then results in
the appearanceof an object to the left of the button and
inside the left frame of the window. This objecthasthe value
5 displayed within it and is colored with the color of inc.
Like all other objects, this object may be dragged via ‘the
mouse to any location within the left frame. In particular,
Figure 4 showsit located within the left argumentcontainer
of the Frac constructor. It also shows an int object containing 7 in the right argument container and ‘the Frac
object “5/7” that appearswhen the Frac constructorbutton
on the left edge is clicked with the ints in ‘the argument
‘,
containersas shown.
Figure 7. View of object components
Other Features of the object Visualker
The ObjectVisualizer window presentsthe‘view of one class
at a time. The class being ,viewed,may be changed at any
time, however,by specifying a new classat the bottom of the
right frame and clicking on the “Read Class” button. The
55
specified class will have its methodsappearin place of the
methodsof the original class.The objectsthat are in the window persist, however, until they are eliminated by placing
them in the “Waste” receptacle.
This feature permits the user to move easily from one class
to, another within the Visualizer. Objects can be createdin
one class and then usedin methodsof another.It is particularly easyto move from the currently viewed classto its parent class by selecting “Move to Parent” from the “Class”
pull-down menu at the top of the window. The “History”
menu facilitates returning to a view of classesthat were
viewed previously.
objectin question.You then usethis Class object to get the
members of the class using ’ getDeclaredFields
( 1,
getDeclaredConstructors0,
and
getDeclaredMethods ( 1. Theseeachreturn an array of a class
from the java . lang . ref lect package. You call
newInstance ( ) on a Constructor
and invoke ( )
on a Method. Each of thesetwo methodstakes an array of
Objects asa parameterto passto the function being called.
A class that has not appearid in the Visualizer during the
current execution is representedby the color black until it is
loaded into the Visualizer for the first time. At this time, a
color is assignedto that classandits future appearancein the
Visu&zer within other. classes.’will inclyde that newlyassignedcolor. Colors chosento representclassesand@rimitive types are arbitrarily chosen’b) the system wilh two
exceptions.White is usedfor j ava . lang . Object class.
Arrays arerepresentedby a lighter shadeof their baseclass.
If method argument containersdo not contain an object of
the correct type,or classat the time,the methodis invoked by
a button click, an “Illegal Argument” window appears.
Larger classescan be conveniently viewed by using the horizontal and vertical scroll bars in the viewing frame. This is
particularly helpful when viewing built-in Javaclassessuch
asjava.awt.Componentasshownin Figure S.Implementation
-i
4
hplehentation il ,
I.
An overvi- 0; the ir$lementation of thk Object Visualization Applicatidn Aay be of interest.Thk graphical userinterface is actually quite simple. The application hearsmousedown and mouse-drageventsand respondswith a changein
location of the “Aniniated Object” (the AnimOb j ec t interface) and a repaint of the visible methods. The Animated
Objectsare drawn as a colored rectanglewith a helpful summary of the contents. If the class,has a tostring
()
method,it is usedasthis summary.Eachprimitive makerhas
a default value that is createdwhen the button is hit if the
input field is empty. Scrollbarsare usedwith separateScrollpanesto view the class a little at a time. Below the class’
methodsis a Wastemethod that is usedto lose the reference
to an object. When this is activated,the draggableobject disappearsand the i&an& itself will be garbage-collected.
Figure 8. ObjectVisualizer view of java.awt.Component
The Internet classloading is also quite simple. First the program createsa URLConnect$on to a class file and downloads an array of bytes. This can then be turned into a class
using the def ineclass ( )
method in
the
java. lang . ClassLoader class.,ClassLoader is an
abstract class, so it is extended to create an InternetClassLoader class. Once a class is defined, it may then
usedasmuch asneeded.Unfortunately, only public methods
and constructorsmay be used.
Educational Visualization 1
The ObjectVisualizer is a valuable tool in courseswhere the
object-orientedparadigm and Java are taught. This software
is very ffexible and can be usedin a wide variety of settings
andfulfill many roles.
Th& invocation of- the methods gnd constructorsis a&ohplished through dse of the j ava . lang . Class cl&s and
the j atia . l&ng : ref Sect package.To get an instanceof
the* Cl&i
clasi y6u isimply call getciass ( ) on the
56
Classroomdiscussionof the object-orientedparadigmand of
specific classescan benefit from demonstrationswith the
Object Visualizer. For example,the Frac class in Figure 1
can be presentedin class as both Java code and in visual
form. The visualization of classactions promotesbetter student understandingand gives the instructor an opportunity to
point out key activities andrelationships.
References
[l] Kiilling, M. and Rosenberg,J. An Object-OrientedProgram DevelopmentEnvironment for the First Programming
Course.Proceedings of the Twenty-Seventh SIGCSE Techni-
Visualizations can also provide useful laboratory activities
since studentsare able to manipulateobjectswithin the class
and betweenclasses.Since the ObjectVisualizer works with
any Java class, student-written classes can interact with
instructor-provided classes,resulting in interesting activities
that can be feasibly directed and completedwithin the time
constraintsof a closedlaboratory period:
The ‘Object Visualizer also provides an excellent environment for studentsto test and,debug classesthat they ‘write.
This eliminates the necessity of creating elaboratetest harnessesfor every classand allows the studentto test the interaction of classes,This use is particularly helpful in lowerlevel courses that introduce the object-oriented paradigm
since it allows the students to concentrateon class design
and implementation rather thqn the languageand user-interface details that are needto constructa testprogram.
The ability of the Object Visualizer to acceptany Javaclass
also makes it an interesting,tool for students in studying
external classes.In particular, all classeswithin the JavaAPI
are viewable, a useful tool to help studentsunderstandthe
role and function of these classes.As studentslearn about
the j ava . awt package,for example,they can visually create componentsand place them within cor&ners, seeingthe
1
results of the methodsasthey areinvoked.
Finally, studentsfind the ObjectVisualizer to be a useful tool
for exploring remote classesthat can be downloadedfrom
the web but whose sourcecode is not available.Many interesting approachescan be explored by examining the structure of a class.
Availability
cal Symjosium on Computer Science Education (SIGCSE
Bulletin), 28,l (Mar. 1996), 83-87.
[2] Haddad,H., Curtis, E., andBrage,J. Visual Illustration of
Object-Orientation: A Tool for Tea&ing Object-Oriented
Concepts.l%e Jou’mal of Comeuting in Small Colleges, 12,
2 (Nov. 1996),83-93.
,
s, ,’
[3] Jerding, D.F. and Stasko, J.T., Using Visualization to
Foster Object-OrientedProgramming Understanding. Technical Report GIT-GVU-94-33, Graphics, Visualiz&on, and
Usability Center, Georgia Institute of Technology, Atlanta,
GA, July, 1994. /
[4] Baecker,R.;‘DiGiano, C., and Marcus, A. SoftwareVisualization for Debugging. Communications ,ofthe ACM 40,4
(Apr. 1997),44-54.
[5] MuFerjea, S. and Stasko,J.T. Toward Visual Debugging: Integrating Algorit@mAnimation Capabilities within a
Source Level Debugger.ACM Trayactions on ComputerHuman Znterac@on,1,3 (Sep. 1994),215244.
[6] Rosenberg,J. and Kijlling, M. Testing Object-Oriented
Programs:, Making it Simple. Proceedings of the Twenty:
Eighth SIGCSE Technical Symposium on Computer Science
Education (SIGC@ Bulletin, 29,1 (Mar. 1997), 77-81.
i’-’
/
The Object Visualization class and its Java’source code are
availableat http : / /www . cs . hope. edu/-alganim.
Acknowledgments
The authorswould like to thank PeterBmmmund, who contributed many helpful ideas to this project. This work was
partially funded by the National ScienceFoundation, Grant
Number CDA-9423943-03.
57