1. The structure of Interactive Software
Widgets
The structure of Interactive Software

2. Widgets
Graphical User Interfaces such as Apple Mac based on an underlying set of reusable softeware components
Athena Widgets – components for X-Widows
Build into Windows and OS10
Swing is the Java set of GUI components for GUI
Three main classes of components
Simple Widgets
Container Widgets (that hold other widgets)
Abstract Model widgets (that help manage the underlying models)

3. Widgets Windowing System Graphics View Essential Geometry Model
Controller
Input

4. Widgets Abstraction of the Model View Controller Arrangement
Property Settings
Windowing System
WIDGET
Graphics
View
Essential Geometry
Model
Model Change Events
Controller
Input
Abstraction of the Model View Controller Arrangement

5. Simple Widgets
Implemented as single class abstracting the model view and controller
Properties are used to manage widgets
Each component list of properties that control
Advantage is reduced complexity plus standardised look and feel across the interface
Standard interfaces also allow the development of interface toolkits

6. Simple Widgets

7. Widgets Properties
Setting of properties are fundamental to using widgets
Most important is the BOUNDS properties which sets the extent of the underlying window used to display the widget.
Always defined relative to container widgets
Used by window managers in layouts and redrawing
Properties modified using standard conventions

8. Property Modification
Swing uses a standard set and get method convention
This approach also underpins JavaBeans and is exploit by toolkits
public class myNewWidget extends Widget {
private Rectangle myBounds;
public Rectangle getBounds()
{ return myBounds; }
public void setBounds(Rectangle newBounds)
view notification code . . .
myBounds=newBounds; }

9. Simple Widgets
Early widget concept based on notion of logical input devices
Separate it function and its interface
logical device “button” simply generates an event when it is pressed
Can be realised and presented in a large number of ways
Physical button
Screen Icon
Menu Selection
The input device has same relationship to model irrespective of implementation
All generate same form of ActionEvent.

10. Logical Button

11. Information and Style Widgets
Provide information e.g. Text Labels, Images
Image widgets can be used to convey different styles of interface

12. Boolean Widgets Display simple boolean value conditions
Checkboxes
Toggle button
Generate an event when values change
Some widgets have properties that allow different presentation (e.g. trueImage and falseImage )

13. Choice Widgets Select one or more choices from a list of options
Each choice two and an option label
Model is a single variable that can take on multiple values

14. Choice Widgets
Choice widgets are composed of multiple selections allowing considerable flexibility

15. Text Widgets Text Box one of the most common used widgets
Allows text to be input and sets a text variable as the model
Can be used to display specific values to users
Text can be formatted in a variety of ways and different widget set use different conventions

16. Number Widgets Specifying or displaying numbers
Normally have minvalue maxvalue and currentvalue properties
Events generated on change of values
Properties can be used to alter granularity of event generation

17. Colour Values
Special value widget to allow colour to be selected

18. File selection
Allows you to chose where to save a file

19. Time selection
Allows you to select dates or provide time information

20. Container Widgets
Allows you to collect together a number of widgets to build more complex interfaces
A container widget’s model is a list of other widgets.
Common containers are
Menus
Forms
Tabs
Toolbars
Container widgets generally do not generate events. That is delegated to the widgets that actually have values.
Containers can collect events to provided controllers that allow higher levels of abstractions

21. Pane Widget comes from the panes in a window.
Widgets are laid out on a 2D surface just like a paper
Handling widget layout in a pane can become complex when the user can change the size of the pane.

22. Menus A menu is one of the simplest widget collections.
All of the items in a menu are stacked up either vertically or horizontally
Menus handled same way for UI consistency
Generally menus are composed of buttons that perform actions.

23. Nested Panes

24. Tabs
Each tab behaves as a pane allowing users to switch between them to optimise screen use.

25. Toolbars
Places a variety of simple widgets along the top or bottom of a window
The success of a toolbar depends upon having widgets that are frequently used and whose purpose can be conveyed in very little screen space.

