java - 如何在javafx中实现GridView样式

Question

我非常了解 GridView 的实现来实现下图的表示，我确实喜欢在 javafx 中实现该实现，从而从 MYSQL 数据库中获取数据。

我真的不知道如何实现这个实现，即获取动态数据并用上面的样式表示。

我真诚地感谢您的宝贵时间。

public class Home_pageController extends Application {

    @FXML
    private GridPane myGrid;
    @FXML
    private JFXButton yes_button;

    /**
     * Initializes the controller class.
     */
    /**
     * Initializes the controller class.
     */
    @Override
    public void start(Stage stage) throws Exception {
        //    Parent root = FXMLLoader.load(getClass().getResource("Student.fxml"));
        getGrid();

        Parent root = FXMLLoader.load(getClass().getResource("home_page.fxml"));
        //GridPane root = new GridPane();

        Scene scene = new Scene(root);
        stage.setTitle("Some scene");
        stage.setScene(scene);

        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public void getGrid() {
        List<ImageDataObjs> imageURLs ; //you'll use something like this, but I've not for this little helper
        //here you'll want to make a database setup and a call: This is a really bad program, but it will demonstrate
        conn = javaconnect.ConnectDb();
        imageURLs = makeDBCall();
         GridPane gridPane = new GridPane();
//        myGrid.setGridLinesVisible(true);

        for (int i = 0; i < 5; i++) {
            for (int j = 0; j < 5; j++) {
                System.out.print("Just me here again "+imageURLs.get(i).the_image);

                Label label = new Label("Label " + i + "/" + j);
//                label.setMouseTransparent(true);
                GridPane.setRowIndex(label, i);
                GridPane.setColumnIndex(label, j);
                myGrid.getChildren().add(imageURLs.get(10).the_image);
            }
        }
    }

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

    class ImageDataObjs {

        // final ImageView imageView;
        //  String imgURL, price;
        @FXML
        final ImageView the_image;
        String imgURL;
        byte[] price;

        public ImageDataObjs(String imgURL, byte[] price) throws IOException {
            this.imgURL = imgURL;
            this.price = price;
            InputStream in = new ByteArrayInputStream(price);

            WritableImage images = new WritableImage(50, 50);

            ByteArrayInputStream bis = new ByteArrayInputStream(price);
            BufferedImage read = ImageIO.read(bis);
            images = SwingFXUtils.toFXImage(read, null);
            this.the_image = new ImageView(images);
        }
    }

    Connection conn = null;
    ResultSet rs = null;
    PreparedStatement pst = null;
    static byte[] staff_image;
//there a million examples of theis on the web

    private List<ImageDataObjs> makeDBCall() {
        List<ImageDataObjs> imageDataObjList = new ArrayList<>();
        // String myPrice, myURL;
        byte[] myPrice;
        String myURL;
        try {
            String sql = "select * from phone_types";
            pst = conn.prepareStatement(sql);
            rs = pst.executeQuery();
            while (rs.next()) {
                myPrice = rs.getBytes("phone_image");
                myURL = rs.getString("phone_name");
                System.out.println("I am just here "+ myPrice);
                imageDataObjList.add(new ImageDataObjs(myURL, myPrice));
            }
            conn.close();

        } catch (Exception e) {
            e.printStackTrace();
        }
        return imageDataObjList;
    }

}

我正在获取

Caused by: java.lang.NullPointerException at controllers.Home_pageController.getGrid(Home_pageController.java:85) at controllers.Home_pageController.start(Home_pageController.java:54) at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$162(LauncherImpl.java:863) at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$175(PlatformImpl.java:326) at com.sun.javafx.application.PlatformImpl.lambda$null$173(PlatformImpl.java:295) at java.security.AccessController.doPrivileged(Native Method) at com.sun.javafx.application.PlatformImpl.lambda$runLater$174(PlatformImpl.java:294) at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95) at com.sun.glass.ui.win.WinApplication._runLoop(Native Method) at com.sun.glass.ui.win.WinApplication.lambda$null$148(WinApplication.java:191)

Answer 1

我猜您确实喜欢 JavaFX FXML，但我会向您指出 JDBC 和一些手工编码的 JavaFX。

步骤是安装 MYSQL，安装 ConnectorJ(这是从代码连接到 MySQL(驱动程序)的一种方法)记录密码，然后创建一个新数据库，添加一个表和您需要的列。

警告:这是一个大问题，并且已经在很多地方可用，但是您已经问过，所以我提供了一些代码。 GUI 部分将运行，数据库部分需要调整。

