как создать кнопку (рисунок) на основе выбора флажков в javafx

Question

Мой вопрос заключается в том, как генерировать кнопки с изображениями автомобилей, основываясь на флажках и / или переключателях, выбранных пользователем в javafx?

Я моделирую веб-сайт автосалона с фотографиями автомобилей.Пользователь должен иметь возможность фильтровать отображаемые изображения, устанавливая флажки и / или переключатели.

Сначала я создаю все кнопки изображений для каждого цикла.Я мог бы использовать операторы if и if / else для фильтрации изображений, но были бы дубликаты.Я слышал о Observablelist, но я еще не изучил их.

Может кто-нибудь помочь мне с этим, пожалуйста?Спасибо!

ArrayList<Car> cars;

for (Car r : cars)
{
    for (int i = 0; i < SIZE; i++)
    {
       // create buttons and set car pictures
       carButton[i] = new Button();
       carButton[i].setId(String.format("%d", i));
       carButton[i].setGraphic(cars.get(i).getCarPicture());
    }
}

Answer 1

Это ужасная реализация, но она даст вам некоторые идеи о том, как что-то делать.Вам нужно исследовать FilteredList, ListView и Predicate.Эта реализация не обрабатывает более одного CheckBox одновременно.Будет отображаться только последнее CheckBox действие.

CarList

import java.util.ArrayList;
import java.util.List;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.collections.transformation.FilteredList;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

/**
 *
 * @author Sedrick
 */
public class CarList extends Application {

