1. Graphical User Interface(GUI)
Advanced Programming in Java
Graphical User Interface(GUI)
Mehdi Einali

2. Agenda Intro to Graphical User Interface (GUI) GUI Patterns
GUI Components
Event Handlers
Inner Classes
Anonymous Inner Classes

3. Intro to Gui

4. Graphical User Interface
GUI presents a mechanism for interacting with application.
a user-friendly mechanism
What are other mechanisms?
Console Applications
File
Web Applications …
GUI is pronounced “GOO-ee”

5. GUI Components GUIs are built from GUI components GUI component:
sometimes called controls or widgets
widget: short for window gadgets
GUI component:
an object with which the user interacts
via the mouse or the keyboard
Example?
Button, Textbox, Menu, …

7. Gui Graphics

8. combination

9. Swing AWT was the early way for GUI in java
Abstract Window Toolkit
Java.awt package
An AWT component’s behavior may be different between platforms.
Swing is a newer approach
In this presentation we review Swing GUI components
javax.swing package

10. Java FX Java + Flash + Flex = Java FX
Cross Platform Rich Internet Application
Multi devices
Use Scene Builder which generate FXML
Compete with HTML5 on adoption!!

11. How gui works Setup phase Customization (provided during setup)
Describe how the GUI window should look
Use libraries for windows, widgets, and layout
Embed specialized code for later use
Customization (provided during setup)
New widgets that display themselves in
custom ways
How to react to events
Execution
Framework gets events from OS • Mouse clicks, key presses, window becomes visible, etc.
Framework triggers application code in response • The customization described above

12. Gui patterns

13. patterns
"Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice“
Christopher Alexander: a building architect in the 1970’s
Alexander’s idea was to improve the quality of the buildings of the time by utilizing proven ‘patterns’ of good architectural design.

14. Pattern in architecture
Context: Interior design/ Shop design/ Small shop
Problem: customer feel inconvenience and want to leave soon
Solutions: Use mirrors to make room space look larger

15. Pattern in architecture
Alexander’s work ‘discovered’ by Kent Beck and friends in the 1980’s
They applied Alexander’s ideas about constructing buildings to the building of software.
In nutshell
proven software practice
piece of literature
building block
possible abstraction levels:
language construct
idiom
design pattern
architectural pattern

16. Gof pattern In 1994 GoF published the Bible(Design Patterns)
Type of the patterns
Creational
Focuses on simplifying object creation and referencing
(Singleton, Abstract Factory)
Structural
Govern how objects and classes work together
(Adapters, proxy)
Behavioral
Focuses on messages sent between objects
(State, Observer)

17. observer

18. observer Subset of the asynchronous publish/subscribe pattern
An object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.
It is mainly used to implement distributed event handling systems.

19. observer

20. code

21. Applicability
When an abstraction has two aspects, one dependent on the other, and you want to reuse each
When change to one object requires changing others, and you don’t know how many objects need to be changed
When an object should be able to notify others without knowing who they are

22. Consequences
Loose coupling between subject and observer, enhancing reuse
Support for broadcast communication
Notification can lead to further updates, causing a cascade effect

23. Swing listeners ActionListener AdjustmentListener FocusListener
ItemListener
KeyListener
MouseListener
MouseEventListener
MouseMotionListener
TreeExpansionListener
TextListener
WindowListener
and on and on…

24. Composite pattern

25. Composite
The Composite design pattern allows you to treat a collection of objects as if they were one thing.
In this way you can reduce the complexity of the code required if you were going to handle collections as special cases.

26. Class diagram

27. use

28. Applicability You want to represent part/whole hierarchies of objects
You want to be able to ignore the difference between compositions of objects and individual objects

29. Consequences
Makes the client simple, since it can treat objects and composites uniformly
Makes it easy to add new kinds of components
Can make the design overly general
Operations may not make sense on every class
Composites may contain only certain components

30. layouts

31. strategy
The Strategy pattern allows you to replace algorithms on the fly.
To implement the solution, you represent each algorithm as a Strategy class.
The application then delegates to the current Strategy class to execute the strategy-specific algorithm.

32. Class diagram

33. use

34. applicability Many classes differ in only their behavior
Client needs different variants of an algorithm

35. Consequences Code is more extensible with new strategies
Compare to conditionals
Separates algorithm from context
each can vary independently
Adds objects and dynamism
code harder to understand
Common strategy interface
may not be needed for all strategy implementations- may be extra overhead

36. Other pattern in gui Command MVC(Model View Controller) Decorator
Factory
. . .

37. Gui Components

38. JOptionPane JOptionPane class has simple static methods
for input and output
Using Dialog boxes
JOptionPane.showInputDialog
Returns a String
JOptionPane.showMessageDialog
Shows a dialog box

39. JOptionPane Sample String name =
JOptionPane.showInputDialog("Enter your name:");
JOptionPane.showMessageDialog(null,
"Salam "+name +"!");

40. Modal Dialog JOptionPane dialogs are called modal dialogs
While the dialog is on the screen…
the user cannot interact with the rest of the application

41. JFrame We create a window containing Swing GUI components
This window object is usually instance of JFrame or a subclass of JFrame
JFrame provides the basic attributes and behaviors of a window
a title bar at the top
minimize and maximize buttons
close button

42. JFrame Example JFrame frame = new JFrame(); frame.setSize(300, 150);
frame.setVisible(true);
frame.setLayout(new FlowLayout());
frame.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE);

43. Swing GUI Components JButton JLabel JTextField JComboBox JRadioButton
JMenu …

44. JLabel and JButton JLabel label = new JLabel("Salam");
label.setToolTipText("Tooltip1");
frame.add(label);
JButton button = new JButton("Click!");
button.setToolTipText("salam :-)");
frame.add(button);

