Unit 11 Object-oriented programming: Graphical user interface Jin Sa

Objectives GUI components – To create user interfaces using frames, panels, and some simple UI components Layout managers – To understand the role of layout managers – To use the FlowLayout, GridLayout, and BorderLayout Graphics – To use the Color class – To use the paintComponent method – To use the Graphics class

GUI components

AWT and Swing Java provides many predefined classes for building GUI applications. These classes are provided in two packages called: Abstract Windows Toolkit (AWT) and Swing. In Java, to write a GUI program, we derive new classes from those provided in AWT or Swing.

The overall structure of AWT and Swing Graphics – Drawing, fonts, colour etc. Components – buttons, text fields, menus and scroll bars etc Layout managers – Arrangement of GUI components Event handlers – Event such as clicking button and corresponding actions Image manipulation.

Creating a frame import javax.swing.*; public class MyFrame1 extends JFrame{ MyFrame1(String title) { setTitle(title); setSize(400,300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } public static void main(String[] args) { MyFrame1 frame = new MyFrame1("MyFrame"); }

Student activity 11.1 Implement and run the above example.

Adding components to a frame Container contentPane = getContentPane(); //obtain the content pane of the frame JButton ok = new JButton("first_ok_button"); //create a button object container.add(ok);

Student activity 11.2 Read the page on “Adding components to a frame” Add a button to the frame.

Effect of Using ContentPane 1 public class MyFrame_color extends JFrame{ MyFrame_color(String title) { setTitle(title); setSize(400,300); setBackground(Color.BLUE);//sets the frame colour??? setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } public static void main(String[] args) { MyFrame_color frame = new MyFrame_color("MyFrame"); }

Effect of Using ContentPane 2 public class MyFrame_color extends JFrame{ MyFrame_color(String title) { setTitle(title); setSize(400,300); getContentPane().setBackground(Color.BLUE); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } public static void main(String[] args) { MyFrame_color frame = new MyFrame_color("MyFrame"); }

Some GUI Components Component is the superclass of Container – Container is the superclass of JComponent JComponent is the superclass of AbstractButton – AbstractButton is the superclass of JButton JComponent is the superclass of JTextComponent – JTextComponent is the superclass of JTextField – JTextComponent is the superclass of JTextArea JComponent is the superclass of JLabel

The Component class provides methods such as setting and getting background colours. The Container class provides methods for adding component to the container; setting layout manager; and painting the component.

JButton Mostly used constructors. – JButton(String text) – E.g. – JButton ok = new JButton("first_ok_button"); JButton also inherits all the methods in its super classes such as setBackgroundColor

JTextField A JTextField: user input area. Commonly used constructors and methods are: – JTextField(int columns) – Creates an empty text field with the specified number of columns. – JTextField(String text) – Creates a text field initialized with the specified text. Mostly used methods: – getText() – Returns the string from the text field. – setText(String text) – Puts the given string in the text field.

JLabel A JLabel is a display area for a short text. Constructors and methods include the following: – JLabel() – JLabel(String text) – setText(String text) – getText()

Container containers can contain a number of components, e.g. frames and panels, ContentPane We can use the add method to put components in a container: Container contentPane = getContentPane(); JButton ok = new JButton("first_ok_button"); contentPane.add(ok);

JPanel JPanel is a subclass of Jcomponent Used as container or sub-containers for grouping user interface components Often programmers use a JPanel instead of the Content Pane when adding components to a frame as JPanel is a subclass of JComponent; it provides more methods than the ContentPane

Student activity 11.4 Read the page on Container. Use JPanel. Add a JButton to the JPanel instead of to the ContentPane.

Layout Manger Controls how the GUI components within the container can be arranged Java provides a number of predefined layout managers. – FlowLayout – GridLayout – BorderLayout Containers has a method – setLayout(LayoutManager)

FlowLayout 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 becomes filled, a new row is started.

FlowLayout: Fragment of code public class ShowFlowLayout extends JFrame { public ShowFlowLayout() { Container container = getContentPane(); container.setLayout(new FlowLayout()); for (int i = 1; i <= 10; i++) container.add(new JButton("Component " + i)); } public static void main(String[] args) { ShowFlowLayout frame = new ShowFlowLayout(FlowLayout.LEFT); …… }

Output from the program

Student activity 11.5

GridLayout The GridLayout manager arranges components in a grid (matrix) formation with the number of rows and columns defined by the constructor. The components are placed in the grid from left to right starting with the first row, then the second, and so on.

GridLayout: Fragment of code public class ShowGridLayout extends JFrame { public ShowGridLayout() { Container container = getContentPane(); container.setLayout(new GridLayout(3,2)); container.add(new JLabel("First Name")); container.add(new JTextField(8)); container.add(new JLabel("MI")); container.add(new JTextField(1)); container.add(new JLabel("Last Name")); container.add(new JTextField(8)); } …… }

Output from the program

Student activity 11.6 Implement the GridLayout program

BorderLayout Divides the container into five areas: East, South, West, North, and Center. To add a component to a particular area, we use the add(Component, constraint) method, where constraint is – BorderLayout.EAST, – BorderLayout.SOUTH, – BorderLayout.WEST, – BorderLayout.NORTH, – BorderLayout.CENTER

BorderLayout: code fragment public class ShowBorderLayout extends JFrame { public ShowBorderLayout() { Container container = getContentPane(); container.add(new JButton("East"), BorderLayout.EAST); container.add(new JButton("South"), BorderLayout.SOUTH); container.add(new JButton("West"), BorderLayout.WEST); container.add(new JButton("North"), BorderLayout.NORTH); container.add(new JButton("Center"), BorderLayout.CENTER); } ……

Output from program

An integrated case study

The Color class You can set colours for GUI components by using the java.awt.Color class. MyFrame(String title) { … … Container container = getContentPane(); JButton ok = new JButton("first_ok_button"); container.add(ok); ok.setBackground(Color.red); container.setBackground(Color.green); … … }

Drawing in Swing usually create a new class that extends JPanel and override the paintComponent () method The Graphics object g is created automatically by the Java Virtual Machine for every visible GUI component.

Methods in the Graphics object drawLine(50,50,100,60), draws a line from (50,50) to (100,60) drawRect(20,20,100,50), draws a rectangle with (20,20) as the top left corner; 100 is the length and 50 is the width. fillRect(20,20,100,50), draws a rectangle as above but filled with the current colour. drawOval(30,30,50,50), draws an oval bounded by an invisible rectangle whose top left corner is at (30,30); length is 50 and width is 50. drawString(“Hello”, 50,50), draws a string starting from the position (50,50). setColor(Color.red), sets of colour of the graphics object to be red.

paintComponenet public class MyCanvas extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); g.fillRect(10,10,100,50); g.drawRect(10,80,100,50); }

Darwing: code fragment 1 public class MyExample extends JFrame { MyCanvas canvas = new MyCanvas(); JLabel heading = new JLabel("My drawing"); public MyExample() { Container container = getContentPane(); container.add(heading,BorderLayout.NORTH); container.add(canvas,BorderLayout.CENTER); }

Darwing: code fragment 2 public static void main(String[] args) { MyExample myDrawing = new MyExample(); myDrawing.setDefaultCloseOperation(JFrame. EXIT_ON_CLOSE); myDrawing.setSize(300,300); myDrawing.setVisible(true); }

Student activity 11.8 (homework)

Summary How to create various GUI components, in particular, JFrame, JPanel, JButton, JTextfield, JLabel. How to use layout managers for containers, in particular, FLowLayout, GridLayout and BorderLayout. How to use the graphics object to draw graphics, in particular how to use the paintComponent method.