SWT TUTORIAL By Kalman Hazins kalmanzikal com Agenda

SWT TUTORIAL By Kalman Hazins (kalman@zikal. com)

Agenda Brief History of Java GUI Ø Installing SWT Ø Creating widgets Ø SWT Layouts Ø Event Handling Ø Ø Sample Application

History of Java GUI Ø AWT – Abstract Windowing Toolkit l l l First released in 1995 as part of JDK 1. 0 by Sun Heavyweight GUI components – a Java component creates a peer component on the operating system and the peer draws itself. Least Common Denominator problem – for simple GUI components creating a peer works, what about the components that are only available on some platforms and not others? If you want to write code that’s truly portable – you have to use components that are available on all platforms The logic makes sense – but how do you develop a serious application using just the basic components (available on all platforms)? You don’t … Enter Swing

History of Java GUI (Cont. ) Ø Swing (JFC – Java Foundation Classes) l l l Released in 1998 as part of JDK 1. 1 Lightweight GUI components – no need for operating system “peer”-based drawing. Let’s draw the components ourselves. Lightweight – there is no actual weight (operating system component) behind the Java component. Nice toolkit with enhanced Model-View-Controller architecture and superior graphics 2 D library. Portable? You bet. Any problems? Now that you are not actually using the operating system components – you are just mimicking the behavior of the operating system. Hence, the look and feel as well as the response speed are not the same. Swing has gotten much better with release 1. 4. 2 and 1. 5 of SDK Still, very few commercial applications are written in Swing.

History of Java GUI (Cont. ) Ø SWT (Standard Widget Toolkit) l l l l GUI toolkit released in November 2001 Was initially designed to write the now extremely famous and popular Eclipse IDE “Best of both worlds” approach – use native functionality when available, and Java implementation when unavailable Takes on the appearance and behavior of the native platform Because of its close bond with the operating system, SWT needs to be ported separately for every platform Currently, implementations of SWT are already available for all major desktop operating systems and some handheld devices The code YOU write will be portable for all the platforms that have SWT implementations for them (unless you decide to do some platform specific stuff like OLE on windows) http: //www. eclipse. org/swt/ - SWT home page

Installing SWT Ø To compile and run SWT applications you need 1. SWT jars (usually just swt. jar) 2. SWT native libraries Ø Detailed Instructions on obtaining and “installing” 1. Go to http: //www. eclipse. org/downloads/index. php and follow one of the many mirror links 2. This will bring you to another page, where you want to follow the “Latest Release” link 3. This should bring you to a page which will say “Release Build: “ in bold letters on the very top 4. Scroll down to the bottom of the page till you see “SWT Binary and Source” section 5. Pick the platform you intend to develop on from the list (e. g. Windows XP) and click on “(http)” to start downloading the zip file 6. Extract the contents of the zip file into a directory and you are ready for the final step(s) (let’s say our directory path is C: SWT)

