COMP 14 Introduction to Programming

1
COMP 14Introduction to Programming

• GUIs and Applets
• Friday, July 21, 2006

2
Assignments

• Review assignment 5
• Assignment 6 Due tonight by midnight
• Assignment 7
• Due Thursday, July 27 by midnight
• Option 2 define your own problem
• Will likely be more work than the problem I give
• But will allow you to be more creative
• Only criteria is it must be an applet
• You must submit your problem statement by
  midnight tonight
• I will hold you to your claims of what you will
  build so do not get too crazy

3
Next week

• Monday
• Exceptions
• Tuesday
• Review
• Wednesday
• Reading day (no class)
• Thursday
• Final exam 800 1100 am (this room)
• Assignment 7 due at midnight
• If you have a conflict you must inform me and
  take the exam BEFORE the scheduled time

4
Today

• GUIs
• Events
• Applets
• HTML

5
Example LowerUpperCase
6
Basics

• Layout GridLayout(3,2)
• JLabel to output result
• JTextField to input sentence
• 4 buttons

7
JLabel and JTextField

• JLabel and JTextField are very similar
• With JTextField we can also type data from
  outside and access it in the program.
• JLabel outputnew JLabel()
• JTextField inputnew JTextField()
• String inputStrinput.getText()
• output.setText(OUTPUT RESULT)

8
Using Buttons

• Create JButton objects
• Buttons generate events when clicked
• Add event handlers
• Inside event handler, code operations to be
  executed when button is clicked

9
Adding Buttons

• To create a button, we use the JButton class
• Add button to the content pane
• Change text of the button with the setText method
• Enable/disable the button with setEnabled method

