Lab 4. D0010E Object-Oriented Programming and Design. Today s lecture. GUI programming in

Transcription

1 Lab 4 D0010E Object-Oriented Programming and Design Lecture 9 Lab 4: You will implement a game that can be played over the Internet. The networking part has already been written. Among other things, the lab will contain more advanced GUI programming than Lab 2. The model/view separation will play an important part! 2 Today s lecture GUI programming Components Listeners Layout Model-View-Controller pattern Observer pattern However, first a look at Object and potentially recursive functions. GUI programming in In Lab 2: Reaching new levels Using a listener to handle key events. Drawing simple shapes. Observable/Observer: Separation of model and view. Most of the structure of the GUI was provided. 3 4

2 GUI programming in general Top-level containers 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. Learn the principles, rather than every single class. JFrame, JDialog, and JApplet Each standalone application has at least one top-level container. (JFrame) Every top-level container has a content pane which contains other components. Together, they form a containment hierarchy. 5 6 Example 1: The empty window The empty window import javax.swing.*; public class GUItest { 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); } } 7 8

3 The empty window The empty window looks as a filled rectangular area but is (really) empty. Note the border and the menu bar on top bounding the frame. We can not produce (draw) graphics directly on containers, only on components. Remember: Components are stored in containers. To ease the programming of GUI:s, Java offers a variety of ready-made components. JPanel A JPanel is a component that acts as an empty rectangle. However, It is both a container and a component. 1) We can draw something on a JPanel. Like in lab 2 where LevelGUI drew rooms on a JPanel (a dynamic object of type Display). 2) We can add other components to it. To group components and simplify layout JPanel JPanel content = new JPanel(); frame.setcontentpane(content); This 1) creates a JPanel and 2) sets it as the contentpane of the container frame. If frame is The empty window, adding a JPanel makes it possible to draw graphics in the frame. Other ready-made components JButton JTextField JLabel 11 12

4 Extending a component LampExample private class Display extends JPanel { public Display(int x, int y) { setbackground(color.white); setpreferredsize(new Dimension(x,y)); } } Observable The class representing the data (the model) should extend the class Observable, and will get several methods for free : setchanged() notifyobservers() addobserver(observer o) A dynamic object must call setchange/notifyobservers whenever it has changed. Its method addobserver is available to other objects so they can add observers. Note that the model is observable but not aware of its observers

5 Observer An observer must implement the interface Observer, which means that it must provide an update method. The update method is called automatically whenever the observed object notifies its observers Example: LampGUIExample A window with a lamp and a button l09.gui.examples Main program JFrame Observable LampGUI LampGUIExample JPanel JButton <<interface>> ActionListener <<interface>> Observer LampController LampModel LampView MVC design pattern 19 20

6 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Layouts What if we would like to arrange the components, instead of just adding them to our display panel? FlowLayoutExample Every container (frame, panel, and so on) has a layout manager that specifies how the components are placed The default layout manager for a JPanel is FlowLayout More layout managers GridBagLayout 24

7 SpringLayout GridBagLayoutExample A layout manager that specifies relationships between the edges of components. Constraints that allow dynamic GUI:s. Example: SpringLayoutExample 4 components as shown below SpringLayout Short demo in Eclipse. NORTH WEST text EAST SOUTH label 5 text 5 number 5 button 5 5 panel layout.putconstraint(springlayout.west, text, 5, SpringLayout.EAST, label); 27 28

8 A second demo in Eclipse. 29