DM550 / DM857 Introduction to Programming. Peter Schneider-Kamp

Similar documents
DM503 Programming B. Peter Schneider-Kamp.

DM503 Programming B. Peter Schneider-Kamp.

Graphic User Interfaces. - GUI concepts - Swing - AWT

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

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

Introduction to the JAVA UI classes Advanced HCI IAT351

Learn Java Programming, Dr.Hashamdar. Getting Started with GUI Programming

DM537 Object-Oriented Programming. Peter Schneider-Kamp.

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

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!

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

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

Part I: Learn Common Graphics Components

JComponent. JPanel. JFrame. JFrame JDialog, JOptionPane. JPanel. JPanel

Systems Programming Graphical User Interfaces

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

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

Window Interfaces Using Swing Objects

Dr. Hikmat A. M. AbdelJaber

Layouts and Components Exam

Chapter 13 Lab Advanced GUI Applications

Introduction. Introduction

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

Building Java Programs Bonus Slides

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

2110: GUIS: Graphical User Interfaces

Chapter 13 Lab Advanced GUI Applications Lab Objectives. Introduction. Task #1 Creating a Menu with Submenus

User interfaces and Swing

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

JLayeredPane. Depth Constants in JLayeredPane

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

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

COSC 123 Computer Creativity. Graphics and Events. Dr. Ramon Lawrence University of British Columbia Okanagan

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

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

Window Interfaces Using Swing Objects

Graphics. Lecture 18 COP 3252 Summer June 6, 2017

INTRODUCTION TO (GUIS)

CS 251 Intermediate Programming GUIs: Components and Layout

Using Several Components

Java Programming Lecture 6

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

Programming graphics

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

Building Graphical User Interfaces. Overview

Building Graphical User Interfaces. GUI Principles

Queen s University Faculty of Arts and Science School of Computing CISC 124 Final Examination December 2004 Instructor: M. Lamb

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

Graphical User Interfaces 2

Chapter 12 GUI Basics

1.00 Lecture 14. Lecture Preview

Object-Oriented Programming Design. Topic : User Interface Components with Swing GUI Part III

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

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

Class 14: Introduction to the Swing Toolkit

Java continued. Chapter 8 ALERT ALERT. Last week. MCQ test next week. This time. This place. Closed book. Assignment #2 is for groups of 3

Overview. Building Graphical User Interfaces. GUI Principles. AWT and Swing. Constructing GUIs Interface components GUI layout Event handling

COMPSCI 230. Software Design and Construction. Swing

Together, the appearance and how user interacts with the program are known as the program look and feel.

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

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

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

Programming Mobile Devices J2SE GUI

Chapter 6: Graphical User Interfaces

CSSE 220. Event Based Programming. Check out EventBasedProgramming from SVN

Event Driven Programming

import javax.swing.*; import java.awt.*; import java.awt.event.*;

CPS122 Lecture: Graphical User Interfaces and Event-Driven Programming

Graphical User Interfaces. Comp 152

Computer Science 210: Data Structures. Intro to Java Graphics

Graphical User Interfaces 2

Swing/GUI Cheat Sheet

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

Graphical User Interfaces (GUIs)

Class 16: The Swing Event Model

Calculator Class. /** * Create a new calculator and show it. */ public Calculator() { engine = new CalcEngine(); gui = new UserInterface(engine); }

CPS122 Lecture: Graphical User Interfaces and Event-Driven Programming

Jonathan Aldrich Charlie Garrod

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

Hanley s Survival Guide for Visual Applications with NetBeans 2.0 Last Updated: 5/20/2015 TABLE OF CONTENTS

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

To gain experience using GUI components and listeners.

Graphical interfaces & event-driven programming

Java Graphical User Interfaces

A Simple Text Editor Application

Graphical User Interfaces 2

Top-Level Containers

Swing - JLabel. Adding a text (and HTML) labels to a GUI

Graphical User Interface (GUI) and Object- Oriented Design (OOD)

Attempt FOUR questions Marking Scheme Time: 120 mins

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

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

