Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Mirosław Ochodek Sponsorzy: Standard Widget Toolkit Jak budować interfejs użytkownika? ECESIS Eclipse Community Education.

Podobne prezentacje


Prezentacja na temat: "Mirosław Ochodek Sponsorzy: Standard Widget Toolkit Jak budować interfejs użytkownika? ECESIS Eclipse Community Education."— Zapis prezentacji:

1 Mirosław Ochodek Sponsorzy: Standard Widget Toolkit Jak budować interfejs użytkownika? ECESIS Eclipse Community Education Project An Eclipse Technology Research Subproject

2 UCWorkbench Team Eclipse Summer School (2) Topics SWT czy Swing? Terminologia Prosty program w SWT Wzorzec Observer Widgets Menus Layouts Graphics Drag and Drop

3 UCWorkbench Team Eclipse Summer School (3) Operating system sun.awt Swing Biblioteka GUI w javie (javax.swing.*) Była mało wydajna (poprawiono w Java 1.4) Napisana w Javie (korzysta AWT – Java / C) Niezależna platformowo (daleko od OS) java.awt Swing

4 UCWorkbench Team Eclipse Summer School (4) Operating system Windowing system JNI SWT Zależna od platformy (dostępne implementacje dla większości popularnych platform) Wykorzystuje komponenty OS (JNI) – dispose! Tylko kontrolki nie obsługiwane przez dany system zostały stworzone Posiada wsparcie w postaci JFace SWT JFace

5 UCWorkbench Team Eclipse Summer School (5) Operating system Windowing system JNI SWT vs. Swing Zależny od platformy Wydajny (Komponenty z systemu operacyjnego) Wykorzystuje wzorzec observer Menadżery rozmieszczenia SWT JFace Operating system sun.awt java.awt Swing Niezależny od platformy Niewydajny Look and Feel Wykorzystuje wzorze observer Menadżery rozmieszczenia

6 UCWorkbench Team Eclipse Summer School (6) org.eclipse.swt.SWT Klasa z polami static public Dostarcza stałe dla SWT Bez instancji (eg. SWT.BOLD) Stałe w SWT można sumować bitowo (eg. SWT.BOLD | SWT.ITALIC) SWT

7 UCWorkbench Team Eclipse Summer School (7) Terminy Display Połączenie między SWT i systemem GUI danej platformy Wykorzystywana do zarządzania pętlą komunikatów i wątkami UI Shell Okno zarządzane przez Window menadżer danego OS Composite Widget, który może zawierać inne widgety Layout manager Klasa odpowiedzialna za zarządzanie rozkładem

8 UCWorkbench Team Eclipse Summer School (8) Jak uruchomić program w SWT? classpath SWT.jar library (eclipse/plugins) Add to the JVM arguments Djava.library.path= albo wybrać Run as... SWT Application JFace wymaga bibliotek: org.eclipse.jface_x.jar, org.eclipse.core.commands_x.jar, org.eclipse.equinox.common_x.jar, (org.eclipse.osgi) Podczas pisania pluginów nie trzeba się tym martwić!

