User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:%...
Transcript of User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:%...
![Page 1: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/1.jpg)
Budapes( Műszaki és Gazdaságtudományi Egyetem Méréstechnika és Információs Rendszerek Tanszék
User Interface Programming in SWT
Eclipse Based Technologies h:p://inf.mit.bme.hu/edu/courses/eat
![Page 2: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/2.jpg)
Developing Graphical User Interfaces ! Java Graphics Toolkits
o AWT • NaGve widgets • Only common subset of plaKorm widgets available!
o Swing • Manually drawn widgets • Superset of plaKorm widgets • Extensible
o JavaFX • Available with Java 7 (but not added by default!) • Completely rethinked UI model
2
![Page 3: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/3.jpg)
Problems with User Interfaces ! “Does not look like Word” problem
o Reusing plaKorm look-‐and-‐feel o InternaGonalizaGon se[ngs 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 SGll not widely used
3
![Page 4: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/4.jpg)
SWT – Standard Widget Toolkit ! Developed by IBM
o Swing was not appropriate o When starGng the Eclipse project • Based on Smalltalk naGve widget accessing experiments
o Goals • Use naGve widgets everywhere possible • Looks like a naGve applicaGon
4
![Page 5: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/5.jpg)
SWT – Standard Widget Toolkit ! Reusing plaKorm widgets o Fast o PlaKorm look-‐and-‐feel • Every plaKorm service available
– OLE, drag-‐n-‐drop, …
o Needs porGng! • Appears differently
5
Source of pictures: h:p://eclipse.org/swt
![Page 6: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/6.jpg)
Programming Model
6
User acGon
Event
Event Queue
Event
Event
![Page 7: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/7.jpg)
Programming Model
7
User acGon
Event
Event Queue
Event
Event
SWT: Display object
![Page 8: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/8.jpg)
Programming Model
8
User acGon
Event
Event Queue
Event
Event
SWT: Display object
A Window in SWT: Shell
![Page 9: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/9.jpg)
SWT Event Loop ! Explicit event loop o The applicaGon needs to include it!
• CollecGng incoming events • and processing it
o Loop terminaGon • ApplicaGon terminates
o Very similar to Win32 API
9
![Page 10: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/10.jpg)
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
![Page 11: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/11.jpg)
Event Handling ! Event: something the applicaGon needs to react
o User events • Mouse move • Key presses • …
o System • Time passes • …
11
![Page 12: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/12.jpg)
Event Handling ! Assigning Event Listeners
o Generic event listeners for every widget • Event informaGon available as style bits (see later)
o Typed listeners when applicable • Keyboard • Mouse • MulGtouch • …
! Both Listener and Adapters available
12
![Page 13: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/13.jpg)
SWT widgets ! RelaGvely small widget hierarchy
o E.g. as opposed to Swing o A class describes mulGple widgets • SelecGon happens via style bits
! AssociaGng model objects possible o getData()/setData() methods o Very useful for generic UI processing code and data bindings
13
![Page 14: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/14.jpg)
Style bits ! AddiGonal informaGon
• E.g. Bu:on-‐>CheckBox
! Constructor parameter o It is not possible to change later o The available styles depend on specific widgets
! ImplementaGon o Works with Java 1.4 -‐> no ‘enum’ available o Using int constants from the SWT class • MulGple style bits can be selected via bitwise or:
– SWT.SEPARATOR|SWT.HORIZONTAL
14
![Page 15: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/15.jpg)
SWT widgets ! Manual instanGaGon
o No factory o Strict containment hierarchy
! Manual cleanup o Garbage collecGon is not enough! • NaGve widgets!
o Method dispose() needs to be called manually
15
![Page 16: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/16.jpg)
Dispose rules
16
![Page 17: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/17.jpg)
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. ExcepGon: o Widgets hierarchies are disposed by disposing the
top-‐level element
17
![Page 18: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/18.jpg)
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. ExcepGon: o Widgets hierarchies are disposed by disposing the
top-‐level element
18
![Page 19: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/19.jpg)
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. ExcepGon: o Widgets hierarchies are disposed by disposing the
top-‐level element
19
![Page 20: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/20.jpg)
Common widgets ! Bu:on
o Push, radio, combo bu:ons
! Label o Read-‐only text display field (w or w/o icons)
! Text o Writeable text fields (single line, mulGline)
! StyledText o Custom drawn mulGline text field (e.g. Eclipse editors)
20
![Page 21: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/21.jpg)
Common widgets ! Composite
o Stores other widgets o Allows se[ng layouts
! Canvas o Manual drawing
! Menu, Toolbar ! List, Tree, Table
o Specific widgets for displaying large amounts of data o Avoids creaGng a huge number of bu:ons, etc.
21
![Page 22: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/22.jpg)
Common Widgets ! And many more: h:p://eclipse.org/swt/widgets/
22
![Page 23: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/23.jpg)
AddiGonal widget – Nebula project ! h:p://eclipse.org/nebula/ ! Date-‐Gme handling
! Forma:edText
23
![Page 24: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/24.jpg)
AddiGonal widgets – Nebula project ! Gan: diagram
! Galery
24
![Page 25: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/25.jpg)
Dialog windows ! Types
o MessageBox-‐ displaying messages o ColorDialog – color choosing o DirectoryDialog – directory structure o FileDialog – file selecGon/save o FontDialog – font selecGng o PrintDialog – prinGng o These are not widgets!
! Reuses operaGng system dialogs o Specific dialog se[ngs available • Pl. SWT.SHEET
25
![Page 26: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/26.jpg)
Dialog windows ! Types
o MessageBox-‐ displaying messages o ColorDialog – color choosing o DirectoryDialog – directory structure o FileDialog – file selecGon/save o FontDialog – font selecGng o PrintDialog – prinGng o These are not widgets!
! Reuses operaGng system dialogs o Specific dialog se[ngs available • Pl. SWT.SHEET
26
![Page 27: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/27.jpg)
Complex Form Design
Layouts
27
![Page 28: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/28.jpg)
Complex Forms
28
How m
any
widgets doe
s the
windo
w con
tain?
![Page 29: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/29.jpg)
Complex Forms
29
How m
any
widgets doe
s the
windo
w con
tain?
![Page 30: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/30.jpg)
Complex Forms
30
How m
any
widgets doe
s the
windo
w con
tain?
![Page 31: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/31.jpg)
Complex Forms
31
How m
any
widgets doe
s the
windo
w con
tain?
![Page 32: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/32.jpg)
Widget Containment Hierarchy ! Strict containment hierarchy
o Every widget has a single parent o ExcepGon: Shell (window)
! Composite widget o Contains other widgets o Layout can be created
32
![Page 33: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/33.jpg)
Layout ! SeparaGon of arrangement and content o Decides posiGoning o RelaGve to container o KöveG a konténer méretének változását
! Abstract Base class: Layout o Do not call it manually
33
![Page 34: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/34.jpg)
Layout Hints ! Every widget might give some posiGoning informaGon o Use #setLayoutData o Different data for different layouts • Inconsistent se[ng results in runGme error
34
![Page 35: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/35.jpg)
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
![Page 36: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/36.jpg)
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!
36
If no layout is defined and no size/posiGoning is set up, the widget will not
appear!
![Page 37: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/37.jpg)
FillLayout ! Fill all space
o Places all elements next to each other o Horizontal or verGcal o PrimiGve layout • Ignores suggested size of widgets!
! May be useful for nested composites
![Page 38: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/38.jpg)
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
![Page 39: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/39.jpg)
GridLayout ! Grid arrangement o Fixed number of columns
! Important properGes o horizontalSpacing o makeColumnsEqualWidth o marginHeight o marginWidth o numColumns o verGcalSpacing
![Page 40: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/40.jpg)
FormLayout ! Complex layout ! Layout data stores a:achments o RelaGve posiGoning for a selected side
o DefiniGon • y=ax+b • y: height, x: width • a: relaGve posiGoning, b: ofset
![Page 41: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/41.jpg)
FormLayout ! Complex layout ! Layout data stores a:achments o RelaGve posiGoning for a selected side
o DefiniGon • y=ax+b • y: height, x: width • a: relaGve posiGoning, b: ofset
Absolute posiGon wrt container
![Page 42: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/42.jpg)
FormLayout ! Complex layout ! Layout data stores a:achments o RelaGve posiGoning for a selected side
o DefiniGon • y=ax+b • y: height, x: width • a: relaGve posiGoning, b: ofset
Right and down wrt the 2nd widget
![Page 43: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/43.jpg)
StackLayout ! Each element has the same size and posiGon ! Only the top control will be visible o StackLayout.topControl o A|er se[ng, layout() needs to be called for UI update
! Margin se:able o marginHeight o marginWidth
![Page 44: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/44.jpg)
Layout
![Page 45: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/45.jpg)
Layout ! Many layouts available ! Custom layouts possible
o Create new layout implementaGon o E.g. responsive layout from h:p://www.codeaffine.com/2014/02/24/responsive-‐uis-‐with-‐eclipse-‐and-‐swt/
! Not required to use o Widget#setBound(x,y,w,h) • Container-‐relaGve posiGoning • Size
![Page 46: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/46.jpg)
Layout ! Many layouts available ! Custom layouts possible
o Create new layout implementaGon o E.g. responsive layout from h:p://www.codeaffine.com/2014/02/24/responsive-‐uis-‐with-‐eclipse-‐and-‐swt/
! Not required to use o Widget#setBound(x,y,w,h) • Container-‐relaGve posiGoning • Size
![Page 47: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/47.jpg)
Layout ! Many layouts available ! Custom layouts possible
o Create new layout implementaGon o E.g. responsive layout from h:p://www.codeaffine.com/2014/02/24/responsive-‐uis-‐with-‐eclipse-‐and-‐swt/
! Not required to use o Widget#setBound(x,y,w,h) • Container-‐relaGve posiGoning • Size
![Page 48: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/48.jpg)
Layout ! Many layouts available ! Custom layouts possible
o Create new layout implementaGon o E.g. responsive layout from h:p://www.codeaffine.com/2014/02/24/responsive-‐uis-‐with-‐eclipse-‐and-‐swt/
! Not required to use o Widget#setBound(x,y,w,h) • Container-‐relaGve posiGoning • Size
![Page 49: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/49.jpg)
Layout ! Many layouts available ! Custom layouts possible
o Create new layout implementaGon o E.g. responsive layout from h:p://www.codeaffine.com/2014/02/24/responsive-‐uis-‐with-‐eclipse-‐and-‐swt/
! Not required to use o Widget#setBound(x,y,w,h) • Container-‐relaGve posiGoning • Size
![Page 50: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/50.jpg)
Sample applicaGon 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
![Page 51: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/51.jpg)
Sample applicaGon 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"); !
}
51
Se[ng Layout
![Page 52: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/52.jpg)
Sample applicaGon 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"); !
}
52
Read only label
![Page 53: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/53.jpg)
Sample applicaGon 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"); !
}
53
‘SEPARATOR’ stylebit
![Page 54: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/54.jpg)
Sample applicaGon 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"); !
}
54
Checkbox uses ‘CHECK’ style
bit
![Page 55: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/55.jpg)
Sample applicaGon 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"); !
}
55
Simple bu:on
![Page 56: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/56.jpg)
Sample applicaGon 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
![Page 57: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/57.jpg)
Developing User Interface
57
![Page 58: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/58.jpg)
Designing user interfaces ! Required features
o Direct code ediGng o Layout support o Both source and UI ediGng
! MulGple tools available o Eclipse WindowBuilder is one of the best
![Page 59: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/59.jpg)
WindowBuilder ! History
o InstanGaGons -‐> Google -‐> Eclipse
o Roundtrip engineering o SWT, JFace, Forms API o Eclipse Workbench o BUT: memory requirements • Pro Gp: do not use WindowBuilder as default Java editor
o BUT: Smaller bugs, missing features
59
![Page 60: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/60.jpg)
WindowBuilder
60
![Page 61: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/61.jpg)
PiKall 1. ! Use automaGc layouGng if possible
o Avoids alignment errors
61
Source: h:p://uxma:ers.com/mt/archives/2009/02/reviewing-‐user-‐interfaces.php
![Page 62: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/62.jpg)
Easy to create != Easy to use
62
![Page 63: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/63.jpg)
Summary
63
![Page 64: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/64.jpg)
SWT -‐ Summary ! NaGve graphical user interface framework
o Fast o Simple
! Different form elements o Complex forms o Dialogs o Menus o Drawing o PrinGng o …
64
![Page 65: User%Interface%Programming%in%SWT% · 2014-02-28 · Event EventQueue% Event Event SWT:% Display%object. Programming%Model% 8 ... • Keyboard% • Mouse% ... o SWT,%JFace,%Forms%API](https://reader031.fdocuments.in/reader031/viewer/2022021823/5cde02ad88c993301d8bf6b3/html5/thumbnails/65.jpg)
Further reading ! Understanding Layout in SWT
o h:p://www.eclipse.org/arGcles/arGcle.php?file=ArGcle-‐Understanding-‐Layouts/index.html
o Describes Layouts ! User Interface Guidelines – Eclipsepedia
o h:p://wiki.eclipse.org/User_Interface_Guidelines ! SWT Snippets:
o h:p://www.eclipse.org/swt/snippets/ o Grouped samples for coding SWT
65