SlideShare a Scribd company logo

03_GUI.ppt

Download as PPT, PDF
D
DrDGayathriDevi

This document provides an overview of the AWT and Swing toolkits in Java for building graphical user interfaces (GUIs). It describes the key classes in AWT like Component, Container, and Window. It also discusses limitations of AWT and how Swing addresses these by providing more versatile components that are rendered independently of the underlying platform. The document gives examples of common Swing components like buttons, text fields, lists, and how to add listeners and handle events.

Education
1 of 68
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
1 CIS 421 Web Based Java Programming Building GUIs (Graphical User Interfaces) with Java Part 1
2 AWT vs. Swing • Early Java development used graphic classes defined in the Abstract Windowing Toolkit (AWT) • With Java 2, Swing classes were introduced • Many AWT components have improved Swing counterparts • For example, the AWT Button class corresponds to a more versatile Swing class called JButton • However, Swing does not generally replace the AWT; we still use AWT events and the underlying AWT event processing model
3 java.awt - The Abstract Windowing Toolkit • Introduced with Java 1.0 • Classes are divided into 3 main categories: – graphics (colours, fonts, shapes, etc.) – components (GUI components: windows, buttons, menus, etc.) – layout managers (control the positioning of components on the screen) • Each component corresponds to a “peer” component provided by the native GUI toolkit on the target platform (Windows, Sun Solaris, etc.) • Here is a (small) subset of the AWT class hierarchy:
4 Object Component Applet Container Frame Window Panel
5 java.awt - The Abstract Windowing Toolkit • Component – an abstract class – superclass of all GUI components except menu components and class CheckboxGroup • Container – the superclass for all components that contain other components – defines add(), for adding components to a container
6 java.awt - The Abstract Windowing Toolkit • Window – a top-level window with no border or menu bar – rarely instantiated (its subclasses are more useful) • Frame – a window with a title bar – can have a menu bar – top-level window for Java AWT-based applications • typically, main() creates an instance of an object that is a Frame as its top-level application window, then adds GUI components to it
7 java.awt - The Abstract Windowing Toolkit • Panel – a container that must be contained within another container – does not have its own window • Applet – a subclass of Panel – actually part of the java.applet package, not the AWT
8 AWT Limitations • “look and feel” of AWT-based programs differs slightly across platforms, because of differences in the underlying native GUI elements • AWT components limited to those that are available on all platforms (lowest common denominator)
9 javax.swing - The Swing Toolkit • In response, Netscape developed the Internet Foundation Classes, which evolved into the Swing toolkit that is part of Sun’s Java Foundation Classes (JFC) • Swing components do not require native peer components • Each Swing UI component is painted onto a blank window • Only peer functionality required is the ability to display windows and paint on them
10 Object Component Container Frame Window Applet Panel JFrame JApplet JPanel JComponent Relationship of Swing and AWT
11 Relationship of Swing and AWT (con’t) Container add(Component) remove(Component) setLayoutManager() ... Window addWindowListener() pack() show() ... Frame setIconImage() setMenuBar() setTitle() ... Dialog setModal() setTitle() ... MenuContainer JFrame getContentPane() setJMenuBar() ... contentPane JWindow JDialog getContentPane() ... contentPane Swing AWT
12 Inherited Functions Component addMouseListener() addKeyListener() ... getBounds() getComponentAt() ... void paint(Graphics) Container add(Component) remove(Component) setLayoutManager() ... Button Canvas Label .. . Panel Box Window .. . JComponent setBorder() setUI() ... Swing Components AWT Swing
13 Swing Components • There are various Swing GUI components that we can incorporate into our software: – labels (including images) – text fields and text areas – buttons – check boxes – radio buttons – menus – combo boxes – and many more… • Using the proper components for the situation is an important part of GUI design
14 Labels and Image Icons • A label is used to provide information to the user or to add decoration to the GUI • A Swing label is defined by the JLabel class • It can incorporate an image defined by the ImageIcon class (later) • The alignment and relative positioning of the text and image of a label can be explicitly set
15 Buttons • GUI buttons fall into various categories: – push button – a generic button that initiates some action – check box – a button that can be toggled on or off – radio buttons – a set of buttons that provide a set of mutually exclusive options • Radio buttons must work as a group; only one can be toggled on at a time • Radio buttons are grouped using the ButtonGroup class
16 Buttons • Push buttons and radio buttons generate action events when pushed or toggled • Check boxes generate item state changed events when toggled
17 Radio Buttons • Declaration and initialization: JRadioButton radioButtonSmall, radioButtonLarge ; radioButtonSmall = new JRadioButton (“small”, false); radioButtonLarge = new JRadioButton (“large”, false); this.add (radioButtonSmall); this.add (radioButtonLarge); radioButtonSmall.addActionListener (this); radioButtonLarge.addActionListener (this); • Action Listener may be assigned to each button
18 Radio Buttons • Action performed method use is same as regular buttons • But one needs to put them in a group so they become mutually exclusive ButtonGroup buttonGroup = new ButtonGroup(); buttonGroup.add(small); buttonGroup.add(large);
19 Combo Boxes • A combo box displays a particular option with a pull down menu from which the user can choose a different option • The currently selected option is shown in the combo box • A combo box can be editable, so that the user can type their option directly into the box • itemStateChanged() fires on a mouse click in a ComboBox
20 Combo Box • What goes in the constructor: // Combo Box comboBoxItem = new JComboBox(); this.add (comboBoxItem ); comboBoxItem.addItemListener (this); comboBoxItem.addItem ("10 Computer"); comboBoxItem. addItem ("20 Monitor "); comboBoxItem. addItem ("30 Printer ");
21 Combo Box • A Combo Box can be changed dynamically: // Combo Box comboBoxItem.addItem ("10 Computer"); comboBoxItem.removeAllItems (); • A Combo Box can not be emptied unless it has something in it
22 JTextField • Constructor: new JTextField(20)// 20 columns • Get text out: field.getText() • Put text in: field.setText(“whatever”); • Get an ActionEvent when the user presses return or enter: field.addActionListener(myActionListener); • Select the text in the field: field.selectAll(); • Put the curson back in the field: field.requestFocus(); JLabel JTextField(20)
23 JTextArea JFrame jf = new JFrame(); JPanel jp = new JPanel(); JButton jb = new JButton("Just click it"); jb.addActionListener(this); text = new JTextArea(10,20); text.setLineWrap(true); JScrollPane scroller = new JScrollPane(text); scroller.setVerticalScrollBarPolicy( ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS); scroller.setHorizontalScrollBarPolicy( ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER); jp.add(scroller); jf.getContentPane().add(BorderLayout.CENTER,jp); jf.getContentPane().add(BorderLayout.SOUTH,jb); Create a JScrollPane and give it the text area that it is going to scroll for
24 JCheckBox • Constructor: new JCheckBox(“checkbox 1”); • Listen for an item event (when it is selected or deselected): – check.addItemListener(this); • Handle the event: – public void itemStateChanged(ItemEvent e) { String onOff = “off”; if (check.isSelected() ) onOff = “on”; } • Select or deselect it in code: – check.setSelected(true); – check.setSelected(false);
25 JList String[] entries = {“alpha”, “beta”, “gamma”, “delta”, “zeta”, “eta” }; JPanel jp = new JPanel(); JList list = new JList(entries); JScrollPane scroller = new JScrollPane(list); scroller.setVerticalScrollBarPolicy( ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS); scroller.setHorizontalScrollBarPolicy( ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER); jp.add(scroller); list.setVisibleRowCount(4); list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION); jf.getContentPane().add(jp);
26 Example - Creating a Frame import javax.swing.*; public class FrameExample1 { public static void main(String args[]) { JFrame f = new JFrame("Frame Example 1"); f.setSize(400, 300); f.show(); } }
27 Example - Creating a Frame
28 Example - Creating a Frame • By default, a frame is sized at at 0x0 pixels, so setSize() is sent to the frame to change it size to 400 pixels wide x 300 pixels high • If the setSize() message is not sent, only the title bar is displayed • setSize() inherited from Component • The show() message is sent to the frame to make it visible and bring it to the front (if it is behind another window) • show() inherited from Window
29 Example - A Closeable Frame • This frame has a deficiency that limits its usefulness as a basis for developing applications – clicking on the Close button or selecting Close from the left-most drop-down menu hides the frame but does not close the application – if the Java interpreter was run from a command line, to stop the program we must close the console window (NT) or issue a kill command(Unix). • This is because nobody is listening to the closing of the window…
30 GUI Input via the Interface • InputStreams are employed to get input from the user via the keyboard – it waits for the user to input data and press enter • In a GUI-based program, there can be several sources of input; e.g., clicking a button, moving a slider, typing characters in a text field, etc. • Invoking methods to wait for user input via a specific component won’t work, if multiple input source points  the interface can have multiple input points e.g. Microsoft Word can get input from multiple sources  Menu, Toolbar, Text input, Alt-keystroke we can’t predict where the next input will come from
31 Event-Driven GUI • GUI-based Java programs use the Java Event Model • The Java Virtual Machine watches for the user’s actions on components; e.g., – mouse movement/dragging, clicks on components – key presses • The JVM creates event objects that correspond to these actions, and sends these event objects to listeners which are provided by the program to handle the events
32 Event-Driven GUI • java.awt.AWTEvent extends EventObject and is the superclass of all Java 1.1 AWT events • Each AWT event is represented by its own subclass; e.g., – java.awt.event.WindowEvent – java.awt.event.MouseEvent • Swing adds additional event classes, but uses the Java 1.1 event model • Listening is done via Listener Interfaces, whose functions fire when events occur, dispatching an event object to the functions, which must be implemented
33 Mouse Event and Listener with Other Listeners EventListener Component addMouseListener(listener) removeMouseListener(listener) processMouseEvent(mouseEvent) ... listenerList MouseListener mouseClicked(mouseEvent) mousePressed(mouseEvent) mouseReleased(mouseEvent) mouseEntered(mouseEvent) mouseExited(mouseEvent) ActionListener MouseMotionListener KeyListener mouseEvent( MOUSE_PRESSED, 123, 456) MouseEvent getX() getY() getClickCount() Functions of the interface • all must be explicitly implemented (Note: Some will be empty)
34 Events MouseEvent getX() getY() getClickCount() KeyEvent ActionEvent InputEvent getModifiers() getWhen() ComponentEvent getComponent() FocusEvent WindowEvent AWTEvent getID() EventObject getSource() many notification event types other AWT events ContainerEvent PaintEvent
35 Class diagram for ClosableFrame •We can now design a subclass of JFrame called CloseableFrame that behaves as expected when the Close button is clicked Java Multiple Inheritance: One class + Interface(s)
36 Example - A Closeable Frame import javax.swing.*; import java.awt.event.*; public class CloseableFrame extends JFrame implements WindowListener {
37 Example - A Closeable Frame public CloseableFrame() { super(); addWindowListener(this); } public CloseableFrame(String str) { super(str); addWindowListener(this); }
38 Example - A Closeable Frame public void windowClosed(WindowEvent event) {} // Do nothing! public void windowDeiconified(WindowEvent event) {} public void windowIconified(WindowEvent event) {}
39 Example - A Closeable Frame public void windowActivated(WindowEvent event) {} // Do nothing! public void windowDeactivated(WindowEvent event) {} public void windowOpened(WindowEvent event) {}
40 Example - A Closeable Frame public void windowClosing(WindowEvent event) { // dispose of the JFrame object dispose(); // terminate the program System.exit(0); }
41 Example - A Closeable Frame public static void main(String args[]) { JFrame f = new CloseableFrame ("Closeable Frame"); f.setSize(400, 300); f.show(); } }
42 CloseableFrame Constructors • JFrame has two useful constructors: – JFrame() creates an untitled JFrame object – JFrame(String title) creates a JFrame object with the specified title • Our CloseableFrame class provides similar constructors
43 CloseableFrame • When a window is opened, closing, closed, activated, deactivated, iconified, or deiconified, it sends a WindowEvent object to its WindowListener object • CloseableFrame is-a JFrame is-a Frame is-a Window, so a CloseableFrame object will send WindowEvents • When the Close button is clicked, it notifies the listener object by invoking the object’s windowClosing() method
44 Closing the Window • We could create a separate class for the listener object; but instead, the CloseableFrame object serves as its own listener for WindowEvent events – CloseableFrame implements the WindowListener interface – the frame registers itself as its own listener by sending itself the addWindowListener(this) message (addWindowListener() inherited from Window)
45 CloseableFrame • We want to terminate the application when the CloseableFrame object is closing, so we are interested in the windowClosing() method – CloseableFrame must implement the other 6 methods listed in the WindowListener interface, but they can have empty bodies • When the window’s Close button is pushed, it invokes the windowClosing() method of its listener; i.e., the windowClosing() method in class CloseableFrame
46 Structure of a JFrame object Title JFrame JRootPane JLayeredPane optional menu bar content pane glass pane Adapted from Core Java 1.2, Volume 1 - Fundamentals, Horstmann & Cornell
47 JFrame • Methods for manipulating these parts public Container getContentPane() public Component getGlassPane() public JMenuBar getJMenuBar() public JLayeredPane getLayeredPane() public JRootPane getRootPane() public void setContentPane(…) public void setGlassPane(…) public void setJMenuBar(…) public void setLayeredPane(…) public void setRootPane(…)
48 Example : Adding a menu to a JFrame Title File Edit Search View Undo Redo Cut Copy Paste JMenuItem JMenu JMenuBar
49 What components make up a Menu Bar ? JMenuItem getComponent():Component JMenu +add(i:JMenuItem)JMenuItem JMenuBar +add(m:JMenu):JMenu Container JComponent AbstractButton
50 What inputs come from a menu bar ? In response to a user clicking on a JMenuItem object, the Java runtime will generate a java.awt.event.ActionEvent object In order to respond to the ActionEvent, an object must implement java.awt.event.ActionListener that has a single method : public void actionPerformed(ActionEvent e); EventObject +getSource():Object AWTEvent ActionEvent +getActionCommand():String
51 Adding a menu to a JFrame public class MenuFrame extends JFrame implements ActionListener { public MenuFrame() { // Set up frame itself – title,size,location JMenuBar menuBar = new JMenuBar( ); setJMenuBar( menuBar ); JMenu fileMenu = new JMenu( "File" ); menuBar.add( fileMenu ); JMenu editMenu = new JMenu( "Edit" ); menuBar.add( editMenu ); JMenu searchMenu = new JMenu( "Search" ); menuBar.add( searchMenu ); JMenu viewMenu = new JMenu( "View" ); menuBar.add( viewMenu );
52 Adding a menu to a JFrame JMenuItem item; item = new JMenuItem ( "Undo" ); item.addActionListener( this ); editMenu.add( item ); item = new JMenuItem ( "Redo" ); item.addActionListener( this ); editMenu.add( item ); … // etc for Cut, Copy, Paste
53 Adding a menu to a JFrame public void actionPerformed( ActionEvent e ) { System.out.println ( e.getSource() ); System.out.println ( e.getActionCommand() ); } javax.swing.JMenuItem[…] Undo If you select Edit->Undo :
54 Layout Manager • A layout manager is a Java object associated with a particular component (usually with a background component) • The layout manager controls the components contained within the component the layer manager is associated with • E.g. if a frame holds a panel, and the panel holds a button, the panel’s layout manager control s the size and placement of the button, and the frame’s layout manager controls the size and placement of the panel, and the button does not need a layout manager • A panel holds 5 things (north, east, south, west, center): even if the 5 things each have their own layout managers, the size and location of the 5 things in the panel are controlled by the panel’s layout manager • Different background components have different types of layout managers, different layout managers have different layout policies • Commonly used layout managers: – BorderLayout: default for a frame – FlowLayout: default for a panel – BoxLayout
55 Nested Layouts import javax.swing.*; import java.awt.event.*; public class SimpleGUI1 implements ActionListener { … JPanel panelA = new JPanel(); JPanel panelB = new JPanel(); panelB.add(new JButton(“button 1”)); panelB.add(new JButton(“button 2”)); panelB.add(new JButton(“button 3”)); panelA.add(panelB); panelA.setColor(Color.blue); panelB.setColor(Color.green); … } Both panelA and panelB have their own layout managers.
56 BorderLayout • A BorderLayout manager divides a background component into 5 regions • You can only add one component per region • Components layed out by this manager usually don’t get to have their preferred size • BorderLayout is the default layout manager for a frame north south west east center
57 FlowLayout • A FlowLayout manager acts kind of like a word processor, except with components instead of words • Each component is the size it wants to be, and they are laid out left to right in the order that they are added, with “word-wrap” turned on • When a component won’t fit horizontally, it drops to the next “line” in the layout • Default layout manager for a panel
58 BoxLayout • A BoxLayout manager is like FlowLayout in that each component gets to have its own size, and the components are placed in the order they are added • A BoxLayout can stack the components vertically or horizontally (instead of automatic ‘component wrapping’)
59 How is a BorderLayout laid out? … JButton jb = new JButton(“click me”); jf.getContentPane().add(BorderLayout.EAST,jb); jf.setSize(200,200); … … JButton jb = new JButton(“click like you mean it”); jf.getContentPane().add(BorderLayout.EAST,jb); jf.setSize(200,200); … • Since it is the east region or a border layout, the preferred width is respected, but the height will be as tall as the frame.
60 How BorderLayout layout? • When something is put in the north or south, it goes all the way across the frame, so the things in the east and west will not be as tall as the frame • Components in the east and west get their preferred width • Components in the north and south get their preferred height • Components in the center get whatever space is left over, based on the frame dimensions
61 BorderLayout and FlowLayout together JFrame jf = new JFrame(); JPanel jp = new JPanel(); jp.setBackground(Color.darkGray); JButton jb1 = new JButton(“button 1”); JButton jb2 = new JButton(“button 2”); jp.add(jb1); jp.add(jb2); jf.getContentPane().add(BorderLayout.EAST,jp); jf.setSize(250,200); jf.setVisible(true); – Which layout on the left corresponds to the above code? – How to get the other one?
62 GridLayout Sets up a grid (each cell is the same size) (m x n) layout frame.getContentPane().setLayout(new GridLayout(3,2,10,7)); (Row, Col, Horizontal Gap, Vertical Gap) GridLayout
63 Layout Managers Predefined layout managers defined in the Java standard class libraries: Defined in the AWT Defined in Swing Flow Layout Border Layout Card Layout Grid Layout GridBag Layout Box Layout Overlay Layout
64 Layout Managers • Every container has a default layout manager, but we can also explicitly set the layout manager for a container • Each layout manager has its own particular rules governing how the components will be arranged • Some layout managers pay attention to a component's preferred size or alignment, and others do not • The layout managers attempt to adjust the layout as components are added and as containers are resized
65 Special Features • Swing components offer a variety of other features • Tool tips provide a short pop-up description when the mouse cursor rests momentarily on a component • Borders around each component can be stylized in various ways • Keyboard shortcuts called mnemonics can be added to graphical objects such as buttons • Check the Sun Tutorial for more info
66 The Graphics Class • paintComponent() is passed a reference to a Graphics object • A Graphics object is a device-independent interface to the computer's graphics display • Most of its methods are concerned with drawing shapes (filled and unfilled), and managing fonts and colours • paintComponent() sends the Graphics object – the drawOval() message, to draw each point – the drawLine() message, to draw the straight line
67 Some Graphics Methods • drawString() • drawOval(), fillOval() • drawRect(), fillRect(), clearRect() • drawRoundRect(), fillRoundRect() • draw3DRect(), fill3DRect() • drawArc(), fillArc() • drawPolygon(), fillPolygon() • drawPolyline()
68 Graphics Usage • Put your own graphics on the screen: – Create your own paintable widget – Put the widget on the frame – Display it import java.awt.*; import javax.swing.*; class MyDrawPanel extends JPanel { public void paintComponent(Graphics g) { g.setColor(Color.orange); g.fillRect(20,50,100,100); } } Make a subclass of JPanel, a widget that can be added to a frame, and override the paintComponent() method paintComponent() is called by the system when it is time to paint the widget g is a Graphic object that is the actual drawing surface that mapped to the real display, and is handed to you by the system Draw a rectangle with orange color

More Related Content

PDF
Gui
Sardar Alam
 
PPT
Swing_Introduction and working java.ppt
Bobby Pra A
 
PPTX
awt and swing new (Abstract Window Toolkit).pptx
sshhealthcardrkl
 
PPT
14a-gui.ppt
DrDGayathriDevi
 
PPTX
Chap 1 - Introduction GUI.pptx
TadeseBeyene
 
PDF
Swingpre 150616004959-lva1-app6892
renuka gavli
 
PPT
Swing and AWT in java
Adil Mehmoood
 
PDF
Java GUI Programming for beginners-graphics.pdf
PBMaverick
 
Gui
Sardar Alam
 
Swing_Introduction and working java.ppt
Bobby Pra A
 
awt and swing new (Abstract Window Toolkit).pptx
sshhealthcardrkl
 
14a-gui.ppt
DrDGayathriDevi
 
Chap 1 - Introduction GUI.pptx
TadeseBeyene
 
Swingpre 150616004959-lva1-app6892
renuka gavli
 
Swing and AWT in java
Adil Mehmoood
 
Java GUI Programming for beginners-graphics.pdf
PBMaverick
 

Similar to 03_GUI.ppt (20)

PPT
Swing
Jaydeep Viradiya
 
PDF
28-GUI application.pptx.pdf
NguynThiThanhTho
 
PPT
28 awt
Prachi Vijh
 
PPT
introduction to JAVA awt programmin .ppt
bgvthm
 
PPT
1.Abstract windowing toolkit.ppt of AJP sub
YugandharaNalavade
 
PPT
awt.ppt java windows programming lecture
kavitamittal18
 
PPT
fdtrdrtttxxxtrtrctctrttrdredrerrrrrrawt.ppt
havalneha2121
 
PPT
awdrdtfffyfyfyfyfyfyfyfyfyfyfyfyyfyt.ppt
SulbhaBhivsane
 
PPTX
17625-1.pptx
BhaskarDharmadhikari
 
PDF
Ingles 2do parcial
Harry Ostaiza
 
PPT
Unit 1- awt(Abstract Window Toolkit) .ppt
Deepgaichor1
 
PPT
09events
Waheed Warraich
 
PPTX
Graphical User Interface (Gui)
Bilal Amjad
 
PPTX
Creating GUI.pptx Gui graphical user interface
pikachu02434
 
PPT
Basic of Abstract Window Toolkit(AWT) in Java
suraj pandey
 
DOC
java swing notes in easy manner for UG students
RameshPrasadBhatta2
 
PDF
Programming Without Coding Technology (PWCT) - Simple GUI Application
Mahmoud Samir Fayed
 
PPTX
UNIT 2 SWIGS for java programing by .pptx
st5617067
 
PPT
25 awt
degestive
 
PPT
Unit4 AWT, Swings & Layouts power point presentation
SNIGDHAAPPANABHOTLA
 
Swing
Jaydeep Viradiya
 
28-GUI application.pptx.pdf
NguynThiThanhTho
 
28 awt
Prachi Vijh
 
introduction to JAVA awt programmin .ppt
bgvthm
 
1.Abstract windowing toolkit.ppt of AJP sub
YugandharaNalavade
 
awt.ppt java windows programming lecture
kavitamittal18
 
fdtrdrtttxxxtrtrctctrttrdredrerrrrrrawt.ppt
havalneha2121
 
awdrdtfffyfyfyfyfyfyfyfyfyfyfyfyyfyt.ppt
SulbhaBhivsane
 
17625-1.pptx
BhaskarDharmadhikari
 
Ingles 2do parcial
Harry Ostaiza
 
Unit 1- awt(Abstract Window Toolkit) .ppt
Deepgaichor1
 
09events
Waheed Warraich
 
Graphical User Interface (Gui)
Bilal Amjad
 
Creating GUI.pptx Gui graphical user interface
pikachu02434
 
Basic of Abstract Window Toolkit(AWT) in Java
suraj pandey
 
java swing notes in easy manner for UG students
RameshPrasadBhatta2
 
Programming Without Coding Technology (PWCT) - Simple GUI Application
Mahmoud Samir Fayed
 
UNIT 2 SWIGS for java programing by .pptx
st5617067
 
25 awt
degestive
 
Unit4 AWT, Swings & Layouts power point presentation
SNIGDHAAPPANABHOTLA
 
Ad

Recently uploaded (20)

PDF
VCE English Exam - Section C Student Revision Booklet
jpinnuck
 
PDF
RMMM.pdf make it easy to upload and study
sajedul2
 
PPTX
master seminar digital applications in india
ananyaray35
 
PDF
Business Ethics Teaching Materials for college
CynthiaCastillo40
 
PDF
Complications of Minimal Access Surgery at WLH
mohitsuren827
 
PDF
O5-L3 Freight Transport Ops (International) V1.pdf
labyankof
 
PPTX
Institutional Correction lecture only . . .
limvtheghins
 
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
Rajshri Ghogare
 
PPTX
The Healthy Child – Unit II | Child Health Nursing I | B.Sc Nursing 5th Semester
RAKESH SAJJAN
 
PDF
Microbial disease of the cardiovascular and lymphatic systems
KeyaSharma
 
PPTX
Cell Types and Its function , kingdom of life
ClaireMangundayao1
 
PDF
Anesthesia in Laparoscopic Surgery in India
mohitsuren827
 
PDF
01-Introduction-to-Information-Management.pdf
PrinceIbarra
 
PDF
Pre independence Education in Inndia.pdf
goofy5603
 
PDF
Insiders guide to clinical Medicine.pdf
AbhishekPatil315128
 
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Academy of Grassroots Studies and Research of India (AGRASRI)
 
PPTX
Introduction to Child Health Nursing – Unit I | Child Health Nursing I | B.Sc...
RAKESH SAJJAN
 
PPTX
Renaissance Architecture: A Journey from Faith to Humanism
DrMonicaSharma
 
PPTX
Final Presentation General Medicine 03-08-2024.pptx
ZaheerAhmad228692
 
PDF
102 student loan defaulters named and shamed – Is someone you know on the list?
Kweku Zurek
 
VCE English Exam - Section C Student Revision Booklet
jpinnuck
 
RMMM.pdf make it easy to upload and study
sajedul2
 
master seminar digital applications in india
ananyaray35
 
Business Ethics Teaching Materials for college
CynthiaCastillo40
 
Complications of Minimal Access Surgery at WLH
mohitsuren827
 
O5-L3 Freight Transport Ops (International) V1.pdf
labyankof
 
Institutional Correction lecture only . . .
limvtheghins
 
Pharmacology of Heart Failure /Pharmacotherapy of CHF
Rajshri Ghogare
 
The Healthy Child – Unit II | Child Health Nursing I | B.Sc Nursing 5th Semester
RAKESH SAJJAN
 
Microbial disease of the cardiovascular and lymphatic systems
KeyaSharma
 
Cell Types and Its function , kingdom of life
ClaireMangundayao1
 
Anesthesia in Laparoscopic Surgery in India
mohitsuren827
 
01-Introduction-to-Information-Management.pdf
PrinceIbarra
 
Pre independence Education in Inndia.pdf
goofy5603
 
Insiders guide to clinical Medicine.pdf
AbhishekPatil315128
 
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Academy of Grassroots Studies and Research of India (AGRASRI)
 
Introduction to Child Health Nursing – Unit I | Child Health Nursing I | B.Sc...
RAKESH SAJJAN
 
Renaissance Architecture: A Journey from Faith to Humanism
DrMonicaSharma
 
Final Presentation General Medicine 03-08-2024.pptx
ZaheerAhmad228692
 
102 student loan defaulters named and shamed – Is someone you know on the list?
Kweku Zurek
 
Ad

03_GUI.ppt

  • 1. 1 CIS 421 Web Based Java Programming Building GUIs (Graphical User Interfaces) with Java Part 1
  • 2. 2 AWT vs. Swing • Early Java development used graphic classes defined in the Abstract Windowing Toolkit (AWT) • With Java 2, Swing classes were introduced • Many AWT components have improved Swing counterparts • For example, the AWT Button class corresponds to a more versatile Swing class called JButton • However, Swing does not generally replace the AWT; we still use AWT events and the underlying AWT event processing model
  • 3. 3 java.awt - The Abstract Windowing Toolkit • Introduced with Java 1.0 • Classes are divided into 3 main categories: – graphics (colours, fonts, shapes, etc.) – components (GUI components: windows, buttons, menus, etc.) – layout managers (control the positioning of components on the screen) • Each component corresponds to a “peer” component provided by the native GUI toolkit on the target platform (Windows, Sun Solaris, etc.) • Here is a (small) subset of the AWT class hierarchy:
  • 5. 5 java.awt - The Abstract Windowing Toolkit • Component – an abstract class – superclass of all GUI components except menu components and class CheckboxGroup • Container – the superclass for all components that contain other components – defines add(), for adding components to a container
  • 6. 6 java.awt - The Abstract Windowing Toolkit • Window – a top-level window with no border or menu bar – rarely instantiated (its subclasses are more useful) • Frame – a window with a title bar – can have a menu bar – top-level window for Java AWT-based applications • typically, main() creates an instance of an object that is a Frame as its top-level application window, then adds GUI components to it
  • 7. 7 java.awt - The Abstract Windowing Toolkit • Panel – a container that must be contained within another container – does not have its own window • Applet – a subclass of Panel – actually part of the java.applet package, not the AWT
  • 8. 8 AWT Limitations • “look and feel” of AWT-based programs differs slightly across platforms, because of differences in the underlying native GUI elements • AWT components limited to those that are available on all platforms (lowest common denominator)
  • 9. 9 javax.swing - The Swing Toolkit • In response, Netscape developed the Internet Foundation Classes, which evolved into the Swing toolkit that is part of Sun’s Java Foundation Classes (JFC) • Swing components do not require native peer components • Each Swing UI component is painted onto a blank window • Only peer functionality required is the ability to display windows and paint on them
  • 11. 11 Relationship of Swing and AWT (con’t) Container add(Component) remove(Component) setLayoutManager() ... Window addWindowListener() pack() show() ... Frame setIconImage() setMenuBar() setTitle() ... Dialog setModal() setTitle() ... MenuContainer JFrame getContentPane() setJMenuBar() ... contentPane JWindow JDialog getContentPane() ... contentPane Swing AWT
  • 13. 13 Swing Components • There are various Swing GUI components that we can incorporate into our software: – labels (including images) – text fields and text areas – buttons – check boxes – radio buttons – menus – combo boxes – and many more… • Using the proper components for the situation is an important part of GUI design
  • 14. 14 Labels and Image Icons • A label is used to provide information to the user or to add decoration to the GUI • A Swing label is defined by the JLabel class • It can incorporate an image defined by the ImageIcon class (later) • The alignment and relative positioning of the text and image of a label can be explicitly set
  • 15. 15 Buttons • GUI buttons fall into various categories: – push button – a generic button that initiates some action – check box – a button that can be toggled on or off – radio buttons – a set of buttons that provide a set of mutually exclusive options • Radio buttons must work as a group; only one can be toggled on at a time • Radio buttons are grouped using the ButtonGroup class
  • 16. 16 Buttons • Push buttons and radio buttons generate action events when pushed or toggled • Check boxes generate item state changed events when toggled
  • 17. 17 Radio Buttons • Declaration and initialization: JRadioButton radioButtonSmall, radioButtonLarge ; radioButtonSmall = new JRadioButton (“small”, false); radioButtonLarge = new JRadioButton (“large”, false); this.add (radioButtonSmall); this.add (radioButtonLarge); radioButtonSmall.addActionListener (this); radioButtonLarge.addActionListener (this); • Action Listener may be assigned to each button
  • 18. 18 Radio Buttons • Action performed method use is same as regular buttons • But one needs to put them in a group so they become mutually exclusive ButtonGroup buttonGroup = new ButtonGroup(); buttonGroup.add(small); buttonGroup.add(large);
  • 19. 19 Combo Boxes • A combo box displays a particular option with a pull down menu from which the user can choose a different option • The currently selected option is shown in the combo box • A combo box can be editable, so that the user can type their option directly into the box • itemStateChanged() fires on a mouse click in a ComboBox
  • 20. 20 Combo Box • What goes in the constructor: // Combo Box comboBoxItem = new JComboBox(); this.add (comboBoxItem ); comboBoxItem.addItemListener (this); comboBoxItem.addItem ("10 Computer"); comboBoxItem. addItem ("20 Monitor "); comboBoxItem. addItem ("30 Printer ");
  • 21. 21 Combo Box • A Combo Box can be changed dynamically: // Combo Box comboBoxItem.addItem ("10 Computer"); comboBoxItem.removeAllItems (); • A Combo Box can not be emptied unless it has something in it
  • 22. 22 JTextField • Constructor: new JTextField(20)// 20 columns • Get text out: field.getText() • Put text in: field.setText(“whatever”); • Get an ActionEvent when the user presses return or enter: field.addActionListener(myActionListener); • Select the text in the field: field.selectAll(); • Put the curson back in the field: field.requestFocus(); JLabel JTextField(20)
  • 23. 23 JTextArea JFrame jf = new JFrame(); JPanel jp = new JPanel(); JButton jb = new JButton("Just click it"); jb.addActionListener(this); text = new JTextArea(10,20); text.setLineWrap(true); JScrollPane scroller = new JScrollPane(text); scroller.setVerticalScrollBarPolicy( ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS); scroller.setHorizontalScrollBarPolicy( ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER); jp.add(scroller); jf.getContentPane().add(BorderLayout.CENTER,jp); jf.getContentPane().add(BorderLayout.SOUTH,jb); Create a JScrollPane and give it the text area that it is going to scroll for
  • 24. 24 JCheckBox • Constructor: new JCheckBox(“checkbox 1”); • Listen for an item event (when it is selected or deselected): – check.addItemListener(this); • Handle the event: – public void itemStateChanged(ItemEvent e) { String onOff = “off”; if (check.isSelected() ) onOff = “on”; } • Select or deselect it in code: – check.setSelected(true); – check.setSelected(false);
  • 25. 25 JList String[] entries = {“alpha”, “beta”, “gamma”, “delta”, “zeta”, “eta” }; JPanel jp = new JPanel(); JList list = new JList(entries); JScrollPane scroller = new JScrollPane(list); scroller.setVerticalScrollBarPolicy( ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS); scroller.setHorizontalScrollBarPolicy( ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER); jp.add(scroller); list.setVisibleRowCount(4); list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION); jf.getContentPane().add(jp);
  • 26. 26 Example - Creating a Frame import javax.swing.*; public class FrameExample1 { public static void main(String args[]) { JFrame f = new JFrame("Frame Example 1"); f.setSize(400, 300); f.show(); } }
  • 28. 28 Example - Creating a Frame • By default, a frame is sized at at 0x0 pixels, so setSize() is sent to the frame to change it size to 400 pixels wide x 300 pixels high • If the setSize() message is not sent, only the title bar is displayed • setSize() inherited from Component • The show() message is sent to the frame to make it visible and bring it to the front (if it is behind another window) • show() inherited from Window
  • 29. 29 Example - A Closeable Frame • This frame has a deficiency that limits its usefulness as a basis for developing applications – clicking on the Close button or selecting Close from the left-most drop-down menu hides the frame but does not close the application – if the Java interpreter was run from a command line, to stop the program we must close the console window (NT) or issue a kill command(Unix). • This is because nobody is listening to the closing of the window…
  • 30. 30 GUI Input via the Interface • InputStreams are employed to get input from the user via the keyboard – it waits for the user to input data and press enter • In a GUI-based program, there can be several sources of input; e.g., clicking a button, moving a slider, typing characters in a text field, etc. • Invoking methods to wait for user input via a specific component won’t work, if multiple input source points  the interface can have multiple input points e.g. Microsoft Word can get input from multiple sources  Menu, Toolbar, Text input, Alt-keystroke we can’t predict where the next input will come from
  • 31. 31 Event-Driven GUI • GUI-based Java programs use the Java Event Model • The Java Virtual Machine watches for the user’s actions on components; e.g., – mouse movement/dragging, clicks on components – key presses • The JVM creates event objects that correspond to these actions, and sends these event objects to listeners which are provided by the program to handle the events
  • 32. 32 Event-Driven GUI • java.awt.AWTEvent extends EventObject and is the superclass of all Java 1.1 AWT events • Each AWT event is represented by its own subclass; e.g., – java.awt.event.WindowEvent – java.awt.event.MouseEvent • Swing adds additional event classes, but uses the Java 1.1 event model • Listening is done via Listener Interfaces, whose functions fire when events occur, dispatching an event object to the functions, which must be implemented
  • 33. 33 Mouse Event and Listener with Other Listeners EventListener Component addMouseListener(listener) removeMouseListener(listener) processMouseEvent(mouseEvent) ... listenerList MouseListener mouseClicked(mouseEvent) mousePressed(mouseEvent) mouseReleased(mouseEvent) mouseEntered(mouseEvent) mouseExited(mouseEvent) ActionListener MouseMotionListener KeyListener mouseEvent( MOUSE_PRESSED, 123, 456) MouseEvent getX() getY() getClickCount() Functions of the interface • all must be explicitly implemented (Note: Some will be empty)
  • 35. 35 Class diagram for ClosableFrame •We can now design a subclass of JFrame called CloseableFrame that behaves as expected when the Close button is clicked Java Multiple Inheritance: One class + Interface(s)
  • 36. 36 Example - A Closeable Frame import javax.swing.*; import java.awt.event.*; public class CloseableFrame extends JFrame implements WindowListener {
  • 37. 37 Example - A Closeable Frame public CloseableFrame() { super(); addWindowListener(this); } public CloseableFrame(String str) { super(str); addWindowListener(this); }
  • 38. 38 Example - A Closeable Frame public void windowClosed(WindowEvent event) {} // Do nothing! public void windowDeiconified(WindowEvent event) {} public void windowIconified(WindowEvent event) {}
  • 39. 39 Example - A Closeable Frame public void windowActivated(WindowEvent event) {} // Do nothing! public void windowDeactivated(WindowEvent event) {} public void windowOpened(WindowEvent event) {}
  • 40. 40 Example - A Closeable Frame public void windowClosing(WindowEvent event) { // dispose of the JFrame object dispose(); // terminate the program System.exit(0); }
  • 41. 41 Example - A Closeable Frame public static void main(String args[]) { JFrame f = new CloseableFrame ("Closeable Frame"); f.setSize(400, 300); f.show(); } }
  • 42. 42 CloseableFrame Constructors • JFrame has two useful constructors: – JFrame() creates an untitled JFrame object – JFrame(String title) creates a JFrame object with the specified title • Our CloseableFrame class provides similar constructors
  • 43. 43 CloseableFrame • When a window is opened, closing, closed, activated, deactivated, iconified, or deiconified, it sends a WindowEvent object to its WindowListener object • CloseableFrame is-a JFrame is-a Frame is-a Window, so a CloseableFrame object will send WindowEvents • When the Close button is clicked, it notifies the listener object by invoking the object’s windowClosing() method
  • 44. 44 Closing the Window • We could create a separate class for the listener object; but instead, the CloseableFrame object serves as its own listener for WindowEvent events – CloseableFrame implements the WindowListener interface – the frame registers itself as its own listener by sending itself the addWindowListener(this) message (addWindowListener() inherited from Window)
  • 45. 45 CloseableFrame • We want to terminate the application when the CloseableFrame object is closing, so we are interested in the windowClosing() method – CloseableFrame must implement the other 6 methods listed in the WindowListener interface, but they can have empty bodies • When the window’s Close button is pushed, it invokes the windowClosing() method of its listener; i.e., the windowClosing() method in class CloseableFrame
  • 46. 46 Structure of a JFrame object Title JFrame JRootPane JLayeredPane optional menu bar content pane glass pane Adapted from Core Java 1.2, Volume 1 - Fundamentals, Horstmann & Cornell
  • 47. 47 JFrame • Methods for manipulating these parts public Container getContentPane() public Component getGlassPane() public JMenuBar getJMenuBar() public JLayeredPane getLayeredPane() public JRootPane getRootPane() public void setContentPane(…) public void setGlassPane(…) public void setJMenuBar(…) public void setLayeredPane(…) public void setRootPane(…)
  • 48. 48 Example : Adding a menu to a JFrame Title File Edit Search View Undo Redo Cut Copy Paste JMenuItem JMenu JMenuBar
  • 49. 49 What components make up a Menu Bar ? JMenuItem getComponent():Component JMenu +add(i:JMenuItem)JMenuItem JMenuBar +add(m:JMenu):JMenu Container JComponent AbstractButton
  • 50. 50 What inputs come from a menu bar ? In response to a user clicking on a JMenuItem object, the Java runtime will generate a java.awt.event.ActionEvent object In order to respond to the ActionEvent, an object must implement java.awt.event.ActionListener that has a single method : public void actionPerformed(ActionEvent e); EventObject +getSource():Object AWTEvent ActionEvent +getActionCommand():String
  • 51. 51 Adding a menu to a JFrame public class MenuFrame extends JFrame implements ActionListener { public MenuFrame() { // Set up frame itself – title,size,location JMenuBar menuBar = new JMenuBar( ); setJMenuBar( menuBar ); JMenu fileMenu = new JMenu( "File" ); menuBar.add( fileMenu ); JMenu editMenu = new JMenu( "Edit" ); menuBar.add( editMenu ); JMenu searchMenu = new JMenu( "Search" ); menuBar.add( searchMenu ); JMenu viewMenu = new JMenu( "View" ); menuBar.add( viewMenu );
  • 52. 52 Adding a menu to a JFrame JMenuItem item; item = new JMenuItem ( "Undo" ); item.addActionListener( this ); editMenu.add( item ); item = new JMenuItem ( "Redo" ); item.addActionListener( this ); editMenu.add( item ); … // etc for Cut, Copy, Paste
  • 53. 53 Adding a menu to a JFrame public void actionPerformed( ActionEvent e ) { System.out.println ( e.getSource() ); System.out.println ( e.getActionCommand() ); } javax.swing.JMenuItem[…] Undo If you select Edit->Undo :
  • 54. 54 Layout Manager • A layout manager is a Java object associated with a particular component (usually with a background component) • The layout manager controls the components contained within the component the layer manager is associated with • E.g. if a frame holds a panel, and the panel holds a button, the panel’s layout manager control s the size and placement of the button, and the frame’s layout manager controls the size and placement of the panel, and the button does not need a layout manager • A panel holds 5 things (north, east, south, west, center): even if the 5 things each have their own layout managers, the size and location of the 5 things in the panel are controlled by the panel’s layout manager • Different background components have different types of layout managers, different layout managers have different layout policies • Commonly used layout managers: – BorderLayout: default for a frame – FlowLayout: default for a panel – BoxLayout
  • 55. 55 Nested Layouts import javax.swing.*; import java.awt.event.*; public class SimpleGUI1 implements ActionListener { … JPanel panelA = new JPanel(); JPanel panelB = new JPanel(); panelB.add(new JButton(“button 1”)); panelB.add(new JButton(“button 2”)); panelB.add(new JButton(“button 3”)); panelA.add(panelB); panelA.setColor(Color.blue); panelB.setColor(Color.green); … } Both panelA and panelB have their own layout managers.
  • 56. 56 BorderLayout • A BorderLayout manager divides a background component into 5 regions • You can only add one component per region • Components layed out by this manager usually don’t get to have their preferred size • BorderLayout is the default layout manager for a frame north south west east center
  • 57. 57 FlowLayout • A FlowLayout manager acts kind of like a word processor, except with components instead of words • Each component is the size it wants to be, and they are laid out left to right in the order that they are added, with “word-wrap” turned on • When a component won’t fit horizontally, it drops to the next “line” in the layout • Default layout manager for a panel
  • 58. 58 BoxLayout • A BoxLayout manager is like FlowLayout in that each component gets to have its own size, and the components are placed in the order they are added • A BoxLayout can stack the components vertically or horizontally (instead of automatic ‘component wrapping’)
  • 59. 59 How is a BorderLayout laid out? … JButton jb = new JButton(“click me”); jf.getContentPane().add(BorderLayout.EAST,jb); jf.setSize(200,200); … … JButton jb = new JButton(“click like you mean it”); jf.getContentPane().add(BorderLayout.EAST,jb); jf.setSize(200,200); … • Since it is the east region or a border layout, the preferred width is respected, but the height will be as tall as the frame.
  • 60. 60 How BorderLayout layout? • When something is put in the north or south, it goes all the way across the frame, so the things in the east and west will not be as tall as the frame • Components in the east and west get their preferred width • Components in the north and south get their preferred height • Components in the center get whatever space is left over, based on the frame dimensions
  • 61. 61 BorderLayout and FlowLayout together JFrame jf = new JFrame(); JPanel jp = new JPanel(); jp.setBackground(Color.darkGray); JButton jb1 = new JButton(“button 1”); JButton jb2 = new JButton(“button 2”); jp.add(jb1); jp.add(jb2); jf.getContentPane().add(BorderLayout.EAST,jp); jf.setSize(250,200); jf.setVisible(true); – Which layout on the left corresponds to the above code? – How to get the other one?
  • 62. 62 GridLayout Sets up a grid (each cell is the same size) (m x n) layout frame.getContentPane().setLayout(new GridLayout(3,2,10,7)); (Row, Col, Horizontal Gap, Vertical Gap) GridLayout
  • 63. 63 Layout Managers Predefined layout managers defined in the Java standard class libraries: Defined in the AWT Defined in Swing Flow Layout Border Layout Card Layout Grid Layout GridBag Layout Box Layout Overlay Layout
  • 64. 64 Layout Managers • Every container has a default layout manager, but we can also explicitly set the layout manager for a container • Each layout manager has its own particular rules governing how the components will be arranged • Some layout managers pay attention to a component's preferred size or alignment, and others do not • The layout managers attempt to adjust the layout as components are added and as containers are resized
  • 65. 65 Special Features • Swing components offer a variety of other features • Tool tips provide a short pop-up description when the mouse cursor rests momentarily on a component • Borders around each component can be stylized in various ways • Keyboard shortcuts called mnemonics can be added to graphical objects such as buttons • Check the Sun Tutorial for more info
  • 66. 66 The Graphics Class • paintComponent() is passed a reference to a Graphics object • A Graphics object is a device-independent interface to the computer's graphics display • Most of its methods are concerned with drawing shapes (filled and unfilled), and managing fonts and colours • paintComponent() sends the Graphics object – the drawOval() message, to draw each point – the drawLine() message, to draw the straight line
  • 67. 67 Some Graphics Methods • drawString() • drawOval(), fillOval() • drawRect(), fillRect(), clearRect() • drawRoundRect(), fillRoundRect() • draw3DRect(), fill3DRect() • drawArc(), fillArc() • drawPolygon(), fillPolygon() • drawPolyline()
  • 68. 68 Graphics Usage • Put your own graphics on the screen: – Create your own paintable widget – Put the widget on the frame – Display it import java.awt.*; import javax.swing.*; class MyDrawPanel extends JPanel { public void paintComponent(Graphics g) { g.setColor(Color.orange); g.fillRect(20,50,100,100); } } Make a subclass of JPanel, a widget that can be added to a frame, and override the paintComponent() method paintComponent() is called by the system when it is time to paint the widget g is a Graphic object that is the actual drawing surface that mapped to the real display, and is handed to you by the system Draw a rectangle with orange color