JButton toLower new JButton (To Lower Case")
content.add(toLower)
toLower.setText(Convert to Lower Case")
toLower.setEnabled(false)
10
Events

• Events are generated when
• You press the enter key in a text field
• Action event
• Key event
• You press a button
• Action event
• Button event

11
Handling events

• Java provides various interfaces to handle
  different events
• These interfaces contain methods that are invoked
  when a particular event occurs
• We override these interfaces by implementing the
  methods in our own child/subclass

12
Buttons and Events

• Pressing a button triggers an action event
• Setup a listener for the event
• actionPerformed method from the ActionListener
  interface
• ActionListener interface from the java.awt.event
  package
• You need to import this

13
Handling Events Through Listeners

• Action events
• Handled by implementing interface ActionListener.
• Window events
• Handled by implementing interface WindowListener.
• Mouse events
• Handled by implementing interface MouseListener.
• Key events
• Handled by implementing interface KeyListener.

14
Registering Listeners

• To register an action listener object to a GUI
  component
• Use method addActionListener
• Action listener object being registered is passed
  as parameter to method addActionListener
• To register a window listener object to a GUI
  component
• Use method addWindowListener
• Window listener object being registered is passed
  as parameter to method addWindowListener
• To register a mouse listener object to a GUI
  component
• Use method addMouseListener
• Mouse listener object being registered is passed
  as parameter to method addMouseListener

15
ActionListener

• ActionListener is an interface
• Remember an interface is a class that contains
  only the method headings (no method bodies)

public interface ActionListener public void
actionPerformed(ActionEvent e)
16
ActionListener

• In order to handle an event, define a class that
  will implement ActionListener.
• Make the class ButtonHandler an internal class of
  our main class.
• In ButtonHandler, code the method actionPerformed

private class ButtonHandler implements
ActionListener
17
ActionListener

• Declare a ButtonHandler that will be a data
  member of the main class.
• Instantiate the ButtonHandler (e.g. in the
  constructor)
• Once the JButton object is created, register the
  action listener

private ButtonHandler toLowerHandler
toLowerHandlernew ButtonHandler()
toLower.addActionListener(toLowerHandler)
18
Handling events

• Create a class that implements the interface
• Provide the definition of the method within the
  class you created in step 1
• Create and instantiate an object of the class
  created in step 1
• Register the event handler created in step 3 with
  the object that generates an action event using
  the method addActionListener()

19
Implementing Interfaces

• In order to instantiate an object from a class,
  all methods must be defined in that class
• If a method is not used then we can provide an
  empty body for that method
• class WindowAdapter
• Implements interface WindowListener with empty
  bodies to methods.
• class MouseAdapter
• Implements interface MouseListener with empty
  bodies to methods
• We can create subclasses from WindowAdapter and
  MouseAdapter without having to implement every
  method to instantiate

20
Registering Listeners
21
Registering Listeners
22
Registering Listeners
23
Example LowerUpperCase

• Declare buttons toLowerButton, toUpperButton,
  exitButton, clearButton
• Instantiate buttons
• Add buttons to the content pane
• Implement ActionListener classes that will handle
  events ButtonHandler, ExitHandler, ClearHandler
• Register action listeners

24
Example LowerUpperCase

• actionPerformed(ActionEvent e)
• Variables we want to access inside the
  actionPerformed methods, must be declared as
  member variables of the main class
• not local to constructor
• Make input, output, and the buttons member
  variables

25
Example LowerUpperCase

• ExitHandler.actionPerformed(ActionEvent e)
• We simply need to exit the system
• System.exit(0)

26
Example LowerUpperCase

• ClearHandler.actionPerformed(ActionEvent e)
• Clear JTextField input and JLabel output
• input.setText()
• output.setText()
• setVisible(true)

27
Example LowerUpperCase

• ButtonHandler.actionPerformed (ActionEvent e)
• How do we know which button we pressed
• (toLower or toUpper)?
• public void actionPerformed(ActionEvent e)
• JButton pressed(JButton)(e.getSource())
• if(pressedtoLower)
• else if(pressedtoUpper)

28
Example LowerUpperCase

• Step through code

29
Applets

• A Java application is a stand-alone program with
  a main method
• A Java applet is a Java program that is intended
  to be transported over the web and executed using
  a web browser
• an applet doesn't have a main method
• needs an extra import statement

import java.applet.Applet
30
Applet Methods

• Several methods from Applet class that are
  invoked automatically at certain points in an
  applet's life
• init - executed only once when the applet is
  initially loaded
• start - called when applet becomes active (when
  browser loads / returns to the page)
• stop - called when applet becomes inactive (when
  browser leaves the page)
• paint - automatically executed and is used to
  draw the applets contents
• Override any/all of the above methods

31
Applet Skeleton

• import java.awt.Graphics
• import javax.swing.JApplet
• public class WelcomeApplet extends JApplet

32
Welcome Applet

• // Welcome Applet
• import java.awt.Graphics
• import javax.swing.JApplet
• public class WelcomeApplet extends JApplet
• public void paint(Graphics g)
• super.paint(g)
• g.drawString("Welcome to Java Programming"
  ,30, 30)

33
Init method

• Init method
• Initializes variables
• Gets data from user
• Places various GUI components
• Paint method
• Performs output to screen

34
Differences Between Applets and GUI Applications

• GUI applications
• Class extends JFrame.
• Invokes main method.
• Uses constructors.
• Uses method setVisible.
• Uses setTitle method.
• Uses method setSize.
• Closes with Exit button.

• Applets
• Derived from JApplet.
• No main method.
• Uses init method.
• Displayed by HTML.
• Sets title in HTML.
• Size set in HTML.
• Applet closes when HTML doc closes.

35
Converting a GUI Application to an Applet

• Change JFrame to JApplet
• Change constructor to method init
• Remove method calls such as setVisible, setTitle,
  setSize
• Remove the method main
• If applicable, remove Exit button and all code
  associated with it (for example, action listener)
• See pages 855-858 of the book

36
Converting a GUI Application to an Applet

• Convert LowerUpperCase to an Applet

37
Want to Learn More?

• Creating a GUI with Swing
• Creating Applets

http//java.sun.com/docs/books/tutorial/uiswing/
http//java.sun.com/docs/books/tutorial/applet/
38
Writing Web Pages

• Web pages are written in a "markup" language
  called HTML (HyperText Markup Language)
• HTML is NOT a programming language.
• HTML just tells the computer how to format text
  and images--it's like using Word, but having to
  type in what you want things to look like.

39
Tags

• HTML works based on the concept of tags. A tag is
  some text surrounded by lt and gt
• Tags are not printed to the screen
• Example tags
• ltHTMLgt, ltTITLEgt, ltPgt, ltH1gt
• A lot of the time they work in pairs
• ltHTMLgt and lt/HTMLgt
• HTML is not case-sensitive
• ltHTMLgt and lthtmlgt are the same thing

40
Very Simple Web Page

• ltHTMLgt
• ltHEADgt
• ltTITLEgtSimple web pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• This is the text on a web page.
• lt/BODYgt
• lt/HTMLgt

View any web page source by choosing Source from
the View menu in a web browser
41
What Do The Tags Mean?

• ltHTMLgt, lt/HTMLgt
• go at the beginning and end of EVERY page
• ltHEADgt, lt/HEADgt
• introduction of the document
• ltTITLEgt, lt/TITLEgt
• what goes in the title bar of the window
• ltBODYgt,lt/BODYgt
• the text (and other stuff) that is displayed in
  the window

42
Color and Images

• You can add color or an image to the background
• color make body tag ltBODY BGCOLORREDgt
• image make body tag ltBODY BACKGROUND"image.g
  if"gt

43
Ignores White Space

• In HTML, where you put a line break is ignored.
  The web browser decides this for you based on the
  size of the window
• These two will print the same thing

first ltBODYgt Why not fly? lt/BODYgt
second ltBODYgt Why not fly? lt/BODYgt
44
Adding White Space

• Putting ltPgt at the beginning of a paragraph and
  lt/Pgt at the end will put a blank line between two
  pieces of text
• You can also use ltBRgt to insert a carriage return
  (aka ltentergt)
• lthrgt will insert a horizontal line

45
Other Tags

• Bold
• ltBgt andlt/Bgt
• Italic
• ltIgt and lt/Igt
• Center
• ltCENTERgt and lt/CENTERgt
• Comments
• lt!-- and --gt

46
Hierarchical Structure

• For documents having a hierarchical structure,
  you can use heading tags
• ltH1gt marking chapter in a book
• ltH2gt marking section of a chapter
• ltH3gt marking subsection of a chapter
• ltH4gt and so on down...
• ltH5gt

47
Lists

• There are two kinds of lists
• Ordered lists (surrounded by ltOLgt and lt/OLgt
• Unordered lists (surrounded by ltULgt and lt/ULgt
• Both use ltLIgt and lt/LIgt to indicate List Items
  (things in the list)

48
Links

• This is the important part. This is how you go
  from page to page.
• ltA HREF"put URL here"gttext to be displayedlt/Agt

49
Inserting Images

• You can also just add an image into the page
• Use ltIMG SRC"put URL here"gt

50
Want To Learn More?

• Tutorials
• Quick Reference

http//www.htmlcodetutorial.com/
http//www.w3.org/MarkUp/Guide/
http//werbach.com/barebones/barebones.html
51
Applets and the Web

• An applet is embedded into an HTML file using a
  tag that references the bytecode file
  (ClassName.class) of the applet class
• It is actually the bytecode version of the
  program that is transported across the web
• The applet is executed by a Java interpreter that
  is part of the browser
• this Java interpreter not included in Windows XP,
  must download from java.com

52
Applets and the Web

• Basic HTML file for an applet
• Can also specify size of applet window
• Put the applet HTML file (named something.html)
  and your Java applet bytecode (named
  ClassName.class) in your public_html folder in
  AFS space.

lthtmlgt ltbodygt ltapplet code "ClassName.class"gt lt
/appletgt lt/bodygt lt/htmlgt
ltapplet code"ClassName.class" height200
width300gt lt/appletgt
53
Applet in a Webpage Example
54
To do

• Read Chapter 12, Pages 771-807
• Assignment 6
• Due tonight at midnight
• Assignment 7
• Due Thursday, July 27 at midnight
• Get started this weekend
• Quiz Monday!
• Next Lecture
• Exceptions