Swing [part.1] Taken from Water Milner Eriq Muhammad Adams J |

Slides:



Advertisements
Similar presentations
Graphic User Interfaces Layout Managers Event Handling.
Advertisements

Introduction to JFC Swing Written by Adam Carmi. Agenda About JFC and Swing Pluggable Look and Feel Swing Components Borders Layout Management Events.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Chapter 14 GUI and Event-Driven Programming.
Object-Oriented Software Engineering Java with added Swing.
Graphical User Interfaces
GUI and Event-Driven Programming Part 2. Event Handling An action involving a GUI object, such as clicking a button, is called an event. The mechanism.
CPSC150 Week 12 Graphical User Interfaces Chapter 11.
Graphic User Interfaces Part 1. Typical GUI Screen from Microsoft Word What GUI “components” can you see? –Menus? Buttons? Labels? What else? –Anything.
PROGRAMMING REVIEW Lab 2 EECS 448 Dr Fengjun Li and Meenakshi Mishra.
GUI Basics: Introduction. Creating GUI Objects // Create a button with text OK JButton jbtOK = new JButton("OK"); // Create a label with text "Enter your.
Swing part-one Eriq Muhammad Adams J
Introduction to Java GUI Creating Graphical User Interfaces © copyright Bobby Hoggard / material may not be redistributed without permission.
Java Swing © Walter Milner 2005: Slide 1 Java Swing Walter Milner.
Java Programming Chapter 10 Graphical User Interfaces.
Introduction to GUI Java offers a great number of pre-defined classes to support the development of graphical user interfaces –These are broken down into.
Programming With Java ICS201 University Of Ha’il1 Chapter 17 Graphical User Interfaces Swing I.
Applets and Frames CS 21a: Introduction to Computing I First Semester,
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.
MIT AITI 2003 Lecture 17. Swing - Part II. The Java Event Model Up until now, we have focused on GUI's to present information (with one exception) Up.
Java GUI CSCE 190 – Java Instructor: Joel Gompert Mon, July 26, 2004.
Java GUIs and Graphics CNS Outline  Introduction  Events  Components  Layout managers  Drawing  Introduction  Events  Components  Layout.
עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling.
3461A Readings from the Swing Tutorial. 3461A Overview  The follow is the Table of Contents from the trail “Creating a GUI with JFC/Swing” in the “The.
GUIs in Java Swing, Events CS2110, SW Development Methods Readings: MSD, Chapter 12 Lab Exercise.
1 CSC111H Graphical User Interfaces (GUIs) Introduction GUIs in Java Understanding Events A Simple Application The Containment Hierarchy Layout Managers.
1 Outline 1 Introduction 2 Overview of Swing Components 3 JLabel 4 Event Handling 5 TextFields 6 How Event Handling Works 7 JButton 8 JCheckBox and JRadioButton.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
1 Graphical User Interfaces AWT and Swing packages Frames and Panels Components Nested Panels Images Reading for this Lecture: L&L, 3.9 – 3.11.
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -1 Lecture 3 - Graphical User Interfaces r GUI toolkits in Java API r JFrame r GUI components.
Java Methods A & AB Object-Oriented Programming and Data Structures Maria Litvin ● Gary Litvin Copyright © 2006 by Maria Litvin, Gary Litvin, and Skylight.
Java Swing Tutorial. Java Swing * A part of The JFC * Swing Java consists of Look and feel Accessibility Java 2D Drag and Drop, etc.
Object Oriented Programming Engr. M. Fahad Khan Lecturer, Software Engineering Department University of Engineering & Technology, Taxila.
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.
GUI Programming using NetBeans. RHS – SOC 2 GUI construction We have previously talked about elements in a (simple) GUI –Frames, Panes and Dialogs –Text.
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.
OOP (Java): GUI Intro/ OOP Objectives – –use an image viewer application to introduce Java's GUI features Semester 2,
Java Applet. Introductions Applet is java program that can be embedded into HTML pages Java applets runs on the java enables web browsers such as mozila.
1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1.
Creating a GUI with JFC/Swing. What are the JFC and Swing? JFC –Java Foundation Classes –a group of features to help people build graphical user interfaces.
Java GUI. Graphical User Interface (GUI) a list a button a text field a label combo box checkbox.
Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif.
Swing Components. Introduction Swing – A set of GUI classes – Part of the Java's standard library –Much better than the previous library: AWT Abstract.
GUI Basics. Agenda What GUI How to make in java Creating frames Frequently used GUI components Layout Managers.
Creating a Window. A basic window in Java is represented by an object of the class Window in the package java.awt.
Ajmer Singh PGT(IP) JAVA IDE Programming - I. Ajmer Singh PGT(IP) GUI (Graphical User Interface) It is an interface that uses a graphic entities along.
Java Programming, Second Edition Chapter Thirteen Understanding Swing Components.
Sadegh Aliakbary Sharif University of Technology Fall 2011.
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
Swing GUI Components So far, we have written GUI applications which can ‘ draw ’. These applications are simple, yet typical of all Java GUI applications.
Graphical User Interface (GUI)
5-1 GUIs and Events Rick Mercer. 5-2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces to respond.
CIS 270—Application Development II Chapter 11—GUI Components: Part I.
1 A Quick Java Swing Tutorial. 2 Introduction Swing – A set of GUI classes –Part of the Java's standard library –Much better than the previous library:
Java Programming Fifth Edition Chapter 13 Introduction to Swing Components.
1 Event Driven Programming with Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
Java Swing. Note - this presentation.. often needs to refer to source code which is too big to put on a slide So the source code is in a separate Word.
GUI 1: JFC and Swing Basics OOP tirgul No
Module 13: Swing API Object Oriented Programming(Java)
A Quick Java Swing Tutorial
EKT 472: Object Oriented Programming
Java Swing Walter Milner.
Java Swing.
Graphical User Interface (pronounced "gooey")
A Quick Java Swing Tutorial
Ellen Walker Hiram College
Steps to Creating a GUI Interface
A Quick Java Swing Tutorial
Advanced Programming in Java
Graphical User Interface
Presentation transcript:

