Projektowanie interfejsu GUI przy użyciu edytora WindowBuilder programu Eclipse

Najpopularniejsze środowiska IDE języka Java oferują narzędzia, które pomagają programistom w budowaniu atrakcyjnych interfejsów graficznych w widoku projektu, przy użyciu interfejsu typu WYSIWYG (what-you-see-is-what-you-get, czyli otrzymujesz to, co widzisz). Interfejsy WYSIWYG umożliwiają użytkownikom rozmieszczanie elementów projektu w taki sposób, w jaki będą one wyglądały w końcowym produkcie. Na przykład program Microsoft Word ma interfejs WYSIWYG, ponieważ pozwala na edytowanie tekstu w takiej postaci, w jakiej będzie on wyglądał po wydrukowaniu. Narzędzia IDE języka Java, takie jak edytor WindowBuilder, umożliwiają programistom rozmieszczanie elementów GUI, takich jak pola tekstowe, etykiety czy przyciski, w takiej postaci, jaką będą one przyjmowały w gotowym oknie aplikacji. To ułatwia programistom dostarczanie profesjonalnie wyglądających aplikacji z interfejsem GUI.

Aby otworzyć edytor WindowBuilder, klikamy prawym przyciskiem myszy plik GuessingGame.java po lewej stronie panelu Package Explorer, a następnie wybieramy opcje Open With (Otwórz za pomocą) -> WindowBuilder Editor. Otwarte zostanie nowe okno, które wygląda jak zwykły edytor tekstu. Jednak w lewym dolnym rogu okna możemy zauważyć dwie karty: Source (Źródło) oraz Design (Projekt). Karta Source pokazuje widok kodu źródłowego aplikacji w postaci zwykłego tekstu. Po kliknięciu karty Design zobaczymy widok projektu, przedstawiony na rysunku 3.8. 

Edytor WindowBuilder pojawia się jedynie dla klas GUI, takich jak GuessingGame, które rozszerzają JFrame lub jedną z pozostałych superklas GUI. Jak widać, okno podglądu zawiera pasek tytułu z ikoną Javy po lewej stronie oraz trzema przyciskami służącymi do minimalizowania, maksymalizowania i zamykania okna. Okno podglądu przedstawione na rysunku 3.8 będzie wyglądało nieco inaczej w systemie Windows, macOS oraz Linux. To okno stanowi podstawę do budowania naszej gry, która będzie wyglądała i zachowywała się jak prawdziwa aplikacja.

Rysunek 3.8. Karta Design edytora WindowBuilder ułatwia budowanie okienkowych aplikacji GUI

 Materiał opracowany na podstawie: Java, to takie proste Praktyczne wprowadzenie do programowania, Bryson Payne, wyd. WN PWN, 2018 r.