programowanie GUI
Transkrypt
programowanie GUI
[1] Programowanie Multimediów Programowanie Multimediów JAVA programowanie GUI (AWT i Swing) Programowanie Multimediów Programowanie Multimediów Wprowadzenie [2] ➲Pierwotnym GUI dla Javy był AWT (Abstract Win- dow Toolkit) – wg legendy powstał w miesiąc... ➲Swing dodano dopiero w wersji Javy 1.2 (przełom 1997/98) ➲Dlaczego skonstruowano kolejny sposób tworzenia interfejsów ? Programowanie Multimediów Programowanie Multimediów Dlaczego nie AWT? [3] ➲Główny powód: niezadowolenie osób tworzących w Javie z istniejącego rozwiązania ➲Wygląd interfejsów stworzonych przy pomocy AWT zależało od systemu operacyjnego ➲AWT oferowało słabe wsparcie dla rysowania na ekranie oraz nie zapewniało kompatybilności operacji Drag and Drop pod kontrolą różnych systemów operacyjnych Programowanie Multimediów Programowanie Multimediów AWT a Swing [4] AWT: ➲Wygląd kontrolek specyficzny dla każdego systemu operacyjnego Swing: ➲Wygląd kontrolek niezależny od systemu opera- cyjnego ➲Schematy wyglądu (look and feel) ➲Rozbudowane wsparcie dla rysowania 2D Programowanie Multimediów Programowanie Multimediów AWT a Swing [5] AWT: ➲Korzysta z wywołań funkcji systemowych przy tworzeniu i zarządzaniu wyglądem aplikacji ➲Generalnie szybki, choć szybkość działania zależy od systemu operacyjnego Swing: ➲W całości napisany w Javie ➲Nieco wolniejszy, ale mniejsze różnice w prędkości pomiędzy platformami Programowanie Multimediów Programowanie Multimediów AWT i Swing [6] AWT i Swing zawierają 2 podstawowe klasy: ➲Component : metody dostępu do komponentów graficznych oraz metody do zmiany ich właściwości, ➲Container : podklasa Component dostarczająca tzw. pojemniki, czyli obiekty grupujące [7] Programowanie Multimediów Programowanie Multimediów [8] Programowanie Multimediów Programowanie Multimediów [9] Programowanie Multimediów Programowanie Multimediów [10] Programowanie Multimediów Programowanie Multimediów Programowanie Multimediów Programowanie Multimediów Rozmieszczanie elementów na ekranie Kontrolą rozmieszczenia obiektów na ekranie zajmuje się Container. Do dyspozycji jest kilka klas. [11] 1. BorderLayout (domyślny) 2. FlowLayout 3. GridLayout 4. GridBagLayout 5. null 6. BoxLayout Programowanie Multimediów Programowanie Multimediów Rozmieszczanie elementów na ekranie [12] import java.awt.*; import java.applet.Applet; public class buttonDir extends Applet { public void init() { setLayout(new BorderLayout()); add(new Button("North"), BorderLayout.NORTH); add(new Button("South"), BorderLayout.SOUTH); add(new Button("East"), BorderLayout.EAST); add(new Button("West"), BorderLayout.WEST); add(new Button("Center"), BorderLayout.CENTER); } } Programowanie Multimediów Programowanie Multimediów Rozmieszczanie elementów na ekranie import java.awt.*; import java.applet.Applet; [13] public class myButtons extends Applet { Button button1, button2, button3; public void init() { button1 = new Button("Ok"); button2 = new Button("Open"); button3 = new Button("Close"); add(button1); add(button2); add(button3); } } Programowanie Multimediów Programowanie Multimediów Rozmieszczanie elementów na ekranie [14] import java.awt.*; import java.applet.Applet; public class ButtonGrid extends Applet { public void init() { setLayout(new GridLayout(3,2)); add(new Button("1")); add(new Button("2")); add(new Button("3")); add(new Button("4")); add(new Button("5")); add(new Button("6")); } } Programowanie Multimediów Programowanie Multimediów Rozmieszczanie elementów na ekranie private javax.swing.JLabel getIvjJLabel(){ if(ivjJLabel == null) { ivjJLabel = new javax.swing.JLabel(); ivjJLabel.setBounds(59, 10, 38, 15); ivjJLabel.setText("JLabel"); } return ivjJLabel; } [15] [16] Programowanie Multimediów Programowanie Multimediów Model – View - Controller INPUT PROCESSING OUTPUT Podejście klasyczne CONTROLLER MODEL VIEW Podejście MVC Programowanie Multimediów Programowanie Multimediów Dlaczego MVC? ➲Podejście po raz pierwszy wykorzystano w Smalltal- ku 80 ➲Kontrolery, model i widoki traktowane jako oddzielne elementy ➲Zmiany [17] dokach modelu natychmiast odzwierciedlane w wi- [18] Programowanie Multimediów Programowanie Multimediów Model – View - Controller VIEW CONTROLLER CONTROLLER CONTROLLER VIEW MODEL VIEW VIEW Programowanie Multimediów Programowanie Multimediów Założenia MVC... ➲Wszystkie komponenty w systemie muszą dać się określić jako kontroler, model, widok bądź część któregoś z nich ➲Połączenie model <-> widok jest realizowane dynamicznie – w czasie działania programu, a nie w czasie kompilacji ➲Jeżeli [19] zaprojektujemy w MVC każdy komponent, to łatwe będzie ich łączenie w spójny projekt Programowanie Multimediów Programowanie Multimediów Założenia MVC... ➲Usuwanie bądź przebudowa komponentu nie pociąga za sobą potrzeby ingerencji w cały system ➲Model nie wie, jakie są jego kontrolery, nie zna także korzystających z niego widoków – sam system zajmuje się ich spójnym połączeniem ➲Kontrolery [20] i Widoki znają skojarzony z nimi Model [21] Programowanie Multimediów Programowanie Multimediów Przykład zastosowania MVC Gra komputerowa 3D „shoot 'em up” AKCJA: RUCH AKCJA: STRZAŁ AKCJA: OTWIERANIE DRZWI WIDOK: FPP MODEL(e) ŚWIATA, OBIEKTÓW, POSTACI WIDOK: Z GÓRY WIDOK: OD STRONY PRZECIWNIKA Programowanie Multimediów Programowanie Multimediów Java a MVC... Java oferuje wsparcie dla MVC poprzez dwie klasy: [22] ➲Obserwator (Observer) – obiekt, który chce być powiadamiany o zmianach w innym obiekcie ➲Obserwowany (Observable) – każdy obiekt, którego zmiana stanu może zainteresować inny obiekt [23] Programowanie Multimediów Programowanie Multimediów Swing a MVC observable MODEL CONTROLLER VIEW GUI observer Programowanie Multimediów Programowanie Multimediów Przykład (JButton) Model przechowuje stan, pozwala na jego modyfikację i odczytywanie. Dodatkowo pozwala dodawać/usuwać słuchaczy(Listeners). Widok i kontroler zajmują się wyświetlaniem stanu i przycisku na ekranie. Tutaj także pamiętamy, w którym miejscu na ekranie znajduje się przycisk. Ta część zajmuje się również obsługą zdarzeń AWT. [24] Programowanie Multimediów Programowanie Multimediów Zdarzenia W modelu, z którego korzysta Swing, akcje podejmowane są w odpowiedzi na zajście konkretnych zdarzeń. Aby powiązać zdarzenie z określoną akcją, każdej kontrolce musimy przyporządkować specjalną klasę, która będzie reagowała na zajście tego zdarzenia. Tę klasę nazywamy słuchaczem. [25] Programowanie Multimediów Programowanie Multimediów Zdarzenia W modelu tym występuje strona wyzwalająca (trigger) zdarzenie i nasłuchująca (listener), czy zdarzenie zaszło. Aby móc nasłuchiwać, trzeba się najpierw zarejestrować u wyzwalającego i tym samym wyrazić zainteresowanie danym zestawem zdarzeń. Wówczas wyzwalający w razie zajścia zdarzenia będzie mógł wywołać na rzecz nasłuchującego metodę odpowiadającą zdarzeniu. Zestaw metod opowiadających zdarzeniom jest określony przez interfejs. Gdy korzysta się z wbudowanego systemu zdarzeń, wystarczy napisać stronę nasłuchującą, zwaną nasłuchiwaczem. Jest to klasa implementująca interfejs przeznaczony dla danego zestawu zdarzeń. [26] Programowanie Multimediów Programowanie Multimediów Zdarzenia [27] Programowanie Multimediów Programowanie Multimediów Zdarzenia import java.awt.event.ActionListener; import java.awt.event.ActionEvent; Większość komponentów reaguje na działania użytkownika wyzwoleniem zdarzenia akcji. Zdarzenie akcji jest reprezentowane przez obiekt ActionEvent, od którego można pozyskać informację na temat zdarzenia. Interfejs odpowiadający zdarzeniom akcji to ActionListener z metodą actionPerformed. Aby obsługiwać działania użytkownika należy na komponencie zarejestrować metodą addActionListener nasłuchiwacza, czyli instancję implementującą ten interfejs. [28] Programowanie Multimediów Programowanie Multimediów Zdarzenia class ObslugaPrzycisku implements ActionListener { OblsugaPrzycisku() { JButton przycisk = new JButton("Naciśnij mnie"); przycisk.addActionListener(this); } public void actionPerformed(ActionEvent e) { System.out.println("I po co naciskasz ?"); } } [29] Programowanie Multimediów Programowanie Multimediów Zdarzenia - mysz Obsługa myszy opiera się na standardowym modelu zdarzeń. Interakcje użytkownika z myszą podzielono między kilka interfejsów: [30] 1. podstawowy MouseListener 2. śledzący ruch wskaźnika MouseMotionListener 3. obejmujący oba powyższe MouseInputListener 4. śledzący obroty kulki myszy MouseWheelListener Programowanie Multimediów Programowanie Multimediów Zdarzenia - mysz Podstawowy interfejs import java.awt.event.MouseListener; import java.awt.event.MouseEvent; MouseListener dostarcza następujące metody: * kliknięcie myszą void mouseClicked(MouseEvent e) * naciśnięcie przycisku myszy void mousePressed(MouseEvent e) * zwolnienie przycisku myszy void mouseReleased(MouseEvent e) * wejście myszy w obszar śledzenia void mouseEntered(MouseEvent e) * wyjście myszy z obszaru śledzenia void mouseExited(MouseEvent e) [31] Programowanie Multimediów Programowanie Multimediów Zdarzenia - mysz class ObsługaMyszy impelements MouseListener { ObsługaMyszy() { addMouseListener(this); // } rejestracja zainteresowania zdarzeniami public void mouseClicked(MouseEvent e) { System.out.println("Kliknięto " + e.getClickCount() + "razy"); System.out.println("w punkcie: (" + e.getX() + "," + e.getY() + ")"); } } [32] Programowanie Multimediów Programowanie Multimediów Wtyczki GUI (look and feel) Schematy wyglądu dostarczane wraz ze Swingiem: [33] ➲ GTKLookAndFeel (Linux z GTK) ➲ MetalLookAndFeel (typowy dla Javy) ➲ MotifLookAndFeel ➲ WindowsLookAndFeel (typowy dla Windows) ➲ DefaultLookAndFeel Programowanie Multimediów Programowanie Multimediów Wybór look and feel Jeśli aplikacja nie określi swojego LookAndFeel, zostanie użyty domyślny LookAndFeel Javy. Wybór lookandfeel powinien wystąpić jako pierwszy w programie. Aby aplikacja przypominała wyglądem pozostałe, należy wybrać LookAndFeel zależny od platformy. Metoda wyboru rzuca różne wyjątki, którymi trzeba się zająć: try { UIManager.setLookAndFeel(UIManager.getSystemLookAnd FeelClassName()); } catch (Exception e) { System.err.println("Nie można wybrać LookAndFeel"); } [34] Programowanie Multimediów Programowanie Multimediów Wybór look and feel UIManager.setLookAndFeel( "com.sun.java.swing.plaf.gtk.GTKLookAndFeel"); "com.sun.java.swing.plaf.gtk.GTKLookAndFeel" "javax.swing.plaf.metal.MetalLookAndFeel" "com.sun.java.swing.plaf.windows.WindowsLookAndFeel" "com.sun.java.swing.plaf.motif.MotifLookAndFeel" [35] [36] Programowanie Multimediów Programowanie Multimediów Jigloo Programowanie Multimediów Programowanie Multimediów JForm Designer [37] Programowanie Multimediów Programowanie Multimediów Podsumowanie [38] ➲ Swing rozszerza AWT i przerasta go w wielu względach ➲ Wygląd aplikacji napisanych przy użyciu Swinga jest taki, jakiego sobie zażyczymy na każdej platformie ➲ Swing został zaprojektowany z uwzględnieniem architektury Model-View-Controller ➲ Dzięki zastosowaniu anonimowych słuchaczy pisanie kodu obsługującego zdarzenia jest szybkie