Containers and Components

Similar documents
Graphical User Interface (GUI)

Part I: Learn Common Graphics Components

Graphical User Interface (GUI)

Top-Level Containers

Laying Out Components. What is Widget Layout?

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

Dr. Hikmat A. M. AbdelJaber

Basicsof. JavaGUI and SWING

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

No SVN checkout today. Object-Oriented Design

CSSE 220 Day 19. Object-Oriented Design Files & Exceptions. Check out FilesAndExceptions from SVN

CSSE 220 Day 19. Object-Oriented Design Files & Exceptions. Check out FilesAndExceptions from SVN

CSC 161 SPRING 17 LAB 2-1 BORDERLAYOUT, GRIDLAYOUT, AND EVENT HANDLING

Layout. Dynamic layout, Swing and general layout strategies

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

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

Layout. Dynamic layout Layout design pattern Layout strategies. 2.6 Layout 2

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

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

Introduction to the JAVA UI classes Advanced HCI IAT351

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

Graphical User Interfaces in Java - SWING

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

CPS122 Lecture: Graphical User Interfaces and Event-Driven Programming

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

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

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

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

Layout. Dynamic layout Layout design pattern Layout strategies

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

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

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

Graphical User Interfaces. Comp 152

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!

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

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

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

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

Swing UI. Powered by Pentalog. by Vlad Costel Ungureanu for Learn Stuff

Parts of a Contract. Contract Example. Interface as a Contract. Wednesday, January 30, 13. Postcondition. Preconditions.

Object Oriented Design & Patterns. Part 1

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

CS 251 Intermediate Programming GUIs: Components and Layout

Agenda. Container and Component

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

CS11 Java. Fall Lecture 4

CSE 1325 Project Description

Building Java Programs Bonus Slides

Human-Computer Interaction IS4300

Using Several Components

Unit 6: Graphical User Interface

This exam is closed textbook(s) and closed notes. Use of any electronic device (e.g., for computing and/or communicating) is NOT permitted.

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

Java: Graphical User Interfaces (GUI)

CONTENTS. Chapter 1 Getting Started with Java SE 6 1. Chapter 2 Exploring Variables, Data Types, Operators and Arrays 13

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

2110: GUIS: Graphical User Interfaces

Java. GUI building with the AWT

YouTube Break.

INTRODUCTION TO (GUIS)

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

CS 180 Fall 2006 Exam II

Java Programming Lecture 6

Chapter 6: Graphical User Interfaces

Summary Chapter 25 GUI Components: Part 2

BASICS OF GRAPHICAL APPS

Graphic User Interfaces. - GUI concepts - Swing - AWT

Window Interfaces Using Swing Objects

Building a GUI in Java with Swing. CITS1001 extension notes Rachel Cardell-Oliver

Sri Vidya College of Engineering & Technology

Programming Languages and Techniques (CIS120e)

CSE Lab 8 Assignment Note: This is the last lab for CSE 1341

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

Lecture 18 Java Graphics and GUIs

Graphical User Interfaces

Chapter 12 Advanced GUIs and Graphics