Installing SWT (Cont. ) 7. 8. You need to include swt. jar (and possibly other jars) from the C: SWT folder in your classpath (for an example on setting classpath see http: //www. moreservlets. com/Using-Tomcat-4. html#Set-CLASSPATH) You also need to include the native library files (e. g. *. dll) from C: SWT in your java. library. path. a. The easiest way to do this one is to execute the following command from a regular java program System. out. println(System. get. Property(“java. library. path”)); which will give you a list of the directories in your “library path”. You can then copy the native library files from C: SWT to one of those directories. -OR- b. Simply provide the path when running java –Djava. library. path=C: SWT classname

Creating Widgets Ø SWT Javadoc - http: //www. jlab. net/eclipse/doc/3. 0/index. html Ø Simplest SWT program (explained over the next few slides) 1. import org. eclipse. swt. widgets. *; import org. eclipse. swt. widgets. Shell; 2. 3. 4. 5. 6. 7. 8. public class Hello. World { public static void main(String[] args) { Display display = new Display(); Shell shell = new Shell(display); shell. set. Text("Hello World"); shell. set. Size(250, 100); 9. shell. open(); 10. 11. while (!shell. is. Disposed ()) { (!shell. is. Disposed()) if (!display. read. And. Dispatch ()) { (!display. read. And. Dispatch()) display. sleep(); } } display. dispose(); 12. 13. 14. 15. 16. 17. } 18. 19. }

Creating Widgets (Cont. ) Ø Ø Think of Shell object (line 6) being almost the same as a JFrame in Swing, i. e. the highest-level container, which contains other widgets (e. g. buttons, labels etc. ) inside of it Unlike Swing 1. 2. 3. Ø You need to create Display object (line 5), which represents the underlying windowing system. This in turn serves as a parent to the Shell. (In SWT, every widget you create will always have its parent passed into the widget’s constructor. ) You need to keep the Shell open to listen for events with a while loop (lines 12 -16). Otherwise, the Shell will immediately close itself. Since you are not just writing some Java code (having the luxury of garbage collector clean up after you), but are actually requesting some heavyweight resources from the underlying platform – you need to dispose of those resources when you are done with them(line 17). (Luckily, disposing of the parent disposes of its child, so 99% of time you will not be running around disposing of widgets right and left. ) If you are a Swing guy, and the above 3 things greatly bother you – you can write a simple SWTUtil class to help you deal with it …

Homegrown SWT Utility SWTUtil. java Ø import org. eclipse. swt. widgets. *; public class SWTUtil { private static Display display = new Display(); public static Shell get. Shell() { Shell shell = new Shell(display); return shell; } public static void open. Shell(Shell shell) { shell. open(); // This loop keeps the shell open constantly listening for events while (!shell. is. Disposed ()) { (!shell. is. Disposed()) if (!display. read. And. Dispatch ()) { (!display. read. And. Dispatch()) display. sleep(); } } display. dispose(); } }

SWT Utility in Action Ø “Simplest SWT program” rewritten using SWTUtil class import org. eclipse. swt. widgets. *; public class Hello. World { public static void main(String[] args) { Shell shell = SWTUtil. get. Shell(); shell. set. Text(“Still Hello World"); shell. set. Size(250, 100); SWTUtil. open. Shell(shell); } }

Widget creation explained Ø A widget in SWT is created by 1. 2. Ø Ø Specifying parent Specifying style A parent is the container that the widget is created inside of (e. g. Shell). Style is any constant from the SWT class (SWT. PUSH, SWT. BORDER, SWT. LEFT etc). All styles applicable to the widget can be found in the Javadoc for that widget (as well as its superclasses if any). If more than one style is desired – separate them out with a “|” bitwise operator (e. g. SWT. MULTI | SWT. V_SCROLL|SWT. H_SCROLL| SWT. BORDER creates a multiline textarea that has vertical and horizontal scrollbars and a border around it). If no specific style is desired – use SWT. NONE. The style you are requesting is only a hint, so if the underlying platform doesn’t support it – you are out of luck.

Label Unselectable, uneditable text SWT. VERTICAL or SWT. HORIZONTAL can be used together with SWT. SEPARATOR to create a label that is a horizontal/vertical separator Label. World. java Ø Ø Ø 1. 2. 3. 4. 5. 6. 7. 8. import org. eclipse. swt. SWT; import org. eclipse. swt. layout. Grid. Layout; import org. eclipse. swt. widgets. *; public class Label. World { public static void main(String[] args) { Shell shell = SWTUtil. get. Shell(); shell. set. Text("Label World"); shell. set. Layout(new Grid. Layout()); // layouts are explained later 9. // Create labels new Label(shell, SWT. NONE). set. Text("Regular label"); new Label(shell, SWT. SEPARATOR|SWT. HORIZONTAL); 10. 11. 12. 13. 14. // pack and show shell. pack(); SWTUtil. open. Shell(shell); 15. 16. 17. } 18. 19. }

Button Ø Once a button – always a button. All types of buttons are created using the Button class. Push buttons, radio buttons, check buttons, toggle buttons and even flat buttons. Ø Button. World. java 1. 2. 3. 4. 5. 6. 7. 8. import org. eclipse. swt. SWT; import org. eclipse. swt. layout. Grid. Layout; import org. eclipse. swt. widgets. *; public class Button. World { public static void main(String[] args) { Shell shell = SWTUtil. get. Shell(); shell. set. Text("Button World"); shell. set. Layout(new Grid. Layout(2, true)); // layouts are explained later 9. new Button(shell, SWT. PUSH | SWT. FLAT). set. Text("Flat Push Button"); new Button(shell, SWT. CHECK). set. Text("Check Button"); new Button(shell, SWT. TOGGLE). set. Text("Toggle Button"); new Button(shell, SWT. RADIO). set. Text("Radio Button"); 10. 11. 12. 13. 14. // pack and show shell. pack(); SWTUtil. open. Shell(shell); 15. 16. 17. } 18. 19. }

Text Ø Different types of text widgets are created using Text class by providing the appropriate styles Ø Text. World. java 1. 2. 3. 4. 5. 6. 7. 8. import org. eclipse. swt. SWT; import org. eclipse. swt. layout. Grid. Layout; import org. eclipse. swt. widgets. *; public class Text. World { public static void main(String[] args) { Shell shell = SWTUtil. get. Shell(); shell. set. Text("Text World"); shell. set. Layout(new Grid. Layout()); // layouts are explained later 9. 10. 11. 12. 13. 14. 15. new Text(shell, SWT. NONE). set. Text("Missing something. . . "); new Text(shell, SWT. BORDER); // regular textfield new Text(shell, SWT. PASSWORD | SWT. BORDER). set. Text("password"); new Text(shell, SWT. READ_ONLY | SWT. BORDER). set. Text("Can't type inside"); new Text(shell, SWT. MULTI | SWT. V_SCROLL | SWT. WRAP | SWT. BORDER). set. Text("nnn"); 16. // pack and show shell. pack(); SWTUtil. open. Shell(shell); 17. 18. 19. 20. }

List Ø Pick from a list – single or multiple selection available Ø List. World. java 1. 2. 3. 4. 5. 6. 7. 8. import org. eclipse. swt. SWT; import org. eclipse. swt. layout. Grid. Layout; import org. eclipse. swt. widgets. *; public class List. World { public static void main(String[] args) { Shell shell = SWTUtil. get. Shell(); shell. set. Text("List World"); shell. set. Layout(new Grid. Layout(2, true)); // layouts are explained later 9. String[] items = "One Two Three Four Five Six". split(" "); List one = new List(shell, SWT. SINGLE | SWT. BORDER); one. set. Items(items); one. select(2); List two = new List(shell, SWT. MULTI | SWT. BORDER); two. set. Items(items); two. set. Selection(items); 10. 11. 12. 13. 14. 15. 16. 17. // pack and show shell. pack(); SWTUtil. open. Shell(shell); 18. 19. 20. } 21. 22. }

Combo Ø Benefits of both Text and List widgets in one! Ø Combo. World. java 1. 2. 3. 4. 5. 6. 7. 8. import org. eclipse. swt. SWT; import org. eclipse. swt. layout. Grid. Layout; import org. eclipse. swt. widgets. *; public class Combo. World { public static void main(String[] args) { Shell shell = SWTUtil. get. Shell(); shell. set. Text("Combo World"); shell. set. Layout(new Grid. Layout(3, true)); // layouts are explained later 9. String[] items = "One Two Three Four Five Six". split(" "); Combo one = new Combo(shell, SWT. DROP_DOWN); one. set. Items(items); Combo two = new Combo(shell, SWT. DROP_DOWN | SWT. READ_ONLY); two. set. Items(items); Combo three = new Combo(shell, SWT. SIMPLE); three. set. Items(items); 10. 11. 12. 13. 14. 15. 16. 17. // pack and show shell. pack(); SWTUtil. open. Shell(shell); 18. 19. 20. } 21. 22. }

Group Ø Used to group widgets together. (Very similar to JPanel in Swing) Ø Group. World. java 1. 2. 3. 4. 5. 6. 7. 8. import org. eclipse. swt. SWT; import org. eclipse. swt. layout. Grid. Layout; import org. eclipse. swt. widgets. *; public class Group. World { public static void main(String[] args) { Shell shell = SWTUtil. get. Shell(); shell. set. Text("Group World"); shell. set. Layout(new Grid. Layout()); // layouts are explained later 9. Group button. Group = new Group(shell, SWT. SHADOW_OUT); button. Group. set. Text("Six buttons"); button. Group. set. Layout(new Grid. Layout(3, true)); for(int i = 0; i < 6; i++) { new Button(button. Group, SWT. RADIO). set. Text("Bottle " + (i + 1)); } 10. 11. 12. 13. 14. 15. 16. // pack and show shell. pack(); SWTUtil. open. Shell(shell); 17. 18. 19. } 20. 21. }

Browser Ø Ø One of the newer widgets of SWT for displaying web content. Cool stuff!!! (See the sample application later) Ø Browser. World. java 1. 2. 3. 4. 5. 6. 7. 8. 9. import org. eclipse. swt. SWT; import org. eclipse. swt. browser. Browser; import org. eclipse. swt. layout. Fill. Layout; import org. eclipse. swt. widgets. Shell; public class Browser. World { public static void main(String[] args) { Shell shell = SWTUtil. get. Shell(); shell. set. Text("Browser World"); shell. set. Layout(new Fill. Layout()); 10. Browser browser = new Browser(shell, SWT. BORDER); browser. set. Size(900, 500); browser. set. Url("http: //www. eclipse. org/swt/"); 11. 12. 13. 14. // pack and show shell. pack(); SWTUtil. open. Shell(shell); 15. 16. 17. } 18. 19. }

Browser in Action

SWT Layouts Ø Layouts first introduced in AWT Ease burden of laying out components Promote cross-platform GUI design Ø SWT offers 5 layouts: Ø Ø 1. 2. 3. 4. 5. Ø Ø Ø Fill. Layout Row. Layout Stack. Layout Grid. Layout Form. Layout You set the composite’s layout by calling set. Layout() You don’t have to use a layout, but do you really want your widgets to disappear when the user resizes the window? More on layouts http: //www. eclipse. org/articles/Understanding%20 Layouts. htm

Fill. Layout Places all widgets in either a single column or a single row depending on if SWT. VERTICAL or SWT. HORIZONTAL is used Ø Makes all widgets the same size Ø Ø 1. 2. 3. 4. 5. 6. 7. 8. Fill. Layout. Example. java import org. eclipse. swt. SWT; import org. eclipse. swt. layout. Fill. Layout; import org. eclipse. swt. widgets. *; public class Fill. Layout. Example { public static void main(String[] args) { Shell shell = SWTUtil. get. Shell(); shell. set. Text("Fill. Layout. Example"); shell. set. Layout(new Fill. Layout(SWT. HORIZONTAL)); 9. for(int i = 0; i < 3; i ++) { new Button(shell, (i % 2 == 0) ? SWT. RADIO : SWT. PUSH). set. Text("Button " + i); new Text(shell, SWT. BORDER). set. Text("same size"); } 10. 11. 12. 13. 14. // pack and show shell. pack(); SWTUtil. open. Shell(shell); 15. 16. 17. } 18. 19. }

Row. Layout Ø Ø Ø 1. 2. 3. 4. 5. 6. 7. 8. 9. Similar to Fill. Layout - places all widgets in either a single column or a single row depending on if SWT. VERTICAL or SWT. HORIZONTAL is used Doesn’t force all widgets to be the same size Can wrap to a new row or column if it runs out of space Can use Row. Data objects to determine initial heights/widths for controls Row. Layout. Example. java import org. eclipse. swt. SWT; import org. eclipse. swt. layout. Row. Data; import org. eclipse. swt. layout. Row. Layout; import org. eclipse. swt. widgets. *; public class Row. Layout. Example { public static void main(String[] args) { Shell shell = SWTUtil. get. Shell(); shell. set. Text("Row. Layout. Example"); shell. set. Layout(new Row. Layout(SWT. HORIZONTAL)); 10. for(int i = 0; i < 3; i ++) { new Button(shell, (i % 2 == 0) ? SWT. RADIO : SWT. PUSH). set. Text("Button " + i); new Text(shell, SWT. BORDER). set. Layout. Data(new Row. Data(5, 50)); } 11. 12. 13. 14. 15. // pack and show shell. pack(); SWTUtil. open. Shell(shell); 16. 17. 18. } 19. 20. }

Stack. Layout Ø Ø Similar to Card. Layout in Swing. The basic idea is that all widgets are stacked on top of each other and you can only see one at a time. Need to set top. Control attribute for the layout to show any widget on top Need to call layout() on the Composite every time you reassign top. Control Ø Stack. Layout. Example. java Ø 1. 2. 3. 4. 5. 6. 7. 8. 9. import org. eclipse. swt. SWT; import org. eclipse. swt. custom. Stack. Layout; import org. eclipse. swt. events. *; import org. eclipse. swt. widgets. *; public class Stack. Layout. Example { public static void main(String[] args) { final Shell shell = SWTUtil. get. Shell(); shell. set. Text("Row. Layout. Example"); shell. set. Layout(new Stack. Layout()); 10. final Button button 1 = new Button(shell, SWT. PUSH); button 1. set. Text("Button One"); final Button button 2 = new Button(shell, SWT. PUSH); button 2. set. Text("Button Two"); 11. 12. 13. 14. class Stack. Layout. Adapter extends Selection. Adapter { public void widget. Selected(Selection. Event event) { ((Stack. Layout)shell. get. Layout()). top. Control = (event. widget == button 1) ? button 2 : button 1; shell. layout(); } } button 1. add. Selection. Listener(new Stack. Layout. Adapter()); button 2. add. Selection. Listener(new Stack. Layout. Adapter()); 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. ((Stack. Layout)shell. get. Layout()). top. Control = button 1; shell. pack(); SWTUtil. open. Shell(shell); 25. 26. 27. } 28. 29. }

Grid. Layout Ø Ø Ø Ø Ø Lays out controls in a grid. A lot of people love this powerful layout. You can easily specify what you want to happen when the composite is resized 6 attributes (defaults are preset): 1. int horizontal. Spacing – horizontal space in pixels between adjacent cells 2. int vertical. Spacing – vertical space in pixels between adjacent cells 3. boolean make. Columns. Equal. Width – forces all columns to be same width 4. int margin. Width – margin in pixels along right and left edges 5. int margin. Height – margin in pixels along top and bottom edges 6. int num. Columns – number of columns for the layout Grid. Layout(int num. Columns, boolean make. Columns. Equal. Width) Uses Grid. Data objects to provide for better control Too many options to list … Warning for Swing programmers – DO NOT TRY TO REUSE Grid. Data objects Instead, you need to create a new Grid. Data object for every widget that needs non-default behavior

Grid. Layout. Example. java 1. 2. 3. 4. 5. 6. 7. 8. import org. eclipse. swt. SWT; import org. eclipse. swt. layout. *; import org. eclipse. swt. widgets. *; public class Grid. Layout. Example { public static void main(String[] args) { Shell shell = SWTUtil. get. Shell(); shell. set. Text("Grid. Layout. Example"); shell. set. Layout(new Grid. Layout(2, false)); // 2 columns, same width 9. // Username new Label(shell, SWT. RIGHT). set. Text("Username: "); Combo cmb. Username = new Combo(shell, SWT. DROP_DOWN); cmb. Username. set. Layout. Data(new Grid. Data(Grid. Data. FILL_HORIZONTAL)); cmb. Username. set. Items(new String[]{"Howard", "Admin", "Kalman"}); cmb. Username. set. Text("Admin"); 10. 11. 12. 13. 14. 15. 16. // Password new Label(shell, SWT. RIGHT). set. Text("Password: "); new Text(shell, SWT. BORDER | SWT. PASSWORD). Grid. Data(Grid. Data. FILL_HORIZONTAL)); 17. 18. 19. 20. // Login Button login. Button = new Button(shell, SWT. PUSH | SWT. FLAT); login. Button. set. Text("Proceed to your account"); Grid. Data data = new Grid. Data(Grid. Data. FILL_HORIZONTAL); data. horizontal. Span = 2; // span 2 columns login. Button. set. Layout. Data(data); 21. 22. 23. 24. 25. 26. shell. pack(); SWTUtil. open. Shell(shell); 27. 28. } 29. 30. }

Form. Layout Ø Ø Ø Considered the most complex layout of SWT Based on y = ax + b (not that most people who use it care) MAXIMUM flexibility People who understand it – love it The basic idea is that you layout the widgets relative to each other or to the enclosing composite Needs a tutorial of its own and is therefore not covered here …

Event Handling Ø Ø Ø Ø If you are familiar with Swing – this last part should be a joke. SWT widgets can listen for events to happen. If you would like to hear when and what they hear – you need to attach a listener to the widget Listener is basically an interface that defines when certain behaviors happen Sometimes, listener tries listening out for two many things, but you only care to listen for one particular event In such a case – you need an adapter. Adapter is a class that implements the interface and from which you can just extend and override the method you are interested in. Some of the popular listeners/adapters are listed below Focus. Listener/Focus. Adapter – listens for focus gained and focus lost events Key. Listener/Key. Adapter – listens for key releases and key presses Modify. Listener(only has 1 method) – listens for text modifications Verify. Listener – listens for (and potentially intercepts) text modifications Mouse. Listener/Mouse. Adapter – listens for mouse button presses Selection. Listener/Selection. Adapter – listens for selection events (similar to Action. Listener in Swing)

Event. Handling. java 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. import org. eclipse. swt. SWT; import org. eclipse. swt. events. *; import org. eclipse. swt. layout. *; import org. eclipse. swt. widgets. *; public class Event. Handling { private static boolean numbers. Only; public static void main(String[] args) { Shell shell = SWTUtil. get. Shell(); shell. set. Text("Event. Handling"); shell. set. Layout(new Grid. Layout(2, false)); 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. // input Label lbl. Input = new Label(shell, SWT. RIGHT); lbl. Input. set. Text("Type in here: "); Grid. Data data = new Grid. Data(Grid. Data. HORIZONTAL_ALIGN_END); lbl. Input. set. Layout. Data(data); Text input = new Text(shell, SWT. BORDER); input. add. Verify. Listener(new Verify. Listener() { public void verify. Text(Verify. Event v. Event) { v. Event. doit = false; // don't allow anything but numbers if(!numbers. Only || v. Event. character == 'b') { v. Event. doit = true; } else if(Character. is. Digit(v. Event. character) && numbers. Only) { v. Event. doit = true; } } });

Event. Handling. java 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. Button btn. Allow = new Button(shell, SWT. CHECK); btn. Allow. set. Text("Allow numbers only"); data = new Grid. Data(Grid. Data. HORIZONTAL_ALIGN_CENTER); data. horizontal. Span = 2; btn. Allow. set. Layout. Data(data); btn. Allow. add. Selection. Listener(new Selection. Adapter() { public void widget. Selected(Selection. Event selection. Event) { numbers. Only = ((Button)(selection. Event. widget)). get. Selection (); ((Button)(selection. Event. widget)). get. Selection(); } }); shell. pack(); SWTUtil. open. Shell(shell); } }

sync. Exec() / async. Exec() Ø Ø Ø You should only be updating user interfaces from the user interface thread. For example, say you create a Label in your main thread. Then, you have a separate thread that does some sort of a long computation. Then, you want to update your label with the result of the second thread’s computation. You CANNOT just call label. set. Text(new. Value) in your second thread. Instead, you have to call either sync. Exec(Runnable) or async. Exec(Runnable) methods on the instance of Display // Say you run a thread that calculates new time approximately every second // and tries to update a label new Thread(new Runnable() { public void run() { Display display = shell. get. Display(); while(!shell. is. Disposed()) { try { display. async. Exec(new Runnable() { public void run() { clock. set. Text((new Date()). to. String()); } }); Thread. sleep(1000); } catch (Interrupted. Exception e) { e. print. Stack. Trace(); } }). start();

Sample Application Ø Ø Goal: Write a cute browser in SWT (under 300 lines) that handles most HTML Cute. Browser. java uses SWTUtil. java