GUI
description
Transcript of GUI
![Page 1: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/1.jpg)
GUIGraphical User
Interface
![Page 2: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/2.jpg)
Outline
Introduction Packages Components Layout Manager Events and Listeners Examples
![Page 3: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/3.jpg)
Introduction
![Page 4: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/4.jpg)
Definition Abbreviated GUI (pronounced GOO-ee). Program interface that takes advantage
of the computer's graphics capabilities to make the program easier to use.
User interface based on graphics (icons and pictures and menus) instead of text; uses a mouse as well as a keyboard as an input device.
Includes standard formats for representing text and graphics.
![Page 5: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/5.jpg)
History Douglas Engelbart's Augmentation of Human
Intellect project at SRI in the 1960s developed the On-Line System, which incorporated a mouse-driven cursor and multiple windows.
The first GUI was designed by Xerox Corporation's Palo Alto Research Center in 1973.
Features: 3-button mouse, bit-mapped display,the use of graphical windows, ethernet network.
Macintosh team at Apple Computer (included members of the Xerox PARC group) continued to develop such ideas in the first commercially successful product to use a GUI, the Apple Macintosh, released in January 1984.
One reason for their slow acceptance: require considerable CPU power and a high-quality monitor.
![Page 6: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/6.jpg)
Java GUI GUI frameworks
Part of Java Foundation Classes (JFC) Two important packages:
Abstract Window Toolkit (AWT). Provides the basic support for building GUIs.
Swing. Extension of AWT, provides extensive support for building high-quality GUIs.
Components, also known as widgets, are the building blocks of the visual aspect.
Each GUI is characterized by its visual appearance and its behavior pattern in response to user input.
![Page 7: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/7.jpg)
Packages
![Page 8: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/8.jpg)
Abstract Window Toolkit
![Page 9: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/9.jpg)
What is it? Is a GUI toolkit that is supplied with
all Java systems. Provides the basic support for
building graphical user interfaces using components
Java.awt provides the classes for the interfaces
AWT is designed to be portable and work across multiple platforms
![Page 10: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/10.jpg)
Components: represents something that has a position and size and can be painted on the screen and receive input events.
Component subclasses of the Component class.
Two types: Primitive components: components that
do not contain other components. Containers: contain other primitive
components and containers.
Component Class
![Page 11: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/11.jpg)
Container Class A container is a type of component that
provides a rectangular area within which other components can be organized by a layout manager.
Container IS-A Component so a Container can go inside another Container
Some subclasses of container class are: Dialog: window that takes input from a user Window: borderless and titleless top-level window Frame: Top-level window with a title and a border.
![Page 12: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/12.jpg)
Swing Package Built on top of Abstract Windows
Toolkit (AWT) Subclass of the Component class Subclass of Container class
![Page 13: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/13.jpg)
What does it do?
Provides components to communicate with user Input from keyboard or mouse Output to console
Similar to AWT but enhanced
![Page 14: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/14.jpg)
Disadvantages of AWT
Poor performance Lack of sophistication Heavyweight Looks determined by Platform
![Page 15: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/15.jpg)
Benefits of Swing
Pluggable look and feel Constant look and behavior Eliminates overhead Lightweight Improved components More robust
![Page 16: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/16.jpg)
Components
![Page 17: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/17.jpg)
AWT Components
![Page 18: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/18.jpg)
Swing Components
![Page 19: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/19.jpg)
Components
Buttons Checkboxes Radio buttons Combo boxes (drop down menus) Textfields Labels
![Page 20: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/20.jpg)
The Button class creates pushbuttons with text labels. Button button = new Button("...");
add(button); A JButton can be instantiated and
used in a GUI just like a java.awt.Button. JButton myButton = new
JButton("Tiger"); add(myButton);
Buttons
![Page 21: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/21.jpg)
Checkboxes Checkboxes are toggle buttons that operate
independently of other checkboxes or can be put into a group so that they operate like radio buttons.
Checkbox cb = new Checkbox("..."); somePanel.add(cb);
JCheckBox is similar to an AWT Checkbox that is not in a CheckboxGroup.
JCheckBox cb1 = new JCheckBox("Choose Me", true);
![Page 22: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/22.jpg)
Radio Buttons In AWT, radio buttons are
checkboxes that belong to the same CheckboxGroup; which ensures that only one checkbox is selected at a time.
CheckboxGroup cbGroup = new CheckboxGroup(); Checkbox cb1 = new Checkbox("...", cbGroup, true); add(cb1);
Each JRadioButton is added to a ButtonGroup so the group behaves as a set of radio buttons.
ButtonGroup rbg = new ButtonGroup(); radioButton = new JRadioButton("$45,000"); add (radioButton);
![Page 23: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/23.jpg)
Combo Boxes Choice produces pull-down menus with a single
selection showing, the other options get displayed when the user clicks with the mouse.
Known as "combo boxes," "drop-down list boxes," or "option menus“.
Choice choice = new Choice(); choice.addItem("..."); choice.addItem("..."); ... somePanel.add(choice);
JComboBox works like AWT's Choice component JComboBox combo1 = new JComboBox();
combo1.addItem (“Mercury”);
![Page 24: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/24.jpg)
TextFields Textfields create boxed areas to display
and/or read a single line of text. (TextArea can display multiple lines, but no ActionEvent).
Java textfields do not permit mixed fonts or colors within a single textfield. TextField lastNameField = new TextField(15);
add(lastNameField); JTextField behaves very similarly to AWT
TextField. JTextField tf = new JTextField();
tf.setText("TextField");
![Page 25: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/25.jpg)
Labels Simple textual displays, without any
associated actions. Label label = new Label("..."); add(label);
A JLabel is a single line label similar to java.awt.Label.
Additional functionality that a JLabel has is the ability to:
Add an Icon Set the vertical and horizontal position of text relative
to the Icon Set the relative position of contents within component
JLabel plainLabel = new JLabel("Plain Small Label");
![Page 26: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/26.jpg)
Layout Manager
![Page 27: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/27.jpg)
What it is
It allows to format components on the screen in a platform-independent way.
LayourtManager interface Programs with a consistent and
reasonable appearance
![Page 28: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/28.jpg)
Flow Layout
Default layout for the Panel class. Components adjust to fit screen. Components’ flow change based
upon the new width and height.
![Page 29: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/29.jpg)
To create a Flow Layout Three constuctors
FlowLayout(align, hGap,vGap) Creates a flow layout with the alignment set to align and the horizontal and vertical gaps.
FlowLayout(align)- creates a flow layout with the given aligh and the horizontal and vertical gaps set to the default value
FlowLayout() – creates a flow layout with the align, horizontal and vertical gap set to the default value.
![Page 30: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/30.jpg)
Example
![Page 31: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/31.jpg)
Grid Layout
What is it and what does it do Layout manager that arranges
components in a rectangular grid All components given same size Components can be stretched
vertically and horizontally
![Page 32: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/32.jpg)
Implementation Constructors
GridLayout (r,c,hGap,vGAp) Creates a grid layout manager with r rows and c
columns and with the horizontal and vertical gaps set to hGap and vGAp
GridLayout (r,c) Creates a grid layout manager with r rows and c
columns and with the horizontal and vertical gaps set to 0
GridLayout () Creates a grid layout manager with a single row and
with the horizontal gap set to 0
![Page 33: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/33.jpg)
Examples
![Page 34: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/34.jpg)
Border Layout
What it is and what it does Layout manager that arranges as
many as five components in five positions identified as North,South,East, and Center
Can be stretched vertically or horizontally to fill the space between components
![Page 35: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/35.jpg)
Constructors
BorderLayout (hGap, vGap) Creates a border layout manager with
the horizontal and vertical gaps set to hGap and vGap
BorderLayout () Creates a border layout manager with
the horizontal and vertical gaps set to 0
![Page 36: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/36.jpg)
Examples
![Page 37: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/37.jpg)
Events and Listeners
![Page 38: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/38.jpg)
Events and Listeners
Events occur when the user interacts with the GUI.
Listeners are used to respond to the event
Each kind of Event is related to is own Listener
![Page 39: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/39.jpg)
Events
The user can interact with the Gui in some different ways: with the mouse with the keyboard with a button others
![Page 40: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/40.jpg)
Listeners “Listen” the information of the
event and respond to it Different mechanisms of adding
listeners: part of the class defining Gui inner class separate class anonymous local class
![Page 41: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/41.jpg)
Types of Events and Listeners
ActionEvent ActionListener
KeyEvent KeyListener
MouseEvent MouseListener
![Page 42: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/42.jpg)
ActionEvent
ActionEvent occurs when the user clicks a button, choose a menu item or press Enter in a Text file.
Methods: String getActionCommand() Int getModifiers() Object getSource()
![Page 43: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/43.jpg)
ActionListener
ActionListener is used to respond to ActionEvent
Methods: actionPerformed(ActionEvent)
![Page 44: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/44.jpg)
KeyEvent
KeyEvents occur when the user type at the keyboard.
Methods: int getKeyChar() int getKeyCode() String getKeyText() others.
![Page 45: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/45.jpg)
KeyListener
KeyListener is used to respond KeyEvents
Methods: keyTyped(KeyEvent) keyPressed(KeyEvent) keyReleased(keyEvent)
![Page 46: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/46.jpg)
MouseEvent MouseEvent occurs when the user
uses the mouse to interact with a component.
Methods: getClickCount() getX() getY() Others.
![Page 47: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/47.jpg)
MouseListener MouseListener is used to respond
to MouseEvents Methods:
mouseClicked(MouseEvent) mousePressed(MouseEvent) mouseReleased(MouseEvent) mouseEntered(MouseEvent) mouseExited(MouseEvent)
![Page 48: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/48.jpg)
Examples
![Page 49: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/49.jpg)
Examples
Bouncing Ball Ball (mouse) Digital Note Word Finder
![Page 50: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/50.jpg)
Bouncing Ball (Framework)
![Page 51: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/51.jpg)
Bouncing Ball (Code)
![Page 52: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/52.jpg)
Ball (mouse)
![Page 53: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/53.jpg)
Ball (mouse)
public boolean mouseDown (Event e, int x, int y){
x_speed = - (x_speed);return true;
}
![Page 54: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/54.jpg)
Word Finder
![Page 55: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/55.jpg)
Digital Note
![Page 56: GUI](https://reader036.fdocuments.in/reader036/viewer/2022062809/5681554f550346895dc31b67/html5/thumbnails/56.jpg)
Questions?