Computer Science 209 GUIs ModelViewController Layouts Graphical User

Computer Science 209 GUIs Model/View/Controller Layouts

Graphical User Interfaces • A GUI provides a human user with a view of the state of a data model and with controls for manipulating it • A GUI consists of windows, icons, a mouse, and pull-down menus (WIMP), among other things

Event-Driven Programming • An application sets up and displays a window • The application waits for user events, such as mouse clicks on buttons or menu items • The application responds to these events by manipulating the data model and updating the display

Model/View/Controller Pattern • In the MVC pattern – The model is responsible for managing the data and updating the view – The view is responsible for displaying the data and controls (buttons, etc. ) – The controller listens for user events and informs the model of them

Model/View/Controller Pattern View displays listens Controller Model notifies

Separation of Concerns • We can keep the model fixed and change the view • We can keep the view fixed and change the model • Each control in the view has its own set of listeners, each of which is responsible for acting on a distinct event

Which Toolkit to Use? • Breezy. Swing is for quick and easy GUIs in Java • Swing and AWT are standard and are for professional-quality GUIs • A newer toolkit, called Java. FX, available starting with Java 7

Example: A Data Model public class Die{ private int value; public Die(){ roll(); } public void roll(){ value = (int)(Math. random() * 6) + 1; } public String to. String(){ return "" + value; } } All files in GUIExamples. zip in the Resources folder on Sakai

Example: An Empty Window import javax. swing. JFrame; public class GUIApp{ public static void main(String[] args){ final JFrame view = new JFrame(); view. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); view. set. Size(200, 200); view. set. Visible(true); } } main instantiates the frame and sets its principal attributes

Specializing the View import javax. swing. JFrame; public class GUIApp{ public static void main(String[] args){ final JFrame view = new Main. View 1(); view. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); view. set. Size(200, 200); view. set. Visible(true); } } import javax. swing. *; import java. awt. *; public class Main. View 1 extends JFrame{ // Code for specializing the view } Define a subclass of JFrame to represent the view

Add Two Controls import javax. swing. *; import java. awt. *; The view’s constructor sets the attributes of the controls and layout and adds them to the frame public class Main. View 1 extends JFrame{ private JText. Field dice. Field = new JText. Field(1); private JButton roll. Button = new JButton("Roll"); public Main. View 1(){ this. set. Title("Roll the Die"); dice. Field. set. Editable(false); dice. Field. set. Horizontal. Alignment(JText. Field. CENTER); Container c = this. get. Content. Pane(); c. add(dice. Field, Border. Layout. NORTH); c. add(roll. Button, Border. Layout. SOUTH); } }

Hook Up the Model and the View import javax. swing. JFrame; public class GUIApp{ public static void main(String[] args){ final JFrame view = new Main. View 2(new Die()); view. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); view. set. Size(200, 200); view. set. Visible(true); } } The GUIApp class instantiates the model and the view and connects them

