User Interface Programming in SWT

Eclipse Based Technologies hp://inf.mit.bme.hu/edu/courses/eat

Budapes Műszaki és Gazdaságtudományi Egyetem Méréstechnika és Információs Rendszerek Tanszék Developing Graphical User Interfaces ! Java Graphics Toolkits o AWT • Nave widgets • Only common subset of plaorm widgets available! o Swing • Manually drawn widgets • Superset of plaorm widgets • Extensible o JavaFX • Available with Java 7 (but not added by default!) • Completely rethinked UI model

2 Problems with User Interfaces ! “Does not look like Word” problem o Reusing plaorm look-and-feel o Internaonalizaon sengs o Java goal: look everywhere the same ! AWT o very low level ! Swing o memory usage and performance issues at start o Since Java 6 more than appropriate ! Java FX o Sll not widely used

3 SWT – Standard Widget Toolkit ! Developed by IBM o Swing was not appropriate o When starng the Eclipse project • Based on Smalltalk nave widget accessing experiments o Goals • Use nave widgets everywhere possible • Looks like a nave applicaon

4 SWT – Standard Widget Toolkit ! Reusing plaorm widgets o Fast o Plaorm look-and-feel • Every plaorm service available – OLE, drag-n-drop, … o Needs porng! • Appears differently

Source of pictures: hp://eclipse.org/swt

5 Programming Model

User acon Event Queue

Event Event Event

6 Programming Model

User acon Event Queue

Event Event Event

SWT: Display object

7 Programming Model

User acon A Window in SWT: Event Queue Shell

Event Event Event

SWT: Display object

8 SWT Event Loop ! Explicit event loop o The applicaon needs to include it! • Collecng incoming events • and processing it o Loop terminaon • Applicaon terminates o Very similar to Win32 API

