CompSci 100E30.1Graphical User Interfaces (GUIs)ÿ Componentsÿ Flat Layoutsÿ Hierarchical Layoutsÿ Designing a GUIÿ Coding a GUI(These notes come from CompSci 4, Java for Video Games)CompSci 100E30.2Componentsÿ JLabeltext/image displayÿ JTextFieldsingle line for text input/outputÿ JTextAreamultiple lines for text input/outputÿ JButtonused for decisionsÿ JFramea basic windowCompSci 100E30.3Componentsÿ JLabeltext/image displayÿ JTextFieldsingle line for text input/outputÿ JTextAreamultiple lines for text input/outputÿ JButtonused for decisionsÿ JFramea basic windowCompSci 100E30.4Componentsÿ JLabeltext/image displayÿ JTextFieldsingle line for text input/outputÿ JTextAreamultiple lines for text input/outputÿ JButtonused for decisionsÿ JFramea basic windowCompSci 100E30.5Flat LayoutsGridLayout BorderLayoutCENTERNORTHSOUTHWESTEASTCompSci 100E30.6Flat 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 verticallyCompSci 100E30.7Flat LayoutsBorderLayoutCompSci 100E30.8Flat LayoutsGridLayoutCompSci 100E30.9Hierarchical LayoutsYou can put layouts within layouts:CompSci 100E30.10Hierarchical LayoutsIdentify the BorderLayout and GridLayoutsin the application on the right.CompSci 100E30.11Hierarchical LayoutsCENTER EASTCompSci 100E30.12Hierarchical LayoutsGridLayoutCompSci 100E30.13Hierarchical LayoutsGridLayoutCompSci 100E30.14Hierarchical LayoutsCENTERSOUTHCompSci 100E30.15Hierarchical LayoutsCENTERSOUTHCompSci 100E30.16Hierarchical LayoutsCompSci 100E30.17Hierarchical Layoutsÿ Virtually every layout we make is a hierarchy of GridLayout and BorderLayoutÿ Other Layouts include BoxLayout GridBagLayout FlowLayout CardLayoutCompSci 100E30.18Designing 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?CompSci 100E30.19Coding 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 100E30.20Examplesÿ BorderExample.java (today)ÿ In code directory (GUIs.jar) GridExample.java CombinedExample.javaCompSci 100E30.21BorderExample.javaimport java.awt.*;import java.awt.event.*;import javax.swing.*;public class BorderExampleextends JApplet{JFrame frame;JTextArea middle;JTextField bottom;JButton left, right;JLabel title;CompSci 100E30.22BorderExample.javaprivate 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 100E30.23BorderExample.javaprivate 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 100E30.24BorderExample.javapublic BorderExample(){makeComponents();makeLayout();}public void setVisible(boolean vis){frame.setVisible(vis);}CompSci 100E30.25BorderExample.javapublic void init(){main(null);}public static void main(String[] args){BorderExample example=new BorderExample();example.setVisible(true);}CompSci 100E30.26Event Handlingÿ Sequential (Single Thread) Modelÿ Event Modelÿ Making the GUI interactiveÿ Examplesÿ PracticeCompSci 100E30.27Sequential (Single Thread) ModelProgramStartProgramEndCompSci 100E30.28Event ModelAWTEventLoopProgramThreadCompSci 100E30.29Making the GUI Interactive1) import java.awt.event.*2) implements ActionListener (interface)3) write methodpublic void actionPerformed(ActionEvent e)4) call addActionListener(this) for all JButtonsCompSci 100E30.30ExamplesAdderGUI.javaGameShell.javaCompSci 100E30.31ExamplesAdderGUI.javaimport java.awt.*;import java.awt.event.*;import javax.swing.*;public class AdderGUIextends JAppletimplements ActionListenerCompSci 100E30.32ExamplesAdderGUI.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 100E30.33ExamplesAdderGUI.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 100E30.34ExamplesGameShell.javaimport java.awt.*;import java.awt.event.*;import javax.swing.*;public class GameShellextends JAppletimplements ActionListenerCompSci 100E30.35ExamplesGameShell.javapublic 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 100E30.36ExamplesGameShell.javapause=new JButton("Start");pause.addActionListener(this);reset=new JButton("Start New Game");reset.addActionListener(this);CompSci 100E30.37Practiceÿ Make a 2x2 tic-tac-toe board out of initially blankJbuttons.ÿ Make the JButton text change to X when the user clicks on it.ÿ Make the JButton text change to X and O alternatively as the user clicks on the buttons.Hint: use a boolean instance variable.ÿ Make the fonts larger, and maybe add
View Full Document
Unlocking...