Graphical User Interfaces GUIsThe PlanComponentsSlide 4Slide 5Flat LayoutsSlide 7Slide 8Slide 9Hierarchical LayoutsSlide 11Slide 12Slide 13Slide 14Slide 15Slide 16Slide 17Slide 18Designing a GUICoding a GUIExamplesBorderLayout.javaSlide 23Slide 24Slide 25Slide 26Event HandlingSlide 28Sequential (Single Thread) ModelEvent ModelSlide 31Slide 32Making the GUI InteractiveSlide 34Slide 35Slide 36Slide 37Slide 38Slide 39Slide 40PracticeGUI.1Graphical User InterfacesGUIsGUI.2The Plan•Components•Flat Layouts•Hierarchical Layouts•Designing a GUI•Coding a GUIGUI.3Components•JLabeltext/image display•JTextFieldsingle line for text input/output•JTextAreamultiple lines for text input/output•JButtonused for decisions•JFramea basic windowGUI.4Components•JLabeltext/image display•JTextFieldsingle line for text input/output•JTextAreamultiple lines for text input/output•JButtonused for decisions•JFramea basic windowGUI.5Components•JLabeltext/image display•JTextFieldsingle line for text input/output•JTextAreamultiple lines for text input/output•JButtonused for decisions•JFramea basic windowGUI.6Flat LayoutsGridLayout BorderLayoutCENTERNORTHSOUTHWESTEASTGUI.7Flat LayoutsGridLayout•Added left to right, top to bottom•Expands to fill horizontally and vertically•Each space equal width and heightBorderLayout•Not all positions must be filled•CENTER expands horizontally and vertically•NORTH and SOUTH expand horizontally•WEST and EAST expand verticallyGUI.8Flat LayoutsBorderLayoutGUI.9Flat LayoutsGridLayoutGUI.10Hierarchical LayoutsYou can put layouts within layouts:GUI.11Hierarchical LayoutsIdentify the BorderLayout and GridLayouts in the application on the right.GUI.12Hierarchical LayoutsCENTER EASTGUI.13Hierarchical LayoutsGridLayoutGUI.14Hierarchical LayoutsGridLayoutGUI.15Hierarchical LayoutsCENTERSOUTHGUI.16Hierarchical LayoutsCENTERSOUTHGUI.17Hierarchical LayoutsGUI.18Hierarchical Layouts•Virtually every layout I make is a hierarchy of GridLayout and BorderLayout•Other Layouts include–BoxLayout–GridBagLayout–FlowLayout–CardLayoutGUI.19Designing a GUI•What 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?GUI.20Coding 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).GUI.21Examples•BorderExample.java (today)•GridExample.java (in the code directory)•CombinedExample.java (in code directory)GUI.22BorderLayout.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;GUI.23BorderLayout.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"); }GUI.24BorderLayout.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(); }GUI.25BorderLayout.java public BorderExample() { makeComponents(); makeLayout(); } public void setVisible(boolean vis) { frame.setVisible(vis); }GUI.26BorderLayout.java public void init() { main(null); } public static void main(String[] args) { BorderExample example=new BorderExample(); example.setVisible(true); }GUI.27Event HandlingGUI.28The Plan•Sequential (Single Thread) Model•Event Model•Making the GUI interactive•Examples•PracticeGUI.29Sequential (Single Thread) ModelProgramStartProgramEndGUI.30Event ModelAWTEventLoopProgramThreadGUI.31Event ModelProgramThread•main is called•GUI is constructed•Thread terminatesGUI.32Event ModelAWTEventLoop•Check for input•Find event listeners•Notify listenersGUI.33Making the GUI Interactive1) import java.awt.event.*2) implements ActionListener3) write methodpublic void actionPerformed(ActionEvent e)4) call addActionListener(this) to all JButtonsGUI.34ExamplesAdderGUI.javaGameShell.javaGUI.35ExamplesAdderGUI.javaimport java.awt.*;import java.awt.event.*;import javax.swing.*;public class AdderGUI extends JApplet implements ActionListenerGUI.36ExamplesAdderGUI.java public 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); }GUI.37ExamplesAdderGUI.java private 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); }GUI.38ExamplesGameShell.javaimport java.awt.*;import java.awt.event.*;import javax.swing.*;public class GameShell extends JApplet implements ActionListenerGUI.39ExamplesGameShell.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");
View Full Document
Unlocking...