Lesson 11

Design patterns I

Creating a big application we are using a huge amount of similar components. What is more, we do not want to have massive classes and .fxml files, so we can easily manage the code.

I. Preparing own component


Task 0

The code below (Cell.fxml) describes a part of an interface.


<?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>

The controller below can be created only if we fabricate an object basing on a constructor with an integer as argument type.


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 + "");
    }

}
                

Copy the code to the proper files in your project.

II. Creating main view


Task 1

Main view is a container for smaller components. It contains basic elements that allow to add endless number of components.


    
<?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>

Main view's controller is more complex. It creates view in the same way as a view is packed into a scene at the beginning of creating an application. Note that the part with creating is in a separate method.


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
    // When it is created
    private void initialize() {
        for (int i = 0; i < 10; i++) {
            createChildElement();
        }
    }

    // Here we are creating one component
    private void createChildElement() {
        // Load a view
        FXMLLoader loader = new FXMLLoader(getClass().getResource("Cell.fxml"));
        // Define a value to pass
        int value = (int)(Math.random() * 100);
        // Creat a controller on your own
        Cell controller = new Cell(value);
        // Set a controller for a view
        loader.setController(controller);
        Pane pane = null;
        try {
            // Load a view
            pane = loader.load();
            // Add view to a component
            listOfElements.getChildren().add(pane);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}                        
                
Task 2

Add the presented code to your application and run it.

Task 3

Write an application "Passwords Manager" which contains:

  • Text field to input a value
  • Button to approve
  • Container for elements with possibility to scroll

Workflow of the application:

  1. Run the application
  2. Insert a value to a text field
  3. Press the button
  4. New element is added to a list with a shown value
  5. Press the button which is located in an element of the list ("Show")
  6. In the element of the list value is switched to a generated password. Button switches name to "Hide"
  7. Press the button which is located in an element of the list ("Hide")
  8. Password is switched with the value from 2. point