cs 112 gui
DESCRIPTION
CS 112 GUI. 06 May 2008 Bilkent. Java GUI API. Containers : contain other GUI components . E.g, Window , Panel, Applet , Frame Dialog . Components : Buttons , ComboBox , List , Slider , Label etc . Helpers : Font, Color , Dimension , LayoutManager etc. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/1.jpg)
CS 112 GUICS 112 GUI
06 May 2008Bilkent
![Page 2: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/2.jpg)
Java GUI APIJava GUI API Containers:
◦ contain other GUI components. E.g, Window, Panel, Applet, Frame Dialog.
Components:◦ Buttons, ComboBox, List, Slider, Label etc.
Helpers:◦ Font, Color, Dimension, LayoutManager etc.
Frame with normal window
controlsOptional Menu
Three containers in Frame with
Border Layout
UI-components inside
containers each with own layout
![Page 3: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/3.jpg)
Understanding the GUI
UI -containers have list of
UI -components
Each UI -component is a class with paint method & lists of
Event listeners
{Frame}
{label}
{textfield}
{button}
components
![Page 4: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/4.jpg)
Setting up the GUI
Extend Frame class In constructor
• Create instances of containers& add them to Frame
• Create instances of components& add them to containers or Frame
Possibly override paint method
UI-components added to components list Painting Frame
1.paints Frame borders2.calls Frame paint method3.calls paint method of each object in component list
Hint: Employ layout managers
to arrange components in
containers
![Page 5: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/5.jpg)
A simple example
import javax.swing.* ;
class FirstFrame extends J Frame { public FirstFrame() {
setTitle("FirstFrame");setSize(300, 200);
}}
public class FirstTest { public static void main(String[] args) {
J Frame frame = new FirstFrame();frame.show();
}}
![Page 6: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/6.jpg)
![Page 7: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/7.jpg)
Layout ManagerLayout Manager
Flow Layout◦ By default
Border LayoutGrid LayoutBox Layout
Why layout?
Layouts provide flexibility in different environments with different screen resolutions
![Page 8: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/8.jpg)
![Page 9: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/9.jpg)
![Page 10: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/10.jpg)
![Page 11: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/11.jpg)
![Page 12: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/12.jpg)
![Page 13: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/13.jpg)
For X axis:
![Page 14: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/14.jpg)
GraphicsGraphicsPreviously, we have seen GUI
components, their relationships, containers, layout managers.
Now we will see how to paint graphics on GUI components
![Page 15: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/15.jpg)
In this example if you resize the frame, line disappears, so how can we avoid this problem and display line permanently?-by inheriting Jlabel to draw line!
![Page 16: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/16.jpg)
--The paintComponent method is invoked, whenever a component is first displayed or redisplayed!
--To draw things on component you first declare a class that extends a swing GUI and override paintComponent method
![Page 17: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/17.jpg)
The tester of SmileyFace:
![Page 18: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/18.jpg)
Drawing Strings, Lines, Drawing Strings, Lines, Rectangles, and OvalsRectangles, and Ovals…
![Page 19: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/19.jpg)
Drawing arcsDrawing arcs
![Page 20: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/20.jpg)
Draw PolygonsDraw Polygons
![Page 21: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/21.jpg)
Event Driven Event Driven ProgrammingProgramming
- In ED programming, code is executed when an event occurs
- The program interacts with user and the events drive its execution.
- Event is defined as a signal to the program that something has happened.
- The component which an event is generated is called source object or source component. E.g., button
![Page 22: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/22.jpg)
Events & Event Handling
Example… User clicks on a button Button is source of event object Event object passed to associated listener object Listener object executes associated method
to perform desired task (save file, quit program, …)
Eventlistenerobject
(executesmethod)
EventObjectEvent
cause(mouse,
keyboard,timer, …)
EventSourceobject
![Page 23: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/23.jpg)
Setting up Event Handling
Create listener class Using new or existing class, simply Implement desired event listener interface Putting code for desired action in its methods
In application (e.g. Frame)
Create instance of listener class Add as listener of source object
• can have any number of listeners for each event• Source & listener can be same object!
![Page 24: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/24.jpg)
Understanding Events
When button is pressed actionPerformed method
of every item in button’s actionListeners list called
Similarly for textfield When Frame close button
is pressed windowClosing method of
every item in Frame’s windowListeners list called
{Frame}
{label}
{textfield}
{button}
components
ActionListeners
ActionListenersactionPerformed
{MyListener}
actionPerformed
WindowListeners
windowClosing
![Page 25: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/25.jpg)
Event Classes
AWTEventEventObject
AdjustmentEvent
ComponentEvent
TextEvent
ItemEvent
ActionEvent
InputEvent
WindowEvent
MouseEvent
KeyEvent
ContainerEvent
FocusEvent
PaintEvent
ListSelectionEvent
![Page 26: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/26.jpg)
Event Examples
User clicks a button, presses Return while typing in a text field, or chooses a menu item ActionListener
User closes a frame (main window) WindowListenerUser presses a mouse button while the cursor is over a
component MouseListenerUser moves the mouse over a component
MouseMotionListenerComponent becomes visible ComponentListenerComponent gets the keyboard focus FocusListenerTable or list selection changes ListSelectionListener
![Page 27: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/27.jpg)
How to Implement an Event Handler
In the declaration for the event handler class, specify that the class either implements a listener interface or extends a class that implements a listener interface. For example:
public class MyClass implements ActionListener { Register an instance of the event handler class as a
listener upon one or more components. For example: someComponent.addActionListener(instanceOfMyClass)
Implement the methods in the listener interface. For example: public void actionPerformed(ActionEvent e) { .../ /code that reacts to the action... }
![Page 28: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/28.jpg)
Simple exampleSimple example
![Page 29: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/29.jpg)
Simple example with inner Simple example with inner classclass
Inner class is declared when it is only used by outer classAnd inner class can use the reference data and methods in outer class
![Page 30: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/30.jpg)
Another inner class Another inner class exampleexample
Inner class also can be shortened by using anonymous inner classes(without a name),
![Page 31: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/31.jpg)
Another exampleAnother example
![Page 32: CS 112 GUI](https://reader035.vdocuments.site/reader035/viewer/2022081519/56813a45550346895da23743/html5/thumbnails/32.jpg)
Mouse ExampleMouse Example