CS 251 Intermediate Programming GUIs: Components and Layout

Similar documents
Introduction to the JAVA UI classes Advanced HCI IAT351

PIC 20A GUI with swing

CS 251 Intermediate Programming GUIs: Event Listeners

CompSci 230 S Programming Techniques. Basic GUI Components

What is Widget Layout? Laying Out Components. Resizing a Window. Hierarchical Widget Layout. Interior Design for GUIs

Topic 9: Swing. Swing is a BIG library Goal: cover basics give you concepts & tools for learning more

Topic 9: Swing. Why are we studying Swing? GUIs Up to now: line-by-line programs: computer displays text user types text. Outline. 1. Useful & fun!

Graphics programming. COM6516 Object Oriented Programming and Design Adam Funk (originally Kirill Bogdanov & Mark Stevenson)

Lecture 5: Java Graphics

CSE 143. Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT

Introduction to Graphical User Interfaces (GUIs) Lecture 10 CS2110 Fall 2008

Outline. Topic 9: Swing. GUIs Up to now: line-by-line programs: computer displays text user types text AWT. A. Basics

Part 3: Graphical User Interface (GUI) & Java Applets

PROGRAMMING DESIGN USING JAVA (ITT 303) Unit 7

Laying Out Components. What is Widget Layout?

Graphic User Interfaces. - GUI concepts - Swing - AWT

Handout 14 Graphical User Interface (GUI) with Swing, Event Handling

Graphics. Lecture 18 COP 3252 Summer June 6, 2017

Swing. By Iqtidar Ali

Final Exam CS 251, Intermediate Programming December 13, 2017

All the Swing components start with J. The hierarchy diagram is shown below. JComponent is the base class.

Graphical User Interface (GUI)

Welcome to CIS 068! 1. GUIs: JAVA Swing 2. (Streams and Files we ll not cover this in this semester, just a review) CIS 068

Graphical User Interfaces. Swing. Jose Jesus García Rueda

Starting Out with Java: From Control Structures Through Objects Sixth Edition

17 GUI API: Container 18 Hello world with a GUI 19 GUI API: JLabel 20 GUI API: Container: add() 21 Hello world with a GUI 22 GUI API: JFrame: setdefau

Window Interfaces Using Swing Objects

Course Status Networking GUI Wrap-up. CS Java. Introduction to Java. Andy Mroczkowski

Lab 4. D0010E Object-Oriented Programming and Design. Today s lecture. GUI programming in

Graphical User Interface (GUI)

1.00 Lecture 14. Lecture Preview

Class 14: Introduction to the Swing Toolkit

Control Flow: Overview CSE3461. An Example of Sequential Control. Control Flow: Revisited. Control Flow Paradigms: Reacting to the User

CSE 331. Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT

Lecture 18 Java Graphics and GUIs

Chapter 12 Advanced GUIs and Graphics

Window Interfaces Using Swing Objects

Introduction to Graphical Interface Programming in Java. Introduction to AWT and Swing

Graphical User Interface (GUI) components in Java Applets. With Abstract Window Toolkit (AWT) we can build an applet that has the basic GUI

News and info. Array. Feedback. Lab 4 is due this week. It should be easy to change the size of the game grid.

Command-Line Applications. GUI Libraries GUI-related classes are defined primarily in the java.awt and the javax.swing packages.

Summary Chapter 25 GUI Components: Part 2

Graphical User Interface (GUI)

Graphical User Interfaces (GUIs)

Introduction p. 1 JFC Architecture p. 5 Introduction to JFC p. 7 The JFC 1.2 Extension p. 8 Swing p. 9 Drag and Drop p. 16 Accessibility p.

Java & Graphical User Interface II. Wang Yang wyang AT njnet.edu.cn

CSE 331 Software Design & Implementation

Heavyweight with platform-specific widgets. AWT applications were limited to commonfunctionality that existed on all platforms.

Java: Graphical User Interfaces (GUI)

Java IDE Programming-I

BASICS OF GRAPHICAL APPS

Chapter 6: Graphical User Interfaces

Resizing a Window. COSC 3461: Module 5B. What is Widget Layout? Size State Transitions. What is Widget Layout? Hierarchical Widget Layout.