9 UCWorkbench Team Eclipse Summer School (9) Basic SWT application public static void main(String[] args) { Display display = new Display(); Shell shell = new Shell(display); Label label = new Label(shell, SWT.CENTER); label.setText(Witaj świecie"); label.pack(); shell.pack(); shell.open(); while (!shell.isDisposed ()) { if (!display.readAndDispatch ()) display.sleep (); } display.dispose (); }

10 UCWorkbench Team Eclipse Summer School (10) Wzorzec Observer Lalaaaalalaa! Dziękujemy. Proszę nie dzwonić, to my zadzwonimy… Następny proszę!

11 UCWorkbench Team Eclipse Summer School (11) Wzorzec Observer

12 UCWorkbench Team Eclipse Summer School (12) SWT&Observer Widget Control Scrollable Composite Button Object public void addListener (int eventType, Listener listener) public interface Listener { void handleEvent (Event event); } public void addSelectionListener (SelectionListener listener) public interface SelectionListener extends SWTEventListener { public void widgetSelected(SelectionEvent e); public void widgetDefaultSelected(SelectionEvent e); }

13 UCWorkbench Team Eclipse Summer School (13) Composite Pattern Idea

14 UCWorkbench Team Eclipse Summer School (14) Wzorzec Composite

15 UCWorkbench Team Eclipse Summer School (15) SWT&Composite Widget Control Scrollable Composite Button Object public Control (Composite parent, int style) Button button = new Button(shell,SWT.PUSH); *

16 UCWorkbench Team Eclipse Summer School (16) Widgets

17 UCWorkbench Team Eclipse Summer School (17) Label Label label = new Label(shell, SWT.CENTER); label.setText("Hello World"); label.setForeground(Display.getDefault().getSystemColor(SWT.COLOR_BLUE));

18 UCWorkbench Team Eclipse Summer School (18) Button Button button = new Button(shell, SWT.PUSH); button.setText("Click me!"); Button button = new Button(shell, SWT.CHECK); button.setText("Click me!"); Button button = new Button(shell, SWT.ARROW|SWT.RIGHT); Button button = new Button(shell, SWT.RADIO); button.setText("Click me!"); Button button = new Button(shell, SWT.TOGGLE); button.setText("Click me!");

19 UCWorkbench Team Eclipse Summer School (19) Button Usage Button button = new Button(shell, SWT.PUSH); button.setText("Click me!"); button.addSelectionListener(new SelectionListener(){ public void widgetDefaultSelected(SelectionEvent e) { widgetSelected(e); } public void widgetSelected(SelectionEvent e) { System.out.println(e.getSource().toString()+" was clicked!"); } }); Button {Click me!} was clicked!

20 UCWorkbench Team Eclipse Summer School (20) Text Text text = new Text(shell, SWT.SINGLE | SWT.BORDER); text.setText("Text"); Text text = new Text(shell, SWT.MULTI | SWT.BORDER | SWT.VERTICAL); text.setText("Text\nText"); Text text = new Text(shell, SWT.PASSWORD | SWT.SINGLE | SWT.BORDER); text.setText("Text");

21 UCWorkbench Team Eclipse Summer School (21) Text Usage Text text = new Text(shell, SWT.SINGLE | SWT.BORDER); text.addVerifyListener(new VerifyListener(){ public void verifyText(VerifyEvent e) { if (e.text.matches("[0-9]*")){ e.doit = true; }else{ e.doit = false; } }); text.addModifyListener(new ModifyListener(){ public void modifyText(ModifyEvent e) { System.out.println(((Text)(e.widget)).getText()+ " - text after modification"); } }); 2 - text after modification 23 - text after modification text after modification text after modification text after modification text after modification text after modification

22 UCWorkbench Team Eclipse Summer School (22) ProgressBar ProgressBar pb = new ProgressBar(shell, SWT.SMOOTH); pb.setMinimum(0); pb.setMaximum(100); pb.setSelection(34); ProgressBar pb = new ProgressBar(shell, SWT.SMOOTH | SWT.INDETERMINATE); pb.setMinimum(0); pb.setMaximum(100);

23 UCWorkbench Team Eclipse Summer School (23) Slider and Scale Slider slider = new Slider(shell, SWT.HORIZONTAL); slider.setMinimum(0); slider.setMaximum(100); slider.setSelection(30); Scale scale = new Scale(shell, SWT.HORIZONTAL); scale.setMinimum(0); scale.setMaximum(100); scale.setSelection(30);

24 UCWorkbench Team Eclipse Summer School (24) List List list = new List(shell, SWT.MULTI); list.add("First"); list.add("Second"); list.add("Third"); list.addSelectionListener(new SelectionListener(){ public void widgetDefaultSelected(SelectionEvent e) { System.out.println("Default action - double click(Windows)"); widgetSelected(e); } public void widgetSelected(SelectionEvent e) { System.out.println("Selected items:"); String[] selection = ((List)(e.widget)).getSelection(); for (int i = 0; i < selection.length; i++) { System.out.println(" - "+selection[i]+""); } });

25 UCWorkbench Team Eclipse Summer School (25) Combo Combo combo = new Combo(shell, SWT.DROP_DOWN); combo.add("First"); combo.add("Second"); combo.add("Third"); combo.addSelectionListener(new SelectionListener(){ public void widgetDefaultSelected(SelectionEvent e) { System.out.println("Default action - Enter (Windows)"); widgetSelected(e); } public void widgetSelected(SelectionEvent e) { System.out.println("Selected "+((Combo)(e.widget)).getText()); } });

26 UCWorkbench Team Eclipse Summer School (26) Tree Tree tree = new Tree(shell, SWT.SINGLE); TreeItem node1 = new TreeItem(tree, SWT.NULL); node1.setText("1. Main node"); TreeItem node11 = new TreeItem(node1, SWT.NULL); node11.setText("1.1 First sub node"); TreeItem node12 = new TreeItem(node1, SWT.NULL); node12.setText("1.2 First sub node"); tree.addTreeListener(new TreeListener(){ public void treeCollapsed(TreeEvent e) { System.out.println(((TreeItem)e.item).getText()+ " was collapsed"); } public void treeExpanded(TreeEvent e) { System.out.println(((TreeItem)e.item).getText()+ " was expanded"); } });

27 UCWorkbench Team Eclipse Summer School (27) Menu Menu menuBar = new Menu(shell, SWT.BAR); shell.setMenuBar(menuBar); MenuItem fileTitle = new MenuItem(menuBar, SWT.CASCADE); fileTitle.setText("File"); Menu fileMenu = new Menu(shell, SWT.DROP_DOWN); fileTitle.setMenu(fileMenu); MenuItem exitItem = new MenuItem(fileMenu, SWT.PUSH); exitItem.setText("Exit"); exitItem.addSelectionListener(new SelectionListener(){ public void widgetDefaultSelected(SelectionEvent e) { widgetSelected(e); } public void widgetSelected(SelectionEvent e) { ((MenuItem)(e.widget)).getParent().getShell().close(); } }); SWT.BAR SWT.DROP_DOWN SWT.POP_UP SWT.CHECK SWT.CASCADE SWT.PUSH SWT.RADIO SWT.SEPARATOR setManuBar – SWT.BAR setMenu – SWT.POP_UP

28 UCWorkbench Team Eclipse Summer School (28) Layouts Kontroluje rozmiar i rozmieszczenie komponentów Klasy menadżerów, są podklasami abstrakcyjnej klasy Layout SWT udostępnia kilka podstawowych layoutów FillLayout, rozmieszcza komponenty w rzędzie lub w kolumnie, równych rozmiarów, wypełniając dostępne miejsce RowLayout, ustawia komponenty w rzędzie lub kolumnie GridLayout, wpisuje komponenty w siatkę FormLayout, ustawia komponenty doczepiając je między sobą

29 UCWorkbench Team Eclipse Summer School (29) Praca z Layoutami Importujemy odpowiedni pakiet SWT: import org.eclipse.swt.layout.*; Aby przypisać Layout obiektowi klasy Composite użyj setLayout(Layout) Display display = new Display(); Shell shell = new Shell(display); shell.setLayout(new FillLayout());

30 UCWorkbench Team Eclipse Summer School (30) Layout Data Klasy layoutów często wykorzystują pomocnicze klasy nazywane ogólnie LayoutData RowLayout -> RowData GridLayout -> GridData FormLayout -> FormData Przypisanie danych układu Button button = new Button(shell, SWT.PUSH); button.setLayoutData(new RowData(10, 20));

31 UCWorkbench Team Eclipse Summer School (31) FillLayout Ustawia komponenty w rzędzie lub kolumnie Wszystkie tego samego rozmiaru Bez zawijania wierszy Nie można zdefiniować marginesów i odstępów Wykorzystywany do: Umieszczanie przycisków na paskach zadań Umieszczania checkboxów w grupy

32 UCWorkbench Team Eclipse Summer School (32) FillLayout Example Display display = new Display(); Shell shell = new Shell(display); FillLayout fillLayout = new FillLayout(); fillLayout.type = SWT.VERTICAL; shell.setLayout(fillLayout); new Button(shell, SWT.PUSH).setText("1'st Button"); new Button(shell, SWT.PUSH).setText("Big Button"); new Button(shell, SWT.PUSH).setText("Button 3"); new Button(shell, SWT.PUSH).setText("Last Button"); shell.pack(); shell.open();

33 UCWorkbench Team Eclipse Summer School (33) FillLayout Example fillLayout.type = SWT.VERTICAL; fillLayout.type = SWT.HORIZONTAL;

34 UCWorkbench Team Eclipse Summer School (34) RowLayout RowLayout ma możliwość zawijania wierszy Można ustawiać marginesy i odległości Różne właściwości mogą zostać ustawione Wysokość i szerokość widgetów Użyj obiektu klasy RowData

35 UCWorkbench Team Eclipse Summer School (35) RowLayout Example RowLayout rowLayout = new RowLayout(); rowLayout.wrap = true; rowLayout.pack = true; rowLayout.justify = true; rowLayout.type = SWT.HORIZONTAL; rowLayout.marginLeft = 4; rowLayout.marginTop = 4; rowLayout.marginRight = 4; rowLayout.marginBottom = 4; rowLayout.spacing = 0; shell.setLayout(rowLayout);

36 UCWorkbench Team Eclipse Summer School (36) RowLayout Example rowLayout.wrap = false; rowLayout.pack = false; rowLayout.justify = false;

37 UCWorkbench Team Eclipse Summer School (37) RowData Example RowLayout rowLayout = new RowLayout(); shell.setLayout(rowLayout); Button button1 = new Button(shell, SWT.PUSH); button1.setText("First"); button1.setLayoutData(new RowData(50, 100)); Button button2 = new Button(shell, SWT.PUSH); button2.setText("Second"); button2.setLayoutData(new RowData(200, 400));

38 UCWorkbench Team Eclipse Summer School (38) GridLayout Chyba najczęściej wykorzystywany Najbardziej rozbudowany Komponenty wpisane w siatkę Kolumny i rzędy dostowują się do wielkości zawartości Różne wartości mogą zostać ustawione Do komponentów można dodawać GridData

39 UCWorkbench Team Eclipse Summer School (39) GridLayout Example GridLayout gridLayout = new GridLayout(); gridLayout.numColumns = 2; shell.setLayout(gridLayout); new Button(shell, SWT.PUSH).setText("B1"); new Button(shell, SWT.PUSH).setText("Second Button"); new Button(shell, SWT.PUSH).setText("Third Button"); new Button(shell, SWT.PUSH).setText("B4"); new Button(shell, SWT.PUSH).setText("B5"); new Button(shell, SWT.PUSH).setText("Button Number 6");

40 UCWorkbench Team Eclipse Summer School (40) GridLayout Fields Pola makeColumnsEqualWidth narzuca kolumną równą szerokość marginWidth ustala lewy i prawy margines marginHeight ustala górny i dolny margines horizontalSpacing i verticalSpacing odległości między komponentami

41 UCWorkbench Team Eclipse Summer School (41) GridData Zawiera wskazówki dla GridLayout Dodaje się za pomocą metody setLayoutData Button aButton = new Button(shell, SWT.PUSH); aButton.setText("FirstButton"); aButton.setLayoutData(new GridData());

42 UCWorkbench Team Eclipse Summer School (42) GridData Fields horizontalAlignment : specyfikuje gdzie umiścić widget horyzontalnie lub wertykalnie w komórce siatki BEGINNING, CENTER, END, FILL horizontalIndent : umożliwia przesunięcie kontrolki w prawo o wybraną liczbę pixeli Użyteczne kiedy horizontalAlignment jest BEGINNING horizontalSpan i verticalSpan : jedna kontrolka może zajmować kilka komórek

43 UCWorkbench Team Eclipse Summer School (43) GridData Fields grabExcessHorizontalSpace i grabExcessVerticalSpace : pozwala kontrolkom zwiększać rozmiar jeśli ich rodzic zmienia rozmiar widthHint i heightHint : zalecany rozmiar kontrolki

44 UCWorkbench Team Eclipse Summer School (44) Ćwiczenie

45 UCWorkbench Team Eclipse Summer School (45) Ćwiczenie

46 UCWorkbench Team Eclipse Summer School (46) Ćwiczenie - rozwiązanie GridLayout gridLayout = new GridLayout(); gridLayout.numColumns = 3; shell.setLayout(gridLayout); new Label(shell, SWT.NONE).setText(Name:"); Text userName = new Text(shell, SWT.SINGLE | SWT.BORDER); GridData gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL); gridData.horizontalSpan = 2; userName.setLayoutData(gridData); … Każdy widget musi mieć własną instancję GridData

47 UCWorkbench Team Eclipse Summer School (47) Ćwiczenie - rozwiązanie new Label(shell, SWT.NONE).setText(Sex:"); Combo sex = new Combo(shell, SWT.NONE); sex.setItems(new String [] {"Male", "Female"}); gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL); gridData.horizontalSpan = 2; sex.setLayoutData(gridData); new Label(shell, SWT.NONE).setText("Photo:"); Canvas photo = new Canvas(shell, SWT.BORDER); gridData = new GridData(GridData.FILL_BOTH); gridData.widthHint = 80; gridData.heightHint = 80; gridData.verticalSpan = 3; photo.setLayoutData(gridData);

48 UCWorkbench Team Eclipse Summer School (48) GridData Example

49 UCWorkbench Team Eclipse Summer School (49) FormLayout Tworzy FormAttachments dla krawędzi widgeta Przechowuje attachments jako layout data Przyłącza krawędź relatywnie do Compositea rodzica innego widgeta w ramach layoutu Pozwala w pełni wyspecyfikować położenie widgetu

50 UCWorkbench Team Eclipse Summer School (50) Graphics GC – Graphics Context (można rysować po wszystkich klasach które implementują interfejs Drawable (np. Image, Control, Canvas itd.) Jeśli używasz konstruktora GC(), nie zapomnij dispose! Rysowania dokonujemy wewnątrz metody paintControl(PaintEvent) należącej do PaintListener Composite.addPaintListener(new PaintListener(){ public void paintControl(PaintEvent event){ Display display = event.display; GC gc = event.gc gc.drawRectangle(0,0,10,10); } });

51 UCWorkbench Team Eclipse Summer School (51) Color Domyślne kolory systemowe można uzyskać przy pomocy Display poprzez metodę getSystemColor(id ) ( SWT.COLOR...), ich nie wolno disposować Albo new Color(device, 255, 255, 255), te kolory należy usuwać Device -> Display, Printer

52 UCWorkbench Team Eclipse Summer School (52) Fonts Domyśną czionkęmożna uzyskać poprzez klasę Display wywołując metodę getSystemFont() Albo stworzyć obiekt Font new Font(device, Arial, 12, SWT.BOLD); new Font(device, new FontData(Arial,12,SWT.BOLD)); Device -> Display, Printer Należy je usuwać!

53 UCWorkbench Team Eclipse Summer School (53) Drag and drop Drag Source – dostarcza dane które mają być upuszczone Ten sam widget Inny widget Inna aplikacja! Transfer object – obiekt do przenoszenia danych (np. dla plików FileTransfer – przechowuje lokalizacje plików) Drop Target – odbiorca danych

54 UCWorkbench Team Eclipse Summer School (54) DragSource Example final Label dragLabel = new Label(shell, SWT.BORDER); dragLabel.setText("text to be transferred"); int operations = DND.DROP_MOVE | DND.DROP_COPY; DragSource source = new DragSource(dragLabel, operations); Transfer[] types = new Transfer[] { TextTransfer.getInstance() }; source.setTransfer(types); source.addDragListener(new DragSourceListener() { public void dragStart(DragSourceEvent event) { if (dragLabel.getText().length() == 0) { event.doit = false; } public void dragSetData(DragSourceEvent event) { if (TextTransfer.getInstance().isSupportedType(event.dataType)) { event.data = dragLabel.getText(); } public void dragFinished(DragSourceEvent event) { if (event.detail == DND.DROP_MOVE) dragLabel.setText(""); } });

55 UCWorkbench Team Eclipse Summer School (55) DropTarget Example final Text dropText = new Text(shell, SWT.BORDER); operations = DND.DROP_MOVE | DND.DROP_COPY | DND.DROP_DEFAULT; DropTarget target = new DropTarget(dropText, operations); final TextTransfer textTransfer = TextTransfer.getInstance(); target.setTransfer(new Transfer[]{textTransfer}); target.addDropListener(new DropTargetAdapter() { public void drop(DropTargetEvent event) { if (textTransfer.isSupportedType(event.currentDataType)) { String text = (String) event.data; dropText.setText(text); } });

56 UCWorkbench Team Eclipse Summer School (56) SWT - Koniec Dziękuje slides.dispose()


Pobierz ppt "Mirosław Ochodek Sponsorzy: Standard Widget Toolkit Jak budować interfejs użytkownika? ECESIS Eclipse Community Education."

Podobne prezentacje


Reklamy Google