    @Override
    public void start(Stage primaryStage) {
        List<Car> cars = new ArrayList();
        cars.add(new Car("Honda", "2004"));
        cars.add(new Car("Ford", "2005"));
        cars.add(new Car("Ford", "2004"));
        cars.add(new Car("Honda", "2005"));
        cars.add(new Car("Toyota", "2004"));
        cars.add(new Car("Cadillac", "2005"));

        ListView<Car> view = new ListView();
        view.setCellFactory((ListView<Car> param) -> {
            ListCell<Car> cell = new ListCell<Car>() {
                CarView carView = new CarView();

                @Override
                protected void updateItem(Car item, boolean empty) {
                    super.updateItem(item, empty);
                    if (item != null) {
                        setText("");
                        carView.setMake(item.getMake());
                        carView.setModel(item.getModel());
                        carView.setImageView(item.getUrl());
                        setGraphic(carView);
                    } else {
                        setText("");
                        setGraphic(null);
                    }
                }
            };
            return cell;
        });
        ObservableList<Car> data = FXCollections.observableArrayList(cars);
        FilteredList<Car> filteredList = new FilteredList(data);
        view.setItems(filteredList);
        HBox.setHgrow(view, Priority.ALWAYS);

        CheckBox checkBox = new CheckBox("Honda");
        checkBox.selectedProperty().addListener((observable, oldValue, newValue) -> {     
            if(newValue)
            {
            filteredList.setPredicate((item) -> {
                return item.getMake().equals("Honda");
            });
            }
            else{
                filteredList.setPredicate((item) -> {
                    return true;
                });
            }
        });
        CheckBox checkBox2 = new CheckBox("Ford");
        checkBox2.selectedProperty().addListener((observable, oldValue, newValue) -> {
            if(newValue)
            {
            filteredList.setPredicate((item) -> {
                return item.getMake().equals("Ford");
            });
            }
            else{
                filteredList.setPredicate((item) -> {
                    return true;
                });
            }
        });
        CheckBox checkBox3 = new CheckBox("2004");
        checkBox3.selectedProperty().addListener((observable, oldValue, newValue) -> {
            if(newValue)
            {
            filteredList.setPredicate((item) -> {
                return item.getModel().equals("2004");
            });
            }
            else{
                filteredList.setPredicate((item) -> {
                    return true;
                });
            }
        });
        CheckBox checkBox4 = new CheckBox("2005");
        checkBox4.selectedProperty().addListener((observable, oldValue, newValue) -> {
            if(newValue)
            {
            filteredList.setPredicate((item) -> {
                return item.getModel().equals("2005");
            });
            }
            else{
                filteredList.setPredicate((item) -> {
                    return true;
                });
            }
        });


        VBox leftPanel = new VBox(checkBox, checkBox2, checkBox3, checkBox4);

        HBox root = new HBox(leftPanel, view);

        Scene scene = new Scene(root, 625, 500);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

CarView

import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;

/**
 *
 * @author Sedrick
 */
final public class CarView extends HBox{
    Label make = new Label();
    Label model = new Label();
    ImageView imageView = new ImageView();

    public CarView(String make, String model, String url) {
        this.make.setText(make);
        this.model.setText(model);

        HBox row1 = new HBox(new Label("Make: "), this.make);
        HBox row2 = new HBox(new Label("Model: "), this.model);
        VBox vbox = new VBox(row1, row2);
        vbox.setMaxSize(USE_PREF_SIZE, USE_PREF_SIZE);






        StackPane stackPane1 = new StackPane(vbox);
        HBox.setHgrow(stackPane1, Priority.ALWAYS);


        Image image = new Image(url);
        this.imageView.setImage(image);
        this.imageView.setFitHeight(100);
        this.imageView.setFitWidth(200);
        StackPane stackPane2 = new StackPane(this.imageView);
        stackPane2.setStyle("-fx-background-color: yellow");
        getChildren().addAll(stackPane1, stackPane2);

        setPrefSize(500, 125);

    }

    public CarView()
    {        
        HBox row1 = new HBox(new Label("Make: "), this.make);
        HBox row2 = new HBox(new Label("Model: "), this.model);
        VBox vbox = new VBox(row1, row2);
        vbox.setMaxSize(USE_PREF_SIZE, USE_PREF_SIZE);






        StackPane stackPane1 = new StackPane(vbox);
        HBox.setHgrow(stackPane1, Priority.ALWAYS);


        this.imageView.setFitHeight(100);
        this.imageView.setFitWidth(200);
        StackPane stackPane2 = new StackPane(this.imageView);
        stackPane2.setStyle("-fx-background-color: yellow");
        getChildren().addAll(stackPane1, stackPane2);

        setPrefSize(500, 125);
    }

    public void setImageView(String url) {
        Image image = new Image(url);

        this.imageView.setImage(image);
    }

    public void setMake(String make) {
        this.make.setText(make);
    }

    public void setModel(String model)
    {
        this.model.setText(model);
    }

}

Автомобиль

/**
 *
 * @author Sedrick
 */
public class Car {
    private String make;
    private String model;
    private String url = "https://cdn.pixabay.com/photo/2012/05/29/00/43/car-49278_960_720.jpg";


    public Car(String make, String model) {
        this.make = make;
        this.model = model;
    }

    public String getMake() {
        return make;
    }

    public String getModel() {
        return model;
    }

    public String getUrl()
    {
        return url;
    }

    public void setMake(String make) {
        this.make = make;
    }

    public void setModel(String model) {
        this.model = model;
    }   
}

Answer 2

Вместо использования ArrayList для ваших автомобилей, я рекомендую использовать ObservableList:

ObservableList<Car> carsList = FXCollections.observableArrayList<>();

. ObservableList позволяет вам прослушивать изменения и отвечать соответствующим образом.Например, когда новый Car добавлен в список, вы можете вызвать событие, которое автоматически добавляет новый Button в вашу сцену.

Вот короткое демонстрационное приложение, которое показывает, как это будет работать,Я также прокомментировал приведенный ниже код, и многие из используемых концепций могут быть за пределами вашего уровня, но это, по крайней мере, один метод.

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.ImageView;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {

        VBox root = new VBox(5);
        root.setPadding(new Insets(10));
        root.setAlignment(Pos.CENTER);

        // Create an ObservableList to hold our Cars
        ObservableList<Car> carsList = FXCollections.observableArrayList();

        // For our sample, let's use a FlowPane to display all of our buttons. We will add new buttons to this FlowPane
        // automatically as new Cars are added to carsList
        FlowPane flowPane = new FlowPane();
        flowPane.setHgap(10);
        flowPane.setVgap(5);
        flowPane.setAlignment(Pos.TOP_CENTER);

        // Create a ListChangeListener for our carsList. This allows us to perform some actions whenever an item is added
        // to or removed from the list. For our example, we will only do something when a new Car is added.
        carsList.addListener(new ListChangeListener<Car>() {
            @Override
            public void onChanged(Change<? extends Car> c) {

                System.out.println(carsList.size());
                // Get the first change
                c.next();

                // If an item was added to the list...
                if (c.wasAdded()) {

                    // Create a new button and add it to the FlowPane
                    // The Change (c) provides access to a List of items that were added during this change. Since we
                    // are only going to add one Car at a time, we only need to get the first item from the AddedSubList
                    Button button = new Button(c.getAddedSubList().get(0).getName());
                    button.setGraphic(c.getAddedSubList().get(0).getIcon());
                    button.setOnAction(event -> {
                        // The code to be executed when this button is clicked goes here
                    });

                    // Add the button to our FlowPane
                    flowPane.getChildren().add(button);
                }

            }
        });

        // Now we need a Button that will add a new car to the List
        Button button = new Button("Add Car");
        button.setOnAction(event -> {
            // We'll just add a random car to the carsList
            carsList.add(new Car("Car #" + (carsList.size() + 1), new ImageView("icon.png")));
        });

        // Add our FlowPane and Button to the root layout
        root.getChildren().addAll(button, flowPane);

        primaryStage.setScene(new Scene(root, 550, 250));
        primaryStage.show();
    }
}

class Car {

    private final String name;
    private final ImageView icon;

    public Car(String name, ImageView icon) {
        this.name = name;
        this.icon = icon;
    }

    public String getName() {
        return name;
    }

    public ImageView getIcon() {
        return icon;
    }
}

---

Результаты: (после нажатия кнопки «Добавить автомобиль» несколько раз)