Połączenie kontrolera z widokiem
Widok naszej aplikacji został przygotowany w pliku resources/galleryView.fxml. Musimy teraz połączyć z klasą kontrolera (GalleryController), która umożliwi nam komunikację na linii model - widok.
- Otwórz plik
resources/galleryView.fxml - Odnajdź w widoku kontrolki odpowiedzialne za wyświetlanie informacji o pojedynczym obrazie. Naszym celem będzie podłączenie nazwy obrazka do edytowalnego pola tekstowego (
TextField) oraz samego obrazu do kontrolkiImageView. Zwróć uwagę, że każda kontrolka posiada identyfikatorfx:id- będzie to również nazwa odpowiadającego jej atrybutu w klasie kontrolera. - W klasie kontrolera
GalleryControllerdodaj atrybut odpowiadający kontrolce do ustawiania nazwy:@FXML private TextField imageNameField; - W analogiczny sposób ustaw kontrolkę do wyświetlania obrazu.
Prywatne pola i metody, które mają być dostępne z poziomu plików fxml muszą być poprzedzone adnotacją @FXML. Dobrym zwyczajem jest, aby wszystkie elementy klasy dostępne w plikach fxml były oznaczane w taki sposób - zwiększa to czytelność kodu.
Połączenie kontrolera z modelem
Kolejnym krokiem jest skojarzenie elementów modelu z atrybutami widoku. We wzorcu MVC odpowiada za to kontroler.
- Do ustawiania zdjęcia w widoku wykorzystywana jest metoda
GalleryController#bindSelectedPhoto(). Zwróć uwagę, że obecnie po załadowaniu modelu galerii domyślnie zaznaczane jest pierwsze zdjęcie ze zbioru. Wystarczy zatem uzupełnić brakujący kod metody. - Zamiast ustawiać wartości widoku “na sztywno” za pomocą metod typu setText() wykorzystamy do tego mechanizm bindingów i przygotowane wcześniej właściwości FX. Typowy binding wygląda następująco:
Uwaga: typy łączonych właściwości muszą być zgodne.
viewControl.viewProperty().bind(model.modelProperty()); - Odnajdź odpowiednie właściwości kontrolek imageNameField oraz imageView i skojarz je z ich modelowymi odpowiednikami.
- Uruchom aplikację, na tym etapie powinna wyglądać mniej więcej tak:
