L0018 - SWT - The Standard Widget Toolkit

2,232 views

Published on

The graphical sub-system of the Eclipse platform is made up of two components: SWT, the Standard Widget Toolkit; and JFace, an architecture independent modeling layer. This module describes how to use SWT in views and editors and how different resources must be managed.

Published in: Education, Technology
  • Be the first to comment

L0018 - SWT - The Standard Widget Toolkit

  1. 1. SWT - The Standard Widget ToolkitThe graphical sub-system of the Eclipse platform is made up of twocomponents: SWT, the Standard Widget Toolkit; and JFace, anarchitecture independent modeling layer. This module describes how touse SWT in views and editors and how different resources must bemanaged.Redistribution and other use of this material requires written permission from The RCP Company.L0001 - 2010-11-27
  2. 2. Eclipse User Interface Layers Eclipse RCP Preferences CommandsFour Layers: Registry Workbench Jobs ICU  The Eclipse Workbench JFace SWT  Overall look-n-feel OSGi/Run-time  JFace  Architecture-independent models  SWT  Platform independent API yet rather close to the metal  Native widgets  Platform dependent: Windows, Linux, Mac, UnixThe “Eclipse User Interface Guidelines” govern the look-n-feel of theworkbench and JFace  Consequently (nearly) all Eclipse RCP based applications look the same!Use the SWT Bible “The Definitive Guide to SWT and JFace” by Robert Harrisand Rob Warner2 L0001 - 2010-11-27
  3. 3. SWT and the Native WidgetsSWT is short for ”The Standard Widget Toolkit”SWT is a sub-project of the Eclipse projectSWT has a common API on all target platforms – the implementation isdifferent  Base plug-in org.eclipse.swt contains only MANIFEST.MF plus some configuration files  A set of platform specific fragments implements all of SWT– org.eclipse.swt.win32.win32.x86 for 32-bit Windows on x86 (not Vista look-n-feel) SWT is a thin layer on top of the native widgets  Windows, Mac, Motif, GTK and moreSWT can easily be used stand-alone3 L0001 - 2010-11-27
  4. 4. SWT on Different Platforms4 L0001 - 2010-11-27
  5. 5. Working with SWTSWT API is not as regular as SwingThe SWT site contains a large repository of “SWT Snippets” that demonstratemost of the abilities of SWTTo find leaks with graphical resources use sleak plug-inIt is possible to integrate SWT and Swing to a very large degree  But expect problems with shortcuts and focus management5 L0001 - 2010-11-27
  6. 6. SWT WidgetsBasic  Button, Combo, Composite, Group, Label, Link, List, Menu, ProgressBar, Shell, Slider, Scale, Spinner, TabFolder, Table, Text, ToolBar, and TreeAdvanced  Browser, Canvas, CBanner, CCombo, CLabel, CoolBar, CTabFolder, DateTime, ExpandBar, GLCanvas, Sash, SashForm, ScrolledComposite, StyledText, SWT_AWT, TableCursor, and TrayOther Sources – e.g. Nebula, Sourceforge.net  FormattedText, Gallery, Grid, and many more6 L0001 - 2010-11-27
  7. 7. SWT Widgets7 L0001 - 2010-11-27
  8. 8. The Basic Widget Hierarchy Widget Item Menu Control MenuItem TableItem TabItemLabel Button List CompositeCanvas Combo Form OleSiteClient Table8 L0001 - 2010-11-27
  9. 9. The Basic Widget HierarchyWidget Control CompositeTop-level abstract Top-level abstract Control that cansuper class for all super class for contain other controlswidgets controls Support for layoutSupport for Support for management  arbitrary  foreground, A Composite must associated data background have a layout  general event  border manager, or the child management  content menu widgets will not be  disposal shown!  focus management management  layout management – layout, location and size9 L0001 - 2010-11-27
  10. 10. Using SWT Widgets Common constructor form – e.g. new Text(parent, SWT.PASSWORD)  The parent  The style argument specifies the basic sub-function of the widget Use Text controls for data values event when read-only, as this makes it possible to select and copy the value10 L0001 - 2010-11-27
  11. 11. Using SWT Styles Second argument of all widget constructions – e.g. new Text(parent, SWT.PASSWORD) The most used styles are  SWT.NONE – no style needed  SWT.LEAD, SWT.CENTER, and SWT.TRAIL - the alignment of text in labels, menus and buttons  SWT.ARROW, SWT.CHECK, SWT.PUSH, SWT.RADIO, and SWT.TOGGLE - the sub-type of a button  SWT.PASSWORD - Text is used for password entry  SWT.V_SCROLL, SWT.H_SCROLL, and SWT.NO_SCROLL – Table or Tree has vertical, horizontal or no scroll bar (3.4 and later)11 L0001 - 2010-11-27
  12. 12. Using SWT Styles Some special considerations regarding styles  Some style arguments cannot be changed once specified in the constructor (e.g. SWT.CHECK for a Button), whereas others can (e.g. SWT.LEAD for Label)  Some style arguments have different meaning for different widgets – e.g. SWT.MULTI for Table and Text12 L0001 - 2010-11-27
  13. 13. Managing Composites (Composite) Children are added to a composite during the construction of the children  new Text(composite, SWT.BORDER) Children are retrieved using  comp.getChildren() Children are removed using  child.dispose() Children can be moved in the parent using  child.moveAbove(otherChild)  child.moveBelow(otherChild) When a composite is changed, remember to re-layout  comp.layout() Setting the background of children of a composite:  comp.setBackgroundMode(SWT.INHERIT_DEFAULT)13 L0001 - 2010-11-27
  14. 14. SWT Layout Managers The positioning and sizing of controls in a Composite (and subclasses) is performed using layout managers SWT includes a rather complete set of standard layout managers  FillLayout and RowLayout: layout is a single row or column  GridLayout: layout in a grid with size constraints  FormLayout: layout in canvas with size and edge-to-edge constraints  Most GUI designer can handle these A new layout manager can be created fairly easily  computeSize: computes the “natural” size of the Composite  layout: lays out the controls of the Compositepublic abstract class Layout { protected abstract Point computeSize(Composite composite, int wHint, int hHint, boolean flushCache); protected abstract void layout(Composite composite, boolean flushCache);}14 L0001 - 2010-11-27
  15. 15. Using the Grid Layout (GridLayout) Grid Layout is the most used layout manager in Eclipse It works by adding the child widgets to the cells in a grid  Widgets are added in sequence When using a Grid Layout, the parent uses the GridLayout and all children use GridData final Composite composite = new Composite(parent, SWT.NONE); final GridLayout gridLayout = new GridLayout(3, false); composite.setLayout(gridLayout); ... label = new Label(composite, SWT.NONE); label.setText("Label"); text = new Text(composite, SWT.BORDER); text.setLayoutData(new GridData(SWT.FILL, SWT.CENTER, true, false, 2, 1)); // … Label Text15 L0001 - 2010-11-27
  16. 16. Using the Grid Layout (GridLayout) The GridLayout class has two arguments  numColumns – the number of columns in the grid (defaults to 1)  makeColumnsEqualWidth – whether all columns in the grid have equal width (defaults to false)16 L0001 - 2010-11-27
  17. 17. Using the Grid Data (GridData)GridData specifies how a child widget is laid out in the parent gridA GridData holds the following primary information  Grab Excess Space (horizontal and vertical) – describes whether the grid column or row should expand to grab any excess space (defaults to no grab)  Span (horizontal and vertical) – describes the number of cells the widget should span (defaults to 1,1)  Alignment (horizontal and vertical) – placement of widget within the cells – one of SWT.BEGINNING, SWT.CENTER, SWT.END or SWT.FILL (defaults to BEGINNING, BEGINNING)  A GridData also contains information about indentation, minimum size and size hintsDon’t use the two-argument constructor! 17 L0001 - 2010-11-27
  18. 18. Using the Grid Data (GridData) Grab Excess Space (horizontal and vertical)  describes whether the grid column or row should expand to grab any excess space (defaults to no grab) Outer Composite Control to be positioned GridLayout with 3 columns and 3 rows18 L0001 - 2010-11-27
  19. 19. Using the Grid Data (GridData) Span (horizontal and vertical)  describes the number of cells the widget should span (defaults to 1,1) 1,1 2,1 2,219 L0001 - 2010-11-27
  20. 20. Using the Grid Data (GridData) Alignment (horizontal and vertical)  placement of widget within the cells – one of SWT.BEGINNING, SWT.CENTER, SWT.END or SWT.FILL (defaults to BEGINNING, BEGINNING) C,C F,C E,E20 L0001 - 2010-11-27
  21. 21. Layout Managers for Tables and Trees Tables and Trees have a layout how columns are sized  TableLayout  Will only resize the columns the first time!  Applied to the Table or Tree  TableColumnLayout  Applied to the Composite of the Table or Tree  Column constraints saved as layout.setColumnData(column, constraint) Both layout managers are based on the same column constraint objects:  ColumnPixelData – makes a column a specific width in pixels  ColumnWeightData – makes a column a specific percentage of the summed width21 L0001 - 2010-11-27
  22. 22. SWT Events SWT events and listeners exist in two versions:  A simple very light-weight version  One event format and listener interface  A type-safe version  Multiple event formats and listener interfaces tailored to the specific use The difference is illustrated in the following examplefilter.addListener(SWT.KeyDown, new Listener() { public void handleEvent(Event event) { if (event.type == SWT.KeyDown) { //... } }}); filter.addKeyListener(new KeyAdapter() { @Override public void keyPressed(KeyEvent e) { //... } });22 L0001 - 2010-11-27
  23. 23. SWT Events Key Tree and Table  KeyDown, KeyUp, HardKeyDown,  Expand, Collapse, EraseItem, HardKeyUp MeasureItem, PaintItem Mouse Shell  MouseDown, MouseUp,  Iconify, Deiconify, Close, MouseMove, MouseEnter, Activate, Deactivate MouseExit, MouseDoubleClick, MouseHover, MouseWheel Menu  Show, Hide, Arm, MenuDetect Control  Paint, Move, Resize, Dispose Basic Controls  Modify, Verify, SetData, Settings Selection  Selection, DefaultSelection Drag-n-Drop  DragDetect Focus  FocusIn, FocusOut Misc  Help23 L0001 - 2010-11-27
  24. 24. Lab Exercise Create a view with the following look using simple SWT controls  GridLayout, GridData  Label, Text, Button  …addSelectionListener(…)Label Text - FILL aligned + grab Button - spans two columns, RIGHT aligned. SelectionListener that prints current text of Text control public class View extends ViewPart { public void createPartControl(Composite parent) { Composite top = new Composite(parent, SWT.NONE); Composite with GridLayout // Add something here… with 2 columns } public void setFocus() { } } Another extra lab for the fast ones:  add “stuff” to the lab to only allow “a” and “b” in the text field  and to only allow more “a” than “b”!  Use a Verify listener 24 L0001 - 2010-11-27
  25. 25. Forms UI A newer addition of the look-n-feel of the Eclipse workbench is the Forms UI in org.eclipse.ui.forms.  Provide a Web browser like look-n-feel to forms  PDE is a good example of the increasing use of this new technology Have some of the same problems as seen in ordinary Web applications: extensive use of the mouse! Normally not welcome in office applications25 L0001 - 2010-11-27
  26. 26. More Information “Eclipse User Interface Guidelines: Version 2.1”  http://www.eclipse.org/resources/resource.php?id=162  The Look-n-Feel guidelines for Eclipse – heavily influenced by the corresponding Microsoft Windows Look-n-Feel guidelines SWT home  http://www.eclipse.org/swt/ SWT versus Swing  http://www.developer.com/java/other/article.php/2179061 “Using SwingRCP (instead of SWT) in RCP”  http://www.eclipsezone.com/eclipse/forums/t104467.rhtml  A discussion of different ways to integrate Eclipse RCP and Swing “The Definitive Guide to SWT and JFace” by Robert Harris and Rob Warner (ISBN: 978-1590593257)  As it says – “The Definitive Guide…” – and needed due to the pure javadoc of SWT “SWT Snippet” Repository  http://www.eclipse.org/swt/snippets/  A large repository of sample code for most uses of SWT!26 L0001 - 2010-11-27
  27. 27. More Information “Plug a Swing-based development tool into Eclipse”  http://www-128.ibm.com/developerworks/opensource/library/osswing/ “Eclipse Forms: Rich UI for the Rich Client”  http://www.eclipse.org/resources/resource.php?id=140 “Custom Drawing Table and Tree Items”  http://www.eclipse.org/resources/resource.php?id=122 “Using Images in the Eclipse UI”  http://www.eclipse.org/resources/resource.php?id=236 “Rich clients with the SWT and JFace”  http://www.javaworld.com/javaworld/jw-04-2004/jw-0426- swtjface.html?page=2 “SWT: The Standard Widget Toolkit”  http://www.eclipse.org/resources/resource.php?id=241 “Understanding Layouts in SWT”  http://www.eclipse.org/resources/resource.php?id=242  A good overview of the different basic layouts in Eclipse.27 L0001 - 2010-11-27
  28. 28. More Information “Drag and Drop in the Eclipse UI”  http://www.eclipse.org/resources/resource.php?id=202 “Adding Drag and Drop to an SWT Application”  http://www.eclipse.org/resources/resource.php?id=200 “Eclipse Data Binding Test Drive” (webinar)  http://www.eclipse.org/resources/resource.php?id=299 “Swing/SWT Integration”  http://www.eclipse.org/resources/resource.php?id=381 “Eclipse Forms: Rich UI for the Rich Client”  http://www.eclipse.org/articles/Article-Forms/article.html  The Forms UI explained with some good examples28 L0001 - 2010-11-27

×