GUI Programming: Synchronous vs Asynchronous Input and Event Handling in Java, Study Guides, Projects, Research of Computer Science

Download GUI Programming: Synchronous vs Asynchronous Input and Event Handling in Java and more Study Guides, Projects, Research Computer Science in PDF only on Docsity!

Intro to Programming II^ GUI programming

Chris Brooks

Department of Computer ScienceUniversity of San Francisco

Department of Computer Science — University of San Francisco – p.1/

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 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/

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/

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/

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/

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/

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/

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/

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/

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/

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 in the textbox.

Department of Computer Science — University of San Francisco – p.16/

Exercise: building a simple calculator • Add keys for plus, minus, and equals. • Add instance variables for operand1, operand2, operator. • When plus, minus, or equals is pressed, we must:^ ◦^ Do a calculation^ ◦^ Store the result^ ◦^ Display it in the text box.

Department of Computer Science — University of San Francisco – p.17/

Exercise: building a simple calculator • Add a method to compute: private^

double^

compute()

System.out.printl

n( "o p1:

"^ +^

operand

+^ "

op2:^

"^ +^ operand2);

if^ (operator

==^

’+’)^ {

return^

operand

+^ operand2;

}^ else^

if^ (operator

==^

’-’)^ {

return^

operand

-^ operand2;

}^ else^

if^ (operator

==^

’*’)^ {

return^

operand

*^ operand2;

}^ else^

{ return operand

/^ operand2;

Department of Computer Science — University of San Francisco – p.19/