Download Introduction to Programming II: Building a GUI with Java at University of San Francisco and more Study Guides, Projects, Research Computer Science in PDF only on Docsity! Intro to Programming II GUIs Chris Brooks Department of Computer Science University of San Francisco Department of Computer Science — University of San Francisco – p.1/?? 13-0: Synchronous vs Asynchronous input The programs you’ve built so far (lexer and parser) are examples of synchronous input. You prompt for input, then read input with a Scanner. Programs with a graphical user interface (GUI) typically require asynchronous input A user can provide input at any time. This requires a different model of programming. Department of Computer Science — University of San Francisco – p.2/?? 13-1: GUI parts A GUI consists of: Components Events Listeners Department of Computer Science — University of San Francisco – p.3/?? 13-2: GUI parts Components generate events (usually in response to user input) Listeners wait for and handle these events Typically by invoking a method. Department of Computer Science — University of San Francisco – p.4/?? 13-3: Example: pt 1 Open eclipse and create a new project called ’Class-project’ Choose New-Other-GUI Forms-Swing-JFrame Give the subclass the name ExampleJFrame A JFrame is an example of a top-level container Other components are added inside the JFrame Department of Computer Science — University of San Francisco – p.5/?? 13-4: Adding components Choose ’Absolute Layout’ and then add three buttons and a text field. Give each button a different label. Look at the code that Jigloo generates. Use the color wheel to change each button’s background color. Department of Computer Science — University of San Francisco – p.6/?? 13-5: Handling events When a user provides input to a component, an event is generated. For example, when the mouse is pressed or released. Select button1, then choose ’Mouse Listener-mouse released’ under the ’Events’ tag. Select ’handler method’ Look at the code Jigloo generates. Department of Computer Science — University of San Francisco – p.7/?? 13-6: Handling events Now, we need to fix the event handler to do something interesting. Let’s place the button’s label in the text field. private void button1MouseReleased(MouseEvent evt) { System.out.println("button1.mouseReleased, event=" + evt); output.setText(button1.getLabel()); } Add similar event handlers for button2 and button3. Department of Computer Science — University of San Francisco – p.8/?? 13-7: Adding more components Now, let’s add a JList. Jlists use a DefaultComboBoxModel to control access to their data. Let’s add an Event handler to change the Jlist’s contents if the return key is pressed. Choose Select the textfield, then choose KeyListener-KeyTyped under ’Events’. Take a look at the generated code. Department of Computer Science — University of San Francisco – p.9/?? 13-8: Handling keyboard events We need to look at the event and find out what key was pressed. private void outputKeyTyped(KeyEvent evt) { System.out.println("output.keyTyped, event=" + evt); if (evt.getKeyChar() == ’ n’) { DefaultComboBoxModel m = (DefaultComboBoxModel)thisList.getModel(); m.addElement(output.getText()); } } The DefaultComboBoxModel controls access to the list contents. Department of Computer Science — University of San Francisco – p.10/?? 13-9: Model-View-Controller What’s this model stuff about? A common technique for GUI design (and OO design more generally) is called model-view-controller A GUI should be separated into pieces: the model controls the data itself The view controls how the data is displayed. The controller govers how the data is accessed and changed. Department of Computer Science — University of San Francisco – p.11/?? 13-10: Layout Managers The Absolute manager is nice, but limited. Try resizing your app. If we want to resize, we must pick a different layout manager. Department of Computer Science — University of San Francisco – p.12/??
