Introduction to Programming

1
Introduction to Programming

• A More Graphical Interface
• P Blanchfield

2
So far

• We have used Java via the command line more or
  less
• Java likes to provide user interfaces
• We are going to start with an input box
• To use this we have to access a new class library
  the swing library
• This is not in the standard namespace of java so
  we have also to introduce the idea of importing it

3
import

• The java keyword import allows us access to other
  libraries of utilities
• The swing classes are in a library called javax
• We import them simply by adding
• import javax.swing.
• As the first line of code in a program where we
  are going to use it
• Let us have a little program called TestingInput
• It will have a class TestingInput and will do the
  conversion from Celcius to Fahrenheit we have
  learned to love
• Here is the code

4
The JOptionPane

• import javax.swing.
• public class TestingInput
• public static void main(String args)
• String celciusString JOptionPane.showInp
  utDialog
• ("Enter the Celcius temp")
• double c Double.valueOf(celciusString)
• //alternatively double c Double.parseDouble(celc
  iusString)
• double f (c 9 / 5) 32
• System.out.println(c " in Celcius is "
  f " Fahrenheit")

5
What else was new?

• A wrapper class
• Actually the Double (and Integer Long Short etc.)
  classes are similar to the String class
• They are one variable type wrapped in a class
• They allow us to use simple variables where we
  normally have objects

6
Double

• This is an example of a wrapper class
• It has lots of methods. For Example
• Double(ltStringgt) and Double(ltdoublegt)
• Constructors to make new Double objects
• compareTo and equals
• Basically to compare two Double objects!
• isNan(ltdoublegt) which checks if a double is a
  number! Where could we have used this?

7
Some more swing but first

• Graphic user interface elements existed before
  swing
• The java library java.awt. contains all sorts of
  elements we can use
• The javax library has extended these to provide
  more sophisticated ones
• You will see the awt ones used in lots of texts
• We will stick with swing

8
The JFrame

• Guis usually appear in a frame
• The awt had a class Frame that was the basic box
  things would go in
• We will start using the JFrame
• JFrames have lots of methods we will start with
  some basic and important ones
• The constructor
• JFrame(ltStringgt) creates a new JFrame and sets
  ltStringgt as its title
• setSize(int, int) sets the size of the frame to
  be an integer width and height
• setVisible(boolean) where boolean is true or
  false depending on if we want to see the frame or
  not

9
TheJFrameApp

• import javax.swing.
• public class TheJFrameApp
• public static void main(String args)
• JFrame jf
• new JFrame("Demonstrating JFrame")
• jf.setSize(200,200)
• jf.setVisible(true)

10
TheJFrameApp

• By the way, this will not stop if you just click
  on the close button
• We will look at how we stop it soon

11
JPanel

• Most of our GUI elements will go into a drawable
  container
• Panels are good for this
• There is an awt panel but we will use the JPanel
• Our frame has a content pane and we will add some
  JPanels to it

12
Getting the JFrame content pane

• The content pane of the JFrame is a Container
  which is a place to draw components like panels
• The Container is in the awt library
• We get this container with the frame
  getContentPane method
• We can then add panels to it

13
Layout

• Where things go in a panel and how we put them
  there depends on the type of layout we use
• We will start with a border layout
• This has a basic format with five parts the left
  right top bottom and center (centre)
• Here I have added some JPanels to our frame

14
Adding JPanels

• import javax.swing.
• import java.awt.
• public class TheJFrameApp
• public static void main(String args)
• JFrame jf new JFrame("Demonstrating JFrame")
• jf.setSize(200,200)
• jf.setVisible(true)
• Container cp jf.getContentPane()
• JPanel jpm new JPanel()
• jpm.setLayout(new BorderLayout())
• cp.add(jpm)
• JPanel jp
• jp new JPanel5
• for(int i 0 i lt 5 i)
• jpi new JPanel()
• jp0.setBackground(Color.pink)
• jp1.setBackground(Color.blue)
• jp2.setBackground(Color.black)

15
Some other elements

• Buttons
• Check boxes
• Text
• Edit boxes
• All derive from the panel

16
Added some components

• JButton jb new JButton("OK")
• jp4.add(jb)
• JCheckBox jcb new
• JCheckBox("English(UK)")
• jp4.add(jcb)
• JTextField jtf new JTextField("Text",5)
• jp4.add(jtf)
• JLabel jlbl new JLabel("More Text")
• jp4.add(jlbl)

17
Though you can click it

• It has no effect
• So how do we add some effect
• Need to learn something extra about Java
  inheritance first

18
Interfaces

• Java can only inherit from one base
• This makes life easier from some respects and yet
  sometimes we want to use aspects of more than one
  base class in a class
• We can extend the class for the first inheritance
• We can also implement an interface that has the
  second lot of characteristics
