What is Rule to use ScrollBar in JavaFX? - javafx

Question

I'm learning about javafx ScrollBar. I know little about ScrollPane but I want to get grip on all controls. Here I tried to use javafx ScrollBar. but it is not working.
Main Class:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.Parent;
import javafx.stage.Stage;
import javafx.fxml.FXMLLoader;
import java.io.IOException;
public class ScrollBarExample extends Application{
#Override
public void start(Stage stage)throws IOException {
Parent root = FXMLLoader.load(getClass().getResource("scroll.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
}
Controller Class:
import javafx.scene.control.Label;
import javafx.scene.control.ScrollBar;
import javafx.fxml.FXML;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
public class ScrollController{
#FXML private Label label;
#FXML private ScrollBar scroll;
public void initialize(){
scroll.valueProperty().addListener(new ChangeListener<Number>(){
#Override
public void changed(ObservableValue<? extends Number> value, Number oldValue, Number newValue){
label.setLayoutX(newValue.doubleValue());
}
});
}
}
FXML Code:
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.ScrollBar?>
<?import javafx.scene.layout.Pane ?>
<?import javafx.scene.control.Label ?>
<GridPane prefWidth="300" prefHeight="250" xmlns:fx="http://javafx.com/fxml" fx:controller="ScrollController" >
<children>
<ScrollBar fx:id="scroll" min="0" max="100" GridPane.rowIndex="0" GridPane.columnIndex="0" />
<Label fx:id="label" text="Move Me" GridPane.rowIndex="1" GridPane.columnSpan="2" GridPane.columnIndex="0" />
</children>
</GridPane>
So what are the rules to use ScrollBar? On which elements it could use or not?

Answer 1

The problem here is the parent, i.e. the GridPane. A GridPane sets the layoutX property itself. If this is changed, during the next layout pulse GridPane simply moves the Node "back where it belongs".
To make this work you could use the translateX property instead. The translateX property denotes the horizontal distance the node should be moved from it's layout position. With this approach it would also be easier to bind the properties instead of using a listener:
label.translateXProperty().bind(scroll.valueProperty());
Alternatively you could use a parent that does not set the layout position itself (like Pane) or set the managed property to false to prevent the parent from modifying the child's position and size. Note that in this case you need to set the layoutY yourself, since this property isn't set by the Parent either.