Abstract Windowing Toolkit

1
Abstract Windowing Toolkit

• Design Goal
• allow the programmer to build o GUI that looks
  good on all platforms
• provide a well-designed object-oriented interface
  to low-level services and resources (tracking the
  mouse, reading the keyboard, writing to the
  screen etc.) so programmers don't have to worry
  about the details
• The user interface elements provided by the AWT
  are implemented using each platform's native GUI
  toolkit, thereby preserving the look and feel of
  each platform.

2
Abstract Windowing Toolkit

• java.awt
• Graphics
• colors, images, fonts, polygons, e.t.c.
• Components
• GUI (graphical user interface) components
  (buttons, menus, lists, dialog boxes)
• Layout Managers
• classes which control the layout of components
  within their container objects
• java.awt.datatransfer (classes for cut-and-paste)
• java.awt.event (classes for event handling)
• java.awt.image (classes for image manipulation)

3
Inheritance relationship between the user
interface component classes
4
Component classes (detailed)
5
The basic awt components
6
Basic Applet

• import java.awt.
• import java.applet.
• public class Example1 extends Applet
• public void paint(Graphics g)
• g.drawString("First applet", 10, 10)

7
HTML Code that contains the applet
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2
Final//EN"gt ltHTMLgt ltHEADgt ltTITLEgtApplet Test
Pagelt/TITLEgt lt/HEADgt lth1gtApplet Test
Pagelt/h1gt ltapplet code"Example1.class" width
400 height400 name"Applet1"gt lt/appletgt lt/B
ODYgt lt/HTMLgt
8
Another Example

• import java.awt.
• import java.applet.
• public class Example2 extends Applet
• Button
• b1 new Button("Button 1"),
• b2 new Button("Button 2")
• public void init()
• add(b1)
• add(b2)

9
How AWT components draw themselves

• programs can draw only when AWT tells them to
• AWT orders drawing requests by making them run in
  a single thread
• AWT orders a component to draw itself by invoking
  its update() method
• The default implementation of the update() method
  clears the Components background and then calls
  the paint() method
• The default implementation of the paint() method
  does nothing
• AWT can call the paint() method directly (e.g.
  when an area of a Component is revealed after
  being hidden behind an other window)
• a Graphics object is the only argument of paint()
  and update()
• represents the context in which the component can
  perform its drawing
• The Graphics class provide methods for drawing
  and filling lines, rectangles e.t.c., images,
  text, for setting and getting colors and fonts
  e.t.c.

10
Creating the components of a simple editor (a)
The Menus

• Create a new class which extends the Frame class
• public class SimpleEditor extends Frame . . .
• In the Constructor
• Create a MenuBar object
• MenuBar menubar new MenuBar()this.setMenuBar(m
  enubar) // this refers to the Frame object
• Create and add the Menu objects (File) to the
  menu bar
• Menu file new Menu(File)menubar.add(file)
  
• Create and add the MenuItem objects to the Menu
  containers (Open, New, Save, Save as, Exit)
• MenuItem open new MenuItem(Open)file.add(o
  pen)

11
Creating the components of a simple editor (b)
The Panel

• Create a new TextArea object and add it to the
  scroll pane
• TextArea textArea new TextArea()pane.add(textA
  rea)
• Set the frame size and pop it up
• this.setSize(300, 300)
• this.pack()
• this.show()

12
java.awt.event - Events, Listeners, Adapters

• Events
• represent event occurrences
• java.awt.AWTEvent is the superclass of all the
  awt events
• ActionEvent, TextEvent, MouseEvent, KeyEvent
  e.t.c.
• Listeners
• extend the java.util.EventListener interface
• provide methods that handle events
• ActionListener, TextListener, MouseListener,
  KeyListener e.t.c.
• Adapters
• implement the corresponding listener, providing
  empty bodies for all the methods of it (it is
  useful when we don t want to implement all the
  methods of a listener).
• MouseAdapter, KeyAdapter e.t.c.

13
Example with Events

• import java.awt.
• import java.awt.event. // Must add this
• import java.applet.
• public class Example5 extends Applet
• Button
• b1 new Button("Button 1"),
• b2 new Button("Button 2")
• public void init()
• b1.addActionListener(new B1())
• b2.addActionListener(new B2())
• add(b1)
• add(b2)
• class B1 implements ActionListener
• public void actionPerformed(ActionEvent e)
• getAppletContext().showStatus("Button 1")

14
Adding events to our editor

• Opening a document
• open.addActionListener(new ActionListener()
  public void actionPerformed(ActionEvent e)
  openDocument() )
• Saving a document
• save.addActionListener(new ActionListener()
  public void actionPerformed(ActionEvent e)
  saveDocument() )
• Handling window close requests
• this.addWindowListener(new WindowAdapter()
  public void windowClosing(WindowEvent e)
  System.exit(0) )

15
Opening a file - File Dialogs
displaying an open file dialog FileDialog dialog
new FileDialog(this, "Select a file",
FileDialog.LOAD) dialog.show() if(dialog.getFil
e() null) return filename
dialog.getDirectory() File.separator
dialog.getFile() to display a save file
dialog FileDialog dialog new FileDialog(this,
"Select a file", FileDialog.SAVE) dialog.show()
16
Layout Managers

• A Layout Manager is an object that controls the
  position and the size of components in a
  container
• Every layout manager implements the LayoutManager
  interface
• By default, every Container has a layout manager
  object that controls its layout
• for Panel objects instances of the FlowLayout
  class
• for Window objects instances of the BorderLayout
  class
• There are five layout manager classes in AWT
• FlowLayout
• GridLayout
• BorderLayout
• CardLayout
• GridBagLayout

17
BorderLayout

