Presentation is loading. Please wait.

Presentation is loading. Please wait.

The structure of Interactive Software

Similar presentations


Presentation on theme: "The structure of Interactive Software"— Presentation transcript:

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)


Download ppt "The structure of Interactive Software"

Similar presentations


Ads by Google