Chapter 12 Advanced GUIs and Graphics

Summary Chapter 25 GUI Components: Part 2

JAVA NOTES GRAPHICAL USER INTERFACES

Java. GUI building with the AWT

Unit 7: Event driven programming

Transcription:

DM550 / DM857 Introduction to Programming Peter Schneider-Kamp petersk@imada.sdu.dk http://imada.sdu.dk/~petersk/dm550/ http://imada.sdu.dk/~petersk/dm857/

GRAPHICAL USER INTERFACES 2

HelloWorld Reloaded Java standard GUI package is Swing from popup message to professional user interface Example: import javax.swing.*; public class HelloWorldSimple { public static void main(string[] args) { JOptionPane.showMessageDialog(null, "Hello World!"); more challenging to do anything more complicated multi-threaded event-driven model-based UI design :-o 3

Dialogs user dialogs are created using JDialog class basically like JFrame (next slide), but with a parent window often used via static JOptionPane methods Example: Object[] options = {1, 2, 3, 4, 5, 10, 23, 42; Object result = JOptionPane.showInputDialog(null, "Select number", "Input", JOptionPane.INFORMATION_MESSAGE, null, options, options[0]); int selectedint = (Integer) result; 4

Creating a Window windows are represented by objects of class JFrame constructor gets title displayed at top of window Example: JFrame window = new JFrame("My first window!"); window.setsize(400, 250); // set size of window to 400x250 window.setlocation(50, 50); // top-left corner at (50, 50) // exit program when window is closed window.setdefaultcloseoperation(jframe.exit_on_close); window.setvisible(true); // show window on the screen 5

Creating Content content is placed in objects of class JPanel on these we can either draw directly on it using the paintcomponent method add ready-made components using the add method every window has a JPanel as its main content pane Example 1 (draw directly): public class MyPanel extends JPanel { public void paintcomponent(graphics g) { super.paintcomponent(g); g.drawstring("my first panel!", 100, 100); 6

Creating Content content is placed in objects of class JPanel on these we can either draw directly on it using the paintcomponent method add ready-made components using the add method every window has a JPanel as its main content pane Example 2 (add a button): JButton button = new JButton("My first button!"); button.addactionlistener(new ButtonHandler()); JPanel panel = new JPanel(); panel.add(button); window.setcontentpane(panel); window.pack(); 7

Listeners and Events events = changes in the user interface mouse movement, key pressed, button clicked, listeners = objects that respond to events Example (ActionListener for button from previous slide): import java.awt.*; import java.awt.event.*; public class ButtonHandler implements ActionListener { public void actionperformed(actionevent e) { System.exit(0); 8

Mouse Events interface MouseListener for mouse events needs to be added using addmouselistener methods often component class implementing the interface itself Example (panel that changes color during click): public class Clicky extends JPanel implements MouseListener { public Clicky() { this.addmouselistener(this); public void mousepressed(mouseevent event) { this.setbackground(color.red); public void mousereleased(mouseevent evt) { this.setbackground(color.gray); 9

Anonymous Event Handlers interface MouseListener for mouse events needs to be added using addmouselistener methods alternatively use anonymous class Example (panel that changes color during click): public class Clicky extends JPanel { public Clicky() { this.addmouselistener(new MouseAdapter() { public void mousepressed(mouseevent event) { this.setbackground(color.red); public void mousereleased(mouseevent evt) { this.setbackground(color.gray); ); s 10

Colors colors are represented by objects of class Color define by RGB values or use pre-defined constants Example: import java.awt.*; JPanel panel = new JPanel(new BorderLayout()); JPanel panela = new JPanel(); panela.setbackground(new Color(192, 64,128)); // strange color JPanel panelb = new JPanel(); panelb.setbackground(color.red)); panel.add(panela, BorderLayout.NORTH); panel.add(panelb, BorderLayout.SOUTH); 11

Labels simple component to display strings or images labels are objects of class JLabel text, colors, fonts etc. can be changed during runtime Example: JLabel label = new JLabel("My first label!", JLabel.CENTER); label.settext("something more interesting"); label.setforeground(color.blue); label.setbackground(color.yellow); label.setopaque(true); // background filled label.setfont(new Font("Serif", Font.ITALIC, 15)); 12

Fonts fonts represented by objects of class Font constructor takes name, style, and point size see Java API documentation for more examples Example: import java.awt.*; Font font = new Font("Arial", Font.BOLD, 42); JButton button = new JButton("Click me!"); button.setfont(font); 13

Borders borders are represented by objects of class Border borders can be added to any component typically created using static methods in BorderFactory Example: JPanel panel = new JPanel(new GridLayout(3,3)); for (int i = 0; i < 9; i++) { JPanel subpanel = new JPanel(); subpanel.setborder(borderfactory.createlineborder( Color.BLACK)); panel.add(subpanel); 14

Panel Layout layout = spatial organization of components components can be either organized by absolute coordinates organized by an object of class LayoutManager Example 1 (layout with BorderLayout): JPanel panel = new JPanel(new BorderLayout()); panel.add(new JButton("North"), BorderLayout.NORTH); panel.add(new JButton("Center"), BorderLayout.CENTER); panel.add(new JButton("West"), BorderLayout.WEST); panel.add(new JButton("South"), BorderLayout.SOUTH); panel.add(new JButton("East"), BorderLayout.EAST); 15

Panel Layout layout = spatial organization of components components can be either organized by absolute coordinates organized by an object of class LayoutManager Example 2 (layout with GridLayout): JPanel panel = new JPanel(new GridLayout(2,3)); panel.add(new JButton("North")); panel.add(new JButton("Center")); panel.add(new JButton("West")); panel.add(new JButton("South")); panel.add(new JButton("East")); 16

Basic Components buttons represented by objects of class JButton Example (disabled button with text label): JButton button = new JButton("Big, bad, and ugly!"); button.addactionlistener(new MyButtonHandler()); button.setenabled(false); check boxes represented by objects of class JCheckBox Example (initially selected two-state check box): JCheckBox checkbox = new JCheckBox("more money!", true); boolean wantsmore = checkbox.isselected(); 17

Basic Components selectable options represented by objects of class JComboBox Example (select from a list of numbers): Object[] options = {1, 2, 3, 4, 5, 10, 23, 42; JComboBox optionbox = new JComboBox(options); optionbox.setselected(6); optionbox.addactionlistener(new MySelectionHandler()); int selectedint = (Integer) optionbox.getselecteditem(); 18

Basic Components selection on a range of values by objects of class JSlider Example (select percentage from 0 to 100, initally 50): JSlider percent = new JSlider(0, 100, 50); percent.setmajortickspacing(25); percent.setminortickspacing(5); percent.setpaintticks(true); percent.setpaintlabels(true); percent.addchangelistener(new MyChangeHandler()); 19

Text Components text fields represented by objects of class JTextField Example (text field for email input): JTextField email = new JTextField(); String useremail = checkrfc5322(email.gettext()); text areas represented by objects of class JTextArea Example (full-window scrollable editable text entry area): JTextArea entryarea = new JTextArea(5, 20); textarea.seteditable(true); JScrollPane scrollpane = new JScrollPane(textArea); window.getcontentpane().add(scrollpane); 20

Menus menus represented by JMenuBar, JMenu, and JMenuItem Example (menu bar with a single file menu with three items): JMenu file = new JMenu("File"); // create drop down menu JMenuItem open = new JMenuItem("Open"); file.add(open); open.addactionlistener(this); JMenuItem save = new JMenuItem("Save"); file.add(save); save.addactionlistener(this); JMenuItem saveas = new JMenuItem("Save as..."); file.add(saveas); saveas.addactionlistener(this); JMenuBar menubar = new JMenuBar(); // menu bar menubar.add(file); 21

Menus menus represented by JMenuBar, JMenu, and JMenuItem Example (menu bar with a single file menu with three items): public class MyMenu implements ActionListener { public MyMenu() { // see previous slide public void actionperformed(actionevent e) { // check which menu item was clicked and react 22