Teaching and Assessing GUIBased Programming with JEWL

1
Teaching and AssessingGUI-Based Programmingwith
JEWL

• John EnglishUniversity of Brighton

2
What is JEWL?

• John Englishs Window Library a GUI library
  for novice Java programmers
• Intended to be usable from the Hello world
  stage onwards
• Allows for automated assessment
• A free, open source product (GNU GPL)
• http//www.it.bton.ac.uk/staff/je/java/jewl/

3
Why another class library?

• Java already has Swing (and others)...
• Swing is designed for commercial development and
• is very flexible
• has an enormous API
• is extremely complex
• is often inconsistent
• relies on advanced features of the language
  (derived classes, overriding, inner classes)

4
Alternative approaches

• Teach text-based programming
• but students are used to using GUI-based
  software!
• Text-based programs seem anachronistic
• theyre also hard to write in Java!
• tutor-supplied libraries for e.g. integer I/O are
  needed

5
Alternative approaches

• Use a GUI builder (NetBeans, JBuilder...)
• this approach used widely in industry
• but productivity is paramount in industry...
• Using a GUI builder avoids having to understand
  whats really happening
• developing understanding is paramount in
  education...
• productivity is secondary!

6
Automated assessment

• So many submissions, so little time...
• Automated assessment of text-based programming
  exercises is (fairly) easy
• run program submissions in a sandbox and compare
  actual output with expected output
• This is harder to do with GUI-based programs
• how do you know where to enter data or which
  button to press?

7
JEWL design principles

• Should be usable by complete beginners
• no advanced language features needed
• Consistency is essential
• helps to minimise the learning curve
• Simplicity is more important than generality
• beginners only need a limited set of features
• needs to be usable without a GUI builder
• Should permit automated assessment!

8
JEWL program structure

• Programs use an explicit event loop
• some controls generate single-character command
  codes when activated
• Window.nextCommand() waits for a command code and
  returns the corresponding character
• No need for derivation, inner classes etc.
• users only need to be able to create objects,
  call methods, write while loops and if
  statements

9
Controls and events

• Controls can be regarded as visible
  representations of standard data types
• labels, text fields represent strings
• checkboxes, radiobuttons represent booleans
• listboxes represent arrays of strings
• Most controls dont generate events
• methods provided to get set control values
• use these in response to events from buttons,
  menu items etc.

10
JEWL type hierarchy
All windows have a size, position and font,
and can be shown or hidden
11
JEWL type hierarchy
Frame, Dialog, Panel, TabbedPanel, standard
dialogs
12
JEWL type hierarchy
All controls can be enabled or disabled
13
JEWL type hierarchy
Button, TextField, Label, Menu (can get or set
text)
14
JEWL type hierarchy
MenuItem, CheckBox, RadioButton (can get or
set Boolean state)
15
JEWL type hierarchy
ListBox, ComboBox, Memo
16
JEWL type hierarchy
Drawing objects text, lines, ellipses/circles, re
ctangles, colours, fonts...
17
Building a JEWL application

• Declare all the windows needed
• containers and controls
• Write the event loop
• process events in some appropriate way
• these are generated by the windows that have been
  declared

18
Layout

• Layout is done manually
• need to specify size and position of each window
• avoids battling with layout managers
• Some additional flexibility
• positions lt 0 and sizes lt 0 are taken to be
  relative to the parent window
• windows are resized and/or relocated when the
  parent window changes size

19
Some example declarations

• Frame frame new Frame
• (300, 200, "Temperature converter", 'Q')
• DoubleField value new DoubleField
• (frame, 5, 5, -10, 25)
• Label result new Label
• (frame, 15, 40, -30, 25, "")
• Button cToF new Button
• (frame, 20, -45, 100, 25, "C to F", 'C')
• Button fToC new Button
• (frame, 140, -45, 100, 25, "F to C", 'F')

20
Event types

• Events are generated by a limited set of control
  types
• Buttons when pressed
• Frames, dialogs when closed
• Menu items when selected
• Canvases when mouse clicked
• The last parameter of the constructor for these
  is the character to generate for the event

