1 / 61

Nyílt Fejlesztőrendszerek Felhasználói felületek

Nyílt Fejlesztőrendszerek Felhasználói felületek. Házi feladat. Feladat Eclipse plugin készítés Témalista a weben – jövő héten Nehézségtől függő értékelés Csapatmunka lehetséges (2-3 főig, behatárolt részfeladatok!) Ütemezés 4. hét vége: pontos specifikáció Utolsó tanítási hét: beadás

jermaine-conrad
Download Presentation

Nyílt Fejlesztőrendszerek Felhasználói felületek

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Nyílt FejlesztőrendszerekFelhasználói felületek

  2. Házi feladat • Feladat • Eclipse plugin készítés • Témalista a weben – jövő héten • Nehézségtől függő értékelés • Csapatmunka lehetséges (2-3 főig, behatárolt részfeladatok!) • Ütemezés • 4. hét vége: pontos specifikáció • Utolsó tanítási hét: beadás • Vizsgaidőszakban nincs házi feladat beadás!!!

  3. Java-alapú felhasználói felület • AWT (Abstract Widgeting Toolkit) • Az első • Alacsony szintű elemek • Egyszerű esemény modell (event-listener) • Már elavult (SUN)

  4. Java-alapú felhasználói felület • Swing • „AWT magasabb szinten” • Komplex GUI elemek • Összetettebb esemény modell, többszálúság • Ma ez a javasolt (általában - SUN) • Java-ban megírt komponensek

  5. Java-alapú felhasználói felület • AWT, Swing hátrányok • Lassú • „nem úgy néz ki, mint a Word” probléma • Nem veszi át a WM look-and-feel beállításait • Általában a nyelvi beállításokat sem (feltétlenül) • „Nem szép” (felhasználói élmény) • Jelentős mennyiségű erőforrást (memória) emészt fel (Swing) • Alacsony szintű (AWT)

  6. Java-alapú felhasználói felület • SWT – Standard Widgeting Toolkit • A Swing helyett… • Az Eclipse projekt indulásakor kezdték fejleszteni • Előzmény: natív GUI komponensek elérése Smalltalk alól (OTI) • Cél: gyors, natív elemekből épített GUI keretrendszer

  7. Java-alapú felhasználói felület • SWT • Natív • A platform API-t használja • Minden platformra portolni kell • Gyors • Azonos look-and-feel a többi (natív) alkalmazással • OLE, Drag-n-drop,… támogatás •  kis különbségek a platformok között lehetnek

  8. Java-alapú felhasználói felület • SWT • Átgondolt struktúra • Egyszerű komponensek • Hierarchikus szerkezetek • Átlátható esemény-kezelés • Átlátható API • Bővíthető • Saját widget-ek (nem natív) • Optimális funkció-teljesítmény arány érhető el

  9. Java-alapú felhasználói felület • SWT alapelemek • Display • Egy „munkaállomást reprezentál” (monitor(ok), egér, billentyűzet) • Az esemény-szétosztásért felel • Tartalmazza a felső szintű Shell és Monitor objektumokat • Shell • Egy „ablak”-ot reprezentál • Composite-ek és Control-ok hierarchiájának a gyökere

  10. Java-alapú felhasználói felület • SWT alapelemek • Composite • Olyan elem, mely más elemeket (composite, control) tartalmazhat (konténer) • Control • Egy operációs rendszer szintű vezérlőt reprezentál • Button, Label, … • A Shell és Composite is ez • Az összes osztály a Widget osztályból származik

  11. Java-alapú felhasználói felület • SWT alapelemek • Esemény-hurok • Explicit – az alkalmazásban le kell kódolni • Egy ciklusban olvassuk a bejövő eseményeket, és feldolgozzuk őket • Ha az alkalmazás véget ér (a főablak bezárásra kerül) abbahagyhatjuk • Az idősebbeknek: Windows API programozás 

  12. Java-alapú felhasználói felület • SWT alapelemek • Esemény-hurok while(!shell.isDisposed()){ if(!display.readAndDispatch()) display.sleep (); }

  13. SWT események • Mi is az esemény? • Minden történés, ami érdekes lehet • A felhasználó vagy az operációs rendszer generálja • A listenerek kapják el az eseményeket • Kétféle listener • Típus nélküli • Típusos

  14. SWT események • Típus nélküli listener • addListener(int, Listener) • A típus adja meg a szűrőt • Csak az ennek megfelelő események továbbítódnak • Listener • handleEvent(Event) • notifyListeners(int, Event) • Programozott esemény-küldés

  15. SWT események • Típusos listener • addXYZListener(XYZListener) • Csak addot típusú listener adható meg • Listener • Specifikus metódusok • Specifikus argumentumokkal • „objektum-orientáltabb…” • Adapter osztályok • Ősosztályként a listenereknek

  16. SWT események • Ha több listenert adunk meg valahol, a megadás sorrendjében hívódnak meg • Ha többször adtuk hozzá ugyanazt, többször hívódik meg • Ha többször adtuk hozzá, többször is kell elvenni

  17. Billentyűzet • „Keyboard focus” – a billentyűleütések célpontja (control) • setFocus() • isFocusControl() • forceFocus() • Események • KeyDown • KeyUp • FocusEvent - FocusListener

  18. Billentyűzet • SWT konstans a speciális karaktereknek • BS, CL, ESC, DEL, LF, TAB • stateMask – különleges gombok állapota • SHIFT, ALT, CTRL, COMMAND • „Traversal key” • Utazás a kontrollok között • A kontroll dönt a feldolgozásról (nem accelatorKey) pl. &File

  19. Billentyűzet • AcceleratorKey – gyorselérés • Kontrollhoz kötjük • setAccelerator(int) • Karakter + módosító maszk • Window Manager rendszer-billentyű események • Pl. Alt+F4 • Az ablakkezelő rendszer „elnyeli” • Nem jut el a programhoz

  20. Egér • Tipikus mutatóeszköz • 1-2-3-sok gomb • Az aktuális pozíciót kurzor jelzi a képernyőn • A kurzor változó alakú • Az alatta levő elemtől (is) függően • Események • Enter, Exit, Down, Up, Move, Hover, DoublClick

  21. Egér • Esemény-elemek • Koordináták – control-relatív • Button – az akcióban résztvevő gomb • Gomb maszk – A stateMask része • BUTTON1, BUTTON2, BUTTON3 • BUTTON_MASK • State maszk – a billentyűzet-infó is!

  22. SWT Hello World 1 import org.eclipse.swt.*; 2 import org.eclipse.swt.graphics.*; 3 import org.eclipse.swt.widgets.*; 4 public class HelloWorld{ 5 public static void main(String[] args) { 6 Display display = new Display(); 7 Shell shell = new Shell(display); 8 shell.setText("Hello, World!"); 9 shell.setSize(200, 100); 10 shell.open (); 11 while (!shell.isDisposed()) { 12 if (!display.readAndDispatch()) 13 display.sleep (); 14 } 15 display.dispose (); 16 } 17}

  23. SWT Hello World 1 import org.eclipse.swt.*; 2 import org.eclipse.swt.graphics.*; 3 import org.eclipse.swt.widgets.*; 4 public class HelloWorld{ 5 public static void main(String[] args) { 6 Display display = new Display(); 7 Shell shell = new Shell(display); 8 shell.setText("Hello, World!"); 9 shell.setSize(200, 100); 10 shell.open (); 11 while (!shell.isDisposed()) { 12 if (!display.readAndDispatch()) 13 display.sleep (); 14 } 15 display.dispose (); 16 } 17} SWT könyvtárak

  24. SWT Hello World 1 import org.eclipse.swt.*; 2 import org.eclipse.swt.graphics.*; 3 import org.eclipse.swt.widgets.*; 4 public class HelloWorld{ 5 public static void main(String[] args) { 6 Display display = new Display(); 7 Shell shell = new Shell(display); 8 shell.setText("Hello, World!"); 9 shell.setSize(200, 100); 10 shell.open (); 11 while (!shell.isDisposed()) { 12 if (!display.readAndDispatch()) 13 display.sleep (); 14 } 15 display.dispose (); 16 } 17} Referencia a képernyőre

  25. SWT Hello World 1 import org.eclipse.swt.*; 2 import org.eclipse.swt.graphics.*; 3 import org.eclipse.swt.widgets.*; 4 public class HelloWorld{ 5 public static void main(String[] args) { 6 Display display = new Display(); 7 Shell shell = new Shell(display); 8 shell.setText("Hello, World!"); 9 shell.setSize(200, 100); 10 shell.open (); 11 while (!shell.isDisposed()) { 12 if (!display.readAndDispatch()) 13 display.sleep (); 14 } 15 display.dispose (); 16 } 17} Új ablak a képernyőn

  26. SWT Hello World 1 import org.eclipse.swt.*; 2 import org.eclipse.swt.graphics.*; 3 import org.eclipse.swt.widgets.*; 4 public class HelloWorld{ 5 public static void main(String[] args) { 6 Display display = new Display(); 7 Shell shell = new Shell(display); 8 shell.setText("Hello, World!"); 9 shell.setSize(200, 100); 10 shell.open (); 11 while (!shell.isDisposed()) { 12 if (!display.readAndDispatch()) 13 display.sleep (); 14 } 15 display.dispose (); 16 } 17} Ablak címe

  27. SWT Hello World 1 import org.eclipse.swt.*; 2 import org.eclipse.swt.graphics.*; 3 import org.eclipse.swt.widgets.*; 4 public class HelloWorld{ 5 public static void main(String[] args) { 6 Display display = new Display(); 7 Shell shell = new Shell(display); 8 shell.setText("Hello, World!"); 9 shell.setSize(200, 100); 10 shell.open (); 11 while (!shell.isDisposed()) { 12 if (!display.readAndDispatch()) 13 display.sleep (); 14 } 15 display.dispose (); 16 } 17} Ablak mérete

  28. SWT Hello World 1 import org.eclipse.swt.*; 2 import org.eclipse.swt.graphics.*; 3 import org.eclipse.swt.widgets.*; 4 public class HelloWorld{ 5 public static void main(String[] args) { 6 Display display = new Display(); 7 Shell shell = new Shell(display); 8 shell.setText("Hello, World!"); 9 shell.setSize(200, 100); 10 shell.open (); 11 while (!shell.isDisposed()) { 12 if (!display.readAndDispatch()) 13 display.sleep (); 14 } 15 display.dispose (); 16 } 17} Ablak megnyitása

  29. SWT Hello World 1 import org.eclipse.swt.*; 2 import org.eclipse.swt.graphics.*; 3 import org.eclipse.swt.widgets.*; 4 public class HelloWorld{ 5 public static void main(String[] args) { 6 Display display = new Display(); 7 Shell shell = new Shell(display); 8 shell.setText("Hello, World!"); 9 shell.setSize(200, 100); 10 shell.open (); 11 while (!shell.isDisposed()) { 12 if (!display.readAndDispatch()) 13 display.sleep (); 14 } 15 display.dispose (); 16 } 17} Esemény-hurok

  30. SWT Hello World 1 import org.eclipse.swt.*; 2 import org.eclipse.swt.graphics.*; 3 import org.eclipse.swt.widgets.*; 4 public class HelloWorld{ 5 public static void main(String[] args) { 6 Display display = new Display(); 7 Shell shell = new Shell(display); 8 shell.setText("Hello, World!"); 9 shell.setSize(200, 100); 10 shell.open (); 11 while (!shell.isDisposed()) { 12 if (!display.readAndDispatch()) 13 display.sleep (); 14 } 15 display.dispose (); 16 } 17} Erőforrások eldobása

  31. SWT architektúra • Platform Interface • Java Native Interface segíségével hívja a platform API-t (c) • Egy-az-egyhez leképzés • Ugyanazon függvényneveket és paramétereket használja, mint a platform • Ugyanazokaz az elnevezési konvenciókat is használja • Minden számottevő részlet már a Java kódban • Aki ismeri az adott platform API-t, egyszerűen portolhatja a SWT-t

  32. SWT Runtime • A futtatáshoz két dolog kell • SWT jar fájlok • Swt.jar – az SWT alap csomagja • Egyéb, platform-függő jar fájlok • A fordításhoz a javac-nak el kell tudni érni ezeket • SWT osztott könyvtárak • Az SWT Platform Interface-t (PI) tartalmazzák • Platform specifikus nevek, pl. swt-XX.dll Windows alatt, vagy libswt-XX.ao Linux alatt • Az egyéb, platform-függő libek halmaza

  33. SWT és Web 2.0 – RAP (Rich Ajax Platform) • SWT-szerű widget-ek webre • Aszinkron működés (AJAX) • Előnyök • Könnyű portolás SWT-ről • Nem-GUI komponensek 1-1 felhasználhatóak • „több-ablak” kezelés • Magas szintű szolgáltatások automatikusan rendelkezésre állnak • Inkubációs fázisban • http://eclipse.org/rap

  34. SWT és Web 2.0 – RAP (Rich Ajax Platform)

  35. SWT és Web 2.0 – RAP (Rich Ajax Platform) publicvoid createControl(Composite parent) { Composite composite = new Composite(parent, SWT.NONE); composite.setLayout(new GridLayout(1, true)); new Label(composite, SWT.LEFT).setText("Do you have complaints?"); Composite yesNo = new Composite(composite, SWT.NONE); yesNo.setLayout(new FillLayout(SWT.VERTICAL)); yes = new Button(yesNo, SWT.RADIO); yes.setText("Yes"); yes.addSelectionListener(new SelectionAdapter() { publicvoid widgetSelected(SelectionEvent e) { setPageComplete(true); setErrorMessage(null); } }); no = new Button(yesNo, SWT.RADIO); no.setText("No"); no.addSelectionListener(new SelectionAdapter() { publicvoid widgetSelected(SelectionEvent e) { setPageComplete(true); setErrorMessage(null); } }); setControl(composite); }

  36. SWT Belülről

  37. SWT Belülről – Az SWT osztály • Minden SWT konstans • SWT.PUSH, SWT.RADIO • SWT.Selection • Fontos metódusok • getPlatform() • getVersion() • error() • Megjegyzés • Platform – string (pl. „win32”, „gtk”) • Verzió – int

  38. SWT Belülről – Az SWT hibák • Háromféle kivétel • SWTError – kritikus, végzetes hiba • Code – az SWT hibakód • Throwable – a kivétel, ami a hibát okozta • getMessage() – a hiba szöveges leírása • SWTException • Akkor dobja, ha kevésbé kritikus hiba történt • Ugyanazok a mezők, mint fent • IllegalArgumentException • Hibás bemenő paraméter esetén

  39. Widget konstruktorok • Widgeteknek mindig van szülőjük • Tipikus konstruktor: Widget(parent,style) • Stílusok az SWT konstansok kombinációi (bitszintű vagy) • Példák • new Label(shell,SWT.NONE); • Button push = new Button(shell,SWT.PUSH); • Button radio = new Button(shell,SWT.RADIO); • Kivétel: shell szülője shell vagy display

  40. Widget • Minden UI osztály közös absztrakt őse • Konstruktorral példányosítjuk (nem factory) • Létrehozáskor az OS erőforrások lefoglalódnak • Törlés programozottan (dispose) vagy felhasználói művelet során • Elengedi az OS erőforrásokat • Alkalmazás-specifikus adatokat lehet tárolni benne: getData()/setData()

  41. Widget - adattag • setData(Object) – getData() • Egyetlen objektum tárolása • setData(String,Object) – getData(String) • Kulcs-érték párok tárolása • Sok érték esetén lassú (memória-optimalizált) • Kitűnően alkalmazható az MVC patternbeli model felé történő referencia tárolására • Egyszerűbb programozás

  42. Elemek törlése • Az erőforrás-alapú elemeket explicit módon meg kell semmisíteni • Ilyenek: Widgetek, Color, Cursor, Font, GC, Image, Region, Device, … • 1. SZABÁLY: Te csináltad, te semmi-síted meg! • A programozó semmisíti meg: • Font font = new Font(…); • A programozó nem semmisítheti meg! • Font font = control.getFont();

  43. Elemek törlése • 2. SZABÁLY: Egy elem megsemmi-sítése, megsemmisíti a gyerekeit is! • shell.dispose() – az ablak minden eleme • menu.dispose() – a menü minden eleme • tree.dispose() – a fa minden eleme megsemmisül • Fontos: • Control.dispose() és • menuItem.dispose() esetén • A beállított (setMenu()) menü is törlődik!

  44. Control • Ősosztály minden „nehézsúlyú” UI elemnek • Stílusok • BORDER, LEFT_TO_RIGHT, RIGHT_TO_LEFT • Események • FocusIn, FocusOut, KeyDown, KeyUp, Traverse, MouseDown, MouseUp, MouseDoubleClick, MouseEnter, MouseExit, MouseMove, Move, Resize, Paint, Help

  45. Shell – Az ablak • New Shell(display, SWT.SHELL_TRIM); • New Shell(shell, SWT.DIALOG_TRIM); • Stílusok • BORDER, CLOSE, MIN, MAX, NO_TRIM, RESIZE, TITLE, APPLICATION_MODAL, MODELESS, PRIMARY_MODAL, SYSTEM_MODAL • Események • Activate, Close, Iconify, DeIconify, Deactivate

  46. Shell – Az ablak • New Shell(display, SWT.SHELL_TRIM); • New Shell(shell, SWT.DIALOG_TRIM); • Stílusok • BORDER, CLOSE, MIN, MAX, NO_TRIM, RESIZE, TITLE, APPLICATION_MODAL, MODELESS, PRIMARY_MODAL, SYSTEM_MODAL • Események • Activate, Close, Iconify, DeIconify, Deactivate

  47. Shell – Az ablak • Metódusok • open() • close() • setActive() • Megjegyzés • A legfelső ablak szülője a display • Dialógusok szülője a felsőbb szintű ablak

  48. Label • New Label(parent, SWT.NONE); • Statikus szöveg vagy kép megjelenítése • Stílusok • WRAP, LEFT, CENTER, RIGHT, SEPARATOR, HORIZONTAL, VERTICAL, SHADOW_IN, SHADOW_OUT • Fontos metódusok • setText(String) • setImage(Image) • setAlignment(Left |Center | Right)

  49. Button • New Button(parent, SWT.PUSH); • Többféle gomb megjelenítése • Stílusok • ARROW, CHECK, PUSH, RADIO, TOGGLE, FLAT, UP, DOWN, LEFT, CENTER, RIGHT • Események • Kiválasztás

More Related