我想创建POS应用程序。我喜欢odoo erp创建要搜索的产品列表的方式。 每个产品都在带有图像和一些产品信息的容器中列出。 我想在JavaFX中使用TilePane-> Hbox-> ImageView + Vbox->每个产品的标签来做到这一点。 因此,我需要专家的建议。 4000+产品列表的性能联盟如何? 有什么方法可以在JavaFX中正确实现这一点
这是控制器代码中的一部分:
/* The code get a list of products from database using JPA repositories
Create a filtredlist in to filter list based on textfiled
for each product :
create a Hbox node that contains ImageView and Vbox witch contains some lables
add the Hbox to Tilepane
*/
@FXML
TilePane tpListProduct;
@FXML
JFXTextField tfsearch;
private void initData() {
List<Product> productList = Lists.newArrayList(productRepository.findAll());
FilteredList<Product> filtredList = new FilteredList(FXCollections.observableArrayList(productList), e -> true);
ObjectProperty<Predicate<Product>> productFiltredPredicate = new SimpleObjectProperty<>();
productFiltredPredicate.bind(Bindings.createObjectBinding(() ->
product -> {
if (Objects.equals(product.getNameFR(), null))
return false;
if (product.getNameFR().toLowerCase().contains(tfsearch.getText().trim().toLowerCase()))
return true;
else return false;
}
, tfsearch.textProperty()));
filtredList.predicateProperty().bind(productFiltredPredicate);
productFiltredPredicate.addListener((observable, oldValue, newValue) -> {
tpListProduct.getChildren().clear();
filtredList.forEach(product -> {
tpListProduct.getChildren().add(createProductTile(product));
});
});
}
private Node createProductTile(Product product) {
String cssLayout = "-fx-border-color: red;\n" +
"-fx-border-insets: 5;\n" +
"-fx-border-width: 3;\n" +
"-fx-border-style: dashed;\n";
HBox hBox = new HBox();
hBox.setStyle(
cssLayout
);
VBox vBox = new VBox();
ImageView iv = new ImageView();
iv.setFitWidth(200);
iv.setFitHeight(200);
// iv.setViewport(new Rectangle2D(2, 2, 2, 2));
if (product.getImagePath() != null)
iv.setImage(new Image("file:///" + product.getImagePath()));
vBox.getChildren().add(new Label(product.getNameFR()));
hBox.getChildren().addAll(iv, vBox);
hBox.setOnMouseClicked(event -> {
System.out.println(event.getSource());
});
return hBox;
}