Animation effect between pages change - javafx

Question

I want to change the animation which is used between pages change.
import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Pagination;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Callback;
public class MainApp1 extends Application
{
final ObservableList<Person> data = FXCollections.observableArrayList(
new Person("1", "Joe", "Pesci"),
new Person("32", "Rhonda", " Fleming's"),
new Person("32", "Humphrey", "Bogart"));
private Pagination pagination;
public static void main(String[] args) throws Exception
{
launch(args);
}
public int itemsPerPage()
{
return 1;
}
public int rowsPerPage()
{
return 5;
}
public VBox createPage(int pageIndex)
{
int lastIndex = 0;
int displace = data.size() % rowsPerPage();
if (displace > 0)
{
lastIndex = data.size() / rowsPerPage();
}
else
{
lastIndex = data.size() / rowsPerPage() - 1;
}
VBox box = new VBox(5);
int page = pageIndex * itemsPerPage();
for (int i = page; i < page + itemsPerPage(); i++)
{
TableView<Person> table = new TableView<>();
TableColumn numCol = new TableColumn("ID");
numCol.setCellValueFactory(
new PropertyValueFactory<Person, String>("num"));
numCol.setMinWidth(20);
TableColumn firstNameCol = new TableColumn("First Name");
firstNameCol.setCellValueFactory(
new PropertyValueFactory<Person, String>("firstName"));
firstNameCol.setMinWidth(160);
TableColumn lastNameCol = new TableColumn("Last Name");
lastNameCol.setCellValueFactory(
new PropertyValueFactory<Person, String>("lastName"));
lastNameCol.setMinWidth(160);
table.getColumns().addAll(numCol, firstNameCol, lastNameCol);
if (lastIndex == pageIndex)
{
table.setItems(FXCollections.observableArrayList(data.subList(pageIndex * rowsPerPage(), pageIndex * rowsPerPage() + displace)));
}
else
{
table.setItems(FXCollections.observableArrayList(data.subList(pageIndex * rowsPerPage(), pageIndex * rowsPerPage() + rowsPerPage())));
}
box.getChildren().add(table);
}
return box;
}
#Override
public void start(final Stage stage) throws Exception
{
pagination = new Pagination((data.size() / rowsPerPage() + 1), 0);
// pagination = new Pagination(20 , 0);
//pagination.setStyle("-fx-border-color:red;");
pagination.setPageFactory(new Callback<Integer, Node>()
{
#Override
public Node call(Integer pageIndex)
{
if (pageIndex > data.size() / rowsPerPage() + 1)
{
return null;
}
else
{
return createPage(pageIndex);
}
}
});
AnchorPane anchor = new AnchorPane();
AnchorPane.setTopAnchor(pagination, 10.0);
AnchorPane.setRightAnchor(pagination, 10.0);
AnchorPane.setBottomAnchor(pagination, 10.0);
AnchorPane.setLeftAnchor(pagination, 10.0);
anchor.getChildren().addAll(pagination);
Scene scene = new Scene(anchor, 400, 250);
stage.setScene(scene);
stage.setTitle("Table pager");
stage.show();
}
public static class Person
{
private final SimpleStringProperty num;
private final SimpleStringProperty firstName;
private final SimpleStringProperty lastName;
private Person(String id, String fName, String lName)
{
this.firstName = new SimpleStringProperty(fName);
this.lastName = new SimpleStringProperty(lName);
this.num = new SimpleStringProperty(id);
}
public String getFirstName()
{
return firstName.get();
}
public void setFirstName(String fName)
{
firstName.set(fName);
}
public String getLastName()
{
return lastName.get();
}
public void setLastName(String fName)
{
lastName.set(fName);
}
public String getNum()
{
return num.get();
}
public void setNum(String id)
{
num.set(id);
}
}
}
Can you tell me how I can do this?

Answer 1

I think that adding animation to the page factory will do the job. I've used the code above and made page slowly appear. See here: http://pastebin.com/5AcCqu95