Lekcja 11

Wzorce Projektowe I

Tworząc dużą aplikację natrafiamy na olbrzymią ilość podobnych elementów. Jakby tego było mało, to jeszcze nie chcemy mieć zbyt dużych klas i plików .fxml, aby można było łatwo zarządzać kodem.

I. Przygotowanie własnej kontrolki


Zadanie 0

Kod poniżej (Cell.fxml) opisuje pewną część interfejsu.


<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Text?>

<AnchorPane
        prefHeight="86.0"
        prefWidth="241.0"
        xmlns="http://javafx.com/javafx/8.0.121"
        xmlns:fx="http://javafx.com/fxml/1">
    
    <Button
        onAction="#show"
        layoutX="31.0"
        layoutY="29.0"
        mnemonicParsing="false"
        text="Show"/>
    
    <Text
        fx:id="text"
        layoutX="171.0"
        layoutY="47.0"
        strokeType="OUTSIDE"
        strokeWidth="0.0"
        text="?"/>
    
</AnchorPane>

Poniższy kontroler może być utworzony wtedy i tylko wtedy, gdy sfabrykujemy obiekt w oparciu o konstruktor z argumentem typu integer.


import javafx.fxml.FXML;
import javafx.scene.text.Text;

public class Cell {

    private int value;

    public Cell(int value) {
        this.value = value;
    }

    @FXML
    private Text text;

    @FXML
    public void show() {
        text.setText(value + "");
    }

}
                

Skopiuj kod do odpowiednich plików w projekcie.

II. Tworzenie głównego widoku


Zadanie 1

Główny widok to kontener na pomniejsze kontrolki. Składa się z podstawowych elementów, które pozwolą dodać praktycznie nieskończoną liczbę składowych.


    
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>

<AnchorPane
    prefHeight="400.0"
    prefWidth="600.0"
    xmlns="http://javafx.com/javafx/8.0.121"
    xmlns:fx="http://javafx.com/fxml/1"
    fx:controller="com.company.MainController">

    <ScrollPane
        prefHeight="400.0"
        prefWidth="600.0"
        AnchorPane.bottomAnchor="0.0"
        AnchorPane.leftAnchor="0.0"
        AnchorPane.rightAnchor="0.0"
        AnchorPane.topAnchor="0.0">

        <VBox fx:id="listOfElements" />

    </ScrollPane>
</AnchorPane>

Kontroler głównego widoku jest bardziej złożony. Tworzy on widok tak samo, jak tworzony jest widok pakowany do sceny na początku tworzenia aplikacji. Zwróć uwagę, że samo tworzenie jest wydzielone do osobnej metody.


import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;

import java.io.IOException;

public class MainController {

    @FXML
    private VBox listOfElements;

    @FXML
    // Gdy jest tworzony
    private void initialize() {
        for (int i = 0; i < 10; i++) {
            createChildElement();
        }
    }

    // Tu tworzymy jedną kontrolkę
    private void createChildElement() {
        // Zaczytujemy widok
        FXMLLoader loader = new FXMLLoader(getClass().getResource("Cell.fxml"));
        // Tworzymy wartość do przekazania
        int value = (int)(Math.random() * 100);
        // Sami robimy kontroler
        Cell controller = new Cell(value);
        // Podpinamy kontroler do widoku
        loader.setController(controller);
        Pane pane = null;
        try {
            // Ładujemy widok
            pane = loader.load();
            // Dodajemy widok do kontrolki
            listOfElements.getChildren().add(pane);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}                        
                
Zadanie 2

Załącz przedstawiony kod do swojej aplikacji i uruchom całość.

Zadanie 3

Napisz aplikację "Manager haseł", która składa się z:

  • Pola tekstowego do wpisywania nazwy użytkownika
  • Przycisk do zatwierdzania
  • Kontener na elementy z możliwością przewijania

Przebieg aplikacji:

  1. Uruchamiam aplikację.
  2. Podaję nazwę użytkownika.
  3. Klikam na przycisk do zatwierdzenia
  4. Nazwa użytkownika dodawana jest do listy, zapmiętywane jest generowane przez program hasło.
  5. Klikam na przycisk znajdujący się w elemencie listy ("Pokaż").
  6. W elemencie listy nazwa użytkownika zamienia się na wylosowane hasło.
  7. Ponownie klikam w przycisk będący częścią listy.
  8. Hasło zamienia się na nazwę użytkownika.