A picture's worth a thousand words Building GUIs in Java I A picture's worth a thousand words CS 102-02 Lecture 7-3 1

Agenda User interface design GUIs in Java Labels Buttons Text

Building UIs Part art, part science Eye for design Users: appealing,intuitive and easy-to-use Developers: Easy to build, easy to maintain and easy to build on Eye for design Donald Norman’s The Design of Everyday Things HCI

Components Can Barely Contain Themselves Components are the building blocks of GUIs (aka widgets or UI widgets) Components can’t just be left lying around Containers are objects which can hold components A Container is-a Component which is-a Object

Components in a Nutshell Details on Component public abstract class Component extends Object implements ImageObserver, MenuContainer, Serializable super class of: Button, Canvas, Checkbox, Choice, Container, Label, List, Scrollbar, TextComponent

Components Capture A Lot Track event listeners Peer communication Popup menus Layout features Sizing Placement Check out the Component class documentation

Contain Yourself Containers hold Components public abstract class Container extends Component Super class of: Panel, ScrollPane, Window Remember: An Applet’s a Panel

Add It Up Components are added to Containers Components added to a container are tracked in a list Order of the list will define the components' front-to-back stacking order (aka Z-order) within the container

Adding Components add public Component add(Component comp) Adds the specified component to the end of this container. Label buttonLabel = new Label(“Nice Button”); Button pressMe = new Button(“Click here!”); // Add the components to a container add(buttonLabel); add(pressMe);

Labeling Labels make it easy to put read-only text on the screen Just one line of text Better than drawString() No pixel values to calculate Choose alignment (LEFT, CENTER, RIGHT) Set fonts for each label Reusable

Building Labels Label() Label(String) Label(String, int) Constructs an empty label. Label(String) Constructs a new label with the specified string of text, left justified. Label(String, int) Constructs a new label that presents the specified string of text with the specified alignment.

Handy Label Methods getAlignment() Gets the current alignment of this label. getText() Gets the text of this label. paramString() Returns the parameter string representing the state of this label. setAlignment(int) Sets the alignment for this label to the specified alignment. setText(String) Sets the text for this label to the specified text.

Read-Only for Whom? Users can’t edit text, but you can setText() lets you change the text within your program

Don’t Forget to Add The pattern is: Build a component buttonLabel = new Label(“Nice Button”); Add it to the container add(buttonLabel); Paint the container and components (usually automatic) Someone calls paint()

Bad Adding Build a component, but don’t add it Never appears Add a component to a non-existent container Not a problem for us, because we add to the Applet we’re building Adding a not-yet-constructed Component to a Container is bad

Button Up! Push buttons are handy for clicking Button is two things: Similar to Submit buttons in HTML forms Button is two things: A label (“Click here”, “Erase disk”) An event generator Use event handling to tie buttons to “the rest of the program”

Button Housekeeping Java takes care of drawing the button as the user clicks on it

Button Events public class MyButtons extends Applet { private Button pushButton1, pushButton2; public void init() { // create buttons pushButton1 = new Button( "Button 1" ); pushButton1.addActionListener( new Button1Handler( this ) ); add( pushButton1 ); pushButton2 = new Button( "Button 2" ); pushButton2.addActionListener( new Button2Handler( this ) ); add( pushButton2 ); }

Handling Button1 class Button1Handler implements ActionListener { Applet applet; public Button1Handler( Applet a ) { applet = a; } public void actionPerformed( ActionEvent e ) { applet.showStatus( "You pressed: " + e.getActionCommand() ); }

Handling Button2 class Button2Handler implements ActionListener { Applet applet; public Button2Handler( Applet a ) { applet = a; } public void actionPerformed( ActionEvent e ) { applet.showStatus( "You pressed: " + e.paramString() ); }

TextFields Display text Users can edit, if you let them Use setEditable(boolean) to decide whether users can edit Still just one line A TextField is-a TextComponent, which is-a ___________

A Few Good Methods Echo characters Columns Rows? echoCharIsSet() getEchoChar() setEchoChar(char) Columns setColumns(int) getColumns() Rows?