GUIs for beginners using JEWL

1
GUIs for beginnersusing JEWL

• John EnglishUniversity of Brighton

2
Rationale

• Students are used to using GUI-based software
• Developing text-based programs seems
  anachronistic
• its also hard in Java!
• GUI development is normally much harder than
  text-based development

3
JEWL is...

• A class library for developing GUI-based programs
  in Java
• A free, open source product (GNU GPL)
• Simple enough to be used by complete beginners
  from the Hello world stage onwards

4
Background

• Originally developed for use with Ada
• Existing Ada GUI frameworks (GTK, Claw, GWindows)
  too complex for beginners
• Developed as a simple alternative that could be
  used from Hello world onwards
• Redeveloped for use with Java
• (yes, were finally dropping Ada in year 1...)

5
Why another class library?

• Java already has Swing (and others)...
• Swing is designed for commercial development and
• is extremely flexible
• has an enormous API
• is very complex
• is often inconsistent
• is not designed for use by complete beginners

6
Problems with Swing

• Real developers use GUI builders
• productivity is paramount in industry
• Using a GUI builder avoids having to understand
  whats really happening
• understanding is crucial in education
• Swing relies on advanced features of the
  language
• derived classes, overriding, inner classes

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

8
JEWL structure

• Programs use an explicit event loop
• some controls generate character command codes
  when activated
• Window.nextCommand() waits for a command code and
  returns the corresponding character
• This approach avoids the need for derivation,
  inner classes etc.
• only need to be able to write while loops and
  if statements

9
Controls and events

• Controls are visible representations of standard
  data types
• labels, text fields represent strings
• checkboxes, radiobuttons represent booleans
• Most controls dont generate events
• get set control values in response to events
  from buttons, menu items etc.

10
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 / relocated when the parent
  window changes size

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

• Constructing a frame with a button
• Frame f new Frame (200, 150, "Main",
  'Q')
• Button b new Button (f, 5, -40,
• -10, 25, "Load", 'L')
• Last parameter specifies command code returned
  when an event occurs

19
Event types

• Events are generated by certain control types
• Buttons when pressed
• Frames, dialogs when closed
• Menu items when selected
• Canvases when mouse clicked

20
Event handling

• Explicit event loop needed to handle events
• while (f.isValid())
• switch (Window.nextCommand())
• case 'Q
• System.exit(0)
• when 'L' gt
• Dialog.message ("Loading...")
• break

21
Dialogs

• Dialogs are always modal
• execute() method shows dialog until any of the
  dialogs controls generates an event
• the controls command code is returned
• Some standard dialog classes
• ColourDialog, FontDialog, OpenDialog, SaveDialog

22
Dialogs

• An example
• Dialog d new Dialog(200,100,
• Enter a value,N)
• TextField f new TextField(d,10,10,
• 100,20)
• Button b1 new Button(d,10,40,80,20,
• OK,Y)
• Button b2 new Button(d,100,40,80,20,
• Cancel,N)
• if (d.execute() Y) ...

23
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
• Can remember the state of a canvas
• revert to earlier state by removing objects added
  after state was saved

24
Canvases

• Canvases generate mouse-down events
• methods are provided to track mouse position
  while button is down
• Example rubber banding
• int m canvas.mark()
• while (canvas.mouseDown())
• if (canvas.mouseMoved())
• canvas.restore(m)
• canvas.add(new Line(...))

25
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.
• Provides a way forward into Swing

26
Automated assessment

• Automated assessment of programming exercises
• run text-based program submissions in a sandbox
  and compare output with expected output
• harder to do with GUI-based programs!

27
Automated assessment

• JEWL windows can have a numeric ID
• methods setID(n), getID()
• This ID is not used in the standard
  implementation
• but other implementations are possible

28
Automated assessment

• Assessment systems can use a compatible
  implementation
• same classes, same specification
• Assessment specification needs to specify window
  IDs for essential controls
• test program can use IDs to set controls, feed
  events to controls, and get values from other
  controls

29
Experience

• Three years experience with Ada version
• very popular with educators and students
• in use at several institutions worldwide
• Java version piloted this year
• generally successful
• but students had used JEWL with Ada in year 1
• we will find out for sure next year!

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