Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF...
Transcript of Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF...
![Page 1: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/1.jpg)
Budapes( Műszaki és Gazdaságtudományi Egyetem Méréstechnika és Információs Rendszerek Tanszék
Grafikus felületek készítése 1.
SWT
![Page 2: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/2.jpg)
Grafikus felületek fejlesztése Java grafikus toolkitek
o AWT • Na>v widgetek • Csak minden plaEormon elérhető widgetek
o Swing • Rajzolt widgetek • Bármely plaEormon elérhető widgetek • Bővíthető
2
![Page 3: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/3.jpg)
Problémák “Nem úgy néz ki, mint a Word” probléma
o Nem veszi át az ablakkezelő look-‐and-‐feel beállításait o Gyakran a nyelvi beállításokat sem o Cél: mindenhol ugyanúgy néz ki
AWT o alacsony szintű
Swing o memóriafogyasztás o teljesítményproblémák o mára (Java 6.0) ez elfogadható
3
![Page 4: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/4.jpg)
Grafikus felületek fejlesztése SWT – Standard Widget Toolkit
o IBM fejlesztés o Swing helye` o Eclipse projekt indulásakor o Előzmény • Na>v GUI komponensek elérése Smalltalk nyelven
o Cél • Na>v elemekből felépíte` GUI keretrendszer • Mindenhol na>van néz ki
4
![Page 5: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/5.jpg)
SWT – Standard Widget Toolkit Na>v -‐ PlaEorm API-‐t használja o Gyors o Look-‐and-‐feel a plaEormé • Minden szolgáltatás elérhető
– OLE, drag-‐n-‐drop, … • Portolni kell • Eltérő megjelenés
5
Képek forrása: h`p://eclipse.org/swt
![Page 6: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/6.jpg)
Grafikus felület programozási modellje
6
Felhasználói beavatkozás
Esemény
Eseménysor
Esemény
Esemény
SWT: Display objektum
Ablak SWT-‐ben: Shell
![Page 7: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/7.jpg)
SWT eseményhurok Eseményhurok o Explicit -‐ az alkalmazásban le kell kódolni o Egy ciklusban
• bejövő események olvasása • események feldolgozása
o Ciklus vége: az alkalmazás véget ért (főprogram bezárva)
o Nagyon hasonlít a Windows API programozáshoz
7
![Page 8: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/8.jpg)
SWT eseményhurok 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(); !"}
8
![Page 9: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/9.jpg)
Eseménykezelés Mi az esemény?
o Valami, amire reagálni kell • Felhasználói
– Egérmozgatás – Billentyűzetlenyomás
• Rendszer – Telik az idő
9
![Page 10: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/10.jpg)
Eseménykezelés Eseményfigyelők felvétele
o Generikus (>pus nélküli) bármilyen widgetre o Típusos • Billentyűzet • Egér • Mulstouch • …
10
![Page 11: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/11.jpg)
SWT widgetek Viszonylag kicsi hierarchia
o Pl. Swinghez képest o Egy osztály többféle widgetet is leír! • Választás: s>lusbitek segítségével
Modellobjektumok csatolása o getData()/setData() metódusok
11
![Page 12: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/12.jpg)
Widget s>lusbitek További formátumbeállítások
o Pl. Bu`on-‐>CheckBox Konstruktorban kell megadni
o Futás közben nem lehet megváltoztatni o Widget >pustól függ az engedélyeze` s>lusok halmaza
Technika o Java 1.4 -‐> nincs ‘enum’ o Helye`e int konstansok SWT osztályban • Több s>lusbit megadása bitenkéns vagy művele`el:
– SWT.SEPARATOR|SWT.HORIZONTAL
12
![Page 13: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/13.jpg)
SWT widgetek Kézi példányosítás
o Nincs factory o Tartalmazási hierarchia
Kézi eltakarítás o Nincs garbage collecson! o dispose() kézi hívása • Hierarchia egyben törlődik • DE: csak általunk példányosíto` widgetre/erőforrásra
13
![Page 14: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/14.jpg)
Gyakori widgetek Bu`on
o Gombok, választógombok, rádiógombok
Label o Címkék
Text o Beviteli mezők
StyledText o Rajzolt beviteli mező (ld. Eclipse editorok)
14
![Page 15: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/15.jpg)
Gyakori widgetek Composite
o Más widgetek tárolása o Widgethez elrendezés adható meg (később)
Canvas o Kézi rajzolás
Menu, Toolbar o Eszköztárak, menük
List, Table o Listák, táblázatok megadása
15
![Page 16: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/16.jpg)
Gyakori widgetek És még sok más: h`p://eclipse.org/swt/widgets/
16
![Page 17: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/17.jpg)
További widgetek – Nebula projekt h`p://eclipse.org/nebula/ Dátum/idő kezelés
Forma`edText
17
![Page 18: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/18.jpg)
További widgetek – Nebula projekt Gan` diagram
Galéria
18
![Page 19: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/19.jpg)
Dialógus ablakok Fajtái
o MessageBox-‐ üzenetek o ColorDialog – szín-‐kiválasztás o DirectoryDialog -‐ könyvtárfa o FileDialog – fájl kiválasztás, mentés o FontDialog – betű>pus-‐választás o PrintDialog – nyomtatás o Nem Widget alosztályok!
Operációs rendszer beépíte` dialógusai o Specifikus dialógus tulajdonságok is • Pl. SWT.SHEET
19
![Page 20: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/20.jpg)
Dialógus ablakok Fajtái
o MessageBox-‐ üzenetek o ColorDialog – szín-‐kiválasztás o DirectoryDialog -‐ könyvtárfa o FileDialog – fájl kiválasztás, mentés o FontDialog – betű>pus-‐választás o PrintDialog – nyomtatás o Nem Widget alosztályok!
Operációs rendszer beépíte` dialógusai o Specifikus dialógus tulajdonságok is • Pl. SWT.SHEET
20
![Page 21: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/21.jpg)
ÖsszeteB űrlapok készítése
Layoutok
21
![Page 22: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/22.jpg)
Összete` űrlapok
22
Hány widgetet tartalmaz az
ablak?
![Page 23: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/23.jpg)
Összete` űrlapok
23
![Page 24: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/24.jpg)
Összete` űrlapok
24
![Page 25: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/25.jpg)
Tartalmazási hierarchia Minden widgetnek
o Egy szülője van o Kivétel: ablak
Composite widgetek o Más widgeteket tartalmazhatnak o Elrendezés megadható
25
![Page 26: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/26.jpg)
Elrendezés (Layout) Tartalom és elrendezés elválasztása o Elemek elrendezése o Rela>v elrendezés o Köves a konténer méretének változását
Közös ős: Layout o Nincs publikus API -‐ nem hívjuk meg
26
![Page 27: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/27.jpg)
Layout – AWT (Gyökerek) Layout o Elemek elrendezése o Automaskus módszer
A programozók elégedetlenek o Eddig: grafikus UI builder o Erőforrás fájlok o Most: kódolás
27
![Page 28: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/28.jpg)
Layout -‐ SWT Elrendezések használhatóak
o FillLayout o RowLayout o GridLayout o FormLayout o StackLayout
Vagy alapértelmeze` elrendezés o X-‐Y koordináták megadása
Fontos o Vagy koordinátákat, vagy layoutot meg kell adni!
28
![Page 29: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/29.jpg)
FillLayout Vízszintes/függőleges irányban egymás melle� elemek kitölsk a composite-‐ot o Az elemek saját méretét figyelmen kívül hagyja!
Primi>v elrendezés Használható egymásba ágyazo` composite elemek esetén
![Page 30: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/30.jpg)
RowLayout Hasonló a FillLayout-‐hoz o Sorokba vagy oszlopokba rendezi az elemeket o Elemek méretét figyelembe veszi
DE: minden elemnek egyedi mérete lehet RowData (LayoutData) : height, width o Az elemek méretét adja meg
Az elemeket egyenletesen osztja el a meglevő helyen
![Page 31: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/31.jpg)
GridLayout Grid (táblázat) jellegű elrendezés o Oszlopok száma megadható
Ada`agok o horizontalSpacing – elemek közö� szünet (pixel) o makeColumnsEqualWidth – egyenlőek az oszlopok? o marginHeight -‐ margó magassága felül és alul o marginWidth-‐ margó szélessége jobb-‐ és baloldalt o numColumns -‐ oszlopok száma o verscalSpacing – elemek közö� szünet
![Page 32: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/32.jpg)
FormLayout A legkomplexebb layout A Data melle` egy A`achment osztályt is használ o Egy Data 4 a`achmentet tartalmazhat (négy oldalhoz)
o Az a`achment a méretet adja meg
o Alapképlet: y=ax+b (y magasság, x szélesség) o a : a vonatkozó widgethez képess arány, b offszet
![Page 33: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/33.jpg)
FormLayout A legkomplexebb layout A Data melle` egy A`achment osztályt is használ o Egy Data 4 a`achmentet tartalmazhat (négy oldalhoz)
o Az a`achment a méretet adja meg
o Alapképlet: y=ax+b (y magasság, x szélesség) o a : a vonatkozó widgethez képess arány, b offszet
Abszolút pozíció a bal felső sarokhoz
képest
![Page 34: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/34.jpg)
FormLayout A legkomplexebb layout A Data melle` egy A`achment osztályt is használ o Egy Data 4 a`achmentet tartalmazhat (négy oldalhoz)
o Az a`achment a méretet adja meg
o Alapképlet: y=ax+b (y magasság, x szélesség) o a : a vonatkozó widgethez képess arány, b offszet
Második widgethez
képest jobbra és lefelé
![Page 35: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/35.jpg)
StackLayout Minden elem azonos méretű, azonos helyen van Csak a legfelső látszik o StackLayout.topControl o Ha átállítjuk, a konténerre meg kell hívni a layout() függvényt, hogy aktualizálódjon a GUI
Megadható a margó o marginHeight o marginWidth
![Page 36: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/36.jpg)
Layout Sokféle van Sajátot is készíthetünk a Layout osztály örököltetésével
Nem kell használni o Widget.setBound(x,y,w,h) • Abszolút méret megadása
![Page 37: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/37.jpg)
Példa alkalmazás 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"); !
}
37
![Page 38: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/38.jpg)
Példa alkalmazás 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"); !
}
38
Layout beállítása
![Page 39: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/39.jpg)
Példa alkalmazás 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"); !
}
39
Címke felvétele
![Page 40: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/40.jpg)
Példa alkalmazás 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"); !
}
40
Címke ‘SEPARATOR’ s>lusbi`el
![Page 41: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/41.jpg)
Példa alkalmazás 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"); !
}
41
Checkbox ‘CHECK’ s>lusbit
![Page 42: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/42.jpg)
Példa alkalmazás 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"); !
}
42
Egyszerű nyomógomb
![Page 43: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/43.jpg)
Példa alkalmazás 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"); !
}
43
![Page 44: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/44.jpg)
Grafikus felületek készítése
44
![Page 45: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/45.jpg)
Felhasználói felület grafikus tervezése Alapvető elvárások
o Támogassa közvetlen szerkesztést o Használhassuk a Layoutokat o Forrás és grafikus felület szerkesztés párhuzamosan
Egyre jobb támogatás o Többféle eszköz o Eclipse WindowBuilder az egyik legjobb eszköz
![Page 46: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/46.jpg)
WindowBuilder projekt Történet
o Instansasons -‐> Google -‐> Eclipse Működés
o Roundtrip engineering o SWT, JFace, Forms API o Eclipse Workbench o DE: memóriaigényes • Tipp: kapcsoljuk ki, hogy ő legyen az alapértelmeze` Java szerkesztő
o DE: kisebb bugok
46
![Page 47: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/47.jpg)
WindowBuilder projekt
47
![Page 48: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/48.jpg)
GUI fejlesztőeszköz Használjunk automaskus elrendezést, ha lehet
o Igazítási hibák ellen például
48
Forrás: h`p://uxma`ers.com/mt/archives/2009/02/reviewing-‐user-‐interfaces.php
![Page 49: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/49.jpg)
Egyszerű felület
49
![Page 50: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/50.jpg)
SWT -‐ Összefoglalás Na>v, grafikus keretrendszer
o Gyors o Egyszerű
Különböző formelemek definiálására o ÖsszeteB űrlapok o Dialógusok o Menük o Rajzolás o Nyomtatás o …
50
![Page 51: Grafikus(felületek(készítése(1.( - inf.mit.bme.hu · PDF fileGrafikus(felületek(fejlesztése( Java grafikus(toolkitek(o AWT(• Nav(widgetek(• Csak(minden(plaormon(elérhető(widgetek](https://reader033.fdocuments.net/reader033/viewer/2022042619/5a78be647f8b9aa17b8be5d2/html5/thumbnails/51.jpg)
További segédletek Understanding Layout in SWT
o h`p://www.eclipse.org/arscles/arscle.php?file=Arscle-‐Understanding-‐Layouts/index.html
o Leírás SWT layoutokhoz
User Interface Guidelines – Eclipsepedia o h`p://wiki.eclipse.org/User_Interface_Guidelines
SWT Snippets: o h`p://www.eclipse.org/swt/snippets/ o Csoportosíto` minták SWT felületek kódolásához
51