290 likes | 453 Views
Abstract Windowing Toolkit. Design Goal: allow the programmer to build o GUI that looks good on all platforms
E N D
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
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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Applet Test Page</TITLE> </HEAD> <h1>Applet Test Page</h1> <applet code="Example1.class" width=400 height=400 name="Applet1"> </applet> </BODY> </HTML>
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 withEvents 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 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
CardLayout • Helps to manage two or more components that share the same display space. • Adding componentsPanel 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 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)
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 withlayouts/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 withlayouts/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