• Its the default layout manager for all Windows
  (Frames, Dialogs, e.t.c.)
• the layout is divided into five areas North,
  South, East, West and Center
• Using BorderLayout
• setLayout(new BorderLayout())add(North, new
  Button(North))add(South, new
  Button(South))add(East, new
  Button(East))add(West, new
  Button(West))add(Center, new
  Button(Center))
• to insert gaps between the components we use the
  following constructor
• public BorderLayout(int horizontalGap, int
  verticalGap)

18
FlowLayout

• Its the default layout manager for all Panels
• It simply lays out components (at their preferred
  size) from left to right, starting new rows if
  there is not enough space
• setLayout(new FlowLayout)add(new Button(This
  is a long-named button))add(new
  Button(Hello))
• Within each row the components are centered (by
  default), left-aligned or right-aligned
• Constructors
• public FlowLayout()
• public FlowLayout(int alignment)
• public FlowLayout(int alignment, int
  horizontalGap, verticalGap)
• alignment FlowLayout.LEFT, FlowLayout.RIGHT,
  FlowLayout.CENTER

19
GridLayout

• Arranges components into a grid of rows and
  columns
• The cells are equal size based on the largest
  component in the grid
• Adding components
• setLayout(new GridLayout(0,2))//construct a
  GridLayout with two //columns and
  unspecified number of rowsadd(new Button(Button
  1))add(new Button(2))add(new
  Button(Button 3))add(new Button(Long-Named
  Button 4))add(new Button(Button 5))
• At least one of the rows and columns must be
  non-zero

20
CardLayout

• Helps to manage two or more components that share
  the same display space.
• Adding componentsPanel cards new
  Panel()cards.setLayout(new CardLayout())...//C
  reate a Panel named p1. Put buttons in
  it....//Create a Panel named p2. Put a text
  field in it.cards.add("Panel with Buttons",
  p1)cards.add("Panel with TextField", p2)
• Showing its components((CardLayout)cards.getLayou
  t()).show(cards, Panel with Buttons)
• Choosing a componentpublic void first(Container
  panel)public void next(Container panel)public
  void previous(Container panel)public void
  last(Container panel)public void show(Container
  panel, String name)

21
GridBagLayout

• The most flexible and complex layout manager
• Places components in a grid of rows and columns
• the applet specifies the size and position
  characteristics of its components is by by means
  of GridBagConstraints
• GridBagLayout gridbag new GridBagLayout()GridB
  agConstraints c new GridBagConstraints()setLay
  out(gridbag)//...Create the component...//...Se
  t instance variables in the GridBagConstraints
  instance... gridbag.setConstraints(theComponent,
  c)add(theComponent)

22
GridBagConstraints instance variables

• gridx, gridy Specify the column and row of the
  upper left of the component
• gridwidth, gridheight Specify the number of
  columns or rows in the component's display area
• fill how to resize the component when its
  display size is larger than its requested size
• ipadx, ipady how many pixels to add to the
  minimum size of the component
• insets the minimum amount of space between the
  component and the edges of its display area
• anchor where to place the component when its
  smaller than its display area
• weightx, weighty how to distribute space among
  columns (weightx) and among rows (weighty)

23
Absolute Positioning

• we do not use any layout manager
• setLayout(null)
• adding the components
• Button b1 new Button(one)
• add(b1)
• specifying the exact size and position
• We overwrite the paint(Graphics g) method and
  specify the position and size of each component
• b1.reshape(70 insets.left, 35 insets.top,
  50, 20)
• We should avoid using absolute positioning in
  order to guarantee a platform-dependent component
  appearance

24
Example with layouts/panels (1)

• import java.applet.
• import java.awt.
• public class Example6 extends Applet
• public void init()
• Panel p
• setLayout(new BorderLayout())
• p new Panel()
• p.add(new TextArea())
• add("Center", p)
• p new Panel()
• p.add(new Button("One"))
• p.add(new Button("Two"))
• Choice c new Choice()

continued
25
Example with layouts/panels (2)

• public static void main(String args)
• Frame f new Frame("Example 6")
• Example6 ex new Example6()
• ex.init()
• f.add("Center", ex)
• f.pack()
• f.show()

26
Common problems

• when a window never shows up
• set the window size or pack it
• when the component never shows up
• if the container is already visible call
  validate() on the container after adding the
  componenô
• How can I specify a components exact size?
• standard components size depends on the platform
  and the fonts that are used. You dont need to
  specify their exact size.
• for custom components you need to override
  getMinimumSize() and getPreferreSize() methods.
• component sizes are subject to the layout manager
  you use

27
Shapes, Text, Images

• The class Graphics provides methods for drawing
  Lines, Rectangles (simple, 3D and round-edged
  rectangles), Ovals, Arcs and Polygons.
• g.drawLine(10, 10, 120, 100)
• drawing text
• g.drawString(Hello World, 50, 50) //g
  instance of Graphics
• setting fonts
• g.setFont(new Font(new Font(Helvetica,
  Font.ITALIC, 14)))
• loading Images
• Image image getImage(URL) //in an applet
• Image image Toolkit.getDefaultToolkit().getImage
  (filenameOrURL)
• displaying Images
• g.drawImage(image, 0, 0, this)

28
Extending AWT JFC Swing

• a new GUI API based on AWT
• new visual components (tables, split panes,
  toolbars, trees, progress bars e.t.c)
• drag and drop support
• pluggable Look Feel support
• two releases
• JFC 1.1 (for use with JDK 1.1)
• JDK 1.2
• For each AWT component there is a equivalent
  Swing component (JButton, JLabel, JFrame, e.t.c.)
• Swing components are implemented with absolutely
  no native code
• They have much more capabilities than AWT
  components