1 GUI 5Lecture 7 GUI - V Overview  Using No Layout Manager  Message Dialog Boxes  Running a Program as an Applet and an Application  More on Handling.

Slides:



Advertisements
Similar presentations
Managing Input Events in Swing Week 5 Workshop Lyn Bartram.
Advertisements

Mouse Events and Keyboard Events
Event Handling Events and Listeners Timers and Animation.
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All rights reserved Chapter 15 Event-Driven Programming.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved Chapter 14 Event-Driven Programming.
1 Lecturte 14Lecture 7 Applications of Graphics Overview  Conversions Between Applications and Applets  Handling Mouse Events  Handling Keyboard Events.
Event-Driven Programming
Event-Driven Programming
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 1 Chapter 16 Event-Driven Programming.
Scott Grissom, copyright 2006Ch 11: GUI Slide 1 Graphical User Interfaces (Ch 11) Careful design of a graphical user interface is key to a viable software.
Lesson 35: Review of the Java GUI. The JFrame, Container and JButton.
Mouse Events. Handling Mouse Events Java provides two listener interfaces to handle mouse events: MouseListener;  MouseListener;  MouseMotionListener.
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.
Chapter 12 Applets and Advanced Graphics  The Applet Class  The HTML Tag F Passing Parameters to Applets F Conversions Between Applications and Applets.
Java Programming: From Problem Analysis to Program Design, 4e Chapter 12 Advanced GUIs and Graphics.
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.
Chapter 12 Applets and Advanced GUI  The Applet Class  The HTML Tag F Passing Parameters to Applets F Conversions Between Applications and Applets F.
GUI Components and Design Here we add one more component to our programs, JButtons –JButtons can only be inserted into JPanels (or JApplets) –Clicking.
Chapter 10: Applets and Advanced Graphics The Applet Class The Applet Class The HTML Tag The HTML Tag Passing Parameters to Applets Passing Parameters.
Previous programs used a JLabel for OUTPUT. Another Swing component that can be used for both user input and output is the JTextfield. Suppose we want.
1 CSC111H Graphical User Interfaces (GUIs) Introduction GUIs in Java Understanding Events A Simple Application The Containment Hierarchy Layout Managers.
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.
GUI Clients 1 Enterprise Applications CE00465-M Clients with Graphical User Interfaces.
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.
CompSci 100E 35.1 Graphical User Interfaces: GUIs  Components  Flat Layouts  Hierarchical Layouts  Designing a GUI  Coding a GUI.
Java's Graphical User Interface Toolkit
COMP 321 Week 2. Outline Event-Driven Programming Events, Event Sources, Event Listeners Button and Timer Events Mouse Events, Adapters.
Lesson 39: More wrapup on GUIs. 1.This presentation will focus on the decisions around software architecture and the decisions that will drive the code.
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.
1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 21.1 Test-Driving the Painter Application.
Chapter 10: Applets and Advanced Graphics The Applet Class The Applet Class The HTML Tag The HTML Tag Passing Parameters to Applets Passing Parameters.
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.
Lesson 6 Programming Techniques Event Handling /EvH/ AUBG ICoSCIS Team Assoc. Prof. Stoyan Bonev March, , 2013 SWU, Blagoevgrad.
Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif.
GUI DYNAMICS Lecture 11 CS2110 – Fall GUI Statics and GUI Dynamics  Statics: what’s drawn on the screen  Components buttons, labels, lists, sliders,
(c) by Elizabeth Sugar Boese.1 Chapter 6 Events - Lecture Slides.
Creating User Interfaces Event-Driven Programming.
Basics of GUI Programming Chapter 11 and Chapter 22.
Graphical User Interfaces A Graphical User Interface (GUI) in Java is created with at least three kinds of objects: –components, events, and listeners.
Sadegh Aliakbary Sharif University of Technology Fall 2011.
Event-Driven Programming F Procedural programming is executed in procedural order. F In event-driven programming, code is executed upon activation of events.
1 Chapter 3 Event-Driven Programming. 2 Objectives F To explain the concept of event-driven programming (§12.2). F To understand event, event source,
CSI 3125, Preliminaries, page 1 Event Handling. CSI 3125, Preliminaries, page 2 Event Handling An Event Change in the state of an object is known as event.
1 IM103 week 10 Enhancing the user interface By the end of lecture you should be able to:  distinguish between heavyweight and lightweight components;
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)
Jaeki Song ISQS6337 JAVA Lecture 10 Applets. Jaeki Song ISQS6337 JAVA Applet Applets run within the Web browser environment –Applets bring dynamic interaction.
5-1 GUIs and Events Rick Mercer. 5-2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces to respond.
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:
Dept. of CSIE, National University of Tainan 10/21/2012 Responding to User Input.
GUI.1 Graphical User Interfaces GUIs. GUI.2 The Plan Components Flat Layouts Hierarchical Layouts Designing a GUI Coding a GUI.
GUI Programming in Java Hao Jiang Boston College April, 2009.
Import javax.swing.*; class Check { public static void main(String[] args) { JFrame frame = new JFrame("Check"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//DO_NOTHING_ON_CLOSE.
1 Event Driven Programming with Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7 ( Book Chapter 14) GUI and Event-Driven Programming.
Chapter 14 Event-Driven Programming
Chapter 12 Event-Driven Programming
Web Design & Development Lecture 11
Chapter 12 Applets and Advanced Graphics
A Quick Java Swing Tutorial
Miscellaneous Topics #6: Polygons GUI Components and Event Handlers
Chapter 16 Event-Driven Programming
Steps to Creating a GUI Interface
A Quick Java Swing Tutorial
Presentation transcript:

1 GUI 5Lecture 7 GUI - V Overview  Using No Layout Manager  Message Dialog Boxes  Running a Program as an Applet and an Application  More on Handling Mouse Events  More on Handling Keyboard Events  Example Keyboard Events Demo

2 GUI 5Lecture 7 Using No Layout Manager Java enables you to place components in a container without using a layout manager. In this case, the component must be palced using the component’s instance method setBounds(), as follows: public void setBounds(int x, int y, int width, int height); This sets the location and size for the components as in the following example: JButton jbt =new JButton(“Help”); jbt.setBounds(10,10,40,20,); The upper-left corner of the Help button, is placed at(10,10); the button width is 40, and the height is 20

3 GUI 5Lecture 7 Using No Layout Manager You perform the following steps in order not to use a layout manager: 1-Use the following statements to specify no layout manager: setLayout(null); 2- Add the component to the container: add(component); 3-Specify the location where the component is to be placed, using the setBounds() method as follows: JButton jbt =new JButton(“Help”); jbt.setBounds(10,10,40,20)

4 GUI 5Lecture 7 Using No Layout Manager(Example) // ShowNoLayout.java: Place components without using a layout manager import java.awt.*; import java.awt.event.*; import javax.swing.*; public class ShowNoLayout extends JFrame { private JLabel jlbl = new JLabel("Resize the Window and Study No Layout", JLabel.CENTER);; private JTextArea jta1 = new JTextArea("Text Area", 5, 10 ); private JTextArea jta2 = new JTextArea("Text Area", 5, 10 ); private JTextField jtf = new JTextField("TextField"); private JPanel jp = new JPanel(); private JButton jbt1 = new JButton("Cancel" ); private JButton jbt2 = new JButton("Ok" ); public static void main(String[] args) { ShowNoLayout frame = new ShowNoLayout(); frame.setSize(400,200); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); } public ShowNoLayout() { setTitle("Show No Layout"); // Set background color for the panel jp.setBackground(Color.red); // Specify no layout manager getContentPane().setLayout(null); // Add components to frame getContentPane().add(jlbl); getContentPane().add(jp); getContentPane().add(jta1); getContentPane().add(jta2); getContentPane().add(jtf); getContentPane().add(jbt1); getContentPane().add(jbt2); // Put components in the right place jlbl.setBounds(0, 10, 400, 40); jta1.setBounds(0, 50, 100, 100); jp.setBounds(100, 50, 200, 100); jta2.setBounds(300, 50, 100, 50); jtf.setBounds(300, 100, 100, 50); jbt1.setBounds(100, 150, 100, 50); jbt2.setBounds(200, 150, 100, 50); }

5 GUI 5Lecture 7 Using No Layout Manager If you run the previous example on Windows with 640 x 480 resolution, the layout size is just right. When the program is run on Windows with a higher resolution, the components appear very small and clump together. When it is run on Windows with a lower resolution, the components cannot be shown in their entirety. If you resize the window, you will see that the location and size of the components are not changes With no layout, the components size and positions are fixed, and can only be changed in the frame with a layout manager. * If you use this approach, your program may look fine on one machine and be useless on others. For this reason, it is advisable to use the layout managers to develop a platform-independent graphical user interface.

6 GUI 5Lecture 7 Message Dialog Boxes A dialog box is normally used as a temporary window to receive additonal information form the user or to provide notification that some event has occurred. You can build a variety of dialog boxes in Java. To display a message dialog box, use the static showMessageDialog method in the JOptionPane class public static void showMessageDialog(Component parentComponent,Object message, String title, int messageType) The parentComponent is the parent component of the dialog box, form which the dialog box is launched. The message is the object to display. Often you use a string for message. The title is the title of the dialog box. The messageType determines the type of message to be displayed.

7 GUI 5Lecture 7 Message Dialog Boxes There are five message type : 1- ERROR_MESSAGE 2-INFORMATION_MESSAGE 3-WARNING_MESSAGE 4-QUESTION_MESSAGE 5-PLAIN_MESSAGE Each type, except for the PLAIN_MESSAGE type, has an associated icon. You can use the following method to supply your own icons: public static void showMessageDialog(Componet parentComponent, Object message, String title, int messageType, Icon icon)

8 GUI 5Lecture 7 Example of Dialog Box import java.awt.*; import java.awt.event.*; import javax.swing.*; public class DialogMessage extends JFrame implements ActionListener { private JButton jbt1, jbt2, jbt3, jbt4, jbt5, jbt6; public static void main(String[] args) { DialogMessage frame = new DialogMessage(); frame.pack(); frame.setTitle("Message Dialog Boxes"); frame.setVisible(true); } public DialogMessage() { // Create panel p1 add three buttons JPanel p1 = new JPanel(); p1.setLayout(new FlowLayout()); p1.add(jbt1 = new JButton("Button 1")); p1.add(jbt2 = new JButton("Button 2")); p1.add(jbt3 = new JButton("Button 3")); // Create Panel p2 and add three buttons JPanel p2 = new JPanel(); p2.setLayout(new FlowLayout()); p2.add(jbt4 = new JButton("Button 4")); p2.add(jbt5 = new JButton("Button 5")); p2.add(jbt6 = new JButton("Button 6")); // Place p1 and p2 in the frame getContentPane().setLayout(new BorderLayout()); getContentPane().add(p1, BorderLayout.SOUTH); getContentPane().add(p2, BorderLayout.CENTER); // Register listeners jbt1.addActionListener(this); jbt2.addActionListener(this); jbt3.addActionListener(this); jbt4.addActionListener(this); jbt5.addActionListener(this); jbt6.addActionListener(this); }

9 GUI 5Lecture 7 Example of Dialog Box public void actionPerformed(ActionEvent e) { if(e.getSource() ==jbt1) { JOptionPane.showMessageDialog(this,"You have pressed button 1 ", "For you Information-INFORMATION_MESSAGE-",JOptionPane.INFORMATION_MESSAGE);} else if(e.getSource()==jbt2) { JOptionPane.showMessageDialog(this,"You SHOULD NOT pressed THIS button ", "Wrong Button-ERROR_MESSAGE-",JOptionPane. ERROR_MESSAGE);} else if(e.getSource()==jbt3){ JOptionPane.showMessageDialog(this,"You SHOULD NOT pressed THIS button ", "-WARNING_MESSAGE-",JOptionPane.WARNING_MESSAGE); } else if(e.getSource() ==jbt4) { JOptionPane.showMessageDialog(this,"DID you press button#4 ? ? ", "-QUESTION_MESSAGE-",JOptionPane.QUESTION_MESSAGE); } else if(e.getSource() ==jbt5) {JOptionPane.showMessageDialog(this,"Plain message with no icon ? ? ", "--PLAIN_MESSAGE-",JOptionPane.PLAIN_MESSAGE); } }

10 GUI 5Lecture 7 Example of Dialog Box The message dialog box is modal, which means that no other window can be accessed before the message dialog is dismissed

11 GUI 5Lecture 7 Running a Program as an Applet and an Application You can implement a main method in an applet that will run as an application or as an applet using the same program. Suppose you have an applet named TestApplet. To enable it to run as an application, all you need to do is add a main method in the applet with the implementation, as follows: public static void main(String[] args) {//create a frame JFrame frame=new JFrame(“Running a program”); // create an instance of TestApplet TestApplet applet =new TestApplet(); //Add the applet instance to the frame Frame.getContentPane().add(applet, BorderLayout.CENTER); //Invoke init and start Applet.init(); Applet.start(); // display the frame Frame.setSize(300,300); Frame.setVisible(true);}

12 GUI 5Lecture 7 More on Handling Mouse Events Java provides two listener interfaces, MouseListener and MouseMotionListener, to handle mouse events. The MouseListener listens for actions such as when the mouse is pressed, released, entered, exited, or clicked. The MouseMotionListener listens for actions such as dragging or moving the mouse. The following example can run as an applet and as an application.

13 GUI 5Lecture 7 // MoveMessageDemo.java: Move a message in a panel // by dragging the mouse import java.awt.*; import java.awt.event.*; import javax.swing.*; public class MoveMessageDemo extends JApplet { // Initialize the applet public void init() { // Create a MoveMessagePanel instance for drawing a message MoveMessagePanel p = new MoveMessagePanel("Welcome to Java"); // Place the message panel in the frame getContentPane().setLayout(new BorderLayout()); getContentPane().add(p); } // This main method enables the applet to run as an application public static void main(String[] args) { // Create a frame JFrame frame = new JFrame("Move Message Using Mouse"); Example Moving message using Mouse

14 GUI 5Lecture 7 // Create an instance of the applet MoveMessageDemo applet = new MoveMessageDemo(); // Add the applet instance to the frame frame.getContentPane().add(applet, BorderLayout.CENTER); // Invoke init() and start() applet.init(); applet.start(); // Display the frame frame.setSize(300, 300); // frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLO SE); frame.setVisible(true); } // MoveMessagePanel draws a message // This class is defined as inner class class MoveMessagePanel extends MessagePanel implements MouseMotionListener { // Construct a panel to draw string s public MoveMessagePanel(String s) { super(s); this.addMouseMotionListener(this); } // Tell the panel how to draw things public void paintComponent(Graphics g) { // Invoke the paintComponent method in the MessagePanel class super.paintComponent(g); } // Handler for mouse moved event public void mouseMoved(MouseEvent e) { } // Handler for mouse dragged event public void mouseDragged(MouseEvent e) { // Get the new location and repaint the screen setXCoordinate(e.getX()); setYCoordinate(e.getY()); repaint(); } MoveMessageDemo

15 GUI 5Lecture 7 l Handling Keyboard Events To process a keyboard event, use the following handlers in the KeyListener interface: More Handling Keyboard Events keyPressed(KeyEvent e) Called when a key is pressed. keyReleased(KeyEvent e) Called when a key is released. keyTyped(KeyEvent e) Called when a key is pressed and then released

16 GUI 5Lecture 7 The KeyEvent Class The keys captured in the event are integers rpresenting Unicode character values, Every keyboard event has an associated key character or key code that is returned by the getKeyChar() method get KeyCode() method Key Constants: Home VK_HOME End VK_End Page Up VK_PGUP Page Down VK_PGDN The enter keyVK_ENTER The right-arrow keyVK_RIGHT etc...

17 GUI 5Lecture 7 Example Keyboard Events Demo l Objective: Display a user-input character. The user can also move the character up, down, left, and right using the arrow keys. // KeyboardEventDemo.java: Receive key input import java.awt.*; import java.awt.event.*; import javax.swing.*; public class KeyboardEventDemo extends JApplet { private KeyboardPanel keyboardPanel = new KeyboardPanel(); // Main method used if run as an application public static void main(String[] args) { // Create a frame JFrame frame = new JFrame("KeyboardEvent Demo"); // Create an instance of the applet KeyboardEventDemo applet = new KeyboardEventDemo(); // Add the applet instance to the frame frame.getContentPane().add(applet, BorderLayout.CENTER); // Invoke init() and start() applet.init(); applet.start();

18 GUI 5Lecture 7 // Display the frame frame.setSize(300, 300); // frame.setDefaultCloseOperation(JFrame. EXIT_ON_CLOSE); frame.setVisible(true); // Set focus on the keyboardPanel applet.focus(); } // Initialize UI public void init() { // Add the keyboard panel to accept and display user input getContentPane().add(keyboardPanel); // Request focus focus(); } // Set focus on the panel public void focus() { // It is required for receiving key input keyboardPanel.requestFocus(); } Example Keyboard Event (Cont)

19 GUI 5Lecture 7 // KeyboardPanel for receiving key input class KeyboardPanel extends JPanel implements KeyListener { private int x = 100; private int y = 100; private char keyChar = 'A'; // Default key public KeyboardPanel() { addKeyListener(this); // Register listener } public void keyReleased(KeyEvent e) { } Example Keyboard Event (Cont)

20 GUI 5Lecture 7 public void keyTyped(KeyEvent e) { } public void keyPressed(KeyEvent e) { switch (e.getKeyCode()) { case KeyEvent.VK_DOWN: y += 10; break; case KeyEvent.VK_UP: y -= 10; break; case KeyEvent.VK_LEFT: x -= 10; break; case KeyEvent.VK_RIGHT: x += 10; break; default: keyChar = e.getKeyChar(); } repaint(); } // Draw the character public void paintComponent(Graphics g) { super.paintComponent(g); g.setFont(new Font("TimesRoman", Font.PLAIN, 24)); g.drawString(String.valueOf(keyChar), x, y); } Example Keyboard Event (Cont