11/6/15. Objec&ves. RouleQe. Assign 8: Understanding Code. Assign 8: Bug. Assignment 8 Ques&ons? PROGRAMMING PARADIGMS

Agenda. Programming Seminar. By: dr. Amal Khalifa. Coordinate systems Colors Fonts Drawing shapes Graphics2D API

Layout. Dynamic layout, Swing and general layout strategies

CSE 331. Event- driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT

encompass a group of features for building Graphical User Interfaces (GUI).

Top-Level Containers

Announcements. Introduction. Lecture 18 Java Graphics and GUIs. Announcements. CSE 331 Software Design and Implementation

Building Java Programs Bonus Slides

DM503 Programming B. Peter Schneider-Kamp.

Example: Building a Java GUI

Graphical User Interfaces. Comp 152

Example: Building a Java GUI

Java Swing. Lists Trees Tables Styled Text Components Progress Indicators Component Organizers

Java Programming Lecture 6

GUI and its COmponent Textfield, Button & Label. By Iqtidar Ali

CompSci 125 Lecture 17. GUI: Graphics, Check Boxes, Radio Buttons

SELF-STUDY. Glossary

China Jiliang University Java. Programming in Java. Java Swing Programming. Java Web Applications, Helmut Dispert

Tool Kits, Swing. Overview. SMD158 Interactive Systems Spring Tool Kits in the Abstract. An overview of Swing/AWT

CSEN401 Computer Programming Lab. Topics: Graphical User Interface Window Interfaces using Swing

2110: GUIS: Graphical User Interfaces

Lecture 3: Java Graphics & Events

Datenbank-Praktikum. Universität zu Lübeck Sommersemester 2006 Lecture: Swing. Ho Ngoc Duc 1

GUI Basics. Object Orientated Programming in Java. Benjamin Kenwright

Packages: Putting Classes Together

Chapter 14. More Swing

INTRODUCTION TO (GUIS)

Frames, GUI and events. Introduction to Swing Structure of Frame based applications Graphical User Interface (GUI) Events and event handling

KF5008 Program Design & Development. Lecture 1 Usability GUI Design and Implementation

What is Widget Layout? COSC 3461 User Interfaces. Hierarchical Widget Layout. Resizing a Window. Module 5 Laying Out Components

JLayeredPane. Depth Constants in JLayeredPane

Java Swing. based on slides by: Walter Milner. Java Swing Walter Milner 2005: Slide 1

Computer Science 210: Data Structures. Intro to Java Graphics

Sri Vidya College of Engineering & Technology

Chapter 8. Java continued. CS Hugh Anderson s notes. Page number: 264 ALERT. MCQ test next week. This time. This place.

The Abstract Windowing Toolkit. Java Foundation Classes. Swing. In April 1997, JavaSoft announced the Java Foundation Classes (JFC).

CS11 Java. Fall Lecture 4

Systems Programming Graphical User Interfaces

Java Swing. Recitation 11/(20,21)/2008. CS 180 Department of Computer Science, Purdue University

The JFrame Class Frame Windows GRAPHICAL USER INTERFACES. Five steps to displaying a frame: 1) Construct an object of the JFrame class

Programming Mobile Devices J2SE GUI

Programming graphics

Graphics User Defined Forms, Part I

More Swing. Chapter 14. Chapter 14 1

Chapter 13 GUI Basics. Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All rights reserved.

10/23/2008. CSG 170 Round 6. Prof. Timothy Bickmore. Quiz. Open book / Open notes 15 minutes

Part I: Learn Common Graphics Components

Transcription:

CS 251 Intermediate Programming GUIs: Components and Layout Brooke Chenoweth University of New Mexico Fall 2017

import javax. swing.*; Hello GUI public class HelloGUI extends JFrame { public HelloGUI () { super (" Hello World GUI "); setdefaultcloseoperation ( JFrame. EXIT_ON_CLOSE ); } getcontentpane (). add ( new JLabel (" Hello, World " )); pack (); } public static void main ( String [] args ) { new HelloGUI (). setvisible ( true ); }

Java Packages We ll be using two major packages when writing our GUIs javax.swing Provides most of the GUI components. java.awt Provides graphics, fonts, layouts.

GUI components and containers java.awt.component Abstract class for graphics objects. java.awt.container Component that can contain other components. javax.swing.jcomponent Base class for all Swing components (except top-level containers)

