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

Slides:



Advertisements
Similar presentations
Java Software Development Paradigm Lecture # 12. Basics of GUI.
Advertisements

CMSC 341 Building Java GUIs. 09/26/2007 CMSC 341 GUI 2 Why Java GUI Development? Course is about Data Structures, not GUIs. We are giving you the opportunity.
Corresponds with Chapter 12
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie COMP 14 Introduction to Programming Adrian Ilie July 20, 2005.
Java Swing Recitation – 11/(20,21)/2008 CS 180 Department of Computer Science, Purdue University.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
GUI programming AWT(Abstract Windows Toolkit)-GUI components library when Java was introduced AWT was replaced by Swing components import javax.swing.*;
IEEM 110 Computing in Industrial Applications Basic User Interface in Java.
1 UFCE3T-15-M Object- oriented Design and Programming Block 3 GUI Programming Jin Sa.
CS102--Object Oriented Programming Lecture 19: – The Swing Package (II) Copyright © 2008 Xiaoyan Li.
1 GUI Elements in Java Nelson Padua-Perez Chau-Wen Tseng Department of Computer Science University of Maryland, College Park.
COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004.
1 CMSC 132: Object-Oriented Programming II Nelson Padua-Perez William Pugh Department of Computer Science University of Maryland, College Park.
Chapter 13: Advanced GUIs and Graphics J ava P rogramming: From Problem Analysis to Program Design, From Problem Analysis to Program Design, Second Edition.
GUI and event-driven programming An introduction.
Chapter 8: Graphical User Interfaces Objectives - by the end of this chapter, you should be able to do the following: –write a simple graphical user interface.
Java Programming Chapter 10 Graphical User Interfaces.
Chapter 13 Advanced GUIs and Graphics. Chapter Objectives Learn about applets Explore the class Graphics Learn about the class Font Explore the class.
Java Programming: From Problem Analysis to Program Design, 4e Chapter 12 Advanced GUIs and Graphics.
Applets and Frames CS 21a: Introduction to Computing I First Semester,
CSE 219 Computer Science III Graphical User Interface.
Introduction to GUI in Java 1. Graphical User Interface Java is equipped with many powerful,easy to use GUI component such as input and output dialog.
Introduction to Java Applet Programs Section 1.3Intro. to Java Applet Programs: a Greeter Applet Section 3.7Graphical/Internet Java: Applet: An Einstein.
Graphical User Interface CSI 1101 N. El Kadri. Plan - agenda Graphical components Model-View-Controller Observer/Observable.
Java GUI building with Swing. 2 AWT (Abstract Window Toolkit) Present in all Java implementations Described in (almost) every Java textbook Adequate for.
Adding Graphics to a Frame Application Applets: Can generate drawings by overriding paint Frame: Do not draw directly on a frame. Draw graphics on a JPanel.
Java Programming: Advanced Topics 1 Common Elements of Graphical User Interfaces Chapter 6.
GUI Basics.
10/24/20151 Java GUI Programming. 10/24/20152 What is a GUI? Java has standard packages for creating custom Graphical User Interfaces Some of the fundamental.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
JFrame and JPanel CSCI 201L Jeffrey Miller, Ph.D. HTTP :// WWW - SCF. USC. EDU /~ CSCI 201 USC CSCI 201L.
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
CompSci 100E 35.1 Graphical User Interfaces: GUIs  Components  Flat Layouts  Hierarchical Layouts  Designing a GUI  Coding a GUI.
Swing Differences between Swing and AWT Naming Conventions All Swing components begin with a capital J -- JPanel, JButton, JScrollBar, JApplet, etc..
Object Oriented programming Instructor: Dr. Essam H. Houssein.
Applets and Frames. Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L14: GUI Slide 2 Applets Usually.
MIT-AITI 2004 – Lecture 16 Introduction to Swing.
GUI Basics. What is GUI? A graphical user interface (GUI) is a type of user interface item that allows people to interact with programs in more ways than.
1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1.
University of Limerick1 Software Architecture Java Layout Managers.
Java GUI. Graphical User Interface (GUI) a list a button a text field a label combo box checkbox.
1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces (GUIs)
Introduction to Java Applet Programs Section 1.3Intro. to Java Applet Programs: a Greeter Applet Section 3.7Graphical/Internet Java: Applet: An Einstein.
GUI Basics. Agenda What GUI How to make in java Creating frames Frequently used GUI components Layout Managers.
Review_6 AWT, Swing, ActionListener, and Graphics.
Computer Science 209 GUIs Model/View/Controller Layouts.
Basics of GUI Programming Chapter 11 and Chapter 22.
Creating a Window. A basic window in Java is represented by an object of the class Window in the package java.awt.
1 Layout Managers Layout managers –Provided for arranging GUI components –Provide basic layout capabilities –Processes layout details –Programmer can concentrate.
Graphical User Interface (GUI) Two-Dimensional Graphical Shapes.
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
Graphical User Interface (GUI)
Applets. 9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L12: Applets Slide 2 Applets Usually.
Introduction to GUI Programming in Java: Frames, Simple Components, and Layouts.
Getting Started with GUI Programming Chapter 10 CSCI 1302.
CPCS 391 Computer Graphics Lab One. Computer Graphics Using Java What is Computer Graphics: Computer graphics are graphics created using computers and,
Dept. of CSIE, National University of Tainan 10/21/2012 Arranging Components on a User Interface.
GUI.1 Graphical User Interfaces GUIs. GUI.2 The Plan Components Flat Layouts Hierarchical Layouts Designing a GUI Coding a GUI.
Object-Orientated Analysis, Design and Programming
Graphical User Interfaces
Graphical User Interfaces -- GUIs
Swing JComponents.
GUIs Model/View/Controller Layouts
Java Swing.
Chapter 13: Advanced GUIs and Graphics
Creating Graphical User Interfaces
Chapter 10 Getting Started with Graphics Programming
Introduction to Graphical Interfaces in Java: AWT and Swing
Advanced GUIs and Graphics
Graphical User Interface
Presentation transcript:

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.