Tworzenie GUI

27 kwiecień 2007
Tworzenie GUI w Javie
Swingujące programowanie
Mirosław Ochodek
[email protected]
Szkolenie finansowane ze środków Europejskiego Funduszu Społecznego (75%) i budżetu
państwa (25%) w ramach Zintegrowanego Programu Operacyjnego Rozwoju Regionalnego
Plan
▪
Wprowadzenie
• Podejścia do budowy GUI w Javie
▪
Budowa GUI przy pomocy Swinga
• Wprowadzenie do JFC - Swinga
• Przegląd komponentów graficznych biblioteki oraz sposób
zarządzania
• Grafika
Swing
▪ JFC udostępniane z JRE (javax.swing.*)
▪ Kiedyś mało wydajny (polepszone od Java 1.4)
▪ Napisane w Javie (AWT – Java / C)
▪ Niezależne od platformy
Swing
java.awt
sun.awt
Operating system
SWT
▪
Zależne od platformy (jest implementacja dla
większości platform)
▪
▪
Używa natywnych kontrolek systemowych (JNI)
▪
Biblioteka wyższego poziomu JFace
Tylko komponenty które nie są wspierane przez
dany system operacyjny zaimplementowane
JFace
SWT
JNI
Windowing system
Operating system
SWT vs. Swing
▪
▪
▪
▪
▪
▪
▪
Niezależne
Używa Observer Pattern
▪
Używa Observer Pattern
Manager rozmieszczenia
▪
Manager rozmieszczenia
Zależne od platformy
Wydajne
Różnie to bywa
Look and Feel
JFace
SWT
Swing
JNI
java.awt
Windowing system
sun.awt
Operating system
Operating system
Plan
▪ Wprowadzenie
• Podejścia do budowy GUI w Javie
▪ Budowa GUI przy pomocy Swinga
• Wprowadzenie do JFC - Swinga
• Przegląd komponentów graficznych biblioteki oraz
sposób zarządzania
• Grafika
Java Foundation Classes
Zawiera:
▪ The Swing Components
▪ Pluggable Look and Feel Support
▪ Accessibility API
▪ Java 2D API (Java 2 Platform only)
▪ Drag and Drop Support (Java 2 Platform only)
Podejście MVC
▪ Model – dane stanu konkretnego komponentu
▪ View – jak komponent jest widziany na ekranie
▪ Controller – jak występowanie zdarzeń łączy
dwa powyższe
http://www.tol.oulu.fi/kurssit/ot3/Lectures/OT3_L3.html
Swing hierarchia
Kontenery najwyższego poziomu
Swing hierarchia
http://www.particle.kth.se/~fmi/kurs/PhysicsSimulation/Lectures/07A/swingDesign.html
Wzorzec Composite
Wzorzec Composite
http://www.javaworld.com/javaworld/jw-09-2002/jw-0913-designpatterns.html
Kontenery najwyższego poziomu
▪ Każdy program napisany w Swingu, musi
posiadać przynajmniej jeden kontener
najwyższego poziomu
• JFrame ( pojedyncze okno aplikacji)
• JDialog (okienko dialogowe)
• JApplet (dla apletów)
Kontenery najwyższego poziomu
www.java.sun.com
Hello world - JFrame
Eclipse – przykład (1)
Menu
▪ Specjalna warstwa (Menu Bar)
▪ Menu składane z „klocków”
www.java.sun.com
Menu
Eclipse – przykład (2)
Obsługa akcji
▪ Obsługa zdarzeń oparta jest na wzorcu
Observer/Listener
▪ Każdy komponent może być obserwowany
przez wielu obserwatorów
▪ Każdy komponent może obsługiwać wiele typów
słuchaczy (np. zdarzenia obsługi myszy,
klawiatury, zmiany struktury itd.)
Wzorzec observer
Następny proszę!
Lalaaaalalaa!
Dziękujemy
Proszę nie
dzwonić,
My zadzwonimy...
Wzorzec observer
http://www.javaworld.com/javaworld/jw-03-2003/jw-0328-designpatterns.html
Swing/AWT & Observer
menuItem.addActionListener(
new ActionListener(){
public void actionPerformed(ActionEvent e) {
// tutaj kod obslugi
System.out.println(”Wybrano mnie”);
JMenuItem
Listeners [menuItem]
}
});
Swing/AWT & Observer
JMenuItem
Listeners [menuItem]
menuItem.addActionListener(
new ActionListener(){
public void actionPerformed(ActionEvent e) {
// tutaj kod obslugi
System.out.println(”Wybrano mnie”);
}
});
Przykłady słuchaczy AWT
Event listener interfaces in java.awt.events
▪ ActionListener
▪ AdjustmentListener
▪ AWTEventListener
▪ ComponentListener
▪ ContainerListener
▪ FocusListener Focus
▪ HierarchyBoundsListener Hierarchy
▪ HierarchyListener Hierarchy
▪ InputMethodListener
▪ ItemListener
▪ KeyListener
▪ MouseListener
▪ MouseMotionListener
▪ MouseWheelListener
▪ TextListener
▪ WindowFocusListener
▪ WindowListener
▪ WindowStateListener
Przykłady słuchaczy Swing
Event listener interfaces in javax.swing.event
▪ AncestorListener
▪ CaretListener
▪ CellEditorListener
▪ ChangeListener
▪ DocumentListener
▪ HyperlinkListener
▪ InternalFrameListener
▪ ListDataListener
▪ ListSelectionListener
▪ MenuDragMouseListener
▪ MenuKeyListener
▪ MenuListener
▪ MouseInputListener
▪ PopupMenuListener
▪ TableColumnModelListener
▪ TableModelListener
▪ TreeExpansionListener
▪ TreeModelListener
▪ TreeSelectionListener
▪ TreeWillExpandListener
▪ UndoableEditListener
Menu
Eclipse – przykład (3)
Look & Feel
▪ W JFC istnieje możliwość zmiany sposobu
wyświetlania kontrolek
▪ Domyślny wygląd to Metal / Aqua
▪ Można wybrać wygląd systemu operacyjnego
▪ W JFC nie korzystano z kontrolek natywnych
systemu (zmienione podejście ostatnio)
Look & Feel
Eclipse – przykład (4)
Podstawowe komponenty
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
JLabel
JButton
JCheckBox
JRadioButton
JPanel
JSlider
JColorChooser
JTextField
JList
JScrollPane
JTree
…
Eclipse – przykład (5)
Layout Managers
▪ Służą do automatycznego rozkładania
komponentów
▪ Działają według określonych zasad
▪ Przykłady
• FlowLayout
• BorderLayout
• GridLayout
• GridBagLayout
• CardLayout
FlowLayout
▪ Układa komponenty od lewej do prawej w
kolejnych wierszach
Eclipse – przykład (6)
BorderLayout
▪
Każdy komponent umieszczany jest w jednym z
pięciu rejonów:
•
•
•
•
•
▪
▪
na dole,
na górze,
po lewo,
po prawo
po środku
Komponenty dodawane do kontenera bez wskazania
rejonu domyślnie dodawane są po środku
Dodanie nowego komponentu do rejonu już
posiadającego zawartość spowoduje jej podmianę
Eclipse – przykład (7)
GridLayout
▪ GridLayout układa komponenty w komórkach
siatki, której rozmiar określamy przy pomocy
parametrów konstruktora.
▪ Komponenty zajmują kolejne komórki zgodnie z
kolejnością dodawania.
Eclipse – przykład (8)
GridBagLayout
▪ Zaawansowana możliwość układania
komponentów, wpisywanych w siatkę
Eclipse – przykład (9)
CardLayout
▪ Komponenty umieszczane jak talia kart
Eclipse – przykład (10)
Okna dialogowe wejścia/wyjścia
Różne rodzaje dialogów, udostępnianych przez klasę
JOptionPane
Tworzenie okien następuje poprzez wywołanie statycznych metod
klasy JOptionPane. Metody te jako wynik zwracają kod
wybranego przycisku albo wartość wprowadzanych do nich
danych.
Plan
▪ Wprowadzenie
• Podejścia do budowy GUI w Javie
▪ Budowa GUI przy pomocy Swinga
• Wprowadzenie do JFC - Swinga
• Przegląd komponentów graficznych biblioteki oraz
sposób zarządzania
• Grafika
Rysowanie na komponencie
▪ Każdy komponent ma metodę paintComponent,
w której można rysować
▪ Można ją przeciążyć i zaimplementować własne
rysowanie
▪ W metodzie dostępna jest zmienna typu
Graphics, przekazywana jako parametr
▪ Możemy zrzutować ją na Graphics2D, aby
otrzymać bardziej rozbudowany wachlarz
możliwości
Rysowanie na komponencie
▪ Przydatne metody
• // Ustawienia ołówka
— g.setColor(someColor);
— g.setFont(someLimitedFont);
• // Rysowanie kształtów
—
—
—
—
—
—
—
—
g.drawString(...);
g.drawLine(...)
g.drawRect(...); // outline
g.fillRect(...); // solid
g.drawPolygon(...); // outline
g.fillPolygon(...); // solid
g.drawOval(...); // outline
g.fillOval(...); // solid
Rysowanie na komponencie
▪ Przydatne metody
•
•
•
•
•
•
•
•
•
•
g2d.setPaint(fillColorOrPattern);
g2d.setStroke(penThicknessOrPattern);
g2d.setComposite(someAlphaComposite);
g2d.setFont(anyFont);
g2d.translate(...);
g2d.rotate(...);
g2d.scale(...);
g2d.setTransform(someAffineTransform);
g2d.draw(s); // outline
g2d.fill(s); // solid
Przekształcenia
http://www.glyphic.com/transform/plugin/1intro.html
Przekształcenia
http://www.glyphic.com/transform/plugin/4app.html
Przekształcenia
http://www.glyphic.com/transform/plugin/7wiggly.html
Przykład
Eclipse – przykład (11)
Swing
Dziękuje za uwagę
http://java.sun.com/docs/books/tutorial/uiswing/components/examples/index.html