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

Budapest University of Technology and Economics

Fault-tolerant Systems Research Group

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

2Budapest University of Technology and Economics


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!!!



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)




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




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)




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




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




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




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




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




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




SWT alapelemek− Esemény-hurok

while(!shell.isDisposed()){

if(!display.readAndDispatch())

display.sleep ();

}



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



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



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



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



Billentyűzet

„Keyboard focus” – a billentyűleütések célpontja (control)− setFocus()− isFocusControl()− forceFocus()

Események− KeyDown− KeyUp

FocusEvent - FocusListener



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



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



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



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!



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 Hello World


SWT könyvtárak



SWT Hello World


Referencia a képernyőre



SWT Hello World


Új ablak a képernyőn



SWT Hello World


Ablak címe



SWT Hello World


Ablak mérete



SWT Hello World


Ablak megnyitása



SWT Hello World


Esemény-hurok



SWT Hello World


Erőforrások eldobása



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



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



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

SWT-szerű widget-ek webreAszinkron 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



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



SWT és Web 2.0 – RAP (Rich Ajax Platform)public void 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() { public void widgetSelected(SelectionEvent e) { setPageComplete(true); setErrorMessage(null); } });

no = new Button(yesNo, SWT.RADIO); no.setText("No"); no.addSelectionListener(new SelectionAdapter() { public void widgetSelected(SelectionEvent e) { setPageComplete(true); setErrorMessage(null); } }); setControl(composite);}



SWT Belülről



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



SWT Belülről – Az SWT hibák

Háromféle kivételSWTError – 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





Widget konstruktorok

Widgeteknek mindig van szülőjükTipikus 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



Widget

Minden UI osztály közös absztrakt őseKonstruktorral 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()



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



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();



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!



Control

Ősosztály minden „nehézsúlyú” UI elemnekStí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



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



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



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



Label

New Label(parent, SWT.NONE);Statikus szöveg vagy kép megjelenítéseStílusok

− WRAP, LEFT, CENTER, RIGHT, SEPARATOR, HORIZONTAL, VERTICAL, SHADOW_IN, SHADOW_OUT

Fontos metódusok− setText(String)− setImage(Image)− setAlignment(Left |Center | Right)



Button

New Button(parent, SWT.PUSH);Többféle gomb megjelenítéseStílusok

− ARROW, CHECK, PUSH, RADIO, TOGGLE, FLAT, UP, DOWN, LEFT, CENTER, RIGHT

Események− Kiválasztás



Button

Metódusok− setText(String)− setImage(Image)− setAlignment(int)− setSelection(boolean) – check, radio és toggle

Megjegyzés− Rádió gombok csoportosíthatóak − Az „arrow” gombok iránnyal rendelkezhetnek



Példa

public static void main(String[] args) {Display display =

Display.getDefault();MyDlg thisClass = new MyDlg();thisClass.createSShell();thisClass.sShell.open();

while (!thisClass.sShell.isDisposed()) {

if (!display.readAndDispatch())display.sleep();

}display.dispose();

}



Példa

private void createSShell() {sShell = new Shell();sShell.setText("Shell");sShell.setLayout(new GridLayout());sShell.setSize(new

org.eclipse.swt.graphics.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");

}



Text

Szövegbeviteli komponens (család)− Egy- vagy többsoros

Stílusok− SINGLE, MULTI, READ_ONLY, WRAP, LEFT,

CENTER, RIGHT, PASSWORD

Események− Modify, Verify, DefaultSelection (Enter)



Text

Metódusok− setText(String)− setSelection(int,int)− cut(), copy(), paste()− insert(String), append(String)− getLineCount(), getLineHeight()

Megjegyzés− Kurzor (caret) jelzi az aktuális beviteli pontot− Indexek 0 bázisúak



StyledTextFormázott szöveg – nem natív!

− new StyledText(parent, style)Stílusok

− SINGLE, MULTI, READ_ONLY, WRAP, FULL_SELECTION

Események− DefaultSelection, Modify, Verify,

ExtendedModifyAkciók

− invokeAction(int act)− setKeyBinding(int key, int act)



StyledText Statikus tartalom manipuláció

− setText(String)− setLineBackground(int, int, Color)− setStyleRanges(StyleRange[])

Dinamikus tartalom manipuláció− setContent(StyledTextContent)

● Saját tároló implementáció

− addLineBackgroundListener(…)− addLineStyleListener(…)

Megjegyzés− Példák: TextEditor, JavaEditor (eclipse.org)



Composite

Konténer más elemek tárolására− new Container(parent, SWT.NONE)

Stílusok− NO_BACKGROUND, NO_FOCUS,

NO_MERGE_PAINTS, NO_RADIO_GROUP, NO_REDRAW_RESIZE



Composite

Metódusok− getChildren()− setLayout(Layout)− layout(boolean)− setTabList(Control[])

Megjegyzés− Lehetnek gyermekei− Lehet layout-ja− Örököltethető, hogy saját elemeket

hozhassunk létre



Canvas

Festővászonnew Canvas(parent,style)Szabad grafika készítésének alapjaSaját kurzor (Caret) lehet benneRajzolás

− Saját alrendszer az SWT-ben− Később!



Item

Általános elem osztályMindig felsorolás jellegű elemen belül

− Tree -> TreeItem− Menu -> MenuItem

Általános metódusok− setText(String)− setImage(Image)

Documents

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