The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie COMP 14 Introduction to Programming Adrian Ilie July 20, 2005.

Slides:



Advertisements
Similar presentations
Introduction to Swing Components Chapter 14. Part of the Java Foundation Classes (JFC) Provides a rich set of GUI components Used to create a Java program.
Advertisements

Graphical User Interfaces
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
(C) 2010 Pearson Education, Inc. All rights reserved. Java™ How to Program, 8/e.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Slides prepared by Rose Williams, Binghamton University Chapter 17 Swing I.
Unit 131 GUI Layout Managers Learning Outcomes oList and distinguish between the four most common, standard layout managers in Java. oUse these and other.
Inheritance Review CSC 171 FALL 2004 LECTURE 19. READING Read Horstmann, Chapter 11 Look at Chapter 12 – Will not be on MT or Final – One lab Begin Reading.
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie COMP 14 Introduction to Programming Adrian Ilie July 21, 2005.
COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004.
Chapter 13: Advanced GUIs and Graphics J ava P rogramming: From Problem Analysis to Program Design, From Problem Analysis to Program Design, Second Edition.
Unit 11 Object-oriented programming: Graphical user interface Jin Sa.
GUI and event-driven programming An introduction.
Contructing GUI’s in Java Implemented in the Swing API Imported into your programs by: import javax.swing.*; Most Swing programs also need the AWT packages.
Java Programming Chapter 10 Graphical User Interfaces.
OOP (Java): Layout/ OOP Objectives – –describe the basic layout managers for GUIs Semester 2, GUI Layout.
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.
GUI programming Graphical user interface-based programming.
GUI Components and Design Here we add one more component to our programs, JButtons –JButtons can only be inserted into JPanels (or JApplets) –Clicking.
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.
Java Methods A & AB Object-Oriented Programming and Data Structures Maria Litvin ● Gary Litvin Copyright © 2006 by Maria Litvin, Gary Litvin, and Skylight.
Timer class and inner classes. Processing timer events Timer is part of javax.swing helps manage activity over time Use it to set up a timer to generate.
CompSci 100E 35.1 Graphical User Interfaces: GUIs  Components  Flat Layouts  Hierarchical Layouts  Designing a GUI  Coding a GUI.
Object Oriented programming Instructor: Dr. Essam H. Houssein.
CSCI Swing1 The Abstract Windowing Toolkit Since Java was first released, its user interface facilities have been a significant weakness –The Abstract.
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.
Creating Applets. What is an applet? What is an applet? A Java program that runs in a web browser. A Java program that runs in a web browser. An applet.
Topic 13 List Boxes. JList Generates an ListSelectionEvent Event monitored by ListSelectionListener ListSelectionListener invokes method valueChanged.
1 GUI programming Graphical user interface-based programming Chapter G1 (pages )
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.
Computer Science 209 GUIs Model/View/Controller Layouts.
Slides prepared by Rose Williams, Binghamton University ICS201 Lecture 14 : Swing II King Fahd University of Petroleum & Minerals College of Computer Science.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Tutorial 2 – Welcome Application Introduction to Graphical.
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.
Java Layouts CSIS 3701: Advanced Object Oriented Programming.
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.
GUI.1 Graphical User Interfaces GUIs. GUI.2 The Plan Components Flat Layouts Hierarchical Layouts Designing a GUI Coding a GUI.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7 ( Book Chapter 14) GUI and Event-Driven Programming.
Chapter 7 A First Look at GUI Applications Layout Managers.
Introduction Many Java application use a graphical user interface or GUI (pronounced “gooey”). A GUI is a graphical window or windows that provide interaction.
Java Applet What is a Java Applet? How is applet compiled?
COMP 14 Introduction to Programming
Graphical User Interfaces
Graphical User Interfaces -- GUIs
Swing JComponents.
Chapter 13: Advanced GUIs and Graphics
Timer class and inner classes
Graphical user interface-based programming
Creating Graphical User Interfaces
Chapter 7-3 (Book Chapter 14)
CiS 260: App Dev I Chapter 6: GUI and OOD.
Advanced GUIs and Graphics
Graphical User Interface
Presentation transcript:

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie COMP 14 Introduction to Programming Adrian Ilie July 20, 2005

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 2 Last Week of Class Basic programming concepts ♦ Review ♦ Finish assignment 6 Java applets ♦ Compose a web page with a Java applet Advance GUI (beyond JOptionPane) HTML

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 3 Advanced GUI class JFrame ♦ Methods ♦ Concept of Inheritance ♦ Events class JApplet

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 4 GUIs We used JOptionPane to create a GUI Calculator using dialog boxes. We can create more complex GUIs using Java.

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 5 Inheritance JFrame is a class provided by the package javax.swing Instead of instantiating an object of the JFrame class, we're going to extend the JFrame class (called inheritance). The new class "inherits" features (including methods and variables) from the existing class -- big time-saver! We can use all of the methods and variables from JFrame, while adding our own.

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 6 Extending JFrame Use the modifier extends, which is a reserved word JFrame is the superclass BigGUI is the subclass It is ok to learn the recipe public class BigGUI extends JFrame { }

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 7 Next Step We'll need a constructor for BigGUI ♦ set the window title setTitle ♦ set the window size setSize ♦ set the default operation when the close button is pressed setDefaultCloseOperation ♦ display the window setVisible(true) We'll need a main method ♦ create an object of the BigGUI class (which will call the constructor)

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 8 import javax.swing.*; // needed for JFrame public class BigGUI extends JFrame { private final static String TITLE = “Big GUI"; private final static int WIDTH = 700; private final static int HEIGHT = 600; public BigGUI() // constructor { setTitle(TITLE); setSize(WIDTH, HEIGHT); setDefaultCloseOperation(EXIT_ON_CLOSE); setVisible(true); } public static void main(String[] args) { BigGUI gui = new BigGUI(); } }

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 9 BigGUI.java Create JFrame and test. JFrame content pane

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 10 Adding Things Access the content pane so we can add things (buttons, labels, images) ♦ Container class is provided by the java.awt package ♦ add import statement for java.awt Then, we set the layout type and add things to the content pane Container content = getContentPane();

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 11 Layout Managers FlowLayout ♦ default ♦ components are added left to right, top to bottom BorderLayout ♦ consists of NORTH, SOUTH, EAST, WEST, CENTER regions ♦ size of CENTER region depends on the number of components in the EAST and WEST regions GridLayout ♦ define number of rows and columns to get equally sized cells ♦ cells are filled left to right, top to bottom

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 12 BorderLayout Select layout for BigGUI as BorderLayout When adding components with BorderLayout, you have to specify the section (using NORTH, SOUTH, EAST, WEST, CENTER constants from BorderLayout class) content.setLayout(new BorderLayout()); content.add(item, BorderLayout.SECTION);

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 13 BigGUI.java Get content pane and set layout.

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 14 JLabels We'll identify the regions of the BorderLayout with labels (text areas) JLabel is a region of text ♦ can be assigned an alignment (left-justified, right- justified, centered) Text can be changed with setText method JLabel northLabel = new JLabel ("NORTH", SwingConstants.CENTER); JLabel southLabel = new JLabel ("SOUTH"); northLabel.setText ("Changed Text");

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 15 Adding Labels Container content = getContentPane(); content.setLayout (new BorderLayout()); JLabel northLabel = new JLabel ("NORTH", SwingConstants.RIGHT); content.add (northLabel, BorderLayout.NORTH); JLabel southLabel = new JLabel ("SOUTH"); content.add (southLabel, BorderLayout.SOUTH); JLabel westLabel = new JLabel ("WEST", SwingConstants.CENTER); content.add (westLabel, BorderLayout.WEST);

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 16 Adding Labels After adding stuff to the content pane... setVisible(true);

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 17 BigGUI.java Add labels.

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 18 Colors Set the background color of the content pane Set the foreground color of the text (JLabels) Use Color class from the java.awt package Available colors pg. 734 ♦ constants (but lowercase) Methods ♦ darker() - darkens the color ♦ brighter() - brightens the color content.setBackground(Color.blue.darker().darker()); northLabel.setForeground(Color.white);

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 19 Adding Images We can create images and associate them with labels ImageIcon ♦ use JPG or GIF images Use setIcon method from JLabel class centerLabel.setIcon (image); ImageIcon image = new ImageIcon ("img/0.gif"); filename

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 20 label.setVerticalTextPosition(vposition); label.setHorizontalTextPosition(hposition); Text Position Relative to Icon SwingConstants.LEFT SwingConstants.CENTER SwingConstants.RIGHT SwingConstants.TOP SwingConstants.CENTER SwingConstants.BOTTOM

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 21 BigGUI.java Add icon.

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 22 To do Read ch. 6: pp ( in old book) - important Get AFS for web space Homework 6 Homework 7 will be assigned