26. Building a Widget
Build a model for the user interface with a change notification/listener mechanism
Create the tree of widgets (both prebuilt and application specific) that will define the view.
Implement the view code to handle model change notifications and change widget properties so that the new information will appear.
Create a controller by attaching listeners to any prebuilt widgets so that changes made by the user can be propagated to the model. This controller gets its events from other widgets rather than directly from the input devices.
Resolve notification race conditions.

27. Application Widget
Person widget for interacting with team members in a database

28. The Model public class TeamMember {
public String getFirstName() { }
public void setFirstName(String firstName) { }
public String getLastName() { }
public void setLastName(String lastName) { }
public String getAddress() { }
public void setAddress(String address) { }
public String getPhone() { }
public void setPhone(String phone) { }
public void addTeamMemberListener(TeamMemberListener listener) { }
public void removeTeamMemberListener(TeamMemberListener listener) { } }

29. public class TeamMemberView extends JPanel implements TeamMemberListener{
private TeamMember myModel;
private LabeledText firstName;
private LabeledText lastName;
private LabeledText address;
private LabeledText phone;
public TeamMemberView(TeamMember model)
{ myModel=model;
myModel.addTeamMemberListener(this);
firstName=new LabeledText(“First Name”);
this.add(firstName);
lastName=new LabeledText(“Last Name”);
this.add(lastName);
address=new LabeledText(“Address”);
this.add(address);
phone=new LabeledText(“Phone”);
this.add(phone); }
private class LabeledText extends JPanel
private JTextField textField;
public LabeledText(String label)
{ this.add(new JLabel(label));
textField = new JTextField();
this.add(textField);

30. public class TeamMemberView extends JPanel implements TeamMemberListener{
private TeamMember myModel;
private LabeledText firstName;
private LabeledText lastName;
private LabeledText address;
private LabeledText phone;
public TeamMemberView(TeamMember model)
{ }
private class LabeledText extends JPanel
private JTextField textField;
public LabeledText(String label)
public void setText(String newText)
{ textField.setText(newText); } }
public void changed()
{ firstName.setText(myModel.getFirstName());
lastName.setText(myModel.getLastName());
address.setText(myModel.getAddress());
phone.setText(myModel.getPhone());

31. public class TeamMemberView extends JPanel
implements TeamMemberListener, ActionListener {
private TeamMember myModel;
private LabeledText firstName;
private LabeledText lastName;
private LabeledText address;
private LabeledText phone;
public TeamMemberView(TeamMember model)
{ other setup code . . .
firstName.addListener(this);
lastName.addListener(this);
address.addListener(this);
phone.addListener(this); }
private class LabeledText extends JPanel
private JTextField textField;
. . . other methods . . .
public void addListener(ActionListener listener)
{ textField.addActionListener(listener); }
public String getText()
{ return textField.getText(); }
public void actionPerformed(ActionEvent e)
{ myModel.setFirstName(firstName.getText());
myModel.setLastName(lastName.getText());
myModel.setAddress(address.getText());
myModel.setPhone(phone.getText());

32. Notification Race Conditions
User enters some text in the “Last Name” field
actionPerformed() will be called on the view
actionPerformed() will call setFirstName() on model
setFirstName() will notify all views listening to the model that the model has changed.
our view is listening to the model,
changed() method is called.
changed() method calls setText() which will change the text in the JTextField.
Changing JTextField text will generate an actionPerformed()

33. public class TeamMemberView extends JPanel
implements TeamMemberListener, ActionListener {
private boolean activeAction;
public TeamMemberView(TeamMember model)
{ other setup code . . .
activeAction=false; }
private class LabeledText extends JPanel
{ }
. . . other methods . . .
public void actionPerformed(ActionEvent e)
{ if (activeAction) return;
activeAction=true;
myModel.setFirstName(firstName.getText());
myModel.setLastName(lastName.getText());
myModel.setAddress(address.getText());
myModel.setPhone(phone.getText());

34. Summary Prebuilt widgets simplify GUI construction
Make construction easier and improves look and feel
Controlled by setting properties
Standardised approach allows use of toolkits
Simple Widgets abstract over model, view and controllers
Generate events at more abstract level
Container Widgets (that hold other widgets)
Next : Examples of the use of Swing widgets
Read through the swing tutorials.
Layout (see chapter 5)