Lecture 13: UI Components

1
Lecture 13 UI Components
2
Last time Interfaces

• An Interface is the collection of
  operations/methods that can be used from outside
  a class to manipulate it
• This is like in English
• A user Interface is the mechanism with which you
  interact with a program
• Buttons, windows, scroll bars, sliders, etc.
• On older systems, command line user interfaces
• A classs Interface in Java is the collection of
  public methods parameters that you use to
  interact with it
• Were going to be talking about Java Interfaces
  today
• Well talk about user interfaces later this week

3
Laundry with Interfaces

• Saw that we could make a version of this program
  that works with
• Tshirts
• Pants
• ColorfulBBall
• By creating an interface called Laundry

4
Laundry Interface

• What Interface would we write for Tshirt and
  Pants?
• Remember they share some methods.
• In a real program, youd also add comments
  describing what each of these is intended to do!

public interface Laundry public void
move(double xoff, double yoff) public void
moveTo(Location Point) public void hide()
public boolean contains(Location point)
public int colorValue()
5
Implementing Interfaces

• A class can declare that it implements an
  interface
• It must then provide implementations of all
  methods in that interface
• Youre then guaranteed that the class can be used
  in the way the interface describes

public class Tshirt implements Laundry
public void move(double xoff, double yoff)
//code here public void
moveTo(Location Point) //code here
public void hide() //code here
public boolean contains(Location point)
//code here public int
colorValue() //code here
6
Using the Laundry Interface

• You can now use the Interfaces name as a type!
• With it, you can make instance variables that can
  hold any type of class that implements that
  interface

//instance variable declaration private Tshirt
item public void onMouseRelease(Location Point)
// etc. item new Tshirt(ITEMLEFT,
ITEMTOP, canvas) // etc.
//instance variable declaration private Laundry
item public void onMouseRelease(Location Point)
// etc. int rand generator.nextValue()
if (rand 1) item new
Tshirt(ITEMLEFT, ITEMTOP, canvas) else if
(rand 2) item new Pants(ITEMLEFT,
ITEMTOP, canvas) // etc.
7
Today User Interfaces

• Making constants for Boxball is kind of a pain
• My version has 28 constants in the Boxball class
• Almost all are coordinates for setting up buttons

// Inset and text for the labels of the
difficulty level buttons private static final
int LABEL_INSET_X 30 private static final
int LABEL_INSET_Y 20 private static final
String EASY_LABEL "Easy" private static
final String MEDIUM_LABEL "Medium" private
static final String HARD_LABEL "Hard" //
Colors for the difficulty buttons private
static final Color EASY_COLOR Color.CYAN
private static final Color MEDIUM_COLOR
Color.GREEN private static final Color
HARD_COLOR Color.RED //parameters for
placement of difficulty buttons private
static final int BUTTON_X 90 private
static final int BUTTON_Y 570 private
static final int BUTTON_WIDTH 100 private
static final int BUTTON_HEIGHT 50 private
static final int BUTTON_SPACING 20
//location and initial text of status message
private static final String START_MESSAGE
"Let's Play!" private static final Location
STATUS_LOCATION new Location(200, 545)
8
User Interfaces

• Most of those constants are for the buttons,
  their outlines, and their labels
• What do we do when stuffs repetitive and
  painful?
• Make a separate class for it!
• People have already done this
• Buttons and such are standard parts of most
  computer interfaces
• These are called Graphical User Interfaces, or
  GUIs

Buttons from boxball
Some buttons and a checkbox on my Mac
9
Swing

• Java comes with a built-in library to deal with
  GUI components
• Library is called Swing
• Contains all kinds of classes for various GUI
  pieces
• To use this library you need
• At the top of your class
• Just like import objectdraw., which we know
  about already

import java.awt. import javax.swing.
10
Swing

• Swing handles the drawing and the layout GUI
  components
• Components are laid out in Panels
• Each Panel has a particular layout associated
  with it
• Layout determines where components go when added
• Swing components arent like Objectdraw graphics
  objects
• They dont appear when constructed
• They only appear when you add them to a Panel

Some sample Swing components
11
ContentPane

• You need to start with a Panel of some sort to
  use Swing
• The main Panel in Swing is called the content
  pane
• this is where all the drawing has been taking
  place so far, you just havent known it
• The content pane contains the canvas youve been
  using
• To get the content pane, use the
  getContentPane() method provided by
  WindowController

Container contentPane getContantPane()
12
ContentPane

• You need to get the content pane in the class
  that extends WindowController, as its the only
  one that has that method.
• Once youve got it, you can use the add method to
  put things in it
• The first parameter here is a component. Well
  learn about these in a bit.
• Whats the second?

Container contentPane getContantPane()
contentPane.add(someComponent, BorderLayout.SOUTH)

13
BorderLayout
contentPane.add(someComponent, BorderLayout.SOUTH)

• 2nd parameter tells us where to put things in the
  window
• Its provided because the default layout is a
  BorderLayout
• BorderLayout has a few constants you can use to
  specify where things added to its Panes should be
  put

BorderLayout.NORTH BorderLayout.WEST BorderLayout.
EAST BorderLayout.WEST BorderLayout.CENTER
14
BorderLayout
BorderLayout.NORTH
BorderLayout.WEST
BorderLayout.CENTER
BorderLayout.EAST
BorderLayout.SOUTH
15
ContentPane

• Whenever you add things to a container like
  ContentPane, theres something you need to do
• Call the validate() method on the container
• This causes the added components to arranged out
  on the screen according to the layout
• You can do this after a lot of adds, just make
  sure you do it when you want the user to see all
  the things you changed