Swing [part.1] Taken from Water Milner Eriq Muhammad Adams J |

* A group of 14 packages to do with the UI * 451 classes as at 1.4 (!) * Part of JFC Java Foundation Classes (compare now defunct MFC)

* AWT = abstract windows toolkit (cross platform) * AWT = earliest version of Java GUI * eg Frame AWT not JFrame Swing * Most Swing components are 'lightweight' * Do not mix AWT and Swing * Use Swing

* A thread is a lightweight process * Most Swing components are not thread-safe * Solution is to make sure all code that creates and modifies Swing components executes in the same 'event-dispatching' thread * Start a Swing application using the following code..

public static void main(String[] args) { SwingUtilities.invokeLater(new Runnable() { public void run() { createAndShowGUI(); // << method to start it } }); }

private static void createAndShowGUI() { //Create and set up the window. JFrame frame = new JFrame("Hi.."); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //Add a label. JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label); //Display the window. frame.pack(); frame.setVisible(true); } Try this out

* Most Swing UIs utilise a LayoutManager to control positioning of items * There is a choice of these which work in different ways * Initially we do without one, and position items ourselves: * frame.setLayout(null);

JFrame frame = new JFrame("I am a JFrame"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(20,30,300,100); frame.setLayout(null); JButton butt=new JButton("Click me"); frame.getContentPane().add(butt); butt.setBounds(20, 20, 200,20); frame.setVisible(true); Try this out - start with last example and put this in CreateandShowGUI()

* Based on an event-handling model * New component eg a button should have a Listener specified * The Listener object is programmed to respond to Event objects coming from the component * The Listener object needs to implement the appropriate interface

component eg button during initialisation, component selects another object eg a JFrame, to be the listener Event object the listener eg JFrame executes appropriate interface method ie actionPerformed interface eg ActionListener when clicked

* An interface is a set of methods * eg the ActionListener interface has just one method - public void actionPerformed(ActionEvent e) * A class can declare that it implements it eg public class Main implements ActionListener * Then it must actually define the methods in that interface * Or the compiler will complain * Classes can implement multiple interfaces

* See source code in Word * JButton and JLabel * clickCounts remembers the number of clicks * Class implements ActionListener * Make JFrame, JButton and JLabel * Instantiate application object * Set to be the listener of the button

* If have several buttons, all must link to actionPerformed * How to know which button was clicked? * Use the.getSource method of the ActionEvent object

butt1=new JButton("Button 1");.. butt2 = new JButton("Button 2");.. public void actionPerformed(ActionEvent e) { if (e.getSource()==butt1) label.setText("Butt1 clicked"); else label.setText("Butt2 clicked"); } Try this out

CDE/MotifWindowsMetal Available look and feels depend on implementation

try { UIManager.setLookAndFeel( "com.sun.java.swing.plaf.motif.MotifLookAndFeel" ); } catch (Exception e) { System.out.println("Cant get laf"); }.. JFrame frame = new JFrame(); This in main() - set laf as first step try.. catch.. because could fail UIManager is in java.lang

Object a[]= UIManager.getInstalledLookAndFeels(); for (int i=0; i<a.length; i++) System.out.println(a[i]);

JFrame.setDefaultLookAndFeelDecorated(true);.. call JFrame constructor

containers things that hold other things eg JFRame controls User I/O widgets eg JButton

top level containers - JFrame JApplet JDialog general purpose containers - panel scroll pane split pane tabbed pane tool bar

JFrame.setDefaultLookAndFeelDecorated(true); JFrame frame = new JFrame("I am a JFrame"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(20,30,300,100); frame.setLayout(null); //Create a panel JPanel myPanel = new JPanel(); myPanel.setBackground(new Color(255,3,25)); myPanel.setOpaque(true); //Make it the content pane. frame.setContentPane(myPanel); frame.setVisible(true);

* Is a subclass of JComponent * So are all the other Swing components except the top-level containers * You can add a border * And a tool-tip

.. myPanel.setOpaque(true); myPanel.setToolTipText("I'm a JPanel"); myPanel.setBorder(BorderFactory.createLineBorder(Color.wh ite)); frame.setContentPane(myPanel);..

setLayout(null); //Create a split pane JSplitPane myPane = new JSplitPane(); myPane.setOpaque(true); frame.setContentPane(myPane); frame.setVisible(true);

//Create a split pane JSplitPane myPane = new JSplitPane(); myPane.setOpaque(true); myPane.setDividerLocation(150); // make two panels JPanel right = new JPanel(); right.setBackground(new Color(255,0,0)); JPanel left = new JPanel(); left.setBackground(new Color(0,255,0)); // set as left and right in split myPane.setRightComponent(right); myPane.setLeftComponent(left);

* Program this * The buttons set the colour of the left hand pane

* For single-line text input * Methods getText, setText * Can use ActionListener, triggered when Enter pressed

* See source in Word doc * Check Main object fields for label and textfield * Make a panel, set as content pane * Make and add text field * Add actionlistener * Make and add a label * Program actionPerformed

JPanel myPanel = new JPanel(); app.textArea = new JTextArea("Type here",5, 20); myPanel.add(app.textArea); TextArea expands rows and columns as needed

JTextArea textArea = new JTextArea("Type here",5, 20); JScrollPane scrollPane = new JScrollPane(textArea); frame.setContentPane(scrollPane);

* Program this * Use the selectAll and cut methods of JTextComponent, which JTextArea inherits

.. Timer t = new Timer(1000, app); t.start(); app.label = new JLabel("Time"); app.label.setBounds(20,20,200,20); frame.getContentPane().add(app.label);.. public void actionPerformed(ActionEvent e) { String now = (new java.util.Date()).toString(); label.setText(now); }

JFrame frame = new JFrame("I am Celsius"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(20,30,200,200); frame.getContentPane().setLayout(null); ImageIcon icon = new ImageIcon("c:/celsius.jpg", "Celsius"); JLabel label = new JLabel(icon); label.setBounds(20,20,150,150); frame.getContentPane().add(label); frame.setVisible(true);

See source code JScrollBar and JLabel Constructor arguments implements AdjustmentListener adjustmentValueChanged e.getValue()

* Program this * The scroll bars determine the red, green and blue components of the background of the panel

* See source code * implements ActionListener * isSelected()

* Program this * The checkbox determines if the text in the label is left or right aligned

* Come in groups – only 1 selected per group * See demo code * Make radiobuttons * Make group * Add radiobuttons to group * ActionListener

* Modify the demo by adding more colour options

.. JPanel groupPanel = new JPanel(); groupPanel.setBounds(10,10,100,60); groupPanel.setBorder(BorderFactory.createLineBo rder(Color.black)); frame.getContentPane().add(groupPanel); groupPanel.add(app.choice1); groupPanel.add(app.choice2);..

* See source code * Data held in array * List box shows array * List box inside scroll pane * myList.getModel().getElementAt(..

* See source code * We want to add items to list * So use a Vector not an array to hold data * Check methods to delete items and copy to other listbox

* Add a button to the last example which deletes selected items in the second list box

* A layout manager controls the positioning of components * Components have a 'preferred size' so can avoid sizing them *.pack() adjusts size of a container to fit components

from Swing tutorial on java.sun.com

JFrame.setDefaultLookAndFeelDecorated(true); JFrame frame = new JFrame("FlowLayout"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.getContentPane().setLayout(new FlowLayout()); JButton b1 = new JButton("Hello"); frame.getContentPane().add(b1); JButton b2 = new JButton("Two"); frame.getContentPane().add(b2); JTextField t1 = new JTextField("Text here"); frame.getContentPane().add(t1); frame.pack(); frame.setVisible(true); Try this Try re-sizing the frame at runtime Add more buttons Add frame.setBounds Remove pack();

JFrame.setDefaultLookAndFeelDecorated(true); JFrame frame = new JFrame("Border"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JButton b1 = new JButton("At the top"); frame.getContentPane().add(b1,BorderLayout.PAGE_STAR T ); JButton b2 = new JButton("Bottom"); frame.getContentPane().add(b2,BorderLayout.PAGE_END); JTextField t1 = new JTextField("Left"); frame.getContentPane().add(t1,BorderLayout.LINE_START) ; JTextField t2 = new JTextField("Right"); frame.getContentPane().add(t2,BorderLayout.LINE_END); JButton b3 = new JButton("Centre"); frame.getContentPane().add(b3,BorderLayout.CENTER ); frame.pack(); frame.setVisible(true); Try this

JFrame.setDefaultLookAndFeelDecorated(true); JFrame frame = new JFrame("Grid"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.getContentPane().setLayout(new GridLayout(4,3,5,5)); for (int i=0; i<10; i++) frame.getContentPane().add(new JButton(""+i)); frame.pack(); frame.setVisible(true);

* See source code * Frame is null layout * Frame has an upper and lower panel * Upper panel null layout * Lower panel is grid layout * Note font of display

JMenuBar JMenu JMenuItem

Main app = new Main();.. JMenuBar myMenuBar = new JMenuBar(); JMenu menu1 = new JMenu("File"); JMenuItem item = new JMenuItem("Exit"); item.addActionListener(app); menu1.add(item); myMenuBar.add(menu1); frame.setJMenuBar(myMenuBar);.. public void actionPerformed(ActionEvent e) { System.exit(0); }

* See source code Exercise Copy this Add a second option 'Edit' after 'File' Put choices Undo, Redo, Cut Copy and Paste in it Use appropriate icons if possible

.... frame is BorderLayout.. JToolBar toolBar = new JToolBar("Test"); JButton butt1 = new JButton(new ImageIcon("icon.gif")); toolBar.add(butt1);.. frame.add(toolBar, BorderLayout.PAGE_START);

* JComponents have a paint() method * This is called by the system when it needs to display the object * Initially and eg after a re-size * You can over-ride paint() to control the appearance of the component * This implies you sub-class the component * The paint method has a Graphics object as a parameter * This is a context eg color, font etc * You tell the Graphics object to show things

public class MyFrame extends JFrame { public MyFrame() { super("Some title"); setDefaultCloseOperation(EXIT_ON_CLOSE); setBounds(20,30,230,180); myPanel = new MyPanel(); myPanel.setOpaque(true); setContentPane(myPanel); setVisible(true); } MyPanel myPanel; } public class MyPanel extends JPanel { public void paint(Graphics g) { g.drawLine(0,0,getWidth(),getHeight()); g.drawString("Hello",getWidth()/2,getHeight()/2); }

* Please check these tutorials to learn about matisse.  GUI Building in NetBeans IDE Tutorial  NetBeans IDE GUI Builder Visual Feedback Legend  Handling Images in A GUI Application image-display.htmlhttp://netbeans.org/kb/docs/java/gui- image-display.html  Adding a FileChooser to a GUI Application  Creating a Graphical Client for Twitter  Designing a Basic Java Form Using the GridBag Customizer  Designing an Advanced Java Form Using the GridBag Customizer  Designing a Swing GUI in NetBeans IDE Screencast

* If you want your application support several languages, you have to add internationalization. * Internationalization commonly be called i8n. * Please check tutorial about i8n with Matisse at

* SwingWorker used when you have background process / task that time consuming process. Create SwingWorker Procedure for background task Procedure if background task completed Start background task