26
תתתתתתת תתתתת תתתתת תתתתת תתתתת4 - GUI

עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline Introduction to GUI Swing Basic components Event handling

Embed Size (px)

Citation preview

Page 1: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

עקרונות תכנות מונחה עצמים

GUI - 4תרגול

Page 2: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Outline

Introduction to GUI

Swing

Basic components

Event handling

Page 3: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

CLI VS GUI

Page 4: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

CLI VS GUI

GUI applications CLI applications

Reactive, interactive Transactional Program Flow

Asynchronous Textual Input

Graphical Textual Output

Yes No MultiTasking

Remains active Exit After Execution

Page 5: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

GUI programming challenges

Usability Attractiveness Multithreading Incremental execution Testing

And• The algorithm

Page 6: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Elements of GUI programming

Visualization of data: Model Widgets Visualization of commands: Buttons, pop-ups Responding of commands: Event handling Graphical layout: Containers, panels, layout

managers Reactiveness: Using threads safely Separation of concerns: OOP, good design, MVC

Page 7: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

SWING

Java’s GUI framework (Java Foundation Classes) Extension of an older framework – AWT Provides:

Frames, dialogs, panels, toolbars.. Graphical control widgets, from buttons to tree controls Thread-safe events dispatching Rich-text editing Pluggable Look-n’-feel(PLAF) Other goodies (accessibility, text parsing..)

Official Swing Tutorial

Page 8: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Swing Elements

Components - Graphical widgets Containers - Components that contain sub-

components Layout - Arrangement of components inside

containers

Events - Interaction with the user Event listeners – Objects that responds to events

asynchronously Event dispatcher – A special thread that dispatches events

and re-paints the GUI Models - Objects that hold the data and handle

events for components

Page 9: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Swing components - hierarchy

Each component is a Java class with a fairly extensive inheritency hierarchy: Object

Component

Container

JComponent

JPanel

Window

Frame

JFrame

javax.swing

java.awt

java.lang

Page 10: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Using Swing Components

Very simple, just create object from appropriate class – examples: JButton but = new JButton();

JTextField text = new JTextField();

JTextArea text = new JTextArea();

JLabel lab = new JLabel();

Many more classes. Don’t need to know every one to get started.

Page 11: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Adding components

Once a component is created, it can be added to a container by calling the container’s add method:

Container cp = getContentPane();

cp.add(new JButton(“cancel”));

cp.add(new JButton(“go”));

How these are laid out is determined by the layout manager (next lesson).

Page 12: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

JFrame

A frame contains:

Title bar

Menu bar

Content pane

The content pane is a container that represent the main area of the frame.

Page 13: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Example 1

Hello.jar

Page 14: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Jhello World!

public class Hello extends JFrame {

public Hello(){ super("Title Bar"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JButton click = new JButton("This is a button"); Container cp = getContentPane(); cp.add(click);

pack(); setVisible(true); }

public static void main(String args[]){ Hello frame = new Hello(); }}

Page 15: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Event handling

Page 16: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Events and Listeners in Swing

Input from the user in Swing is represented by Events Events come from a Source: a component or a model Related kinds of inputs are grouped into Listener interfaces A listener interface contains several messages that passes events

to the receiver Each message represent a different scenario of receiving this input

from the user An Event Listener is an object whose class implements a listener

interface, so it can receive events Attaching a listener of type X to a source is done by the call :

source.addXListener(listener)

Page 17: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Example 2

Jumper.jar

Page 18: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Add Action Listener

public class Jumper extends JFrame implements ActionListener{

public Jumper(){ super(“Jumper"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JButton btn = new JButton(“Catch me!"); btn.addActionListener(this); //source.addXListener(listener)

Container cp = getContentPane(); cp.add(btn);

pack(); setVisible(true); }

@Override public void actionPerformed(ActionEvent e) { Random rand = new Random(); int x = rand.nextInt(300); int y = rand.nextInt(300); setLocation(x, y); }}

Page 19: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

The Event object

All event classes in Swing extends the EventObject class.

This class contains the method getSource( ) that returns the object which was the source of the event

Events sub-classes usually also contain data related to specific event.

Page 20: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Event Listener Example: Action Listener

Page 21: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Event Listener Example: Mouse Listener

Page 22: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Listening to an event

Page 23: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

Example 3

Convertor.jar

Page 24: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

public class Convertor extends JFrame implements ActionListener { private static double DOLLAR_RATE = 3.943; private JButton convertButton; private JButton resetButton; private JLabel resultLabel; private JTextField valueInput; private double value;

public Convertor(){ super("Convertor"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); value = 0; // Initiate label and text field. valueInput = new JTextField(); valueInput.setColumns(10); valueInput.setText( value + ""); resultLabel = new JLabel(value + " $ is "+ convert() + " Shekel");

// Create buttons convertButton = new JButton("Convert"); resetButton = new JButton("Reset");

Page 25: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

// Add action listeners

convertButton.addActionListener(this);

resetButton.addActionListener(this);

// Add all objects to Content Pane

getContentPane().setLayout(new FlowLayout());

getContentPane().add(resetButton);

getContentPane().add(valueInput);

getContentPane().add(convertButton);

getContentPane().add(resultLabel);

pack();

setVisible(true);

{

Page 26: עקרונות תכנות מונחה עצמים תרגול 4 - GUI. Outline  Introduction to GUI  Swing  Basic components  Event handling

public void actionPerformed(ActionEvent e) { if (e.getSource().equals(convertButton)){ updateValue(); } if (e.getSource().equals(resetButton)){ setValue(0); } updateView();{

private void setValue(double v) { this.value = v;}

private double convert() { return value*DOLLAR_RATE;{

private void updateValue(){ this.value = Double.parseDouble(valueInput.getText());}

private void updateView(){ resultLabel.setText(value +" $ is " + convert() + " Shekel " ); valueInput.setText(value +""); pack();{