event driven, gui

Event Driven, GUI

Avshalom Elmalech

Eliahu Khalastchi

2010

IntroductionMain event loop

LayoutsWidgets

Event handlingThreads & SWT

Introduction

Java runs upon a VM Graphical libraries / components

Belong to the operating system (OS) Are different for different operating systems Not written in Java

GUI – Graphical User Interface GUI is challenging for Java

Access to the OS’s graphical components Programming for multi-platforms


LayoutsWidgets


Introduction

Awt - Abstract Windowing Toolkit (1995) The first GUI for Java Weighty – calls OS’s components Lowest common denominator

problem Uses components that are

available in every platform Effective yet ugly


LayoutsWidgets


Introduction

Swing /JFC (1998) The official GUI for Java (SUN) Every component is written in Java (light weight) Tires to mimic OS’s look Will work under any

platform But the look & feel are

not exactly the same


LayoutsWidgets


Introduction

SWT – Standard Widget Toolkit (IBM, 2001) Tires to enjoy both worlds Uses the OS’s components when available Uses Java implementation

when they are not OS’s look & feel Requires swt.jar Implemented for each

platform


LayoutsWidgets


Introduction

Today’s lecture is about SWT programming In the recitation we will get familiar with a

visual editor – that writes the code for us Here, we will get familiar with the code itself

And more importantly, the concept ofEvent Driven Programming


LayoutsWidgets


Introduction – event driven

It is an application architecture technique The flow of the program is determined by

events i.e, Sensors input (robot, software agent) User’s action (mouse click, key pressed) Messages from other programs / threads

The application has a main loop which is clearly divided down to two sections: The first is event selection (or event detection) The second is event handling


LayoutsWidgets


Introduction – event driven

Event-driven programming is widely used in GUIs

It has been adopted by most commercial widget toolkits as the model for interaction

How it works? First, methods called event handlers are written Then registered to listen to certain events The events trigger the event handlers


LayoutsWidgets


Main event loop

Every swt program requires display and at least one shell

Shell is a window that can contain graphical objects

Here we instance them open() opens the window While the window is open Upon an occurrence of an

event, readAndDispatch calls the event’s handler

Otherwise the display sleeps And finally disposed

import org.eclipse.swt.widgets.Display;

import org.eclipse.swt.widgets.Shell;

public class GUI {

public static void main(String[] args) {

Display display = new Display();

Shell shell = new Shell(display);

shell.setText("Hello, world!");

shell.open();

// Set up the event loop.

while (!shell.isDisposed()) {

if (!display.readAndDispatch()) {

// If no more entries in the event queue

display.sleep();

}

}

display.dispose();

}

}


LayoutsWidgets


layouts

We’ve created 4 instances of different buttons, and set their text

How are they arranged? shell.setLayout(Layout l) FillLayout - puts all the

widgets in a horizontal or a vertical line

RowLayout – the same with wrapping

GridLayout – defines a grid which is actually a table

shell.setSize(400, 300);

new Button(shell, SWT.PUSH).setText("Push Button");

new Button(shell, SWT.CHECK).setText("Check Button");

new Button(shell, SWT.TOGGLE).setText("Toggle Button");

new Button(shell, SWT.RADIO).setText("Radio Button");

shell.pack();

shell.setLayout(new GridLayout(2,true));

shell.setLayout(new FillLayout(SWT.HORIZONTAL));

shell.setLayout(new RowLayout(SWT.HORIZONTAL));


LayoutsWidgets


Form Layout

With FormData dependencies to the window / other components can be defined

shell.setLayout(new FormLayout());

Button button1 = new Button(shell, SWT.PUSH);

button1.setText("button1");

FormData formData = new FormData();

formData.left = new FormAttachment(20);

formData.top = new FormAttachment(20);

button1.setLayoutData(formData);

Button button2 = new Button(shell, SWT.PUSH);

button2.setText("button number 2");

formData = new FormData();

formData.left = new FormAttachment(button1, 0, SWT.CENTER);

formData.top = new FormAttachment(button1, 0, SWT.BOTTOM);

button2.setLayoutData(formData);


LayoutsWidgets


Widgets

shell.setLayout(new GridLayout());

new Label(shell, SWT.NONE).setText("Enter your Name, Password");

new Text(shell, SWT.BORDER).setText("Name");

new Text(shell, SWT.PASSWORD | SWT.BORDER).setText("password");

new Text(shell, SWT.READ_ONLY).setText("type your comments");

new Text(shell, SWT.MULTI | SWT.V_SCROLL | SWT.WRAP | SWT.BORDER).setText("\n\n\n");

Text fields and lables

String[] items = "RV1 RV2 Aibo R2D2".split(" ");

List list = new List(shell, SWT.SINGLE | SWT.BORDER);

list.setItems(items);

list.setLocation(10, 10);

list.setSize(100, 80);

list.select(2);

String[] items = "RV1 RV2 Aibo R2D2".split(" ");

Combo combo1 = new Combo(shell, SWT.DROP_DOWN);

combo1.setItems(items);

Combo combo2 = new Combo(shell, SWT.DROP_DOWN | SWT.READ_ONLY);

combo2.setItems(items);

List

Combo


LayoutsWidgets


Widgets

for(int i = 0; i < 6; i++)

new Button(shell, SWT.RADIO).setText("option " + (i + 1));

Let’s say we want to choose one option of 1..3 and one of 4..5, how can we do it?

