Kodowanie prostego graficznego interfejsu użytkownika Java

Graficzny interfejs użytkownika (GUI) zbudowany przy użyciu Platforma Java NetBeans składa się z kilku warstw pojemników. Pierwsza warstwa to okno służące do przenoszenia aplikacji po ekranie komputera. Jest to znane jako kontener najwyższego poziomu, a jego zadaniem jest zapewnienie wszystkim innym kontenerom i komponentom graficznym miejsca do pracy. Zazwyczaj w przypadku aplikacji komputerowej ten kontener najwyższego poziomu zostanie wykonany przy użyciu

klasa.

Możesz dodać dowolną liczbę warstw do swojego projektu GUI, w zależności od jego złożoności. Możesz umieścić elementy graficzne (np. Pola tekstowe, etykiety, przyciski) bezpośrednio w

lub możesz pogrupować je w inne pojemniki.

Warstwy GUI są znane jako hierarchia przechowawcza i można je traktować jako drzewo genealogiczne. Jeśli…

jest dziadkiem siedzącym na górze, to następny pojemnik można uznać za ojca i elementy, które trzyma jako dzieci.

W tym przykładzie zbudujemy GUI z

zawierający dwa

i a

. Pierwszy

będzie trzymać

i

. Drugi

będzie trzymać

i a

. Tylko jeden

(i stąd zawarte w nim elementy graficzne) będą widoczne na raz. Przycisk będzie używany do przełączania widoczności tych dwóch

.

Istnieją dwa sposoby na zbudowanie tego GUI przy użyciu NetBeans. Pierwszym z nich jest ręczne wpisanie kodu Java reprezentującego GUI, co omówiono w tym artykule. Drugim jest użycie narzędzia NetBeans GUI Builder do budowania Swing GUI.

Aby uzyskać informacje o korzystaniu z JavaFX zamiast Swing do tworzenia GUI, zobacz Co to jest JavaFX?

Uwaga: Pełny kod tego projektu znajduje się pod adresem Przykładowy kod Java do budowy prostej aplikacji GUI.

Stwórz nowy Jawa Projekt aplikacji w NetBeans z główną klasą Nazwiemy projekt

Punkt kontrolny: W oknie Projekty NetBeans powinien znajdować się folder GuiApp1 najwyższego poziomu (jeśli nazwa nie jest pogrubiona, kliknij folder prawym przyciskiem myszy i wybierz

). Poniżej

folder powinien być folderem pakietów źródłowych z

o nazwie GuiApp1. Ten folder zawiera główną klasę o nazwie

.Jawa.

Przed dodaniem jakiegokolwiek kodu Java dodaj następujący import na górze

klasa między

linia i

:

Ten import oznacza, że ​​wszystkie klasy potrzebne do stworzenia tej aplikacji GUI będą dla nas dostępne.

W ramach głównej metody dodaj następujący wiersz kodu:

Oznacza to, że pierwszą rzeczą do zrobienia jest utworzenie nowego

obiekt. Jest to dobry skrót na przykład programy, ponieważ potrzebujemy tylko jednej klasy. Aby to zadziałało, potrzebujemy konstruktora

klasy, więc dodaj nową metodę:

W tej metodzie umieścimy cały kod Java potrzebny do utworzenia GUI, co oznacza, że ​​każda linia będzie odtąd w

metoda.

Uwaga dotycząca projektu: Być może widziałeś opublikowany kod Java, który pokazuje klasę (tj.

) przedłużony z

. Ta klasa jest następnie używana jako główne okno GUI aplikacji. Naprawdę nie ma takiej potrzeby w przypadku normalnej aplikacji GUI. Jedyny raz, kiedy chcesz przedłużyć

klasa jest, jeśli potrzebujesz zrobić bardziej konkretny typ

(spojrzeć na

aby uzyskać więcej informacji na temat tworzenia podklasy).

Jak wspomniano wcześniej, pierwsza warstwa GUI to okno aplikacji wykonane z

. Stworzyć

obiekt, wywołaj

konstruktor:

Następnie ustawimy zachowanie naszego okna aplikacji GUI, wykonując następujące cztery kroki:

1. Upewnij się, że aplikacja zamyka się, gdy użytkownik zamyka okno, aby nie działała nieznana w tle:

2. Ustaw tytuł okna, aby okno nie miało pustego paska tytułu. Dodaj tę linię:

3. Ustaw rozmiar okna, tak aby okno było dopasowane do umieszczonych w nim komponentów graficznych.

Uwaga dotycząca projektu: Alternatywną opcją ustawienia rozmiaru okna jest wywołanie

metoda

klasa. Ta metoda oblicza rozmiar okna na podstawie zawartych w nim elementów graficznych. Ponieważ ta przykładowa aplikacja nie musi zmieniać rozmiaru okna, użyjemy tylko