Display the Data Model import javax. swing. *; import java. awt. *; public class Main. View 2 extends JFrame{ private JText. Field dice. Field = new JText. Field(1); private JButton roll. Button = new JButton("Roll"); private Die model; public Main. View 2(Die model){ this. model = model; set. Title("Roll the Die"); dice. Field. set. Editable(false); dice. Field. set. Horizontal. Alignment(JText. Field. CENTER); dice. Field. set. Text(model. to. String()); Container c = this. get. Content. Pane(); c. add(dice. Field, Border. Layout. NORTH); c. add(roll. Button, Border. Layout. SOUTH); }

Listening and Responding import javax. swing. *; import java. awt. event. *; public class Main. View 3 extends JFrame{ private JText. Field dice. Field = new JText. Field(1); private JButton roll. Button = new JButton("Roll"); private Die model; public Main. View 3(Die model){ this. model = model; this. set. Title("Roll the Die"); dice. Field. set. Editable(false); dice. Field. set. Horizontal. Alignment(JText. Field. CENTER); dice. Field. set. Text(model. to. String()); roll. Button. add. Action. Listener(new Roll. Listener()); Container c = this. get. Content. Pane(); c. add(dice. Field, Border. Layout. NORTH); c. add(roll. Button, Border. Layout. SOUTH);

Listening and Responding import javax. swing. *; import java. awt. event. *; public class Main. View 3 extends JFrame{ private JText. Field dice. Field = new JText. Field(1); private JButton roll. Button = new JButton("Roll"); private Die model; … private class Roll. Listener implements Action. Listener{ public void action. Performed(Action. Event e){ model. roll(); dice. Field. set. Text(model. to. String()); } } }

Components, Containers, and Layouts • Some GUI components are primitives, such as buttons and fields • Others are containers in which components can be placed, such as frames and panels (panels can be nested recursively) • The manner of organizing components can vary with the container and with the application

Layout Managers • Components are added to a container under the influence of a layout manager • The default layout manager for frames and dialogs is Border. Layout • The default layout manager for panels and applets is Flow. Layout

The Layout Strategy • The different layout managers implement the Layout. Manager interface • A container calls methods in this interface to lay out the components • The user of the container supplies an instance of this interface for a particular type of layout

Common Layouts Flow. Layout Wrap around effect Border. Layout 5 distinct areas Grid. Layout Two-dimensional grid of equal-sized areas Grid. Bag. Layout Allows stretching of cells across rows and columns

Flow Layouts public Flow. View(){ Container c = get. Content. Pane(); c. set. Layout(new Flow. Layout(Flow. Layout. CENTER, 10, 15)); c. add(new JButton("One")); c. add(new JButton("Two")); c. add(new JButton("Three")); c. add(new JButton("Four")); } Can specify alignment and margins between components Components occupy the minimum space necessary

Border Layouts public Border. View(){ Container c = get. Content. Pane(); c. add(new JButton("North") , Border. Layout. NORTH); c. add(new JButton("East") , Border. Layout. EAST); c. add(new JButton("South") , Border. Layout. SOUTH); c. add(new JButton("West") , Border. Layout. WEST); c. add(new JButton("Center”), Border. Layout. CENTER); } Components stretch to fill their areas Filled areas expand to fill areas left empty

Grid Layouts public Grid. View(){ Container c = get. Content. Pane(); c. set. Layout(new Grid. Layout(2, 2)); c. add(new JButton("One")); c. add(new JButton("Two")); c. add(new JButton("Three")); c. add(new JButton("Four")); } Cells are filled in row major order Components stretch to fill their cells

Gridbag Layouts public Grid. Bag. View(){ Grid. Bag. Layout layout = new Grid. Bag. Layout(); Grid. Bag. Constraints constraints = new Grid. Bag. Constraints(); Container c = get. Content. Pane(); c. set. Layout(layout); constraints. gridx = 0; constraints. gridy = 0; layout. set. Constraints(widget 1, constraints); c. add(widget 1); constraints. gridx = 1; constraints. gridy = 0; layout. set. Constraints(widget 2, constraints); c. add(widget 2); constraints. gridx = 0; constraints. gridy = 1; constraints. gridwidth = 2; constraints. fill = Grid. Bag. Constraints. HORIZONTAL; layout. set. Constraints(widget 3, constraints); c. add(widget 3); }

Planning a Layout • Draw a picture of the desired look • Use nested panels to structure components where necessary • Choose appropriate layout managers for each subarea in the main window

Refine the Layout import javax. swing. *; import java. awt. event. *; public class Main. View 3 extends JFrame{ private JText. Field dice. Field = new JText. Field(1); private JButton roll. Button = new JButton("Roll"); private Die model; public Main. View 3(Die model){ … Container c = this. get. Content. Pane(); JPanel dice. Panel = new JPanel(); dice. Panel. add(dice. Field); JPanel roll. Panel = new JPanel(); roll. Panel. add(roll. Button); this. set. Layout(new Grid. Layout(2, 1)); c. add(dice. Panel); c. add(roll. Panel); this. set. Size(200, 100);

A GUI for a Student Object