Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
CS102 – GUI AWT & Swing • • • • Components & Containers, Layout Managers, Events & Listeners MVC design pattern. David Davenport IMPORTANT… Students… This presentation is designed to be used in class as part of a guided discovery sequence. It is not selfexplanatory! Please use it only for revision purposes after having taken the class. Simply flicking through the slides will teach you nothing. You must be actively thinking, doing and questioning to learn! Instructors… You are free to use this presentation in your classes and to make any modifications to it that you wish. All I ask is an email saying where and when it is/was used. I would also appreciate any suggestions you may have for improving it. thank you, David. Programming forms Conventional/Procedural programming code is always executed in same sequence. characterised by input/process/output Event-driven programming code is executed upon activation of events. sequence changes depending on order of events Do method 1 then method 3 method 1 method 2 method 3 --------------method n Do method 2 then method 1 then method 3 Do method 2 every second method 1 method 2 method 3 --------------method n GUI USING AWT GUI using AWT AWT - Abstract Window Toolkit Must base desktop programs on Frame • constructor, paint, … browser programs on Applet • init, start, paint, stop, destroy, … Can convert, but better to base code on Panel then it add to Frame or Applet Implementing GUIs Two steps (1) Create the interface • By add components & containers • & using layout managers (2) Add interaction • Create event listeners • & “Wire-up” events (1) Create the interface… UI Component Layout… x 0,0 50,350 y 1 2 1 OK 2 OK See also LayoutManager Visual Guide Moral… use automated Layout! 1250,950 LayoutManager demo… AWT Applications - Frame Frame is a container for components Optional Menu Three containers in Frame with Border Layout UI-components inside containers each with own layout Frame with normal window controls AWT classes AWTEvent Font FontMetrics Object Color Container Panel Applet Button Window Frame Label Dialog TextField TextComponent TextArea Graphics Component List Choice CheckBox LayoutManager CheckBoxGroup Canvas MenuComponent Scrollbar MenuItem MenuBar Menu FileDialog Understanding the GUI UI-containers {label} Each UI-component {Frame} components {textfield} {button} have list of UI-components is a class with paint method & lists of Event listeners Setting up the GUI Extend Frame class In constructor • Create instances of containers & add them to Frame • Create instances of components & add them to containers or Frame Hint: Employ layout managers to arrange components in containers Possibly override paint method UI-components Painting added to components list Frame 1.paints Frame borders 2.calls Frame paint method 3.calls paint method of each object in component list (2) Add interaction… Events & Event Handling Event cause (mouse, keyboard, timer, …) Event Source object Event Object Event listener object (executes method) Example… User clicks on a button Button is source of event object Event object passed to associated listener object Listener object executes associated method to perform desired task (save file, quit program, …) Event handling… Recall… {AlarmInfo} {Thermostat} reading source {AlarmListener} handleAlarm(-) set of AlarmListeners {Heater} +addAlarmListener(-) handleAlarm(-) handleAlarm(-) {AlarmBell} {AlarmListener} {AirConditioner} {AlarmListener} {AlarmListener} Event handling… {AlarmInfo} {Thermostat} reading source {AlarmListener} handleAlarm(-) set of AlarmListeners +addAlarmListener(-) {Button} {Heater} {ActionEvent} … source {ActionListener} actionPerformed(-) set of ActionListeners +addActionListener(-) {MyPanel} Event handling… {ActionEvent} {Button} … source {ActionListener} actionPerformed(-) set of ActionListeners +addActionListener(-) {ActionEvent} … source {MyPanel} {ActionListener} actionPerformed(-) {MyActionListener} Event handling… {ActionEvent} {Button} … source {ActionListener} actionPerformed(-) set of ActionListeners +addActionListener(-) {ActionEvent} … source {ActionListener} {TextField} {ActionEvent} set of ActionListeners +addActionListener(-) {MyPanel} actionPerformed(-) … source {MyActionListener} Event handling… {WindowEvent} {Frame} … source {MyWindowListener} windowClosing(-) set of WindowListeners +addWindowListener(-) windowClosing windowClosed windowIconified windowDeiconified windowOpened etc. {WindowAdapter} {WindowListener} Setting up Event Handling Create listener class Using new or existing class, simply Implement desired event listener interface Putting code for desired action in its methods In application (e.g. Frame) Create instance of listener class Add as listener of source object • can have any number of listeners for each event • Source & listener can be same object! Understanding Events When button is pressed {label} {Frame} components WindowListeners {textfield} windowClosing actionPerformed ActionListeners actionPerformed method of every item in button’s actionListeners list called Similarly for textfield When Frame close button is pressed windowClosing method of every item in Frame’s windowListeners list called {MyListener} {button} ActionListeners actionPerformed Event Classes EventObject AWTEvent ListSelectionEvent ActionEvent ContainerEvent AdjustmentEvent FocusEvent ComponentEvent InputEvent ItemEvent PaintEvent TextEvent WindowEvent MouseEvent KeyEvent GUI USING SWING GUI using Swing Advantages OS independent Prettier! More sophisticated components & options • • • • Pluggable “Look & feel” Borders, Tooltips, etc. Drag ‘n Drop File & ColorChoosers, Tables, editors, etc. Conceptually same as AWT Still uses AWT events package GUI using Swing Few differences (from AWT) Use javax.swing package (equivalent Swing components start with “J”) Frames can close automatically Add components to JFrame’s contentPane Override paintComponent, not paint (well sort of…!) (v1.5+ no longer explicitly needed) (except for Jframe, JApplet & JDialog) (also, must call super.paintComponent) AWT & Swing classes AWTEvent Font Classes in the java.awt package LayoutManager Heavyweight 1 FontMetrics Object Color Panel Applet JApplet Window Frame JFrame Dialog JDialog Graphics Component Container * JComponent Swing Components in the javax.swing package Lightweight Swing - JComponents . JCheckBoxMenuItem AbstractButton JMenuItem JMenu JButton .JRadioButtonMenuItem .JToggleButton JCheckBox See this Visual Guide to Swing Components JRadioButton .JEditorPane JComponent .JTextComponent .JTextField .JPasswordField .JTextArea .JLabel .JList .JComboBox .JMenuBar .JPanel .JOptionPane .JScrollBar .JScrollPane .JPopupMenu .JSeparator .JSlider .JTabbedPane .JRootPane .JPane .JProgressBar .JToolBar .JSplitPane .JTable .JTree .JColorChooser .JInternalFrame .JToolTip .JLayeredPane .JTableHeader .JFileChooser DESIGNING GUI’S… Design Tips GUI code can get very messy Do not put everything in one class (as many Visual IDE’s do) Quick & dirty = impossible to change! Employ design patterns, e.g. MVC Think Design first... MVC - Design Pattern View View Multiple Views View 14:30 Half past two model controller hours: 14 mins: 30 secs: 25 1 sec. timer Reset Design Tips Think & design first Use layout managers Use OOP • begin with Panel rather than Frame/Applet • then add instance(s) to whichever you want • What do you want? • What existing class is closest? • Extend it! • digital clock view - centered text in plain box, extend label • analogue clock view - graphics in plain box, extend panel THE FUTURE… JAVAFX? The Java Frame class By default: setVisible( true); Invisible setSize( width, height); or pack(); Zero size add( new Button() ); Empty setLayout( Has BorderLayout new FlowLayout() ); Plain background setBackground( Doesn’t close! Color.GREEN); …oops & override paint(Graphics) Frames in Java (1) import java.awt.*; public class GUIPlay { public static void main( String[] args) { Frame f; f = new Frame(); f.setLayout( new FlowLayout() ); f.setSize( 300, 250); f.add( new Button( “OK”) ); // pack(); f.setVisible( true); } } Frames in Java (2) import java.awt.*; public class GUIPlay { public static void main( String[] args) { Frame f; import java.awt.*; f = new MyFrame(); public class MyFrame extends Frame { new MyFrame(); public MyFrame() } { } setLayout( new FlowLayout() ); setSize( 300, 250); add( new Button( “OK”) ); setVisible( true); } } Frames in Java (3) import java.awt.*; import java.awt.*; public class GUIPlay { public class MyPanel extends Panel public static void main( String[] args) { { public MyPanel() import java.awt.*; Frame f; { Button b; public class MyFrame extends Frame f = new MyFrame(); { setBackground( Color.GREEN ); public MyFrame() new MyFrame(); setPreferredSize( { } new Dimension( 200, 150) ); setLayout( new FlowLayout() ); } setSize( 300, 250); b = new Button( “OK”); add( b); add( new MyPanel() ); add( new MyPanel() ); add( new Label( “Welcome”) ); add( new TextField(20) ); setVisible( true); } } } } Frames in Java (4) import java.awt.*; import java.awt.*; import java.awt.event.*; public class GUIPlay public class MyPanel extends Panel { public args) class MyActionListener { public static void main( String[] import java.awt.*; implements ActionListener public MyPanel() { { { f; Frame public class MyFrame public void actionPerformed( Button b; { ActionEvent e) f = newMyFrame() MyFrame(); public { setBackground( Color.GREEN ); { System.out.println( “Button pressed”); setPreferredSize( newsetLayout( MyFrame(); new FlowLayout() ); } new Dimension( 200, 150) ); } setSize( 300, 250); } } b = new Button( “OK”); add( new MyPanel() ); b.addActionListener( add( new MyPanel() ); new MyActionListener() ); add( b); setVisible( true); } add( new Label( “Welcome”) ); } add( new TextField(20) ); } }