1.1 GUI. JFrame. import java.awt.*; import javax.swing.*; public class XXX extends JFrame { public XXX() { // XXX. init() main() public static

Hints for Assignment I

BM214E Object Oriented Programming Lecture 12

Window Interfaces Using Swing Objects

2IS45 Programming

CS 1316 Exam 3 Fall 2009

SWING - GROUPLAYOUT CLASS

GUI Programming. Chapter. A Fresh Graduate s Guide to Software Development Tools and Technologies

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

Arrays, Exception Handling, Interfaces, Introduction To Swing

Chapter 7: A First Look at GUI Applications

CS 2113 Software Engineering

JRadioButton account_type_radio_button2 = new JRadioButton("Current"); ButtonGroup account_type_button_group = new ButtonGroup();

CS11 Java. Fall Lecture 3

JFrame In Swing, a JFrame is similar to a window in your operating system

CSE 331 Software Design & Implementation

Swing/GUI Cheat Sheet

JFormDesigner 6 Documentation

Systems Programming Graphical User Interfaces

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

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

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

Commands. Written commands can be reused, cataloged, etc. Sometimes they also contain "undo" commands, too.

Transcription:

Containers and Components container A GUI has many components in containers. A container contains other components. A container is also a component; so a container may contain other containers. component add(component) component container component add(...) container component component add(component) component

Layout Managers A container uses a Layout Manager to manage the position and size of components. Container layoutmanager contains * Component layout components LayoutManager

Demo: Why a layout manager? compare a Java application and Visual C# application when resizing a window. In Java, the layout manager will rearrange or resize components. In Visual C#, the components disappear.

Layout Managers Classic Layout Managers are: BorderLayout (default for JFrame) FlowLayout (default for JPanel) BoxLayout GridLayout GridBagLayout CardLayout SpringLayout

add Layout Manager Use setlayout( ) to assign a Layout Manager: frame.setlayout( new FlowLayout( ) ); panel.setlayout( new GridLayout(3,4) );

Customizing a Layout Some layout managers give you control over the layout. FlowLayout, BorderLayout - set space between components static final int GAP = 8; FlowLayout layout = new FlowLayout( ); layout.setvgap( GAP ); layout.sethgap( GAP ); GridBagLayout - almost unlimited control

BorderLayout BorderLayout divides the container into 5 zones. use: container.add( component, WHERE ); If a zone is not used, other zones expand to use the space. CENTER gets the most space. NORTH WEST CENTER SOUTH EAST JButton button1 = new JButton("Button 1"); frame.add( button1, BorderLayout.EAST );

FlowLayout "flows" the components into the available space. preserves the original (or requested) size of each component. components are added left to right, in order. container.setlayout( new FlowLayout( ) ); JButton button1 = new JButton( "Button 1" ); JButton button2 = new JButton( "Button 2" ); container.add( button1 ); container.add( button2 );

CardLayout CardLayout lets you have different sets of components displayed at different times. One card is displayed at a time. Use next( ), first(), last() to change the displayed card. frame.setlayout( new CardLayout( ) ); // add buttons and panels to the cards contentpane.add( button1 ); contentpane.add( button2 );

GridLayout specify a grid size (rows,cols) in constructor. Components are added to a grid, in the order that they are added. GridLayout makes all components have same size. frame.setlayout( new GridLayout(3, 2) ); // (rows,cols) // add buttons to the grid frame.add( button1 ); frame.add( button2 ); frame.add( button3 );

BoxLayout BoxLayout puts components in a single row or column. It does not resize components. It allows different forms of component alignment. container.setlayout( /* vertical box layout */ new BoxLayout(container, BoxLayout.Y_AXIS) ); container.add( button1 ); container.add( button2 );

GridBagLayout and SpringLayout GridBagLayout and SpringLayout give you more control over the layout and sizing of components. can control margins, free space distribution, etc.

Newer Layout Managers GroupLayout - treat several components as a group, so they can all have the same size or alignment. Makes layouts look much more professional. FormLayout - layout a form containing labels and input areas in rows and columns, nicely aligned. It provides build-in data validators. Layout can be specified in text instead of Java code. FormLayout is a free, opensource component from http://www.jgoodies.com/freeware/libraries/forms/ AbsoluteLayout - put everything exactly where you say (like in VisualStudio)

Have a JFrame or Be a JFrame? Two styles of defining a UI class using JFrame: public class SwingExample { private JFrame frame;... public SwingExample( ) { frame = new JFrame( ); frame.setdefaultcloseoperation(... ); public class SwingExample extemds JFrame {... public SwingExample( ) { this.setdefaultcloseoperation(... ); initcomponents( ); "this" object is a JFrame. Don't create another one!!

BlueJ: example of nested containers Container with a row of buttons (buttons based on user prefs) text component Container with 2 components inside

Lightweight Containers A lightweight container is one that is not a window. You must place it inside another container. Cannot be drawn on screen by itself. JPanel simple rectangular area - most common JTabbedPane - multiple panels with a tab on top JSplitPane JInternalFrame - like a JFrame inside a JFrame

Nesting Containers Example: a panel containing a text field and a button JTextField textfield = new JTextField(12); JButton button = new JButton("Login"); JPanel panel = new JPanel( ); panel.add( textfield ); panel.add( button ); Nesting: put the JPanel inside a JFrame JFrame frame = new JFrame( ); frame.add( panel );

Benefit of LayoutManager What are the benefits of separating LayoutManager from the container classes? Why don't we put the layout code inside each container?