JavaFX custom component get action from button in custom component

Question

I want to get the event of two buttons in my custom component. the component is a imageview with two buttons to move between images, but I need to get the position of the image that is currently displayed, Im storing the key of the image, but I need to know when a button have been pressed outside the custom component, so I can change a Label outside the custom component.

public class TransitionSlider extends AnchorPane {
@FXML
private AnchorPane transitionSliderPane;
@FXML
private ImageView transitionSliderImageView;
@FXML
private Button prevButton;
@FXML
private Button nextButton;
private Map<Integer,Image> imageMap;
private Image currentImage;
private DropShadow imageViewDropShadow;
private int currentKey = 1;
private Image[] images;

public TransitionSlider() {
    FXMLLoader loader = new FXMLLoader();
    loader.setRoot(this);
    loader.setController(this);
    loader.setLocation(this.getClass().getResource("TransitionSlider.fxml"));
    loader.setClassLoader(this.getClass().getClassLoader());
    try {
        loader.load();
    } catch (IOException exception) {  
        throw new RuntimeException(exception);  
    }  

    prevButton.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent t) {
            if(currentKey <= 1){
                currentKey = currentKey + 1;
                currentImage = imageMap.get(currentKey);
                createTransition(transitionSliderImageView, currentImage);
            }
        }
    });

    nextButton.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent t) {
            if(currentKey <= imageMap.size()){
                currentKey = currentKey - 1;
                currentImage = imageMap.get(currentKey);
                createTransition(transitionSliderImageView, currentImage);
            }
        }
    });
    }
    // more code here...
}

I want a way to capture the event and get variables inside the component and change a label outside the custom component...

for example:

public class Gallery extends Application {
    @FXML
    TransitionSlider ts;
    Label label;

        @Override
        public void start(Stage stage) throws Exception {
            label = new Label();
            TransitionSlider ts = new TransitionSlider();
            ts.captureButtonEvent(){ // need a way to capture this
                label.setText(ts.getCurrentKey());
            }
            // more code here....
    }

Answer 1

If I understood your question correctly, you want a binding.. Follow these steps:

1) Put bindable field and its getter/setter into TransitionSlider:

private IntegerProperty currentKey = new SimpleIntegerProperty(1);

public int getCurrentKey() {
    return currentKey.get();
}

public void setCurrentKey(int val) {
    return currentKey.set(val);
}

public IntegerProperty currentKeyProperty() {
    return currentKey;
}

2) Bind this property to label's text in Gallery:

label = new Label();
TransitionSlider ts = new TransitionSlider();
label.textProperty.bind(ts.currentKeyProperty().asString());

Alternatively, if you want to do stuff more than just changing label's text, you can add a change listener to currentKeyProperty:

ts.currentKeyProperty().addListener(new ChangeListener<Number>() {
    @Override
    public void changed(ObservableValue<? extends Number> observable, 
                                    Number oldValue, Number newValue) {
        label.setText(newValue);
        // do other stuff according to "oldValue" and "newValue".
    }
});