• Its not the greatest name for what it does

contentPane.add(someComponent, BorderLayout.SOUTH)
contentPane.add(someOtherComponent,
BorderLayout.NORTH) contentPane.add(yetAnother,
BorderLayout.WEST) contentPane.validate()
16
Components

• Now that we understand Panels we need some things
  to put in them
• Most Swing components have names starting in J
• Stands for Java
• also there to distinguish between Swing
  components and those of other GUI libraries
• More complicated than the rectangles and such
  youve been using

17
First component JSlider

• This is a simple slider, like youre used to on
  your computer
• Lots of applications have them
• Theyre a lot like scroll bars
• How do you build one?

Jslider sizeSlider new JSlider(JSlider.VERT
ICAL, MIN_SIZE, MAX_SIZE, INIT_SIZE)
18
JSlider Constructor
JSlider sizeSlider new JSlider(JSlider.VERT
ICAL, MIN_SIZE, MAX_SIZE, INIT_SIZE)

• Takes 4 parameters
• Orientation (JSlider.VERTICAL or
  JSlider.HORIZONTAL)
• Minimum value
• Maximum value
• Initial value
• Slider keeps track of a current value
• User can move it to change this value
• Programmer (you) can get the value using
  getValue()

Min
Max
Initial
int currentValue sizeSlider.getValue()
19
JPanels

• You can make your own Panels, which can be added
  to other Panels
• The class to use is called JPanel
• Just create it, then call add() on your Panel

JPanel bottomPanel new JPanel()
JSlider mySlider new JSlider(. .
.) bottomPanel.add(mySlider)
20
GridLayout

• Arranges items in a Grid Shape
• Now Components added to this panel are arranged
  by a 2 wide by 1 high Grid
• Eliminates need to specify coordinates for the
  items
• Theyre determined automatically by the layout,
  relative to where the Panel is.

JPanel bottomPanel new JPanel() bottomPanel.s
etLayout(new GridLayout(2, 1))
21
JComboBox

• Second component well learn about allows user to
  choose one of several options
• Its a component just like the slider
• Need to add it to a panel to make it work

22
Building a JComboBox
JComboBox shapeChooser new JComboBox()

• Constructor takes no parameters
• But, you need to add items to the combo box
• Items can actually be any kind of Object, but you
  can stick with Strings for now.
• Theres a funny thing about Strings that you need
  to know that well talk about in a second

shapeChooser.addItem(FramedSquare) shapeChooser
.addItem(FramedCircle) shapeChooser.addItem(Fi
lledCircle)
23
Getting the choice back out
JComboBox shapeChooser new JComboBox() shapeCho
oser.addItem(FramedSquare) shapeChooser.addItem
(FramedCircle) shapeChooser.addItem(FilledCirc
le)

• If you set up a JComboBox like this, you can get
  the choice back out like this
• How do we use this once we get it?

Object choice shapeChooser.getSelectedItem()
24
Objects, Strings, and equals()
Object choice shapeChooser.getSelectedItem()

• JComboBox allows you to insert anything, so you
  have to get things out as Object
• Everything in Java is an Object
• You can use a variable of type Object to refer
  to anything
• Objects use another method for testing whether
  theyre equal or not
• You have to use this for Strings!
• You cant use
• Well talk about the difference

public boolean equals(Object other)
25
Objects, Strings, and equals()

• So, if you want to determine what the user
  selected, you would do this
• You have to use .equals() to compare Strings like
  this, because will not do what you expect!

Object choice shapeChooser.getSelectedItem() if
(choice.equals("FramedSquare")) //do
something else if (choice.equals("FramedCircle")
) //do something else else if
(choice.equals("FilledSquare")) //do something
else
26
vs equals()

• is an operator
• Compares variables to see if they refer to the
  exact same object
• Or, compares numbers and booleans to see if they
  have the same values
• equals() is a method
• Compares objects to see if they are the same,
  by some definition (depends on the type of
  object)
• For Strings, equals() compares to see if theyre
  the same String of characters
• This is how String equality is defined

27
vs equals()
String myString This is a test String
otherString This is a test String
thirdString myString

• Lets look at how and equals() work on these

(myString otherString) //false
(myString thirdString) //true
(otherString thirdString) //false
myString.equals(otherString) //true
myString.equals(thirdString) //true
otherString.equals(thirdString) //true
28
Last Component JButton

• Building a JButton is simple, like the others
• You just pass it a name
• Note that none of the components require
  coordinates
• Positions on the screen are determined by what
  panel you add them to, and what Layout that Panel
  is using

JButton framedSquareButton new
JButton("FramedSquare")
29
Making buttons do things

• Last time we learned about Interfaces in Java
• Buttons use Interfaces to perform their actions
• This is event-based
• When the button is clicked, it calls a method in
  an object that implements a particular interface
• Likewise, sliders can use interfaces to tell
  classes when theyve changed

30
Listeners

• The ActionListener interface declares one method
• Buttons require that you tell them about some
  object that is an ActionListener
• That is, its class implements ActionListener
• The button will call actionPerformed() when
  clicked

public void actionPerformed(ActionEvent event)
Jbutton framedSquareButton new
JButton("FramedSquare") framedSquareButton.addLis
tener(someActionlistener)
31
Listeners

• You can just make your class implement
  ActionListener
• Then define actionPerformed()
• Then pass in this
• More on this later, but check out the Button
  Panel example program for next time!

public class MyClass implements ActionListener
. . .
public void actionPerformed(ActionEvent event)
// do something when button is clicked
Jbutton framedSquareButton new
JButton("FramedSquare") framedSquareButton.addAct
ionListener(this)