Sliding Down TableView in JavaFx - css

Question

Im trying to do sliding down efect with my tableview like this:
http://jsfiddle.net/43nGr/90/
and I dont really know how to do that.
This is my simple program which dispalys a button and a tableView.
This is my code of main class:
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application{
Stage window;
TableView <Product> table;
Button showTableButton;
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception {
window = primaryStage;
window.setTitle("Liga Pilkarska");
//First Column
TableColumn<Product, String> nameColumn = new TableColumn<>("Name");
nameColumn.setMinWidth(200);
nameColumn.setMaxWidth(200);
nameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));
//Second COlumn
TableColumn<Product, Double> priceColumn = new TableColumn<>("Price");
priceColumn.setMinWidth(100);
priceColumn.setMaxWidth(100);
priceColumn.setCellValueFactory(new PropertyValueFactory<>("price"));
//Third Column
TableColumn<Product, String> quantityColumn = new TableColumn<>("Quantity");
quantityColumn.setMinWidth(200);
quantityColumn.setMaxWidth(200);
quantityColumn.setCellValueFactory(new PropertyValueFactory<>("quantity"));
//Creating a table and adding columns
table = new TableView();
table.setItems(getProduct());
table.getColumns().addAll(nameColumn, priceColumn, quantityColumn);
table.setFixedCellSize(25);
//setting height of table
table.prefHeightProperty().bind(table.fixedCellSizeProperty().multiply(Bindings.size(table.getItems()).add(1.01)));
table.minHeightProperty().bind(table.prefHeightProperty());
table.maxHeightProperty().bind(table.prefHeightProperty());
table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
showTableButton = new Button("Show Table");
VBox vBox = new VBox();
vBox.getChildren().addAll(showTableButton,table);
//Creating scene
Scene scene = new Scene(vBox, 800,600);
scene.getStylesheets().add("Viper.css");
window.setScene(scene);
window.show();
}
public ObservableList<Product> getProduct(){
ObservableList<Product> products = FXCollections.observableArrayList();
products.add(new Product("Laptop", 2300, 10));
products.add(new Product("Latarka", 50, 19));
products.add(new Product("Suszarka", 89.99, 22));
products.add(new Product("Monitor", 100, 44));
products.add(new Product("Kukurydza", 1.5, 1));
return products;
}
}
and this is my code of "Products" class which are in the table.
public class Product {
public String name;
public double price;
public int quantity;
public Product(){
this.name = "";
this.price = 0;
this.quantity = 0;
}
public Product(String name, double price, int quantity){
this.name = name;
this.price = price;
this.quantity = quantity;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public int getQuantity() {
return quantity;
}
public void setQuantity(int quantity) {
this.quantity = quantity;
}
}
So if i click or hover on a Button , tableView should start to do sliding down efect.
If anyone know how to do that , would be great.

Answer 1

I found the solution, maybe it helps someone.
We need to override interpolate method from Transition.
So I created new class which extends Transition.
import javafx.animation.Transition;
import javafx.scene.control.TableView;
import javafx.util.Duration;
public class ResizeTheHeightOfTableView extends Transition{
public TableView<Product> table;
public int maxSize;
public ResizeTheHeightOfTableView(Duration duration, TableView<Product> table, int maxSize){
setCycleDuration(duration);
this.maxSize = maxSize;
this.table = table;
}
#Override
protected void interpolate(double fraction) {
table.setFixedCellSize(fraction * maxSize );
}
}
and then in Main class just add two lines of code:
ResizeTheHeightOfTableView ft = new ResizeTheHeightOfTableView(Duration.millis(500), table, 25);
showTableButton.setOnAction(e -> ft.play());
and dont forget to import duration:
import javafx.util.Duration;

Answer 2

You have easy option with animated TitledPane(container) where you set animated flag to TRUE and call expand when desired event is fired.
Or even better way create separated thread that animates prefered/min size of your TableView , depends in what kind of container you have your component placed in.From animation thread dont forget to set size on JFXAT and sleep on animation thread.
To prevent 2 animations to run simultanliously use lock/flag that thread has to check before it executes.Simple boolean woud be sufficient.