Java – Proste GUI w Swing’u tworzone przy pomocy NetBeans IDE

W lekcji „Java – bardzo proste GUI z użyciem Swing” pokazałem jak stworzyć prosty program z interfejsem graficznym (GUI) „ręcznie” kodując całość. Tym razem utworzymy podobny program, ale zadanie ułatwmy sobie używając programu NetBeans IDE, który pozwala znacznie zautomatyzować pracę.

Na początku trzeba odwiedzić stronę http://netbeans.org/downloads/index.html i pobrać interesującą nas aplikację. Wystarczy do naszych potrzeb najprostsza paczka do programowania w Javie, czyli paczka Java SE. Najnowsza wersja NetBeans IDE w momencie pisania tej notki, to 7.1.2, poniższe zrzuty ekranu były zrobione na Mac-u, więc wygląd interfejsu na Twoim komputerze, drogi czytelniku może wyglądać nieco inaczej.

Po pobraniu, zainstalowaniu i uruchomieniu programu, powinien na ekranie pojawić się mniej więcej taki widok:

Nie będę szczegółowo omawiał budowy interfejsu NetBeans IDE, z grubsza przypomina on ten znany z Eclipse, więc po paru eksperymentach, pogrzebaniu w opcjach, ewentualnie przeczytaniu paru tutoriali, połapanie się w nim, przynajmniej w podstawowym zakresie, nie powinno nastręczać zbyt dużych problemów. Przejdźmy więc do rzeczy.

Z menu wybieramy:
File -> New Project
W oknie które się pokaże klikamy kolejno:
– okienku „Categories” opcję Java
– Java Application
i klikamy Next.

W następnym okienku ustawiamy nazwę projektu, miejsce jego zapisu i odznaczamy opcję „Create Main Class”.

Zatwierdzamy, klikając „Finish”.
W okienku po lewej, pojawia się nazwa naszego programu z ikonką przedsatwiającą filiżankę gorącej kawy (Javy!). Klikając w trójką po lewej rozwijamy drzewko z katalogami i plikami.

Teraz czas na budowę interfejsu. Z menu wybieramy:
New -> New File
W oknie które się pojawi wybieramy: Swing GUI Form i JFrame Form.

Klikamy Next i pokazuje się kolejne okno:

Ustawiamy nazwę klasy, pakietu i klikamy „Finish”.

Okno NetBeans wygląda teraz tak:

W środku widać podgląd naszej aplikacji (1). Na razie składa się ona wyłącznie z komponentu JFrame który widoczny jest jako szary prostokąt. Po prawej w okienku 2, znajduje się paleta dostępnych kontrolek, poniżej (3) znajduje się zakładka w której możemy podejrzeć i zmieniać poszczególne ustawienia aktywnego komponentu. Na razie jednak nie zmieniamy nic. Można zobaczyć jak obecnie prezentuje się nasza aplikacja klikając ikonkę z zieloną strzałką (4).

Na razie raczej nie robi ona zbyt oszałamiającego wrażenia. Czas aby ją trochę wzbogacić w kolejne kontrolki..

Z palety komponentów wybieramy „Panel” (1) i przeciągamy do szarego prostokąta. Pojawia się pomarańczowy kwadrat, reprezentujący komponent JPanel (1).

Rozciągamy go tak, aby pokrywał całą ramkę:

Następnie dodajemy kontrolkę służącą wpisywaniu tekstu w jednej linii, czyli z palety wybieramy „Text Field” i przeciągamy go na miejsce w którym chcemy go umieścić.

Teraz można zmienić wielkość pola a także tekst który jest wyświetlany w nim domyślnie. W tym celu z zakładki właściwości wybieramy opcję „text” i w polu po prawej wpisujemy żądany tekst. Jeśli chcemy by kontrolka domyślnie była pusta, po prostu usuwamy tekst. Po zatwierdzeniu Enterem, wpisany tekst pojawi się w podglądzie.

Można też zmienić nazwę komponentu wybierając z zakładki właściwości opcję „Code” i tam modyfikując zawartość pola „Variable Name”. Tu dla pola tekstowego wybrałem nazwę „poleTekstowe”.

Teraz, podobnie jak to zrobiliśmy z kontrolką „Text Field”, umieszczamy komponenty „Label” (nazwałem go „komunikatLabel” i usunąłem tekst domyślny).

W końcu przyszedł czas na dwa przyciski którym nadałem nazwy „witajButton” i „zegnajButton” a także zmieniłem wyświetlany na nich tekst.

Interfejs jest w zasadzie gotowy, teraz trzeba tylko dorzucić nieco kodu, aby nasz program coś robił.
Klikamy dwukrotnie w przycisk „Witaj”, ale nie w tekst, bo wtedy wejdziemy w tryb zmiany tekstu na przycisku. Zostaniemy przeniesieni do kodu, do metody która jest odpowiedzialna za akcję wyzwalaną przez przycisk.

Dopisujemy tam linijkę kodu:

Przeanalizujmy teraz ten fragment kodu. Odwołujemy się do kontrolki „komunikatLabel” (to jest nazwa którą nadaliśmy kontrolce typu Label). Wywołujemy jej metodę setText(), która, jak łatwo się domyśleć, odpowiada za ustawienie tekstu która się wyświetla w tej kontrolce. W nawiasie łączymy łańcuch „Witaj ” z tekstem który jest pobierany z pola tekstowego „poleTekstowe” dzięki metodzie getText().
Podsumowując, tekst pobrany z pola tekstowego jest łączony z tekstem „Witaj ” i skierowany do kontrolki komunikatLabel, w której się wyświetla.

Następnie wracamy do trybu projektu klikając u góry na „Design”, wybieramy przycisk „Żegnaj” i analogicznie do tego jak zrobiliśmy z przyciskiem „Witaj” dopisujemy kod:

Teraz przyszedł wiekopomny moment w którym uruchomimy nasz program, używamy więc znanej nam zielonej strzałki, lub wybieramy z menu:
Run -> Run Main Project
lub używamy przycisku F6 (przynajmniej tak jest na Mac-u)
Naszym oczom ukazuje się długo wyczekiwany obraz:

Teraz wpisujemy nasze imię i naciskamy przycisk „Witaj”.

Podobnie testujemy przycisk „Żegnaj”.

Działa?