{small lecturenumber - hepage :} Synchronous vs Asynchronous input{small lecturenumber - hepage :} GUI parts{small lecturenumber - hepage :} GUI parts{small lecturenumber - hepage :} Example: pt 1{small lecturenumber - hepage :} Adding components{small lecturenumber - hepage :} Handling events{small lecturenumber - hepage :} Handling events{small lecturenumber - hepage :} Adding more components{small lecturenumber - hepage :} Handling keyboard events{small lecturenumber - hepage :} Model-View-Controller{small lecturenumber - hepage :} Layout Managers{small lecturenumber - hepage :} Flow Layout{small lecturenumber - hepage :} Border Layout{small lecturenumber - hepage :} GridLayout{small lecturenumber - hepage :} Exercise: building a simple calculator{small lecturenumber - hepage :} Exercise: building a simple calculator{small lecturenumber - hepage :} Exercise: building a simple calculator{small lecturenumber - hepage :} Exercise: building a simple calculatorIntro to Programming IIGUI programmingChris BrooksDepartment of Computer ScienceUniversity of San FranciscoDepartment of Computer Science — University of San Francisco – p.1/??16-2: Synchronous vs Asynchronous input•The programs you’ve built so far (lexer and parser) areexamples of synchronous input.◦You prompt for input, then read input with a Scanner.•Programs with a graphical user interface (GUI) typically requireasynchronous 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/??16-3: GUI parts•A GUI consists of:◦Components◦Events◦ListenersDepartment of Computer Science — University of San Francisco – p.3/??16-4: GUI parts•Components generate events (usually in response to userinput)•Listeners wait for and handle these events•Typically by invoking a method.Department of Computer Science — University of San Francisco – p.4/??16-5: 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 JFrameDepartment of Computer Science — University of San Francisco – p.5/??16-6: Adding components•Choose ’Absolute Layout’ and then add three buttons and a textfield.•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/??16-7: Handling events•When a user provides input to a component, an event isgenerated.◦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/??16-8: Handling events•Now, we need to fix the event handler to do somethinginteresting.•Let’s place the button’s label in the text field.private void button1MouseRel eas ed (Mo us eE ven t evt) {System.out.printl n( "b utt on 1.m ou seR el ea sed , event=" + evt);output.setText(bu tt on 1.g et Lab el ()) ;}•Add similar event handlers for button2 and button3.Department of Computer Science — University of San Francisco – p.8/??16-9: Adding more components•Now, let’s add a JList.•Jlists use a DefaultComboBoxModel to control access to theirdata.•Let’s add an Event handler to change the Jlist’s contents if thereturn key is pressed.•Choose Select the textfield, then choose KeyListener-KeyTypedunder ’Events’.•Take a look at the generated code.Department of Computer Science — University of San Francisco – p.9/??16-10: Handling keyboard events•We need to look at the event and find out what key waspressed.private void outputKeyTyped( Key Ev ent evt) {System.out.printl n( "o utp ut .ke yT ype d, event=" + evt);if (evt.getKeyChar( ) == ’n’){DefaultComboBoxM ode l m = (DefaultComboBo xMo de l)t hi sLi st .ge tM od el( );m.addElement(out put .g et Tex t( ));}}•The DefaultComboBoxModel controls access to the listcontents.Department of Computer Science — University of San Francisco – p.10/??16-11: Model-View-Controller•What’s this model stuff about?•A common technique for GUI design (and OO design moregenerally) 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 andchanged.Department of Computer Science — University of San Francisco – p.11/??16-12: 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/??16-13: Flow Layout•Flow layout places components left to right as possible.•When one rows is filled, the next is started.•Switch your JFrame to Flow layout, then resize the components.•How can we get our buttons to line up vertically?•Add subpanels and place the buttons in them.•Add two JPanels and use the tree on the right to place thecomponents in them.•Use hgap and vgap under the ’layout’ menu to spacecomponents.Department of Computer Science — University of San Francisco – p.13/??16-14: Border Layout•Flow Layout is OK, but resizing may not do what you’d expect.•Border layout breaks a container into North, South, East, West,Center.•Change the JFrame to Border Layout, and the JList to Flow.Change the layout for panel1 to be Border.•Set panel1 to ’West’, and panel2 to ’East’•Try resizing now.Department of Computer Science — University of San Francisco – p.14/??16-15: GridLayout•Border Layout is nice for subpanels, but awkward forcomponents.•Grid Layout lets you break the Frame into rectangularsubsections.•Components fill left-to-right and top-to-bottom.•Remove the panels and place the components in a grid.•The components are still not a nice size, but we can add newsubpanels.Department of Computer Science — University of San Francisco – p.15/??16-16: Exercise: building a simple calculator•Remove the list box and add buttons for numbers.•Add buttons for operators.•to begin:◦When a number is pressed, it should show up
View Full Document
Unlocking...