21
Event handling

• Explicit event loop is used to handle events
• while (f.isValid())
• char cmd Window.nextCommand()
• if (cmd C')
• // deal with C to F button...
• // ...and so on for other values of cmd
• The event loop just processes a sequence of
  characters...

22
An example event loop

• while (frame.isValid())
• char cmd Window.nextCommand()
• if (cmd 'C') // convert C to F
• double c value.getDouble()
• double f c 9.0 / 5.0 32.0
• result.setText(c "C " f "F")
• else if (cmd 'F') // convert F to C
• double f value.getDouble()
• double c (f - 32.0) 5.0 / 9.0
• result.setText(f "F " c "C")

23
Dialogs

• Dialogs are modal
• non-modal dialogs can be built using frames
• Dialogs appear when execute() is called
• any control that generates a command hides the
  dialog
• the command code is returned as the result of
  execute()
• controls and their values are accessible before
  and after execute()

24
Dialogs

• Some standard dialogs are provided
• FontDialog chooses a font
• ColourDialog (or ColorDialog) chooses a colour
• OpenDialog and SaveDialog select files

25
Canvases

• A canvas is a general-purpose drawing surface
• draw by adding drawing objects to a canvas
• canvas handles redrawing of all its attached
  drawing objects whenever necessary

26
Canvases

• Canvases can generate mouse-down events
• Methods are provided to track mouse position
  while button is down
• start(), end()
• mouseDown(), mouseMoved()

27
Canvases

• Example rubber banding
• int m canvas.mark()
• while (canvas.mouseDown())
• if (canvas.mouseMoved())
• canvas.restore(m)
• canvas.add(new LineObject(
• canvas.start(),canvas.end()
• ))

28
Advanced event handling

• Event listeners provide extra flexibility
• similar to Swing event listeners, but simpler and
  more limited
• can respond to container resizing, listbox
  selection changes, etc.
• This provides a way forward into Swing

29
Automated assessment

• JEWL windows can have a numeric ID
• methods setID(n), getID()
• This ID has no effect in the standard
  implementation
• but other implementations are possible!

30
Automated assessment

• Assessment system uses a compatible
  implementation of JEWL
• same classes, same specification, different
  implementation
• Some additional methods
• Window.locate(ID,type)
• putCommand()
• Window.checkResults(testno,expected,actual)

31
Automated assessment

• Test harness needed
• this runs the program in a separate thread and
  waits until it calls Window.nextCommand()
• At this point, the program should have created
  all the GUI objects it uses
• the test harness can now use Window.locate() to
  find the controls it needs

32
Automated assessment

• Once the controls have been located, the test
  harness can get / set control values
• it then calls putCommand() to feed the next
  command code to the program
• The program then executes until the next call to
  Window.nextCommand()
• the test harness is then allowed to proceed
• it can then get set control values...

33
Test harness initialisation

• TestHarness t new TestHarness()
• t.start()
• Window.waitCommand()
• DoubleField value
• (DoubleField)Window.locate(1,"DoubleField")
• Label result
• (Label)Window.locate(2,"Label")
• Button cToF
• (Button)Window.locate(3,"Button")
• Button fToC
• (Button)Window.locate(4,"Button")

34
Test harness operation

• r rand.nextInt(100)
• value.setDouble(r)
• cToF.putCommand()
• Window.checkResults(1, toF(r),
• result.getText())
• r rand.nextInt(212)
• value.setDouble(r)
• fToC.putCommand()
• Window.checkResults(2, toC(r),
• result.getText())

35
History

• Originally developed for use with Ada
• used from 2000 to 2003
• in use at several institutions worldwide
• very popular with educators and students
• Java version released in 2003
• used with 2nd year Java course in 2002/3
• used with new 1st year Java course in 2003/4

36
Experience

• Beginners like being able to create
  professional-looking programs from an early stage
• Very few problems getting to grips with using
  JEWL
• distribution includes tutorial many examples
• Very few problems with assessments
• most due to not reading the question...

37
JEWL website
http//www.it.bton.ac.uk/staff/je/java/jewl/
Any questions?