9 SWT Event Loop public static void main(String [] args) {! ""Display display = new Display();! ""final Shell shell = new Shell(display);! ""shell.setSize(400, 400);! ""shell.open();! ! ""while (!shell.isDisposed()) {! """if (!display.readAndDispatch())! """"display.sleep();! ""}! ""display.dispose();! "}

10 Event Handling ! Event: something the applicaon needs to react o User events • Mouse move • Key presses • … o System • Time passes • …

11 Event Handling ! Assigning Event Listeners o Generic event listeners for every widget • Event informaon available as style bits (see later) o Typed listeners when applicable • Keyboard • Mouse • Multouch • … ! Both Listener and Adapters available

12 SWT widgets ! Relavely small widget hierarchy o E.g. as opposed to Swing o A class describes mulple widgets • Selecon happens via style bits ! Associang model objects possible o getData()/setData() methods o Very useful for generic UI processing code and data bindings

13 Style bits ! Addional informaon • E.g. Buon->CheckBox ! Constructor parameter o It is not possible to change later o The available styles depend on specific widgets ! Implementaon o Works with Java 1.4 -> no ‘enum’ available o Using int constants from the SWT class • Mulple style bits can be selected via bitwise or: – SWT.SEPARATOR|SWT.HORIZONTAL

14 SWT widgets ! Manual instanaon o No factory o Strict containment hierarchy ! Manual cleanup o Garbage collecon is not enough! • Nave widgets! o Method dispose() needs to be called manually

15 Dispose rules

16 Dispose rules 1. Base rule: o If you create it, you dispose it! 2. Reverse rule: o Do only dispose it if you create it!

3. Excepon: o Widgets hierarchies are disposed by disposing the top-level element

17 Dispose rules 1. Base rule: o If you create it, you dispose it! 2. Reverse rule: o Do only dispose it if you create it!

3. Excepon: o Widgets hierarchies are disposed by disposing the top-level element

18 Dispose rules 1. Base rule: o If you create it, you dispose it! 2. Reverse rule: o Do only dispose it if you create it!

3. Excepon: o Widgets hierarchies are disposed by disposing the top-level element

19 Common widgets ! Buon o Push, radio, combo buons ! Label o Read-only text display field (w or w/o icons) ! Text o Writeable text fields (single line, mulline) ! StyledText o Custom drawn mulline text field (e.g. Eclipse editors)

20 Common widgets ! Composite o Stores other widgets o Allows seng layouts ! Canvas o Manual drawing ! Menu, Toolbar ! List, Tree, Table o Specific widgets for displaying large amounts of data o Avoids creang a huge number of buons, etc.

21 Common Widgets ! And many more: hp://eclipse.org/swt/widgets/

22 Addional widget – Nebula project ! hp://eclipse.org/nebula/ ! Date-me handling

! FormaedText

23 Addional widgets – Nebula project ! Gan diagram

! Galery

24 Dialog windows ! Types o MessageBox- displaying messages o ColorDialog – color choosing o DirectoryDialog – directory structure o FileDialog – file selecon/save o FontDialog – font selecng o PrintDialog – prinng o These are not widgets! ! Reuses operang system dialogs o Specific dialog sengs available • Pl. SWT.SHEET

25 Dialog windows ! Types o MessageBox- displaying messages o ColorDialog – color choosing o DirectoryDialog – directory structure o FileDialog – file selecon/save o FontDialog – font selecng o PrintDialog – prinng o These are not widgets! ! Reuses operang system dialogs o Specific dialog sengs available • Pl. SWT.SHEET

26 Complex Form Design

Layouts

27 Complex Forms How many widgets does the window contain?

28 Complex Forms How many widgets does the window contain?

29 Complex Forms How many widgets does the window contain?

30 Complex Forms How many widgets does the window contain?

31 Widget Containment Hierarchy ! Strict containment hierarchy o Every widget has a single parent o Excepon: Shell (window) ! Composite widget o Contains other widgets o Layout can be created

32 Layout ! Separaon of arrangement and content o Decides posioning o Relave to container o Köve a konténer méretének változását ! Abstract Base class: Layout o Do not call it manually

33 Layout Hints ! Every widget might give some posioning informaon o Use #setLayoutData o Different data for different layouts • Inconsistent seng results in runme error

34 Layouts in SWT ! Built-in layouts available o FillLayout o RowLayout o GridLayout o FormLayout o StackLayout ! Default layout o Set up coordinates and size for each widget!

35 Layouts in SWT ! Built-in layouts available o FillLayout o RowLayout If no layout is defined and o GridLayout no size/posioning is set o FormLayout up, the widget will not o StackLayout appear! ! Default layout o Set up coordinates and size for each widget!

36 FillLayout ! Fill all space o Places all elements next to each other o Horizontal or vercal o Primive layout • Ignores suggested size of widgets! ! May be useful for nested composites RowLayout ! Similar to FillLayout o Arranges elements into rows or columns o Considers widget size ! Hint object: RowData (LayoutData) : height, width o Sets the preferred size of the widget GridLayout ! Grid arrangement o Fixed number of columns ! Important properes o horizontalSpacing o makeColumnsEqualWidth o marginHeight o marginWidth o numColumns o vercalSpacing FormLayout ! Complex layout ! Layout data stores aachments o Relave posioning for a selected side

o Definion • y=ax+b • y: height, x: width • a: relave posioning, b: ofset FormLayout ! Complex layout ! Layout data stores aachments o Relave posioning for a selected side

o Definion Absolute • y=ax+b posion wrt • y: height, x: width container • a: relave posioning, b: ofset FormLayout ! Complex layout ! Layout data stores aachments o Relave posioning for Right and a selected side down wrt the 2nd widget

o Definion • y=ax+b • y: height, x: width • a: relave posioning, b: ofset StackLayout ! Each element has the same size and posion ! Only the top control will be visible o StackLayout.topControl o Aer seng, layout() needs to be called for UI update ! Margin seable o marginHeight o marginWidth Layout Layout ! Many layouts available ! Custom layouts possible o Create new layout implementaon o E.g. responsive layout from hp://www.codeaffine.com/2014/02/24/responsive- uis-with-eclipse-and-swt/ ! Not required to use o Widget#setBound(x,y,w,h) • Container-relave posioning • Size Layout ! Many layouts available ! Custom layouts possible o Create new layout implementaon o E.g. responsive layout from hp://www.codeaffine.com/2014/02/24/responsive- uis-with-eclipse-and-swt/ ! Not required to use o Widget#setBound(x,y,w,h) • Container-relave posioning • Size Layout ! Many layouts available ! Custom layouts possible o Create new layout implementaon o E.g. responsive layout from hp://www.codeaffine.com/2014/02/24/responsive- uis-with-eclipse-and-swt/ ! Not required to use o Widget#setBound(x,y,w,h) • Container-relave posioning • Size Layout ! Many layouts available ! Custom layouts possible o Create new layout implementaon o E.g. responsive layout from hp://www.codeaffine.com/2014/02/24/responsive- uis-with-eclipse-and-swt/ ! Not required to use o Widget#setBound(x,y,w,h) • Container-relave posioning • Size Layout ! Many layouts available ! Custom layouts possible o Create new layout implementaon o E.g. responsive layout from hp://www.codeaffine.com/2014/02/24/responsive- uis-with-eclipse-and-swt/ ! Not required to use o Widget#setBound(x,y,w,h) • Container-relave posioning • Size Sample applicaon private void createSShell() {! "sShell = new Shell();! "sShell.setText("Shell");! "sShell.setLayout(new GridLayout());! "sShell.setSize(new Point(90,127));! "label1 = new Label(sShell, SWT.NONE);! "label1.setText("Some Text");! "label2 = new Label(sShell, SWT.SEPARATOR | SWT.HORIZONTAL);! "label2.setText("Label");! "checkBox = new Button(sShell, SWT.CHECK);! "checkBox.setText("check");! "button = new Button(sShell, SWT.NONE);! "button.setText("PushMe");! }

50 Sample applicaon private void createSShell() {! "sShell = new Shell();! Seng Layout "sShell.setText("Shell");! "sShell.setLayout(new GridLayout());! "sShell.setSize(new Point(90,127));! "label1 = new Label(sShell, SWT.NONE);! "label1.setText("Some Text");! "label2 = new Label(sShell, SWT.SEPARATOR | SWT.HORIZONTAL);! "label2.setText("Label");! "checkBox = new Button(sShell, SWT.CHECK);! "checkBox.setText("check");! "button = new Button(sShell, SWT.NONE);! "button.setText("PushMe");! }

51 Sample applicaon private void createSShell() {! "sShell = new Shell();! "sShell.setText("Shell");! Read only label "sShell.setLayout(new GridLayout());! "sShell.setSize(new Point(90,127));! "label1 = new Label(sShell, SWT.NONE);! "label1.setText("Some Text");! "label2 = new Label(sShell, SWT.SEPARATOR | SWT.HORIZONTAL);! "label2.setText("Label");! "checkBox = new Button(sShell, SWT.CHECK);! "checkBox.setText("check");! "button = new Button(sShell, SWT.NONE);! "button.setText("PushMe");! }

52 Sample applicaon private void createSShell() {! "sShell = new Shell();! "sShell.setText("Shell");! "sShell.setLayout(new GridLayout());! ‘SEPARATOR’ "sShell.setSize(new Point(90,127));! "label1 = new Label(sShell, SWT.NONE);! stylebit "label1.setText("Some Text");! "label2 = new Label(sShell, SWT.SEPARATOR | SWT.HORIZONTAL);! "label2.setText("Label");! "checkBox = new Button(sShell, SWT.CHECK);! "checkBox.setText("check");! "button = new Button(sShell, SWT.NONE);! "button.setText("PushMe");! }

53 Sample applicaon private void createSShell() {! "sShell = new Shell();! "sShell.setText("Shell");! "sShell.setLayout(new GridLayout());! "sShell.setSize(new Point(90,127));! "label1 = new Label(sShell, SWT.NONE);! Checkbox uses "label1.setText("Some Text");! "label2 = new Label(sShell, SWT.SEPARATOR‘CHECK’ style | SWT.HORIZONTAL);! bit "label2.setText("Label");! "checkBox = new Button(sShell, SWT.CHECK);! "checkBox.setText("check");! "button = new Button(sShell, SWT.NONE);! "button.setText("PushMe");! }

54 Sample applicaon private void createSShell() {! "sShell = new Shell();! "sShell.setText("Shell");! "sShell.setLayout(new GridLayout());! "sShell.setSize(new Point(90,127));! "label1 = new Label(sShell, SWT.NONE);! "label1.setText("Some Text");! "label2 = new Label(sShell, SWT.SEPARATOR | SWT.HORIZONTAL);! "label2.setText("Label");! Simple buon "checkBox = new Button(sShell, SWT.CHECK);! "checkBox.setText("check");! "button = new Button(sShell, SWT.NONE);! "button.setText("PushMe");! }

55 Sample applicaon private void createSShell() {! "sShell = new Shell();! "sShell.setText("Shell");! "sShell.setLayout(new GridLayout());! "sShell.setSize(new Point(90,127));! "label1 = new Label(sShell, SWT.NONE);! "label1.setText("Some Text");! "label2 = new Label(sShell, SWT.SEPARATOR | SWT.HORIZONTAL);! "label2.setText("Label");! "checkBox = new Button(sShell, SWT.CHECK);! "checkBox.setText("check");! "button = new Button(sShell, SWT.NONE);! "button.setText("PushMe");! }

56 Developing User Interface

57 Designing user interfaces ! Required features o Direct code eding o Layout support o Both source and UI eding ! Mulple tools available o Eclipse WindowBuilder is one of the best WindowBuilder ! History o Instanaons -> Google -> Eclipse

o Roundtrip engineering o SWT, JFace, Forms API o Eclipse Workbench o BUT: memory requirements • Pro p: do not use WindowBuilder as default Java editor o BUT: Smaller bugs, missing features

59 WindowBuilder

60 Piall 1. ! Use automac layoung if possible o Avoids alignment errors

Source: hp://uxmaers.com/mt/archives/2009/02/reviewing-user-interfaces.php

61 Easy to create != Easy to use

62 Summary

63 SWT - Summary ! Nave graphical user interface framework o Fast o Simple ! Different form elements o Complex forms o Dialogs o Menus o Drawing o Prinng o …

64 Further reading ! Understanding Layout in SWT o hp://www.eclipse.org/arcles/arcle.php? file=Arcle-Understanding-Layouts/index.html o Describes Layouts ! User Interface Guidelines – Eclipsepedia o hp://wiki.eclipse.org/User_Interface_Guidelines ! SWT Snippets: o hp://www.eclipse.org/swt/snippets/ o Grouped samples for coding SWT

65