Graphical User Interfaces -- GUIsComponentsSlide 3Flat LayoutsSlide 5Slide 6Slide 7Hierarchical LayoutsSlide 9Slide 10Designing a GUICoding a GUIExamplesBorderExample.javaSlide 15Slide 16Slide 17Slide 18Event HandlingEvent ModelMaking the GUI InteractiveSlide 22Slide 23Slide 24Slide 25Slide 26Slide 27Slide 28CompSci 641.1Graphical User Interfaces -- GUIsThe PlanComponentsFlat LayoutsHierarchical LayoutsDesigning a GUICoding a GUICompSci 641.2ComponentsJLabeltext/image displayJTextFieldsingle line for text input/outputJTextAreamultiple lines for text input/outputJButtonused for decisionsJFramea basic windowCompSci 641.3ComponentsJLabeltext/image displayJTextFieldsingle line for text input/outputJTextAreamultiple lines for text input/outputJButtonused for decisionsJFramea basic windowCompSci 641.4Flat LayoutsGridLayout BorderLayoutCENTERNORTHSOUTHWESTEASTCompSci 641.5Flat LayoutsGridLayoutAdded left to right, top to bottomExpands to fill horizontally and verticallyEach space equal width and heightBorderLayoutNot all positions must be filledCENTER expands horizontally and verticallyNORTH and SOUTH expand horizontallyWEST and EAST expand verticallyCompSci 641.6Flat LayoutsBorderLayoutCompSci 641.7Flat LayoutsGridLayoutCompSci 641.8Hierarchical LayoutsYou can put layouts within layouts:CompSci 641.9Hierarchical LayoutsIdentify the BorderLayout and GridLayouts in the application on the right.CompSci 641.10Hierarchical LayoutsVirtually every layout we make is a hierarchy of GridLayout and BorderLayoutOther Layouts includeBoxLayoutGridBagLayoutFlowLayoutCardLayoutCompSci 641.11Designing a GUIWhat components are needed?Which components are of primary importance? Secondary?How do the components relate to each other?How big are the components?How can they be arranged into BorderLayout and GridLayout?CompSci 641.12Coding a GUI1. Declare the components as instance variables2. Write a makeComponents method to initialize the components3. Write a layoutComponents methods to arrange the components4. Write a constructor to call the above two methods5. Write a setVisible method to set the primary component’s visibility (usually a JFrame).CompSci 641.13ExamplesBorderExample.java (today)In code directory (GUIs.jar)GridExample.javaCombinedExample.javaCompSci 641.14BorderExample.javaimport java.awt.*;import java.awt.event.*;import javax.swing.*;public class BorderExample extends JApplet{JFrame frame;JTextArea middle;JTextField bottom;JButton left, right; JLabel title;CompSci 641.15BorderExample.java private void makeComponents() { frame = new JFrame("BorderExample"); middle = new JTextArea(10, 40); bottom = new JTextField(); left = new JButton("left"); right = new JButton("right"); title = new JLabel("Title"); }CompSci 641.16BorderExample.java private void makeLayout() { Container container=frame.getContentPane(); container.setLayout(new BorderLayout()); container.add(new JScrollPane(middle), BorderLayout.CENTER); container.add(title, BorderLayout.NORTH); container.add(left, BorderLayout.WEST); container.add(right, BorderLayout.EAST); container.add(bottom, BorderLayout.SOUTH); frame.pack(); }CompSci 641.17BorderExample.java public BorderExample() { makeComponents(); makeLayout(); } public void setVisible(boolean vis) { frame.setVisible(vis); }CompSci 641.18BorderExample.java public void init() { main(null); } public static void main(String[] args) { BorderExample example = new BorderExample(); example.setVisible(true); }CompSci 641.19Event HandlingThe PlanSequential (Single Thread) ModelEvent ModelMaking the GUI interactiveExamplesCompSci 641.20Event ModelAWTEventLoopProgramThreadCompSci 641.21Making the GUI Interactive1) import java.awt.event.*2) implements ActionListener3) write methodpublic void actionPerformed(ActionEvent e)4) call addActionListener(this) for all JButtonsCompSci 641.22ExamplesAdderGUI.javaGameShell.javaCompSci 641.23ExamplesAdderGUI.javaimport java.awt.*;import java.awt.event.*;import javax.swing.*;public class AdderGUI extends JApplet implements ActionListenerCompSci 641.24ExamplesAdderGUI.javapublic void actionPerformed(ActionEvent ae){String addend0Text = addend0.getText();double addend0Number = Double.parseDouble(addend0Text);String addend1Text = addend1.getText();double addend1Number = Double.parseDouble(addend1Text);double answer = addend0Number + addend1Number;sum.setText("“ + answer);}CompSci 641.25ExamplesAdderGUI.javaprivate void makeComponents(){frame = new JFrame("Game Shell");addend0 = new JTextField(8);addend1 = new JTextField(8);sum = new JTextField(8);compute = new JButton("=");compute.addActionListener(this);plus = new JLabel("+");plus.setHorizontalAlignment(SwingConstants.CENTER);}CompSci 641.26ExamplesGameShell.javaimport java.awt.*;import java.awt.event.*;import javax.swing.*;public class GameShell extends JApplet implements ActionListenerCompSci 641.27ExamplesGameShell.java public void actionPerformed(ActionEvent ae) { Object cause = ae.getSource(); if (cause == pause) { if (pause.getText().equals("Pause")) { pause.setText("Resume"); shell.setText("Paused"); } else { pause.setText("Pause"); shell.setText("Game Running"); } } if (cause == reset) { pause.setText("Start"); shell.setText("Splash"); } }CompSci 641.28ExamplesGameShell.javapause = new JButton("Start"); pause.addActionListener(this);reset = new JButton("Start New Game");
View Full Document