Teaching and Assessing GUI-Based Programming with JEWL

1. Teaching and AssessingGUI-Based Programmingwith JEWL John EnglishUniversity of Brighton

2. What is JEWL? • ‘John English’s 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 • they’re 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 what’s 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 don’t generate events • methods provided to get & set control values • use these in response to events from buttons, menu items etc.

10. Window Container Control TextControl BooleanTextControl MultiLineControl Canvas JEWL type hierarchy All windows have a size, position and font, and can be shown or hidden

11. Window Window Container Container Control Control TextControl TextControl BooleanTextControl BooleanTextControl MultiLineControl MultiLineControl Canvas_Type Canvas JEWL type hierarchy Frame, Dialog, Panel, TabbedPanel, standard dialogs

12. Window Container Control TextControl BooleanTextControl MultiLineControl Canvas JEWL type hierarchy All controls can be enabled or disabled

13. Window Window Container Container Control Control TextControl TextControl BooleanTextControl BooleanTextControl MultiLineControl MultiLineControl Canvas Canvas JEWL type hierarchy Button, TextField, Label, Menu (can get or set text)

14. Window Window Container Container Control Control TextControl TextControl BooleanTextControl BooleanTextControl MultiLineControl MultiLineControl Canvas Canvas JEWL type hierarchy MenuItem, CheckBox, RadioButton (can get or set Boolean state)

15. Window Window Container Container Control Control TextControl TextControl BooleanTextControl BooleanTextControl MultiLineControl MultiLineControl Canvas Canvas JEWL type hierarchy ListBox, ComboBox, Memo

16. Window Window Container Container Control Control TextControl TextControl BooleanTextControl BooleanTextControl MultiLineControl MultiLineControl Canvas Canvas JEWL type hierarchy Drawing objects: text, lines, ellipses/circles, rectangles, 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 < 0 and sizes <= 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?