Building Graphical User Interfaces 5 0 Overview Constructing

Building Graphical User Interfaces 5. 0

Overview • • Constructing GUIs Interface components GUI layout Event handling Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 2

GUI Principles • Components: GUI building blocks. – Buttons, menus, sliders, etc. • Layout: arranging components to form a usable GUI. – Using layout managers. • Events: reacting to user input. – Button presses, menu selections, etc. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 3

AWT and Swing Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 4

Elements of a frame Window controls Title Menu bar Content pane Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 5

Creating a frame import java. awt. *; import java. awt. event. *; import javax. swing. *; public class Image. Viewer { private JFrame frame; /** * Create an Image. Viewer show it on screen. */ public Image. Viewer() { make. Frame(); } // rest of class omitted. } Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 6

The content pane /** * Create the Swing frame and its content. */ private void make. Frame() { frame = new JFrame("Image. Viewer"); Container content. Pane = frame. get. Content. Pane(); JLabel label = new JLabel("I am a label. "); content. Pane. add(label); frame. pack(); frame. set. Visible(true); } Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 7

Adding menus • JMenu. Bar – Displayed below the title. – Contains the menus. • JMenu – e. g. File. Contains the menu items. • JMenu. Item – e. g. Open. Individual items. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 8

private void make. Menu. Bar(JFrame frame) { JMenu. Bar menubar = new JMenu. Bar(); frame. set. JMenu. Bar(menubar); // create the File menu JMenu file. Menu = new JMenu("File"); menubar. add(file. Menu); JMenu. Item open. Item = new JMenu. Item("Open"); file. Menu. add(open. Item); JMenu. Item quit. Item = new JMenu. Item("Quit"); file. Menu. add(quit. Item); } Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 9

Event handling • Events correspond to user interactions with components. • Components are associated with different event types. – Frames are associated with Window. Event. – Menus are associated with Action. Event. • Objects can be notified when an event occurs. – Such objects are called listeners. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 10

Centralized event receipt • A single object handles all events. – Implements the Action. Listener interface. – Defines an action. Performed method. • It registers as a listener with each component. – item. add. Action. Listener(this) • It has to work out which component has dispatched the event. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 11

Action. Listener public interface Action. Listener { public void action. Performed(Action. Event ev); } Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 12

public class Image. Viewer implements Action. Listener { … public void action. Performed(Action. Event e) { String command = e. get. Action. Command(); if(command. equals("Open")) { … } else if (command. equals("Quit")) { … } … } … private void make. Menu. Bar(Jframe) { … open. Item. add. Action. Listener(this); … } } Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 13

Centralized event handling • The approach works. • It is used, so you should be aware of it. • However … – It does not scale well. – Identifying components by their text is fragile. • An alternative approach is preferred. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 14

Nested class syntax • Class definitions may be nested. – public class Enclosing { … private class Inner { … } } Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 15

Inner classes • Instances of the inner class are localized within the enclosing class. • Instances of the inner class have access to the private members of the enclosing class. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 16

Anonymous inner classes • Obey the rules of inner classes. • Used to create one-off objects for which a class name is not required. • Use a special syntax. • The instance is always referenced via its supertype, as it has no subtype name. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 17

Anonymous action listener JMenu. Item open. Item = new JMenu. Item("Open"); open. Item. add. Action. Listener(new Action. Listener() { public void action. Performed(Action. Event e) { open. File(); } }); Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 18

Anonymous class elements Anonymous object creation open. Item. add. Action. Listener( new Action. Listener() { public void action. Performed(Action. Event e) { open. File(); } } ); Class definition Actual parameter Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 19

Exit on window close frame. add. Window. Listener(new Window. Adapter() { public void window. Closing(Window. Event e) { System. exit(0); } }); Window. Adapter provides a no-op implementation of the Window. Listener interface. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 20

The imageviewer project Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 21

Image processing Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 22

Class responsibilities • Image. Viewer – Sets up the GUI structure. • Image. File. Manager – Static methods for image file loading and saving. • Image. Panel – Displays the image within the GUI. • OFImage – Models a 2 D image. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 23

OFImage • Our subclass of Buffered. Image. • Represents a 2 D array of pixels. • Important methods: – get. Pixel, set. Pixel – get. Width, get. Height • Each pixel has a color. – We use java. awt. Color. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 24

Adding an Image. Panel public class Image. Viewer { private JFrame frame; private Image. Panel image. Panel; … private void make. Frame() { Container content. Pane = frame. get. Content. Pane(); image. Panel = new Image. Panel(); content. Pane. add(image. Panel); } … } Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 25

Loading an image public class Image. Viewer { private JFrame frame; private Image. Panel image. Panel; … private void open. File() { File selected. File = …; OFImage image = Image. File. Manager. load. Image(selected. File); image. Panel. set. Image(image); frame. pack(); } … } Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 26

Layout managers • Manage limited space for competing components. – Flow. Layout, Border. Layout, Grid. Layout, Box. Layout, Grid. Bag. Layout. • Manage Container objects, e. g. a content pane. • Each imposes its own style. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 27

Flow. Layout Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 28

Border. Layout Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 29

Grid. Layout Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 30

Box. Layout Note: no component resizing. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 31

Nested containers • Sophisticated layouts can be obtained by nesting containers. – Use JPanel as a basic container. • Each container will have its own layout manager. • Often preferable to using a Grid. Bag. Layout. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 32

Struts and Glue • Invisible components used as spacing. • Available from the Box class. • Strut: fixed size. – Component create. Horizontal. Strut(int width) – Component create. Vertical. Strut(int height) • Glue: fills available space. – Component create. Horizontal. Glue() – Component create. Vertical. Glue() http: //docs. oracle. com/javase/tutorial/uiswing/layout/bo x. html Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 33

Dialogs • Modal dialogs block all other interaction. – Forces a response from the user. • Non-modal dialogs allow other interaction. – This is sometimes desirable. – May be difficult to avoid inconsistencies. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 34

JOption. Pane standard dialogs • Message dialog – Message text plus an OK button. • Confirm dialog – Yes, No, Cancel options. • Input dialog – Message text and an input field. • Variations are possible. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 35

A message dialog private void show. About() { JOption. Pane. show. Message. Dialog(frame, "Image. Viewern" + VERSION, "About Image. Viewer", JOption. Pane. INFORMATION_MESSAGE); } Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 36

Image filters • Functions applied to the whole image. int height = get. Height(); int width = get. Width(); for(int y = 0; y < height; y++) { for(int x = 0; x < width; x++) { Color pixel = get. Pixel(x, y); alter the pixel's color value; set. Pixel(x, y, pixel); } } Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 37

Adding further filters private void make. Lighter() { if(current. Image != null) { current. Image. lighter(); frame. repaint(); show. Status("Applied: lighter"); } else { show. Status("No image loaded. "); } } Code duplication? Refactor! private void threshold() { if(current. Image != null) { current. Image. threshold(); frame. repaint(); show. Status("Applied: threshold"); } else { show. Status("No image loaded. "); } } Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 38

Adding further filters • Define a Filter superclass (abstract). • Create function-specific subclasses. • Create a collection of subclass instances in Image. Viewer. • Define a generic apply. Filter method. • See imageviewer 2 -0. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 39

imageviewer 2 -0 Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 40

Buttons and nested layouts A Grid. Layout inside a Flow. Layout inside a Border. Layout. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 41

Borders • Used to add decoration around components. • Defined in javax. swing. border – Bevel. Border, Compound. Border, Empty. Border, Etched. Border, Titled. Border. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 42

Adding spacing JPanel content. Pane = (JPanel)frame. get. Content. Pane(); content. Pane. set. Border(new Empty. Border(6, 6, 6, 6)); // Specify the layout manager with nice spacing content. Pane. set. Layout(new Border. Layout(6, 6)); image. Panel = new Image. Panel(); image. Panel. set. Border(new Etched. Border()); content. Pane. add(image. Panel, Border. Layout. CENTER); Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 43

Other components • • Slider Spinner Tabbed pane Scroll pane Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 44

Review • Aim for cohesive application structures. – Endeavor to keep GUI elements separate from application functionality. • Pre-defined components simplify creation of sophisticated GUIs. • Layout managers handle component juxtaposition. – Nest containers for further control. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 45

Review • Many components recognize user interactions with them. • Reactive components deliver events to listeners. • Anonymous inner classes are commonly used to implement listeners. Objects First with Java - A Practical Introduction using Blue. J, © David J. Barnes, Michael Kölling 46