Widgets

1
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
EssentialGeometry
Model
Controller
Input
4
Widgets
Windowing System
WIDGET
Graphics
View
EssentialGeometry
Model
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 . . .
myBoundsnewBounds
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 widgets 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(TeamMemberLi
stener
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) myModelmodel
myModel.addTeamMemberListener(this)
firstNamenew LabeledText(First Name)
this.add(firstName) lastNamenew
LabeledText(Last Name)
this.add(lastName) addressnew
LabeledText(Address)
this.add(address) phonenew
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(TeamMem
ber 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(my
Model.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() . .
. other methods . . . 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(TeamMemb
er model) . . . other setup code . . .
activeActionfalse
private class LabeledText extends JPanel
. . . . . . other methods . . .
public void actionPerformed(ActionEvent e)
if (activeAction) return
activeActiontrue myModel.setFirstNam
e(firstName.getText())
myModel.setLastName(lastName.getText())
myModel.setAddress(address.getText())
myModel.setPhone(phone.getText())
activeActionfalse
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)