Group group1 = new Group(shell, SWT.SHADOW_OUT);

Group group2 = new Group(shell, SWT.SHADOW_OUT);

group1.setText("group 1");

group1.setLayout(new GridLayout(3, true));

for(int i = 0; i < 3; i++)

new Button(group1, SWT.RADIO).setText("option " + (i + 1));

group2.setText("group 2");

group2.setLayout(new GridLayout(3, true));

for(int i = 3; i < 6; i++)

new Button(group2, SWT.RADIO).setText("option " + (i + 1));

We’ll create them under different groups.Each group can have its own layout


LayoutsWidgets


Widgets

Canvas is a painting board Used for low level graphical 2d paintings We can create anything – with hard work The painting is an event handler

Because it needs to react to window changes Steps for painting:

Create a canvas Add an instance of the paintListener interface


LayoutsWidgets


WidgetsCanvas c=new Canvas(shell,SWT.BORDER);

c.addPaintListener(new PaintListener() {

public void paintControl(PaintEvent e) {

// Get the canvas and its size

Canvas canvas = (Canvas) e.widget;

int maxX = canvas.getSize().x;

int maxY = canvas.getSize().y;

int mx=maxX/2,my=maxY/2;

int r=Math.min(maxX,maxY)/10;

e.gc.drawOval(mx-r, r, 2*r, 2*r);

e.gc.drawArc(mx-r/2, 2*r, r, r-r/3, 180, 180);

e.gc.drawLine(mx, 3*r, mx, 6*r);

e.gc.drawLine(mx, 3*r, mx/2, 5*r);

e.gc.drawLine(mx, 3*r, mx+mx/2, 5*r);

e.gc.drawLine(mx, 6*r, mx/2, 9*r);

e.gc.drawLine(mx, 6*r, mx+mx/2, 9*r);

e.gc.drawString("I love SWT!", mx+r+5, 2*r);

}

});

We’ve instanced an anonymous class the implemented the PaintListener interface – that defines the paintControl method that receives a PaintEvent instance upon call


LayoutsWidgets


Event Handling – button push

shell.setLayout(new GridLayout(2,true));

final Button b=new Button(shell,SWT.PUSH);

b.setText("hello");

final Text t=new Text(shell, SWT.BORDER);

Listener listener = new Listener() {

public void handleEvent(Event event) {

if(event.widget==b)

t.setText("hello");

}

};

b.addListener(SWT.Selection, listener);

• widgets can listen to events• an event is caused by the user (i.e, click)• to handle the event we need to define a Listener and implement the handleEvent() method•some listeners are pre-defined • for example:

final Button b = new Button(shell, SWT.PUSH); b.setText(“hello");

final Text t = new Text(shell, SWT.BORDER);

b.addSelectionListener(new SelectionListener() {

public void widgetSelected(SelectionEvent event) { text.setText(“hello"); }

public void widgetDefaultSelected(SelectionEvent event) { text.setText(“hello"); } });


LayoutsWidgets


Event Handling – mouse events

final Label l=new Label(shell,SWT.BORDER);

l.setSize(100,20);

final Canvas c=new Canvas(shell,SWT.BORDER);

c.setSize(300,300);

c.setLocation(0, 21);

c.addPaintListener(new PaintListener() {

public void paintControl(PaintEvent e) {

e.gc.drawOval(x-10, y-10, 20,20);

}

});

c.addMouseMoveListener(new MouseMoveListener(){

public void mouseMove(MouseEvent e) {

x=e.x;

y=e.y;

c.redraw();

}

});

c.addMouseListener(new MouseListener(){

public void mouseDoubleClick(MouseEvent e) {

c.setBackground(display.getSystemColor((

new Random()).nextInt(36)));

}

public void mouseDown(MouseEvent e) {

l.setText("mouse down");

}

public void mouseUp(MouseEvent e) {

l.setText("mouse up");

}

});


LayoutsWidgets


Ready components Ready components

FileDialog FontDialog ColorDalog etc…

FileDialog fd=new FileDialog(shell,SWT.OPEN);

fd.setText("open");

fd.setFilterPath("E:/workspace/89210 part3");

String[] filterExt = { "*.txt", "*.java", ".xml", "*.*" };

fd.setFilterExtensions(filterExt);

String selected = fd.open();

MessageBox messageBox = new MessageBox(shell, SWT.ICON_QUESTION| SWT.YES | SWT.NO);

messageBox.setMessage("Do you really want to exit?");

messageBox.setText("Exiting Application");

int response = messageBox.open();

if (response == SWT.YES)

System.exit(0);


LayoutsWidgets


Working with Threads & SWT Updating a SWT component from another

thread will result in a runtime exception We need to use display.

(a)syncExec(Runnable r) Thread operationThread = new Thread() {

public void run() {

display.asyncExec / syncExec(new Runnable() {

public void run() {

// UI Updating procedures go here ...

}

});

}

};

Thread operationThread = new Thread() {

public void run() {

// UI Updating procedures go here ...

}

};


LayoutsWidgets


Useful links

http://www.eclipse.org/swt/

http://www.java2s.com/Tutorial/Java/0280__SWT/Catalog0280__SWT.htm code example

http://www.ibm.com/developerworks/opensource/library/os-ecvisual/ a visual editor for eclipse from IBM

event driven, gui

Documents

event detectionthe

event selection

event queue display

display display

new display shell shell

display sleepsand

new shelldisplay shell

official gui