• Interfaces are generally for abstract actions
• Like reacting to a button being pressed or the
  mouse action
• The format for making the class use the facility
  provided by an interface is to use the keyword
  implements
• public class InterfaceUser implements
  InterfaceClass
• The first one we will use is the WindowAdapter
• This interface is defined in java.awt.event
• As a result we have to add
• import java.awt.event.
• To the front of the program

19
Using the WindowAdapter

• We add a new class that implements this interface
• class WindowEventHandler extends WindowAdapter
• public void windowClosing(WindowEvent e)
• System.exit(0)
• We now add a line to our program to use this
• Effectively we add a window listener to our
  JFrame so it will close
• jf.addWindowListener(new WindowEventHandler())

20
OK Now to make the button work

• How do we make the button do something?
• Need to add an ActionListener
• class ButtonHandler implements ActionListener
• public void actionPerformed(ActionEvent e)
• System.out.println("I got pressed")
• We also add an action listener to the button
• ButtonHandler b new ButtonHandler()
• jb.addActionListener(b)

21
This has the effect

• Of printing
• I got pressed
• In the output window
• As described so far the Button handler class is
  independent of the class it is working with
• We need to add a means of communication between
  the classes and the way we are doing this it
  becomes quite complicated
• I am going to refactor my program and introduce a
  new class that will extend the JPanel class
• This will make it easier to add some more useful
  behaviour

22
The DisplayPanel Class
This extends JPanel and it will be put in the
middle of my previous application frame. It has
the button, check box, text field and label and
member attributes The button has an action
handler added The action handler is a member of
the DisplayPanel! (We will use this fact next)

• import javax.swing.
• import java.awt.
• import java.awt.event.
• public class DisplayPanel extends JPanel
• private JButton jb
• private JCheckBox jcb
• private JTextField jtf
• private JLabel jlbl
• public DisplayPanel()
• setBackground(Color.red)
• setLayout(new GridLayout(2,2))
• jb new JButton("OK")
• ButtonHandler b new ButtonHandler()
• jb.addActionListener(b)
• add(jb)
• jcb new JCheckBox("English(UK)")
• add(jcb)

23
The refactored main application
import javax.swing. import java.awt. import
java.awt.event. public class TheJFrameApp
public static void main(String args)
.. This stays the same up to this point
JPanel jp jp new JPanel4
for(int i 0 i lt 4 i) jpi
new JPanel() jp0.setBackground(Color.pi
nk) jp1.setBackground(Color.blue)
jp2.setBackground(Color.black)
jp3.setBackground(Color.green)
DisplayPanel dp new DisplayPanel()
jpm.add(jp0,BorderLayout.NORTH)
jpm.add(jp1,BorderLayout.SOUTH)
jpm.add(jp2,BorderLayout.EAST)
jpm.add(jp3,BorderLayout.WEST)
jpm.add(dp,BorderLayout.CENTER)
jf.setVisible(true) jf.addWindowListener(
new WindowEventHandler())
Followed by the rest which does not change
Changes have been highlighted in yellow
24
Making the program do things

• So far all we do is press one button and it
  outputs the message I got pressed
• Now we will change the action listener so that it
  does something to the JLabel
• And add an ItemListener to the JCheckBox so that
  it responds and changes the JTextField

25
The listener classes
Note my action event changes the label text and
makes it equal to the text in the text field The
check box changes the text in the text field Not
very interesting but it does show what they do

• class ButtonHandler implements ActionListener
• public void actionPerformed(ActionEvent
  e)
• String s e.getActionCommand()
• if(s.equals("OK"))
• jlbl.setText(jtf.getText())
• class CheckBoxHandler implements ItemListener
• public void itemStateChanged(ItemEvent
  e)
• Object source e.getSource()
• if (source jcb)
• if(e.getStateChange()
  ItemEvent.SELECTED)
• language "English(UK)"
• else
• language "English(US)"
• jtf.setText(language)

CheckBoxHandler c new CheckBoxHandler()
jcb.addItemListener(c) - Added this to the
DisplayPanel constructor too
26
Alternatively for the Checkbox

• Replace jcb.addItemListener(c) with
• jcb.addActionListener(b)
• And change the Button handler as follows
• class ButtonHandler implements ActionListener
• public void actionPerformed(ActionEvent
  e)
• String s e.getActionCommand()
• if(s.equals("OK")) //The button
• jlbl.setText(jtf.getText())
• if(s.equals("English(UK)")) //The
  check box
• if(jcb.isSelected())
• language "English(UK)"
• else
• language "English(US)"
• jtf.setText(language)

27
Example output
On running
On clicking the check box
On changing the Text Field
Then clicking the button
28
Final code

• Here
• Exercise
• Modify the DisplayPanel class so that it can
  display two more buttons and add actions for
  these buttons