Översikt GUI programmering i Java SWT och Lab 1 JAVA SWT/JFace Lab 1 DVGA11 Översikt till SWT Översikt till SWT Hemsida http://www.eclipse.org/swt Tutorials online http://www.cs.umanitoba.ca/~eclipse/ Javadoc http://www.cs.umanitoba.ca/~eclipse/2-basic.pdf http://help.eclipse.org/stable/nftopic/org.eclipse.platform. doc.isv/reference/api/overview-summary.html Standard Widget Toolkit (SWT) Använder native widgets via JNI Emulerar widgets som inte finns på host plattformen Tillhandahåller MVC genom JFace. Flexibilitet (traditionell eller MVC programmering) Open source kompilerar till native körbar fil med gcj 1
1. import org.eclipse.swt.widgets 2. import org.eclipse.swt.widgets.shell; 3. public class HelloWorld { 4. public static void main(string[] args) ) { 5. Display display = new Display(); 6. Shell shell = new Shell(display); 7. shell.settext("hello World"); 8. shell.setsize(250, 100); 9. 10. shell.open(); 11. 12. while (!shell.isdisposed shell.isdisposed()) { 13. if (!display.readanddispatch display.readanddispatch()) { 14. display.sleep(); 15. 16. 17. display.dispose(); 18. 19. SWT Hello World SWT Hello World (fortsätt.) shell och display Shell objekt (rad 6) kan sägas motsvara JFrame i Swing, dvs topp nivå container som innehåller alla andra widgets (knappar, labels etc.) Shell måste hållas öppet genom att lyssna efter event med en while loop (rad 12-16). Till skillnad mot swing Så måste man skapa ett Display objekt (rad 5), som representerar det underliggand fönsterhanteringssystemet. Eftersom man hanterar operativssystems objekt så fungerar inte heller garabage collectorn utan man måste själv se till att rensa upp (rad 17). Tar man bort föräldern tas dock alla barnen bort så vanligtvis är detta allt som krävs SWT Hello World (fortsätt.) SWTUtil Känns det obekant att inte kunna använda garbage collectorn kan man skapa en SWTUtil klass (se höger) Hellow World som använder SWTUtil class import org.eclipse.swt.widgets public class HelloWorld { public static void main(string[] args) ) { Shell shell = SWTUtil.getShell(); shell.settext( Still Hello World"); shell.setsize(250, 100); SWTUtil.openShell(shell); SWTUtil.java import org.eclipse.swt.widgets public class SWTUtil { private static Display display = new Display(); public static Shell getshell() { Shell shell = new Shell(display); return shell; public static void openshell(shell shell) { shell.open(); // This loop keeps the shell open constantly listening for events while (!shell.isdisposed shell.isdisposed()) { display.dispose(); if (!display.readanddispatch display.readanddispatch()) { display.sleep(); org.eclipse.swt.widgets.display SWT Display Instanser av den här klassen sköter koppling mellan SWT och det underliggande operativsystemet. Den tillhandahåller även olika metoder för att komma åt information om operativsystemet och de resurser som allokeras av SWT I SWT så är det den tråd som skapar en instans av Display som anses vara UI tråden (för den displayen). 2
org.eclipse.swt.widgets.shell SWT Shell Shell klassen representerar fönstret" som hanteras av fönsterhanteraren. Typer: Top level shell är ett shell som inte har någon förälder (de är skapade av konstruktorn som tar en Display som argument) Shell som har föräldrar anges som sekundära (secondary) eller dialog shells. Tillstånd: Maximerad (Maximized) Minimerad (Minimized) Normal org.eclipse.swt.widgets.shell Styles (specifika för varje klass): SWT Shell BORDER, CLOSE, MIN, MAX, NO_TRIM, RESIZE, TITLE, ON_TOP, TOOL, APPLICATION_MODAL, MODELESS, PRIMARY_MODAL, SYSTEM_MODAL Om man vill använda mer än en style kan man använde dem genom bitvis or operator (ex. CLOSE TITLE MIN). Vill man inte ha någon specifik style använd SWT.NONE. Style är bara ett förslag, kan inte det underliggande operativsystemet visa en style så använder den en default Fördefinerade konstanter: SHELL_TRIM En sammanslagning av styles (CLOSE TITLE MIN MAX RESIZE) för att skapa ett typiskt applikations fönster. DIALOG_TRIM En sammanslagning av styles (TITLE CLOSE BORDER) för att skapa ett typiskt dialog ruta. org.eclipse.swt.widgets.widget SWT Widget Widget klassen är den abstrakta superklassen för alla interface objekt En widget skapas genom att både specificera en förälder och en style En förälder är den container som widgeten är skapade inuti (ex. Shell). Style beror på vilken widget det är se http://www.eclipse.org/swt/widge ts/ org.eclipse.swt.widgets.label Ej editerbar och ej valbar text SWT.VERTICAL eller SWT.HORIZONTAL kan användas tillsammans med SWT.SEPARATOR för att skapa horisontella/vertikala separatorer SWT Label LabelWorld.java 1.import org.eclipse.swt.swt; 2.import org.eclipse.swt.layout.gridlayout; 3.import org.eclipse.swt.widgets 4.public class LabelWorld { 5. public static void main(string[] args) ) { 6. Shell shell = SWTUtil.getShell(); 7. shell.settext("label World"); 8. shell.setlayout(new GridLayout()); 9. // Create labels 10. new Label(shell, SWT.NONE).setText("Regular label"); 11. new Label(shell, SWT.SEPARATOR); 12. new Label(shell, SWT.SEPARATOR SWT.HORIZONTAL); 13. 14. // pack and show 15. shell.pack(); 16. SWTUtil.openShell(shell); 17. 18. 3
org.eclipse.swt.widgets.button SWT Button Alla typer av knappar skapas genom att använda Button klassen. Klickbar widget, skickar en notifikation när den är klickad på. Styles: ARROW, CHECK, PUSH, RADIO, TOGGLE, FLAT, UP, DOWN, LEFT, RIGHT, CENTER ButtonWorld.java 1.import org.eclipse.swt.swt; 2.import org.eclipse.swt.layout.gridlayout; 3.import org.eclipse.swt.widgets 4.public class ButtonWorld { 5. public static void main(string[] args) ) { 6. Shell shell = SWTUtil.getShell(); 7. shell.settext("button World"); 8. shell.setlayout(new GridLayout(2, true)); 9. 10. new Button(shell, SWT.PUSH SWT.FLAT).setText("Flat Push Button"); 11. new Button(shell, SWT.CHECK).setText("Check Button"); 12. new Button(shell, SWT.TOGGLE).setText("Toggle Button"); 13. new Button(shell, SWT.RADIO).setText("Radio Button"); 14. 15. // pack and show 16. shell.pack(); 17. SWTUtil.openShell(shell); 18. 19. org.eclipse.swt.widgets.text SWT Text Textruta där användaren kan skriva in text och ändra text TextWorld.java Styles: CENTER, LEFT, MULTI, PASSWORD, SINGLE, RIGHT, READ_ONLY, WRAP 1. import org.eclipse.swt.swt; 2. import org.eclipse.swt.layout.gridlayout; 3. import org.eclipse.swt.widgets 4. public class TextWorld { 5. public static void main(string[] args) ) { 6. Shell shell = SWTUtil.getShell(); 7. shell.settext("text World"); 8. shell.setlayout(new GridLayout()); 9. 10. new Text(shell, SWT.NONE).setText("Missing something..."); 11. new Text(shell, SWT.BORDER); // regular textfield 12. new Text(shell, SWT.PASSWORD SWT.BORDER).setText("password"); "); 13. new Text(shell, SWT.READ_ONLY SWT.BORDER).setText("Can't type inside"); 14. new Text(shell, SWT.MULTI SWT.V_SCROLL SWT.WRAP 15. SWT.BORDER).setText("\n\n\n"); "); 16. 17. // pack and show 18. shell.pack(); 19. SWTUtil.openShell(shell); 20. 21. org.eclipse.swt.widgets.combo SWT Combo Välj ifrån en lista/meny enkel eller multival möjligt ComboWorld.java Styles: DROP_DOWN, READ_ONLY, SIMPLE 1. import org.eclipse.swt.swt; 2. import org.eclipse.swt.layout.gridlayout; 3. import org.eclipse.swt.widgets 4. public class ComboWorld { 5. public static void main(string[] args) ) { 6. Shell shell = SWTUtil.getShell(); 7. shell.settext("combo World"); 8. shell.setlayout(new GridLayout(3, true)); 9. String[] items = "One Two Three Four Five Six".split(" "); 14. two.setitems(items); 15. Combo three = new Combo(shell, SWT.SIMPLE); 16. three.setitems(items); 17. 18. // pack and show 19. shell.pack(); 20. SWTUtil.openShell(shell); 21. 22. SWT Composites org.eclipse.swt.widgets.composite... Instanser av den här klassen är en widget som kan innehålla andra widgets (knappar etc). Widget w = new Widget(composite, SWT.NONE); public class CompositeExample {... public CompositeExample() {... // Build the components Composite c1 = new Composite( shell, SWT.NULL ); c1.setlayout( new FillLayout() ); Button b1 = new Button( c1, SWT.PUSH ); b1.settext( "Button on Composite 1" ); Composite c2 = new Composite( shell, SWT.NULL ); c2.setlayout( new FillLayout() ); Button b2 = new Button( c2, SWT.PUSH ); b2.settext( "Button on Composite 2" );...... 10. Combo one = new Combo(shell, SWT.DROP_DOWN); 11. one.setitems(items); 12. Combo two = new Combo(shell, SWT.DROP_DOWN SWT.READ_ONLY); 13. 4
org.eclipse.swt.widgets.layout SWT Layouts En layout bestämmer position och storlek på en composite widget SWT har 5 layouter: FillLayout RowLayout StackLayout GridLayout FormLayout Man applicerar en layout genom att anropa setlayout() http://www.eclipse.org/articles/article-understanding-layouts/understanding-layouts.htm org.eclipse.swt.layout.filllayout SWT Layouts (forts.) FillLayout Placerar alla widgets in en kolumn eller rad SWT.VERTICAL eller SWT.HORIZONTAL Alla widgets får samma storlek SWT Layouts (forts.) org.eclipse.swt.layout.rowlayout RowLayout Liknar Filllayout men tvingar inte alla widgets att vara lika stora Byter rad om inte alla widgets får plats SWT Layouts (forts.) org.eclipse.swt.layout.gridlayout GridLayout Som namnet antyder läggs widgets ut i en grid. 6 attributes (defaults är definerade): boolean makecolumnsequalwidth alla kolumner får samma vidd int numcolumns antal kolumner int marginwidth, int marginheight, int horizontalspacing, int verticalspacing Bestämmer avstånd till andra objekt och avstånd mellan celler GridLayout(int numcolumns, boolean makecolumnsequalwidth) För ytterliggare kontroll använd GridData objekts OBS ett griddata objekt skall inte återanvändas för flera layouter. 5
9. 11. 16. 17. 23. Button loginbutton = new Button(shell, SWT.PUSH SWT.FLAT); 25. GridData data = new 27. org.eclipse.swt.layout.griddata SWT Layouts (forts.) GridData GridData är det layout data objekt som man assoscierar med GridLayout. För att aktivera ett GridData objekt för en widget så använder man widget.setlayoutdata(object) metoden. Det finns 2 sätt att skapa specifika GridData objekt. Första sättet är att sätta attributen: GridData griddata = new GridData(); griddata.horizontalalignment = GridData.FILL; griddata.grabexcesshorizontalspace = true; button1.setlayoutdata(griddata); Det andra är att använda fördefinerade style bits : button1.setlayoutdata(new GridData(GridData.HORIZONTAL_ALIGN_FILL GridData.GRAB_HORIZONTAL)); SWT Layouts (forts.) GridLayout exempel org.eclipse.swt.layout.gridlayout 1. import org.eclipse.swt.swt; 2. import org.eclipse.swt.layout 3. import org.eclipse.swt.widgets 4. public class GridLayoutExample { 5. public static void main(string[] args) ) { 6. Shell shell = SWTUtil.getShell(); 7. shell.settext("gridlayoutexample"); "); 8. shell.setlayout(new GridLayout(2, false)); // 2 columns, same width 9. 10. // Username 11. new Label(shell, SWT.RIGHT).setText("Username:"); 12. Combo cmbusername = new Combo(shell, SWT.DROP_DOWN); 13. cmbusername.setlayoutdata(new GridData(GridData.FILL_HORIZONTAL)); 14. cmbusername.setitems(new String[]{"Howard", "Admin", "Kalman" Kalman"); 15. cmbusername.settext("admin"); "); 16. 18. // Password 19. new Label(shell, SWT.RIGHT).setText("Password:"); 20. new Text(shell,SWT.BORDER SWT.PASSWORD).GridData(GridData.FILL_HORIZONTAL GridData(GridData.FILL_HORIZONTAL)); 21. 22. // Login Button 24. loginbutton.settext("proceed to your account"); data = new GridData(GridData.FILL_HORIZONTAL); 26. data.horizontalspan = 2; // span 2 columns 27. loginbutton.setlayoutdata(data); 28. shell.pack(); 29. SWTUtil.openShell(shell); 30. 31. org.eclipse.swt.events Events SWT widgets kan lyssna efter events För att kunna lyssna på ett event så måste en lyssnare (listener) läggas till widgeten Ibland så kan en lyssnare lyssna på för många olika saker Då använder man en adapter. Några popolära lyssnare/adaptrar FocusListener/FocusAdapter fokus event KeyListener/KeyAdapter tangenttryckningar ModifyListener(1 method) textändringar VerifyListener lyssnare efter och fångar upp textändringar MouseListener/MouseAdapter mustryck/klick SelectionListener/SelectionAdapter selection events (liknande ActionListener i Swing) 1. import org.eclipse.swt.swt; 2. import org.eclipse.swt.events 3. import org.eclipse.swt.layout 4. import org.eclipse.swt.widgets 5. public class EventHandling { 6. private static boolean numbersonly; 7. public static void main(string[] args) ) { 8. Shell shell = SWTUtil.getShell(); 9. shell.settext("eventhandling"); "); 10. shell.setlayout(new GridLayout(2, false)); 12. // input 13. Label lblinput = new Label(shell, SWT.RIGHT); 14. lblinput.settext("type in here:"); Events (EventHandling.java) 15. GridData data = new GridData(GridData.HORIZONTAL_ALIGN_END); 16. lblinput.setlayoutdata(data); 17. Text input = new Text(shell, SWT.BORDER); 18. input.addverifylistener(new VerifyListener() { 19. public void verifytext(verifyevent vevent) ) { 20. vevent.doit = false; // don't allow anything but numbers 21. if(!numbersonly vevent.character == '\b')' { 22. vevent.doit = true; 23. 24. else if(character.isdigit(vevent.character) ) && numbersonly) ) { 25. vevent.doit = true; 26. 27. 28. ); 29. Button btnallow = new Button(shell, SWT.CHECK); 30. btnallow.settext("allow numbers only"); 31. data = new GridData(GridData.HORIZONTAL_ALIGN_CENTER); 32. data.horizontalspan = 2; 33. btnallow.setlayoutdata(data); 34. btnallow.addselectionlistener(new SelectionAdapter() { 35. public void widgetselected(selectionevent selectionevent) { 36. numbersonly = ((Button)(selectionEvent.widget)).getSelection Button)(selectionEvent.widget)).getSelection(); (); 37. 38. ); 39. shell.pack(); 40. SWTUtil.openShell(shell); 41. 42. 6
9. 14. 22. 23. 3. 9. org.eclipse.swt.events syncexec() / asyncexec() Man skall endast uppdatera UIet ifrån UI tråden För att uppdatera en Label i UI (huvud) tråden ifrån en annan tråd så kan man INTE anropa label.settext(värde) ifrån den andra tråden. För att uppdatera så anropar man (på Displayen): syncexec(runnable) om den anropande tråden kräver svar eller måste veta att UI tråden är klar innan den fortsätter. asyncexec(runnable) om man skall göra en UI operation som inte kräver nått svar eller är oavhängigt av den anropande trådens exekvering syncexec() / asyncexec() Exempel kod för att uppdater en Label ungefär 1 gång i sekunden ifrån en annan tråd 1. new Thread(new Runnable() { 2. public void run() { 3. Display display = shell.getdisplay(); 4. while(!shell.isdisposed()) ()) { //kontrollera så att shellet inte har kastats 5. try { 6. display.asyncexec(new Runnable() { 7. public void run() { 8. clock.settext((new Date()).toString()); ()); 9. 10. ); //slut parantes ifrån 6 11. Thread.sleep(1000); 12. 13. catch (InterruptedException( e) { 14. e.printstacktrace(); 15. 16. 17. 18. ).start(); //slut parantes ifrån 1 org.eclipse.jface.* JFace Bild och font register för att hantera OS resurser Dialoger och wizards Progress bars Action mekanism Action mekanismen separerar användarkommandon från var de hände i UI. En action representerar ett användarkommando (event). Viewers och editors Model-baserade adapters för några SWT widgets som JFace tillhandahåller hög-nivå semantik för. 1. /** 2. * Represents a category of items. 3. * 4. */ 5. class Category { 6. private String name; 7. private Vector subcategories; 8. private Category parent; 10. public Category(String name, Category parent) { 11. this.name = name; 12. this.parent = parent; 13. if(parent!= null) 14. parent.addsubcategory(this); 15. 16. public Vector getsubcategories() { 17. return subcategories; 18. 19. private void addsubcategory(category subcategory) { 20. if(subcategories == null) 21. subcategories = new Vector(); 22. if(! subcategories.contains(subcategory)) 23. subcategories.add(subcategory); 24. 25. public String getname() { 26. return name; 27. 28. public Category getparent() { JFace exempel 1/3 1. Vector categories = new Vector(); 2. Category category = new Category( Java libraries,, null); 3. categories.add(category); 4. category = new Category( UI Toolkits,, category); 5. new Category( AWT AWT,, category); 6. new Category( Swing Swing,, category); 7. new Category( SWT/JFace SWT/JFace,, category); 8. category = new Category( Java IDEs,, null); 9. categories.add(category); 10. new Category( Eclipse Eclipse,, category); 11. new Category( JBuilder JBuilder,, category); 29. return parent; http://download.eclipse.org/eclipse/downloads/documentation/2.0/html/plugins/org.eclipse.platform.doc.isv/reference/a pi/overview-summary.html 30. 31. http://media.wiley.com/product_data/excerpt/91/04700945/0470094591.pdf 7
14. 15. 23. 26. 1. final Tree tree = new 2. /** 3. * Builds up the tree with the MVC approach. 4. * 5. */ 6. public void MVC() { 7. TreeViewer treeviewer = new 8. treeviewer.setcontentprovider(new 9. public 10. Vector subcats 11. return subcats == null? new Object[0] : 12. 13. 14. public Object getparent(object element) { 15. return 16. 17. public boolean haschildren(object element) { 18. return 19. 20. public 21. if(inputelement!= null && inputelement instanceof 22. return 23. 24. return new Object[0]; 25. 26. public void 27. // 28. 29. public void inputchanged(viewer viewer, Object oldinput, Object 30. // 31. 32. ); 33. treeviewer.setlabelprovider(new 34. public String gettext(object element) { 35. return 36. 37. ); 38. 39. 1. final Tree tree = new Tree(shell,, SWT.BORDER); 2. /** 3. * Builds up the tree with traditional approach. 4. * 5. */ 6. public void traditional() { JFace exempel 2/3 7. for(int i=0; categories!= null && i < categories.size(); i++) { 8. Category category = (Category)categories.elementAt(i ( Category)categories.elementAt(i); ); 9. addcategory(null, category); 10. 11. På traditionellt sätt utan MVC 12. /** 13. * Adds a category to the tree (recursively). 14. * @param@ parentitem 15. * @param@ category 16. */ 17. private void addcategory(treeitem parentitem, Category category) ) { 18. TreeItem item = null; 19. if(parentitem == null) 20. item = new TreeItem(tree,, SWT.NONE); 21. else 22. item = new TreeItem(parentItem,, SWT.NONE); 23. item.settext(category.getname()); ()); 24. Vector subs = category.getsubcategories(); 25. for(int i=0; subs!= null && i < subs.size(); i++) 26. addcategory(item,, (Category)subs.elementAt(i ( Category)subs.elementAt(i)); )); = new Tree(shell, SWT.BORDER); JFace exempel 3/3 = new TreeViewer(tree); treeviewer.setcontentprovider(new ITreeContentProvider() { public Object[] getchildren(object parentelement) { subcats = ((Category)parentElement).getSubCategories Category)parentElement).getSubCategories(); return ((Category)element).getParent Category)element).getParent();? new Object[0] : subcats.toarray(); return ((Category)element).getSubCategories Category)element).getSubCategories()!= null; Med MVC public Object[] getelements(object inputelement) { return ((Vector)inputElement).toArray Vector)inputElement).toArray(); void dispose() { treeviewer.setlabelprovider(new LabelProvider() { return ((Category)element).getName Category)element).getName(); 38. treeviewer.setinput(categories); instanceof Vector) { Object newinput) { 27. http://media.wiley.com/product_data/excerpt/91/04700945/0470094591.pdf http://media.wiley.com/product_data/excerpt/91/04700945/0470094591.pdf Lab 1 Luffarschak (Tic-Tac-Toe) Uppgift: Skriv ett luffarschack spel som går att spela (ingen AI). Språk : Java SWT Krav (grundläggande) Programmet skall kunna köras utan eclipse med kommandot java -jar programnamn.jar Programmet skall använda SWT (ev. JFace) Frivillig Extra uppgift Lösningen skall vara implementerad med MVC mönstret Indentifiera problem Vad är Luffaschack Lab 1 Arbetsgång Ett spel bestående av 3x3 rutor där varje spelare (X och O) försöker få 3 i rad (horisontellt vertikalt eller diagonalt (de turas om att spela). Hur representerar jag detta Som ett rutnät på 3x3 med en knapp i varje ruta. Varje knapp skriver in X el O beroende på vilkens drag det var när man klickade på den sätter sig sedan i disabled läge så man inte kan trycka på den igen. Problem Hur kan man veta vilkens tur det är? Hur veta när någon vunnit? Hur vet när spelet är slut (om ingen vunnit före detta)? 8
Lab 1 Lab 1 Arbetsgång Layout problem Nyckelord : shell setlayout GridLayout Knapp problem (storlek) Nyckelord : setlayoutdata GridData GridData.FILL_HORIZONTAL GridData.FILL_VERTICAL Event problem Nyckelord : addselectionlistener SelectionAdapter widgetselected Lab 1 Arbetsgång Hur kan man få reda på vems tur det är Man kan ha en variabel som alternerar mellan 2 värden Modulo 2 på en räknare som räknar antal drag (resten blir 0 varannan gång) Hur kan man veta att spelet är slut (om ingen vunnit) Alla knapparna är disabled Räkna hur många drag som gjorts (9 rutor, ett klick per ruta) Lab 1 Arbetsgång Hur veta om någon har vunnit Finns bara ett fixt antal sätt att vinna på Kolla alla möjliga vinstkombinationer med if satser 9
Lab 1 Arbetsgång Hur veta om någon har vunnit Skapa en matris med vinstkombinationer Loopa över knapparna och kolla mot matrisen http://forum.codecall.net/java-tutorials/2141-java-tutorial-tic-tac-toe.html 10