45. Other GUI Components JTextField textbox = new JTextField(10);
frame.add(textbox);
JComboBox combo = new JComboBox(
new String[]{"Red", "Blue", "Green"});
frame.add(combo);

46. Layout Management You must attach each GUI component to a container
such as a JFrame.
You typically must decide where to position each GUI component
known as specifying the layout
Java provides several layout managers
They help you position components

47. FlowLayout
In FlowLayout layout manager: components are placed on a container from left to right in the order in which they’re added
When no more components can fit on the current line
continue on the next line
Other layouts:
GridLayout, BoxLayout, …

48. Layouts Three ways to arrange components in a GUI Layout managers
Simple and Fast
Absolute positioning
provides the greatest level of control GUI’s appearance.
Visual programming in an IDE
They generate codes
They may use layout managers

49. Absolute Positioning Set Container’s layout to null
Specify the absolute position of each GUI component
with respect to the upper-left corner of the Container
by using Component methods
setSize and setLocation or setBounds
absolute positioning can be tedious
unless you have a support by an IDE

50. IDE Support Many IDEs provide GUI design tools
You can specify a component’s exact size and location in a visual manner by using the mouse simplifies creating GUIs
Each IDE generates this code differently You should know the underlying codes
Eclipse/InteliJ Plugin

51. Extending JFrame
You can also extend JFrame to create new frames…

52. public class MyFrame extends JFrame{
JLabel label;
JButton button;
JTextField textbox;
JComboBox combo;
public MyFrame(){
super("Frame Title");
label = new JLabel("Salam");
label.setToolTipText("Label Tooltip");
add(label);
button = new JButton("Click!");
button.setToolTipText("salam :-)");
add(button);
textbox = new JTextField(10);
add(textbox);
combo = new JComboBox(
new String[]{"Red", "Blue", "Green"});
add(combo); }

53. Event handling

54. Event Handling GUIs are event driven User interaction => events
An Event drives the program to perform a task
Some events:
clicking a button
typing in a text field
selecting an item from a menu
closing a window
moving the mouse

55. Event Handling (2) event handler :
The code that performs a task in response to an event
event handling :
The overall process of responding to events

57. listeners

58. Event Handlers button = new JButton("Click!"); ActionListener al =
new ClickListener();
button.addActionListener(al);
public class ClickListener
implements ActionListener {
public void actionPerformed(ActionEvent e) {
JOptionPane.showMessageDialog(null, “Salam!!!”); }

59. Better Event Handlers I want to show a message-box
According to the value of a component
For example a text-field or a combo-box
How can I do that?
Inner Classes

60. public class MyFrame extends JFrame{
JButton button;
JTextField textbox;
public MyFrame(){
button = new JButton("Click!");
button.addActionListener(new ClickListener());
add(button);
textbox = new JTextField(10);
add(textbox); }
class ClickListener implements ActionListener {
public void actionPerformed(ActionEvent e) {
JOptionPane.showMessageDialog(null, textbox.getText());

61. Inner class

62. Class Types class FriendlyClass{ } public class OuterClass {
private int value;
public class Inner{
public void f(){ …
Friendly Class
Public class
Inner Class

63. Inner Classes Declared in another class
Instantiated using a reference object of outer class
Has access to this object
The inner class can be static
No reference object of outer class is needed
No access to outer class is provided

64. OuterClass.this is implicitly saved in inner object
public class OuterClass {
private int value = 2;
class Inner{
public void innerMethod(){
OuterClass.this.value = 5; }
public void outerMethod(){
Inner inner = new Inner();
inner.innerMethod();
public static void main(String[] args) {
OuterClass outer = new OuterClass();
System.out.println(outer.value);
outer.outerMethod();
OuterClass.this is implicitly saved in inner object

65. Why we need outer reference?
public class OuterClass {
private int value = 2;
class Inner{
public void f(){
OuterClass.this.value = 5; }
public static void main(String[] args) {
OuterClass outer = new OuterClass();
OuterClass.Inner inner = outer.new Inner();
System.out.println(outer.value);
inner.f();
Why we need outer reference?

66. OuterClass.Inner in = new OuterClass.Inner();
class OuterClass {
static class Inner{
public void f(){
System.out.println("f() invoked"); }
public class MainClass {
public static void main(String[] args) {
OuterClass.Inner in = new OuterClass.Inner();
in.f();

67. Inner Class Specifiers
static
final
Access Specifiers
public
private
Friendly (no specifier)
protected

68. Anonymous Inner Class An inner class With no name Created once
Used once
No access to this class from any other place
Once created and used

69. MyInterface inner = new MyInterface() { public void innerMethod() {
interface MyInterface{ void innerMethod();}
public class OuterClass {
private int value = 2;
public void outerMethod(){
MyInterface inner = new MyInterface() {
public void innerMethod() {
OuterClass.this.value = 5; } };
inner.innerMethod();
public static void main(String[] args) {
OuterClass outer = new OuterClass();
System.out.println(outer.value);
outer.outerMethod();

70. Anonymous Inner class

71. Anonymous Inner Class Usually implements an interface
Or extends another class
And Overrides some special method
Main Application : Event Handlers

72. public class MyFrame extends JFrame{
JButton button;
JTextField textbox;
public MyFrame(){
button = new JButton("Click!");
button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
JOptionPane.showMessageDialog(null, textbox.getText()); }
});
add(button);
textbox = new JTextField(10);
add(textbox);

73. Further on GUI javaw Java Web Applications SWT Java Look and Feels
Web Interface
SWT
Java Look and Feels
Android Programming!!

74. end