metoda.

4. Wyśrodkuj okno, aby pojawiło się na środku ekranu komputera, aby nie było widoczne w lewym górnym rogu ekranu:

Tworzą się tutaj dwie linie wartości dla

i

obiekty, które wkrótce stworzymy, używając dwóch

tablice. Ułatwia to wypełnienie niektórych przykładowych wpisów dla tych składników:

Teraz stwórzmy pierwszy

obiekt. Będzie zawierać

i a

. Wszystkie trzy są tworzone za pomocą metod konstruktora:

Uwagi do powyższych trzech wierszy:

• The

  JPanel

  zmienna jest zadeklarowana finał. Oznacza to, że zmienna może przechowywać tylko

  JPanel

  utworzony w tej linii. W rezultacie możemy użyć zmiennej w klasie wewnętrznej. Stanie się jasne, dlaczego chcemy później w kodzie.
• The

  JLabel

  i

  JComboBox

  przekazano im wartości w celu ustawienia ich właściwości graficznych. Etykieta pojawi się jako „Owoce:”, a kombinacja będzie zawierała wartości zawarte w

  fruitOptions

  tablica zadeklarowana wcześniej.
• The

  Dodaj()

  metoda

  JPanel

  umieszcza w nim komponenty graficzne. ZA

  JPanel

  używa FlowLayout jako domyślnej menedżer układu. Jest to w porządku dla tej aplikacji, ponieważ chcemy, aby etykieta znajdowała się obok opakowania zbiorczego. Tak długo, jak dodamy

  JLabel

  po pierwsze, będzie dobrze wyglądać:

Drugi

postępuje według tego samego wzoru. Dodamy

i a

i ustaw wartości tych składników na „Warzywa:” i drugi

szyk

. Jedyną inną różnicą jest użycie

metoda ukrywania

. Nie zapominaj, że będzie

kontrolowanie widoczności tych dwóch

. Aby to zadziałało, trzeba być na początku niewidocznym. Dodaj te linie, aby ustawić drugi

:

Jedną z linii wartych odnotowania w powyższym kodzie jest użycie

metoda

. The

wartość powoduje, że lista wyświetla pozycje w dwóch kolumnach. Nazywa się to „stylem gazety” i jest dobrym sposobem na wyświetlenie listy pozycji zamiast bardziej tradycyjnej kolumny pionowej.

Ostatnim potrzebnym komponentem jest

kontrolować widoczność

s. Wartość przekazana w

Konstruktor ustawia etykietę przycisku:

Jest to jedyny komponent, który ma zdefiniowany detektor zdarzeń. „Zdarzenie” występuje, gdy użytkownik wchodzi w interakcję ze składnikiem graficznym. Na przykład, jeśli użytkownik kliknie przycisk lub napisze tekst w polu tekstowym, nastąpi zdarzenie.

Detektor zdarzeń informuje aplikację, co zrobić, gdy zdarzenie się wydarzy.

używa klasy ActionListener do „nasłuchiwania” kliknięcia przycisku przez użytkownika.

Ponieważ ta aplikacja wykonuje proste zadanie po kliknięciu przycisku, możemy użyć anonimowej klasy wewnętrznej do zdefiniowania detektora zdarzeń:

Może to wyglądać jak przerażający kod, ale wystarczy go rozbić, aby zobaczyć, co się dzieje:

• Najpierw nazywamy

  addActionListener

  metoda

  JButton

  . Ta metoda oczekuje wystąpienia

  ActionListener

  klasa, która jest klasą nasłuchującą zdarzenia.
• Następnie tworzymy wystąpienie

  ActionListener

  klasy, deklarując nowy obiekt za pomocą

  new ActionListener ()

  a następnie udostępnienie anonimowej klasy wewnętrznej - czyli całego kodu w nawiasach klamrowych.
• Wewnątrz anonimowej klasy wewnętrznej dodaj metodę o nazwie

  Przedsięwzięcie wykonane()

  . Jest to metoda wywoływana po kliknięciu przycisku. W tej metodzie wystarczy tylko użyć

  setVisible ()

  zmienić widoczność

  JPanel

  s.

Na koniec musimy dodać dwa

s i

do

. Domyślnie a

używa menedżera układu BorderLayout. Oznacza to, że istnieje pięć obszarów (w trzech rzędach)

który może zawierać komponent graficzny (PÓŁNOC, {ZACHÓD, CENTRUM, WSCHÓD}, POŁUDNIE). Określ ten obszar za pomocą

metoda:

Wreszcie, cały powyższy kod byłby na nic, jeśli nie ustawimy

być widocznym:

Teraz jesteśmy gotowi uruchomić projekt NetBeans, aby wyświetlić okno aplikacji. Kliknięcie przycisku spowoduje przełączenie między wyświetlaniem listy kombinowanej lub listy.