Mirosław Ochodek Szkolenie finansowane ze ś rodków Europejskiego Funduszu Spo ł ecznego (75%) i bud ż etu pa ń stwa (25%) w ramach Zintegrowanego Programu Operacyjnego Rozwoju Regionalnego 27 kwiecień 2007 Tworzenie GUI w Javie Swingujące programowanie

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

Operating system sun.awt 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 java.awt Swing

Operating system Windowing system JNI SWT ▪ Zależne od platformy (jest implementacja dla większości platform) ▪ Używa natywnych kontrolek systemowych (JNI) ▪ Tylko komponenty które nie są wspierane przez dany system operacyjny zaimplementowane ▪ Biblioteka wyższego poziomu JFace SWT JFace

Operating system Windowing system JNI SWT vs. Swing ▪ Zależne od platformy ▪ Wydajne ▪ Używa Observer Pattern ▪ Manager rozmieszczenia SWT JFace Operating system sun.awt java.awt Swing ▪ Niezależne ▪ Różnie to bywa ▪ Look and Feel ▪ Używa Observer Pattern ▪ Manager rozmieszczenia

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

Swing hierarchia Kontenery najwyższego poziomu

Swing hierarchia

Wzorzec Composite

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

Hello world - JFrame Eclipse – przykład (1)

Menu ▪ Specjalna warstwa (Menu Bar) ▪ Menu składane z „klocków”

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 Lalaaaalalaa! Dziękujemy Proszę nie dzwonić, My zadzwonimy... Następny proszę!

Wzorzec observer

Swing/AWT & Observer JMenuItem menuItem.addActionListener( new ActionListener(){ public void actionPerformed(ActionEvent e) { public void actionPerformed(ActionEvent e) { // tutaj kod obslugi // tutaj kod obslugi System.out.println(”Wybrano mnie”); }}); Listeners [menuItem]

Swing/AWT & Observer JMenuItem Listeners [menuItem] menuItem.addActionListener( new ActionListener(){ public void actionPerformed(ActionEvent e) { public void actionPerformed(ActionEvent e) { // tutaj kod obslugi // 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)

Różne rodzaje dialogów, udostępnianych przez klasę JOptionPane Okna dialogowe wejścia/wyjścia 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

Przekształcenia

Przekształcenia

Przykład Eclipse – przykład (11)

Swing Dziękuje za uwagę