Chapter 1 - AWT vs Swing (2).pdf

Compiled by Borifan A. 1  AWT vs Swing 1.1 Introduction to AWT  When Java was introduced, the GUI classes were bundled in a library known as the Abstract Windows Toolkit (AWT).  But what is GUI means?  Graphical User Interface (GUI) is simply the way human in...

Compiled by Borifan A. 1  AWT vs Swing 1.1 Introduction to AWT  When Java was introduced, the GUI classes were bundled in a library known as the Abstract Windows Toolkit (AWT).  But what is GUI means?  Graphical User Interface (GUI) is simply the way human interacts with a computer (machine). Compiled by Borifan A. 2  GUI has many components. Those components are defined in AWT and Swing.  What are the components of GUI in AWT?  AWT components for GUI includes Label, Button, TextField, RadioButton, CheckBox, ComboBox, etc.,  AWT is fine for developing simple graphical user interfaces, but not for developing comprehensive GUI projects.  The Java package for AWT is java.awt.*;  AWT components are referred to as heavyweight components. Compiled by Borifan A. 3  The AWT user-interface components were replaced by a more robust, versatile, and flexible library known as Swing components.  Although AWT components are still supported in Java, it is better to learn how to program using Swing components, because the AWT user-interface components will eventually fade away.  Swing components are referred to as lightweight components.  The focus of this chapter is more on Swing as it also represents the functionalities of AWT. Compiled by Borifan A. 4  To distinguish new Swing component classes from their AWT counterparts, the Swing GUI component classes are named with a prefixed J.  Swing components for GUI includes JLabel, JButton, JTextField, JRadioButton, JCheckBox, JComboBox, etc.,  Swing GUI components are from the javax.swing package. Compiled by Borifan A. 5  Some basic Swing components are: Compiled by Borifan A. 6  A frame is a window for holding other GUI components  To create a frame, use the JFrame class Compiled by Borifan A. 7 import javax.swing.JFrame; public class MyFrame { public static void main(String[] args) { Frame frame = new JFrame("MyFrame"); // Create a frame frame.setSize(400, 300); // Set the frame size frame.setLocationRealtiveTo(null);// Center a frame frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); // Display the frame } } Compiled by Borifan A. 8  A container can be placed inside another container. Panels can be used as sub-containers to group GUI components to achieve the desired layout.  The Swing version of panel is JPanel. Use the add(Component) method to add a component to the panel. For example, the following code creates a panel and adds a button to it: JPanel p = new JPanel(); Jbutton b= new Jbutton(“SAVE”); p.add(b); Panels can be placed inside a frame or inside another panel. Compiled by Borifan A. 9  Using the add method, you can add components to a frame. import javax.swing.*; public class MyFrameWithComponents { public static void main(String[] args) { JFrame frame = new JFrame("MyFrameWithComponents"); // Add a button to the frame JButton but = new JButton(“Click here”); frame.add(but); frame.setSize(400, 300); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setLocationRelativeTo(null); // Center the frame frame.setVisible(true); } } Compiled by Borifan A. 10  Each container contains a layout manager, which is an object responsible for laying out the GUI components in the container.  The Java GUI components are placed in containers, where they are arranged by the container’s layout manager  A layout manager is created using a layout manager class.  Layout managers are set in containers using the setLayout(aLayoutManager) method. Compiled by Borifan A. 11  For example, you can use the following statements to create an instance of XLayout and set it in a container: LayoutManager layoutManager = new XLayout(); container.setLayout(layoutManager); Compiled by Borifan A. 12  This section introduces three basic layout managers: FlowLayout, GridLayout, and BorderLayout. Compiled by Borifan A. 13  FlowLayout is the simplest layout manager. The components are arranged in the container from left to right in the order in which they were added. When one row is filled, a new row is started. You can specify the way the components are aligned by using one of three constants: FlowLayout.RIGHT, FlowLayout.CENTER, or FlowLayout.LEFT.  You can also specify the gap between components in pixels.  You can set FlowLayout as below: FlowLayout layout = new FlowLayout(FlowLayout.LEFT, 0, 0); setLayout(layout); Here, all the components will be aligned with no gaps. The above statement is also equivalent to: setLayout(new FlowLayout(FlowLayout.LEFT, 0, 0); Compiled by Borifan A. 14  The GridLayout manager arranges components in a grid (matrix) formation. The components are placed in the grid from left to right, starting with the first row, then the second, and so on, in the order in which they are added.  GridLayout lays out components in equal-sized cells on a grid.  The ways of creating and setting GridLayout: GridLayout layout = new GridLayout(3, 1, 10, 10); frame.setLayout(layout); or frame.setLayout(new GridLayout(3, 1, 10, 10)); Both of the above are equivalent. All components are given equal size in the container of GridLayout Compiled by Borifan A. 15  The BorderLayout manager divides a container into five areas: East, South, West, North, and Center. Components are added to a BorderLayout by using add(Component, index), where index is a constant BorderLayout.EAST, BorderLayout.SOUTH, BorderLayout.WEST, BorderLayout.NORTH, or BorderLayout.CENTER.  The components are laid out according to their preferred sizes and their placement in the container. The North and South components can stretch horizontally; the East and West components can stretch vertically; the Center component can stretch both horizontally and vertically to fill any empty space.  the add method for BorderLayout is different from the one for FlowLayout and GridLayout. With BorderLayout, you specify where to put the components. Compiled by Borifan A. 16  Example for adding a button (component) to a panel object p1 with BorderLayout JButton username = new JButton("North"); JButton welcome = new JButton("West"); JButton click = new JButton("South"); JButton east = new JButton("East"); JButton center = new JButton("Center"); p1.add(username,BorderLayout.NORTH); p1.add(welcome,BorderLayout.WEST); p1.add(click, BorderLayout.SOUTH); p1.add(east, BorderLayout.EAST); p1.add(center, BorderLayout.CENTER); Finally, the panel objects will be added to the frame like this: Frame.add(p1); Compiled by Borifan A. 17 Layout managers have properties that can be changed dynamically.  FlowLayout has alignment, hgap, and vgap properties. You can use the setAlignment, setHgap, and setVgap methods to specify the alignment and the horizontal and vertical gaps.  GridLayout has the rows, columns, hgap, and vgap properties. You can use the setRows, setColumns, setHgap, and setVgap methods to specify the number of rows, the number of columns, and the horizontal and vertical gaps.  BorderLayout has the hgap and vgap properties. You can use the setHgap and setVgap methods to specify the horizontal and vertical gaps. Compiled by Borifan A. 18  java.awt.color class provides for GUI components. You can set both background and foreground colors.  Colors are made of red, green, and blue components, each represented by an int value that describes its intensity, ranging from 0 (darkest shade) to 255 (lightest shade). This is known as the RGB model.  If r, g, b specify a color by its red, green and blue components: You can use constructor like below. public Color(int r, int g, int b); Color color = new Color(128, 100, 100); The arguments r, g, b are between 0 and 255. If a value beyond this range is passed to the argument, an IllegalArgumentException will occur. Compiled by Borifan A. 19  Alternatively, you can use one of the 13 standard colors (BLACK, BLUE, CYAN, DARK_GRAY, GRAY, GREEN, LIGHT_GRAY, MAGENTA, ORANGE, PINK, RED, WHITE, and YELLOW) defined as constants in java.awt.Color. The following code, for instance, sets the foreground color of a button to red: jbtOK.setForeground(Color.RED);  You can use the setBackground(Color c) and setForeground(Color c) methods defined in the java.awt.Component class to set a component’s background and foreground colors. Compiled by Borifan A. 20  Each GUI component has the font property. Fonts are objects created from the Font class.  You can create a font using the java.awt.Font class and set fonts for the components using the setFont method in the Component class.  The constructor for Font is: public Font(String name, int style, int size);  For example: Font font1 = new Font("SansSerif", Font.BOLD, 16); Font font2 = new Font("Serif", Font.BOLD + Font.ITALIC, 12); JButton jbtOK = new JButton("OK"); jbtOK.setFont(font1); Compiled by Borifan A. 21  You can write code to process events such as a button click or a timer.  You have to use event-driven programming to write the code to respond to the button-clicking event.  To respond to a button click, you need to write the code to process the button-clicking action. The button is an event source object—where the action originates. You need to create an object capable of handling the action event on a button. This object is called an event listener Compiled by Borifan A. 22  The below figure shows a listener object that processes the event fired from the source object. Compiled by Borifan A. 23  Not all objects can be listeners for an action event. To be a listener of an action event, two requirements must be met: 1. The object must be an instance of the ActionListener interface. This interface defines the common behavior for all action listeners. 2. The ActionListener object listener must be registered with the event source object using the method source.addActionListener(listener). Compiled by Borifan A. 24  The ActionListener interface contains the actionPerformed method for processing the event. Your listener class must override this method to respond to the event.  The below example shows a class that implements an interface called ActionListener. The abstarct method within this interface is actionPerformed which is actually implemented by the BlueClass. public class BlueClass implements ActionListener{ @Override public void actionPerformed(ActionEvent e){ Great_panel.setBackground(Color.BLUE); } Compiled by Borifan A. 25  When you run a Java GUI program, the program interacts with the user, and the events drive its execution. This is called event- driven programming.  An event can be defined as a signal to the program that something has happened. Events are triggered either by external user actions, such as mouse movements, button clicks, and keystrokes, or by internal program activities, such as a timer. Compiled by Borifan A. 26  User Action, Source Object, Event Type, Listener Interface, and Handler is shown in the below figure. Only some examples are listed here. Explore more of them. Compiled by Borifan A. 27 User Action Source Event type Listener Listener Object fired Interface Interface Methods Click a JButton ActionEvent ActionListener actionPerformed (ActionEvent e) button JTextField ActionEvent ActionListener actionPerformed Press Enter in (ActionEvent e) a text Field JComboBox ActionEvent ActionListener actionPerformed(A ctionEvent e) ItemEvent ItemListener Select a new itemStateChanged Item (ItemEvent e) Compiled by Borifan A. 28 User Action Source Event type Listener Listener Object fired Interface Interface Methods Check or JRadioButton ActionEvent ActionListener actionPerformed(A ctionEvent e) ItemListener uncheck ItemEvent itemStateChanged (ItemEvent e) Compiled by Borifan A. 29 For more information please refer to this text book: Introduction_to_JAVA_Programming_9th_Edition_Daniel_Liang Compiled by Borifan A. 30 The end! Compiled by Borifan A. 31