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

Podobne dokumenty