Layout Components MVC Design PaCern GUI Programming Observer Design PaCern D0010E Lecture 8 - Håkan Jonsson 1 Lecture 8 - Håkan Jonsson 2 Lecture 8 - Håkan Jonsson 3 1
1. GUI programming In the beginning, there was Abstract Windowing Toolkit (AWT). Swing was introduced in Java 1.2. Replaces (or rather extends) AWT. Consists of a wide range of different components you can use to build your GUI. Important: Learn the principles, rather than every single class. The look and feel of the GUI can be adjusted in many ways. - Håkan Jonsson 4 Top- level containers An applicamon with a GUI has at least one top- level container. There are three kinds of such containers: JFrame JDialog, and JApplet. Each has a content pane which contains GUI components. Together, they form a containment hierarchy. - Håkan Jonsson 5 Example: The empty window (From Oracles website) (On my MacBook Pro) - Håkan Jonsson 6 2
The empty window package l09.gui.simple;!! import javax.swing.jframe;!! public class EmptyWindow {!! public static void main(string[] args) {! JFrame frame = new JFrame("GUItest");!! frame.setdefaultcloseoperation(jframe.exit_on_close);! frame.setlocation(200,200);! frame.setsize(300,150);! frame.setvisible(true);! }!! }! - Håkan Jonsson 7 The empty window The empty window looks as a filled rectangular area but is (really) empty. It shows nothing. A JFrame gives us this empty area to fill but also the window border and the menu bar on top bounding the frame. Note how the name ( GUItest ) was an argument to the JFrame constructor. To create graphics we fill the empty area with GUI components. It is such components that became visible on the screen at the end. (It is not possible to draw graphics directly on the empty area.) To ease the programming of GUI:s, Java offers a variety of ready- made components. - Håkan Jonsson 8 Lecture 8 - Håkan Jonsson 9 3
2. JPanel A JPanel is a GUI component that acts as a rectangular canvas on which graphics can be drawn. Like in Lab Assignment 2, where LevelGUI drew rooms on a JPanel (in fact, a dynamic object of type Display). However, JPanel:s also funcmons as containers that can hold other GUI components. To group components and simplify layout. - Håkan Jonsson 10 Example: JFrameExample Comments: Note that we create a dynamic object of the same class (JFrameExample) as the (stamc) main method resides in. This works fine since main a) is in the stamc object, b) is called when the program starts, and c) then creates the object like it would create any other object. We add a content pane (a JPanel object) to the empty area of the JFrame. We insert, into this pane, a text label (JLabel) and a bucon (JBuGon). It is possible to press the bucon by clicking on it, and the depressing is animated, but the bucon has no effect on the program. Lecture 8 - Håkan Jonsson 11 Example: JFrameExample Comments: Note that we create a dynamic object of the same class (JFrameExample) as the (stamc) main method resides in. This works fine since main a) is in the stamc object, b) is called when the program starts, and c) then creates the object like it would create any other object. We add a content pane (a JPanel object) to the empty area of the JFrame. We insert, into this pane, a text label (JLabel) and a bucon (JBuGon). It is possible to press the bucon by clicking on it, and the depressing is animated, but the bucon has no effect on the program. Lecture 8 - Håkan Jonsson 12 4
Lecture 8 - Håkan Jonsson 13 3. Extending a component Standard pracmce is to extend GUI components into tailor- made component classes. Example: A Display is a JPanel, but one with color c, preferred size (dx, dy), and a black border. private class Display extends JPanel {!!public Display(int dx, int dy, Color c) {!!!setbackground(c);!!!setpreferredsize(new Dimension(dx, dy));!!!setborder(borderfactory.createlineborder(color.black));!!}! }! - Håkan Jonsson 14 Example: ColoredJPanels (Similar to Lab Assignment 2.) Lecture 8 - Håkan Jonsson 15 5
Example: LampExample Lecture 8 - Håkan Jonsson 16 Lecture 8 - Håkan Jonsson 17 4. InteracMon A GUI contains graphics but also supports user interacion. In Java, interacmon is event- driven and implemented by use of listeners. These react on events like keys depressed on a keyboard and mouse movements/clicks. AcIonListener, KeyListener, MouseListener etc. To enable interacmon, we will use two design pacerns that decouples code and make programs easy to understand. Observer design pacern. Model- View- Control design pacern. Lecture 8 - Håkan Jonsson 18 6
Recap: Observer The Observer design pagern defines a relamon between two classes. The observable: A class that extends the class Observable. The class inherits the methods setchanged, noifyobservers, and addobserver. A dynamic object of the class must call setchanged and noifyobservers whenever it has changed. The method addobserver is used to add an observer to the object. Any number can be added. The observer: A class that implements the interface Observer. Must declare a method update. This is what the interface lists. A dynamic object of the class gets a call to update whenever the observed object calls setchanged and noifyobservers. - Håkan Jonsson 19 - Håkan Jonsson 20 - Håkan Jonsson 21 7
- Håkan Jonsson 22 Recap: Model- View- Control The Model- View- Control (MVC) design pagern defines a relamon between three classes: The model, maintaining a state. The view, displaying the state. The control, instrucmng changes in the state. We implement this separamon as follows: The view will observe the model. The control will be a listener. Programming consequences: The model will extend Observable. The view will implement Observer. The control will implement AcIonListener. Lecture 8 - Håkan Jonsson 23 Example: LampGUIExample Lecture 8 - Håkan Jonsson 24 8
Lecture 8 - Håkan Jonsson 25 5. UML: AggregaMon l09.gui.examples "LampGUI has an (or consists of) a JPanel." JFrame LampGUI Observable LampGUIExample JPanel JButton <<interface>> ActionListener <<interface>> Observer LampController LampModel LampView Example: LampGUIExample A window with a lamp and a bucon l09.gui.examples Main program JFrame Observable LampGUI LampGUIExample JPanel JButton <<interface>> ActionListener <<interface>> Observer LampController LampModel LampView MVC design pacern - Håkan Jonsson 27 9
Lecture 8 - Håkan Jonsson 28 6. Layouts Components added to a container occupy space in the final graphical picture. They are also placed within the available area. Usually next to each other. In Java, every GUI container has a layout manager that specifies how sizing and placement of components is done. The default layout manager for a JPanel is FlowLayout. When windows are resized, the layout needs to be changed. The rules for how this is done is set in the layout manager. - Håkan Jonsson 29 Example: FlowLayoutExample - Håkan Jonsson 30 10
Lecture 8 - Håkan Jonsson 31 7. More layout managers Lecture 8 - Håkan Jonsson 32 Example: GridBagLayoutExample - Håkan Jonsson 33 11
Example: SpringLayoutExample A very general layout manager that specifies relamonships between the edges of components. Constraints that allow dynamic GUI:s. Example: 4 components as shown below. - Håkan Jonsson 34 Example: SpringLayoutExample NORTH WEST text SOUTH EAST 10 5 10 5 5 5 5 label text number button 5 5 5 panel layout.putconstraint(springlayout.west, text, 5, SpringLayout.EAST, label); - Håkan Jonsson 35 12