An Abstract Window Toolkit Visualizer for Computer Science
Instruction
Josiah DYkstra
DePartment of ComPuter Science
IIoPe College
hoDe.edu
dYkstra@cs
Keith SuPPes
Department of Computer Science
Alma College
edu
99suPPes@alma
Herbert L. Dershem
Department of Computer Science
HoPe College
dershem@cs.hooe.edu
Abstract
is an importanttool The
In thetoachingandleamingof ComputerScicnce,visualization
to visualizetheexecution
goalofthis prcjectis to prcvidea tool thatwill permitstudents
if a programthat includis event-driveninterfacacomponents.In particular,it is designed
to viiualize programswritten in Javausing the Abstact Window Toolkit (AWT)'
Whentho pro$am is executedundercontrol of the AWT Visualizationsoftwarc,a visualizationwindowi8 displayadto monitorexecutionunderusercontrolandth€
This
producedby theprogram'sexecutionaredisplayedconcuffently.
components
enablesthe studentto view tho codeandits coEespondingaction andto visualizethc
hierarchyof calls that results.
The papercontainsa descriptionof how thg softwareis usedandincludesdetailsof its
implementation.ln addition,it providesa comPleteexamplethat demonsffateshow this
tool canbe usedfor CompuierScienceinstructionandprogam debugging
L,0Introduction
proglamhave
For thepasttwo yea$,studentsin HopeCollege'sComputerScience,REu
created
wo*edin thefieid of ProgramExecutionAnimation.In 1997,JamesVanderhyde
theFunctionVisualizera;a bol to teachrecusion.Thisprogam wasrevisedandgreatly
to allow
Weinhold lt wasgeneralized
in 1998by D. Erin ParkerandRebecca
expanded
functionduringexecutionOneof the primary
foi the visuatizationof anyuser-defined
assetsof this tool is the mannerin which it helpsto visualizethe function call stack Also
dudng the summerof 199?,Jamesvanderhydecreatedthe Object visualizer, a powerful
tool fir deconstructinga class file into its methodsand the objects that those methods
retum. This allows foi an easy visualization of how objects interact betweendiffercnt
methodsand classes.We expandedthesetwo programs' adding further rcfinementsto
both the userinterfacesandthe functionality of each.
of thessexistingtools'we createdour own visualization
In additionto the enhancement
programcalledthe AbstractWindow Toolkit Visualizer(AWTviz) This progam was
creoltedfor the purposeof visualizing the executionof an gntire Fogram ln particular'
we wanted to visualize progams that incorporate Java's Abstract Window Toolkit
(AWT). AWTviz providestwo views,the Visualizationwindow and User Application
Window.The VisualizationWindowcontainsAWTviz'sdisplayandconkol componcnts
andtheUserApplicationWindowcontainstheoutputof theuser'srunningprogram'
' . ui"rnppii.,i, I l
Brllll
Irn!dhod0
l$brk s d MyMdh.do
@
@
@
@
@
@
i
Iricure l: Visualizltil,nlvindow r d User,\pplicrti
Wi lovs ti,r ttst.
2.0 VisualizationWindow Componcnts
The VisuiilizalionWindowcontainssix kcy display nd cooll.olcomponentsThc displly
givesthe uscl infonnrtion 4boutwhal is happcningwithin their Program.The contfol
iLndsomeol what is being
functions4llow thc user10iLdjustlhe spccdol visualizdliorl
visualized.
cal Stack
Melhod
p u b i ( v o i d l , !l l , l e t h o
d0
@
@
@
@
@
@
p u b l i c! o i d My r " i € i h o d 0
int i=4
HIfi*E
^.1
0 );
retlay@t (n4 llo,laydt
Label leb6ll = nB Labe] l LBbel cllle )i
Teirfield rb1 - ns Te*rield{201i
butl = n@ Buctm( Butt6 )'
bur1. add.{crlmli sraer (this)i
for (int i=0ii<5ii++l l
sy3tm.d!.Fintln ('!i
I
I
)i
Figure2: VisralizationWindo* lbr test.
2.1 Code View (|,'igure 2 - A)
Thc code vicw portion of the VisualizalionWindow dispJaysthe code of the user-dctined
program.As eachline of code is executed,lhat line is highlighted2.2 Specd Control (Figure 2 - B)
The speedcontrol consisisof two parls, a scrollbarand a button Thc scrollbarellows the
speedof the user'sarpplicationto be incrcasedor decrcasedduring execution The button
pausesand resumcstlre execuuon.
2.3 Ca[ Stack (Figue 2 - C)
The Call Stack is a listing of the namesof each currently active method called by the
displayed.
user'sapplicationsequentially
2.4 Variable Dlsplsy @igure 2 - D)
The Variable Display is anotherlisting that displaysthe variablesin the user'sproglam'
As the valuesof the vadableschange,thesechangesarc rcflsctcd iII thc display'
2.5 Method HierarchY @igure 2 - E)
The Method Hietarchy is a scrollableareaupon which coloredboxes are drawn for each
method of the user's application.The boxes are dlawn as the methods are called and
appearin a hierarchy,with sub+alts being indentedfuthor to the right than the method
tttat cattedthem.ttri Method Hierarchy canvaswill expandwhen it runs out of room to
displaymoreboxes.
2.6 Menus (Figure 2 - F)
File
Restart- This option causesthe programto startagain' with all valucs
reinitialized.
Quit - This option will quit the program.
Valiables
canbe
<dependson the variablesiII the user-definedFogram> : :1ch v.9r-rable
selectedor deselectedin this menu.Whenselected'a variablewill app€arin th€
valiable display.When deselecled,it will not appearin the display'
3.0Usingthe Program
There are two phasesthat a user-providedprogram must S! thrgug! in order to be
visualized. The program must fusi be processedby a set of Perl soripts-to cofiecdy
format it prior to pasiing the formattedcodeto the Javaapplicationfor visualization'
Flgure3r Javacodefor tart
Linftrtlong
3.1Specifrcatlons/
One of the goalsof this projert wasto designa tool that would bs usefulon a wide
varietyof FoblemsandsituationsWhile muchwork wasdoneto ensurethis, a number
limitationsstill exist.In orderto run the programthe uscrmusthavea
of unavoidable
Kit (JDK) 1.1or higherand
local copyof the AwTviz program,theJavaDevelopment
Perl installed,ard Fovide their own Javaprcgmmfo! Visualization.Whenwdting the
Javaprogam, the user must abideby the following rules. First, the user-provided
Secotrd,thg user may not have any plimitive
prognm must extendjava.awt.Framg.
Third, theremay not be morethan 99 primitive
variablesthat end with an undcrscorc.
primitiYe
variablesof differenttlpcs maynot have
variableswithin theFogram.Fourth,
thesamename(ie. int alphaandcharalphaarenot permitted,howeverint alphaandchar
Fifth, usersshouldnot havea methodnamedrun0 anywherein
Alphaare acceptable).
thef Fogram.
3.2Pre-processing
ol interacting
The testprogram,a$writtenby the user,hasno way of cornmunicating
with AWTviz.In orderto makethis possible,a setof Perl scdptsmustmodifythe usercodealong
providedcode.TheresultingJavafile is anexactYe$ionof theuser-provided
with a numberof AWTvizmethods.
Figure4: Pathof testinput codethrowh Pre-processitrg'
3.3Visualization
When the Fe-procossingis complcteand the resultingfiles are createdthe Java
applicationis eiecuted.TheJavaprogramreadsin theclassandtext files andusesthem
to'd"t"t-in" thc visualization.Utilizing the contols in AWTviz, the usel canconhol
vadousaspectsof the pro$am.Theu89rcanalsointelactwith his or her own prcgram
ftom withinit's ownwindow.
4,0CodeStructure
Codingfor AWTviz wasdonein JavaandPerl.The full programconsistsof threePerl
All files rcsideandareexecutedfrom theAWTviz dire{tory
scriptJandsix Javaclasses.
Figur€4 showsthemovcmentof inputthroughthevadouscodes€ctions.
4.1Perl
line to begintheprogam.
from thecommand
TheGo scriptis whattheuserexexutee
MoveBraceiis a scriptthatquicklyformatsthecurly bncesin theuser'sFogram Thisis
for AWTviz'sueeonly andhasno effert on theoriginalprogramcopy.Foflnatis the
codeto theuser'sFogramallowingit to
primaryPerlscdptthataddsthenecessary
interactwith AWTviz.(seeFigure4)
4,1,1Go
scriptandthe Javaapplication'Go first
co is a simplesffipt thatcallseachsubsequent
ensul€sthattheuser'sinputfile existsandis validby compilingit' (seeFigure5)
' p.^-"m
lhiriltiTe.i
Fisure5: RunningAWTviz{ith Go.
4.1.2MoveBraces
MoveBmcesis a short script that handlesthe fomatting of curly braceswithin the
inputtedprogramcode.Whenthe scriptlinds an opencurly braceon a line by itself it
ptacesit on itreenaof the previousline. If it finds a closedcurly braceon at the endof a
iine followingothercode,it placesit on the next line by itself This is doneto makethe
job of theFormatscripteasierandmoreefficient.
4.1.3Format
Fomat doesmost of the work in readyingthe user'sprogramfor usewith AwTviz It
uses pattem matchingto add instructionsfor AWTviz and generatesa file called
ProgFrame.java.
On thefirst passthtoughthecode,
methods'
L Formatlocatesandplacesin anaray thenamesofall user-defined
arepresent
Javaimportstatements
thatthenecessary
2. It alsoensures
On thesecondpass,
l Formatreadseachline of codeandinterpretsit
code
2. The scriptwill pdnt to the outputfile the originalline as well as necessary
beforeand after the line
3. This partof the scdptchecksto makesurethe user'sfile extendsjava'awtFrame
implementstatements.
andcontainsthenecessary
thenameof theclassfrom theuse/snameto ProgFrame
4. lt changgs
5. Speciaiinstructionsto link the VisualizationWindow and User Application
Window togetherare addedto the inito method,in additionto renamingit from
lnlt tOrun.
methodexists,codespecificto thatis inserted.
6 . If an actionPerformedo
'7. Everyotherline in theprogramis checkedto seeif it containsthe nane of a user
or assignment.
definedmethodor variabledeclaration
lin€s arc addedto tell AWTviz to
method,
user-d€fined
contains
a
8 . If the line
incrementth€ levelof theMethodHierarchy,to addthe methodto the Call Stack,
to createa new methodbox, to highlightthatbox, to pauselong enoughfor these
thelevelof theMethodHierarchy.
actionsto complete,andto decrement
a line is addedthat tells
declatation,
primitive
variable
type
contains
a
9. If the line
lists' arrays,and
all
necessary
AWTviz to handlethe additionof that va ableto
hashtables.
threelines are addedthat retrievethe
l0.If the line containsa variableassignment,
currentvalue,adjustthe displayin AWTviz'sVariableList, andupdatesthevalue
in AWTviz.
ll.For every non-curlybraceline after init0 in the user'sprogram,two lines are
added.TheseinstructAWTviz to highlightthe curent line in CodeView andto
pauserclativeto theSpeedContlol.
Fifre 6: Excerptfrom ProgFrameirvs osgenerat€dby Format.
4.2lavs
4.2.1AWTlliz
AWTviz implementsthe AWT Visualizer application.It createsan iostanceof Progviz
andcalls tho init0 method.
4.2.2Progviz
Progviz is the pdmary classfor the visualizationcontainingall the components
mentiongdin section2 The classconsistsof the following methods:
inito - perfoEDsthe layout of all the various componelts of the Visualization Window
andsetsinitial yaluesfor much of the visualizer.
the code
getcode0- getsthe originalcodefrom the user-defir€dprcgram'placesit in
list, anddisplaysit in code view
selectlineo- sel€ctstheproperline in thecodelist while theprogramis executing'
mvwait0 - causesthe threadrunningthe userdefinedprcgramto
for thecodeselectionto be in syncwith theactualexecution
pausejust longenough
events
- handlesAWT actionsfor this object This methodprocesses
actionPerformed0
Window
buttonin theVisualization
ftom themenusandpause/resume
- handlestheadjustment
of the speedslider'
adjustmentvaluechanged0
- doesall thethingsnecessary
to restarttheprogam'
handleRestaflO
addvariableo- addsa variableinto the variablelist and displaysit in the Visualization
Window.
- toggleswhethera variableis visiblein thevariablelist or not'
itemstatechangedo
- makesa largerMyCanvasobject(see4 2 4) andreplacesthe old one
expandcanvaso
whenthereisn'tanymoreroomto drawa methodbox
unhighlighto- callsunhighlightin Mycanvas.
highlighO- callshighlightin MyCanvas.
methodwhenit is called,storesthe
newBoxo- createsa new box for any user-defined
infomationfor it in an instanceof Data(see4.2.3)andthendrawsthebox on thecurent
is call€d'
instanceofMyCanvas.If thecanvasis too small,expandcanvas0
4.2.3Data
Datais a classmadeup of datastucturesthat storeinformationaboutthe methodboxes
that aredisplay€din tte currentinstanceof MyCanvas.Sincethe Mycanvasobjectwill
likely needio Le disposedof anda largeroneput in its place,this classexistsso thatthe
data;boutthecontentsof thecanvasmaypersist.Thercaretwo methodsin thisclass:
theint vatiablelevelby one.
inclrvelo - increments
theint variablelevelby one.
declJvelo - decrcments
1.2.4MyCanvas
format'
Mycanvasis thecanvasuponwhichboxesaiedrawnin a hierarchical
paintO- cyclesthrcughtheanayofmethodboxes,paintingeachoneasit goes
highlighto- highlightsa methodbox if theprogramis cuflentlyexecutingthatmethod.
unhighlight0- repaintsall methodboxes,with noneof themhighlighted
4.2.5MyPanel
sizefor thepanelto be
that allousa specrfic
MyPanelis an extensionof java.awt.Panel
setby calling setPrcferedsize0.
4.2.6ProgFrarne
ProgFrameis the user createdprogram,with some additionalcode to aid in the
visualization.
andFutureWork
5.0Conclusions
we sawthattoolsalreadyexistedto visualize
Whenlookingat thetopicof visualization,
of programs'
to be a visualization
objectsandfunctions.Thenext logicalstepseemed
visualizea
is a tool whichcansuccessfully
research
Theculminationof thissummer's
a setof
through
input
program
format
the
will
programsOur
widerangeof user-defined
Perlscriptsandthendisplayboththeuser'sprogramandthe AWTviz control The
follow thelinesof code'anddisplayin
AWTvii programwill displayandtrackvariables,
a graphicalmannerhow methodcallsaremade.The userhascontroloverthe speedof
executionandwhichvariablesareshown.
tool,it hastheabilityto be
While our intentionfor AWTviz wasasaneducational
The primarypurposeof thisprogramis to visualize
appliedto manydifferentsituations.
htw theJavaAbstractWindowToolkithandlesprogramexecutionThe usercanvety
clearlyseehow theoftencomplexstuctureof methodcallsaremad€ A programwlth
by seeilgtheparent/child
for example,is muchmoreeasilyunderstood
recursion,
in a visual
in visuil methodcalls Th€ abilityto trackvadableassignment
relationship
madeare
assignments
where
when
and
who areconfusedasto
way may aid students
Finally,controloverthespeedof programexecutionallowsfor quickelcomprehenslon
settingis themost
within one'sown program.The academic
ofthe eventprocessing
placefor AWTviz, howeverit couldeasilybe adaptedfor software
appropriate
andproducttesting.
development
Thereare additionalimprovementsthat could be madeto fwther the AWTviz progam'
ever)4hing'
we wercunableto accomplish
oltime constraints,
However.because
AWTviz wouldbe anevenmorepowedultool if it couldvisualizenon-frameJava
Th- abilityto dynamicallysuppofianynumberof vadables
andJavaclasses.
aDolications
in a user'sprogramwould also addto usability.The idoa alsoaroseto color codethe
methodboxesdisplayedin the MethodHierarchyaccordingto the level of indentation.
6.0Aclmowledgments
We would like to aclmowledgethe National ScienceFoundationfor thet financial
supportof the REU Fogram, We would alsolike to $a!k Hope Collegeandow advisor
Dr. HerbertDershemfor their hospitality aIIdcontinuedsupportof computerscienceand
REU.