Top-Level Containers JFrame top-level window JDialog temporary subwindow JApplet embed in web page, run in browser Top-level container is the root of a containment hierarchy. The content pane holds the components.

JFrame Top-level window with title and border. For main window of application, usually want to change default close operation from hide to exit. JFrame frame = new JFrame (" My Frame Title "); frame. setdefaultcloseoperation ( JFrame. EXIT_ON_CLOSE );

JDialog Temporary subwindow for messages, warnings, user input, etc. Display relative to a parent component (usually the main frame of the application) Often modal, blocking input to other windows in the program. JOptionPane provides methods to create many standard dialogs. JColorChooser and JFileChooser also useful. Use JDialog directly for custom work.

Buttons Check Boxes Labels Panels Text Areas Tables etc.... Swing Components Use the Java Tutorials and API Reference.

Appearance State Events Painting JComponent methods Containment Hierarchy Layout Size and Position

JComponent methods Appearance Borders Foreground and background colors Opaque Font Cursor State Events Painting Containment Hierarchy Layout Size and Position

Appearance State Name Tool Tip Visible Enabled Events Painting JComponent methods Containment Hierarchy Layout Size and Position

JComponent methods Appearance State Events Keyboard Mouse moves Mouse clicks Painting Containment Hierarchy Layout Size and Position

JComponent methods Appearance State Events Painting Force repaint Custom paint by overriding paintcomponent Containment Hierarchy Layout Size and Position

JComponent methods Appearance State Events Painting Containment Hierarchy Add/remove components Get parent component Get contained components Layout Size and Position

Appearance State Events Painting JComponent methods Containment Hierarchy Layout Preferred, Maximum, Minimum Size LayoutManager Size and Position

Appearance State Events Painting JComponent methods Containment Hierarchy Layout Size and Position Size in pixels Location

FlowLayout BorderLayout BoxLayout GridLayout GridBagLayout Layout Managers

FlowLayout Components in a row, wrapping as needed. Default for JPanel Row is centered by default.

import javax. swing.*; FlowLayout Example public class FlowLayoutDemo { public static void main ( String [] args ) { JFrame frame = new JFrame (" FlowLayout Demo "); frame. setdefaultcloseoperation ( JFrame. EXIT_ON_CLOSE ); JPanel panel = new JPanel (); // Defaults to FlowLayout panel. add ( new JButton (" One " )); panel. add ( new JButton (" Two " )); panel. add ( new JButton (" Three " )); panel. add ( new JButton (" Four " )); panel. add ( new JButton (" Five " )); } } frame. setcontentpane ( panel ); frame. pack (); frame. setvisible ( true );

BorderLayout Add components to center or border areas. PAGE START PAGE END LINE START LINE END CENTER Default for JFrame s content pane. Center area gets the most space. Don t need to use all areas.

BorderLayout Example import javax. swing.*; import java. awt. BorderLayout ; public class BorderLayoutDemo { public static void main ( String [] args ) { JFrame frame = new JFrame (" BorderLayout Demo "); frame. setdefaultcloseoperation ( JFrame. EXIT_ON_CLOSE ); JPanel panel = new JPanel ( new BorderLayout ()); panel. add ( new JButton (" Page Start "), BorderLayout. PAGE_START ); panel. add ( new JButton (" Page End "), BorderLayout. PAGE_END ); panel. add ( new JButton (" Line Start "), BorderLayout. LINE_START ); panel. add ( new JButton (" Line End "), BorderLayout. LINE_END ); panel. add ( new JButton (" Center "), BorderLayout. CENTER ); } } frame. setcontentpane ( panel ); frame. pack (); frame. setvisible ( true );

BoxLayout Stacks components vertically or places in horizontal row your choice. LINE AXIS PAGE AXIS Like FlowLayout with more functionality. Use invisible components to adjust spacing. Defined in Box class Rigid area fixed space between components Glue Specify where excess space should go Filler component with min, max, preferred size.

Panels A JPanel is a lightweight container to hold other components (including other panels) Default layout is FlowLayout Use to logically group components Panels in panels can provide powerful layout control.

Event Listeners Look at component to see what sort of listeners it can take. Implement listener interface and add to component. Listener interfaces with multiple methods generally have an adapter class that provides empty implementation.