我还在下面为您演示了一个 GridPane。但我认为您想要的是绑定(bind)变量，以便您的 View 自动更新 - 作为开始，正如我在代码中评论的那样，请查看 TableView 和 Cell Factories。另请检查数据绑定(bind)和类，例如: https://docs.oracle.com/javase/8/javafx/api/javafx/beans/property/SimpleStringProperty.html

这段代码有一百万个错误:你永远不应该从 GUI 线程等进行数据库调用。但你必须从某个地方开始。如果这有帮助，请相应标记。

import com.techtalix.util.Const;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
import java.io.File;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;


public class Test extends Application {

Connection connect = null;

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

@Override
public void start(Stage stage) {

    List<ImageDataObjs> imageURLs = null; //you'll use something like this, but I've not for this little helper
    //here you'll want to make a database setup and a call: This is a really bad program, but it will demonstrate
    connectToDB();
    imageURLs = makeDBCall();

    GridPane root = new GridPane();
    Scene theScene = new Scene(root);
    stage.setTitle("Some scene");
    stage.setScene(theScene);

    root.setPadding(new Insets(10,10,10,10));
    root.setHgap(10);
    root.setVgap(10);

    int cols=2, colCnt = 0, rowCnt = 0;
    for (int i=0; i<imageURLs.size(); i++) {
        root.add(imageURLs.get(i).imageView, colCnt, rowCnt);
        colCnt++;
        if (colCnt>cols) {
            rowCnt++;
            colCnt=0;
        }
    }


    // in terms of auto update, instead of gridpane, I suggest you look into TableView, and cell factories.
    // once you have bound your cell factories, you can make calls to your DB, and the values bound will update automatically
    //http://www.java2s.com/Tutorials/Java/JavaFX/0650__JavaFX_TableView.htm

    stage.initStyle(StageStyle.UNDECORATED); //remove this is you want to see the title bar etc.
    stage.show();
}

class ImageDataObjs {
    final ImageView imageView;
    String imgURL, price;

    public ImageDataObjs(String imgURL, String price) {
        this.imgURL = imgURL;
        this.price = price;
        Path imagePath = Paths.get(imgURL);
        File imageFile = imagePath.toFile();
        Image image = new Image(imageFile.toURI().toString());
        this.imageView = new ImageView(image);
    }
}

//there a million examples of theis on the web
private List<ImageDataObjs> makeDBCall() {
    List<ImageDataObjs> imageDataObjList = new ArrayList<>();
    String myPrice, myURL;
    try {

        Statement statement = connect.createStatement();
        ResultSet resultSet = statement
                .executeQuery("select * from myProductList"); //you need to have a table called myProductList in your database

        while (resultSet.next()) {
            myPrice = resultSet.getString("myImageURL"); //these are the SQL cols that you should have already created in your database
            myURL = resultSet.getString("somePriceData");
            imageDataObjList.add(new ImageDataObjs(myURL, myPrice));
        }
        connect.close();

    } catch (Exception e) {
        e.printStackTrace();
    }

    /*
    JUST FOR EXAMPLE - this would come from your database query
     */

    imageDataObjList.add(new ImageDataObjs(Const.BASE_DIRECTORY + "png/bridge.png", "1.99"));
    imageDataObjList.add(new ImageDataObjs(Const.BASE_DIRECTORY + "png/bridge.png", "2.99"));
    imageDataObjList.add(new ImageDataObjs(Const.BASE_DIRECTORY + "png/bridge.png", "3.99"));
    imageDataObjList.add(new ImageDataObjs(Const.BASE_DIRECTORY + "png/bridge.png", "4.99"));
    imageDataObjList.add(new ImageDataObjs(Const.BASE_DIRECTORY + "png/bridge.png", "5.99"));
    imageDataObjList.add(new ImageDataObjs(Const.BASE_DIRECTORY + "png/bridge.png", "6.99"));
    imageDataObjList.add(new ImageDataObjs(Const.BASE_DIRECTORY + "png/bridge.png", "6.99"));

    return imageDataObjList;
}

private void connectToDB() {
    //Note: you'll still it in tutorials, but Class.forName() is not needed since JDBC 4.0.
    //make sure but this point that MYSQL is installed, and that ConnectorJ is also installed.
    //create a database called "someDatabase" - make sure user and password are are you installed them.
    try {
        connect =
                DriverManager.getConnection("jdbc:mysql://localhost/someDatabase" +
                        "?user=root&password=root");
    } catch (SQLException e) {
        e.printStackTrace();
    }
}

}