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.

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)

Inheritance relationship between the user interface component classes

Component classes (detailed)

The basic awt components

Basic Applet import java.awt.*; import java.applet.*; public class Example1 extends Applet { public void paint(Graphics g) { g.drawString("First applet", 10, 10); }

HTML Code that contains the applet Applet Test Page Applet Test Page <applet code="Example1.class" width=400 height=400 name="Applet1">

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); }

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 Component’s 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.

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(menubar); // 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(open);

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(textArea); Set the frame size and pop it up –this.setSize(300, 300); –this.pack(); –this.show();

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.

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"); } class B2 implements ActionListener { public void actionPerformed(ActionEvent e) { getAppletContext().showStatus("Button 2"); }

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); } });

Opening a file - File Dialogs displaying an open file dialog FileDialog dialog = new FileDialog(this, "Select a file", FileDialog.LOAD); dialog.show(); if(dialog.getFile() == 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();

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

BorderLayout It’s 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)

FlowLayout It’s 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

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 rows add(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

CardLayout Helps to manage two or more components that share the same display space. Adding components Panel cards = new Panel(); cards.setLayout(new CardLayout());...//Create 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.getLayout()).show(cards, “Panel with Buttons”); Choosing a component public 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)

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(); GridBagConstraints c = new GridBagConstraints(); setLayout(gridbag); //...Create the component... //...Set instance variables in the GridBagConstraints instance... gridbag.setConstraints(theComponent, c); add(theComponent);

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 it’s smaller than its display area weightx, weighty : how to distribute space among columns (weightx) and among rows (weighty)

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

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(); c.addItem("one"); c.addItem("two"); c.addItem("three"); p.add(c); add("South", p); } continued…

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(); }

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 component’s exact size? –standard components size depends on the platform and the fonts that are used. You don’t 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

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);

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