Tworzenie interfejsu GUI w narzędziu JShell
Tworzenie interfejsu GUI w czterech wierszach kodu
Do utworzenia prostego okna w narzędziu JShell wystarczą cztery wiersze kodu. Przeanalizujmy je po kolei. Na początku wpiszmy w narzędziu JShell instrukcję import, aby zaimportować klasę javax.swing.JFrame:
Zaimportowana klasa JFrame służy do tworzenia ramek lub okien przy użyciu języka Java, a zatem utwórzmy ramkę przy użyciu tej klasy. Wpiszmy następującą deklarację, aby utworzyć obiekt JFrame o nazwie myFrame:
jshell> JFrame myFrame = new JFrame("Hello!")Słowo kluczowe new tworzy nowy obiekt klasy JFrame, w tym przypadku będzie to okno GUI, które zaprogramujemy tak, aby w pasku tytułu wyświetlone zostało powitanie "Hello!". JShell reaguje wydrukowaniem długiej listy z domyślnymi właściwościami utworzonego okna:
Informacje znajdujące się za nawiasem kwadratowym stanowią tekstową reprezentację obiektu myFrame wraz z wartościami jego właściwości, takimi jak rozmiar (0x0, czyli 0 na 0 pikseli) oraz widoczność obiektu (ukryty to hidden, a widoczny visible). Zmieńmy jedną z tych właściwości, ustawiając rozmiar większy niż 0 na 0 pikseli. Trzeci wiersz kodu służy do ustawienia rozmiaru okna w pikselach poprzez określenie szerokości i wysokości ramki:
Powyższy kod oznacza, że okno ma mieć 300 pikseli szerokości oraz 200 pikseli wysokości, co powinno wystarczyć do pomieszczenia okna i paska tytułu. Na koniec pokażmy okno na ekranie, wywołując metodę setVisible():
Instrukcja setVisible(true) służy do pokazania okna, natomiast instrukcja setVisible(false) do jego ukrycia. Ponieważ wywołaliśmy instrukcję myFrame. setVisible(true), okno powinno pojawić się na ekranie, jak pokazano na rysunku 3.2.
Rysunek 3.2. Nasze okno GUI w systemie Windows (po lewej) oraz macOS (po prawej)
Utworzyliśmy okno GUI, wpisując zaledwie cztery wiersze kodu w narzędziu JShell!
Tworzenie interaktywnego interfejsu GUI za pomocą 10 wierszy kodu!
Gdy pokazałem powyższy przykład swoim studentom i synom, spotkałem się z podobną reakcją: „Całkiem nieźle, ale czy okno mogłoby coś robić?” Na szczęście odpowiedź brzmi: tak. Dodając zaledwie kilka wierszy kodu, możemy umieścić w oknie przycisk, który drukuje coś po każdym kliknięciu.
Zacznijmy od nowa. Wyczyśćmy historię JShell, wpisując /reset po zgłoszeniu systemu JShell:
| Resetting state.
Teraz przy użyciu wbudowanego edytora JShell napiszemy 10-wierszowy fragment kodu służący do utworzenia interaktywnego interfejsu GUI aplikacji, która reaguje na kliknięcia. Po zgłoszeniu systemu JShell wpisujemy /edit, aby otworzyć edytor:
Wyświetlone zostanie puste okno edytora JShell Edit Pad (patrz rys. 3.3), który jest pomocny, gdy chcemy napisać kilka wierszy kodu naraz lub gdy chcemy wrócić do wpisanego wcześniej wiersza kodu i dokonać jej edycji.
Rysunek 3.3. JShell Edit Pad to wygodny edytor do pisania dłuższych fragmentów kodu
W tym przykładzie chcemy napisać 10 wierszy kodu służących do utworzenia interaktywnego okna GUI z przyciskiem, który będzie drukował coś po kliknięciu. Wpisujemy następujące wiersze kodu, zwracając szczególną uwagę na wielkość liter i dodając średnik po każdej pełnej instrukcji w celu odseparowania poszczególnych poleceń:
JFrame window = new JFrame("Bryson’s Window");
1. JPanel panel = new JPanel();
JButton button = new JButton(2. "Click me!");
3. panel.add(button);
4. window.add(panel);
window.setSize(5. 300,100);
6. button.addActionListener(e ->
System.out.println("Ouch! You clicked me!"));
7. window.setVisible(true);
Na początku importujemy wszystkie klasy Swing, łącznie z JFrame, JPanel oraz JButton. Gwiazdka (*) umieszczona na końcu biblioteki Java nazywana jest symbolem wieloznacznym i oznacza: „dołącz wszystkie klasy znajdujące się w tym pakiecie”. Następnie, podobnie jak w poprzednim przykładzie, tworzymy okno JFrame. W punkcie 1. tworzymy panel wewnątrz okna. Panel pełni funkcję pojemnika na inne komponenty interfejsu GUI, takie jak etykiety czy przyciski. Następnie dodajemy przycisk z tekstem „Click me (Kliknij mnie)!” 2. W punkcie 3. dodajemy do naszego panelu GUI przycisk, a następnie w punkcie 4. dodajemy panel do okna. Później ustawiamy rozmiar okna: 300 pikseli szerokości oraz 100 pikseli wysokości 5., podobnie jak w poprzednim przykładzie.
Prawdziwa magia ma miejsce w punkcie 6.: w kolejnych dwóch wierszach kodu dodajemy do przycisku button interfejs słuchacza akcji (ang. action listener), która będzie reagować za każdym razem, gdy użytkownik kliknie przycisk. Słuchacz akcji wyświetli w konsoli tekst: "Ouch! You clicked me (Oj, kliknięto mnie)!" za każdym razem, gdy użytkownik kliknie przycisk GUI. Tego typu interfejs słuchacza będziemy często wykorzystywać w budowanych w tej książce aplikacjach GUI. Dzięki nim programy będą podejmowały interakcję z użytkownikiem, gdy wykona on jakąś akcję. Na zakończenie ustawiamy widoczność okna 7. i jesteśmy gotowi do przetestowania programu przez kliknięcie przycisku.
Po wpisaniu dziesięciu wierszy kodu i sprawdzeniu ich poprawności możemy kliknąć przycisk Accept (Akceptuj) w edytorze JShell Edit Pad, aby zaakceptować kod i uruchomić go w JShell, jak pokazano na rysunku 3.4. Po zaakceptowaniu kodu klikamy przycisk Exit (Wyjdź), aby zamknąć okno JShell Edit Pad. JShell uruchomi fragment kodu i jeśli został on wpisany prawidłowo, wyświetlone zostanie małe wyskakujące okno, podobne do przedstawionego na rysunku 3.5.
Rysunek 3.4. Po wpisaniu wszystkich dziesięciu wierszy kodu w edytorze JShell Edit Pad klikamy przycisk Accept
Rysunek 3.5. Interaktywne okno GUI z przyciskiem, który można kliknąć
Po kliknięciu myszą przycisku z tekstem Click me!, Java odpowie w następujący sposób w oknie JShell:
Ouch! You clicked me!
Ouch! You clicked me!
Ouch! You clicked me!
Jeśli zamkniemy małe okno GUI, możemy łatwo je przywrócić, powtarzając ostatni wiersz, który czyni okno widocznym. W tym celu klikamy okno wiersza poleceń JShell i kilkukrotnie naciskamy klawisz enter, aż do momentu zgłoszenia się systemu i pojawienia się kursora, po czym wpisujemy następującą instrukcję:
Okno ponownie się pojawi, gdy właściwości Visible (Widoczny) przypiszemy wartość true (po zamknięciu okna ustawiona została wartość false). Przedstawiony 10-wierszowy fragment kodu jest dość ciekawy, jednak pora dowiedzieć się, jak zbudować grę z graficznym interfejsem użytkownika!
Materiał opracowany na podstawie: Java, to takie proste Praktyczne wprowadzenie do programowania, Bryson Payne, wyd. WN PWN, 2018 r.
