Transforming java slider switch code to Scene Builder control

[David Go]

Hey all I am trying to figure out how to transform my JavaFX slider switch to a Scene Builder 2.0 control so that I can use it within scene Builder.

I currently have been watching these 2 YouTube videos:

To make the slider switch:

youtube vid 1

To create a scene builder control:

youtube vid 2

The issue with the 2 YouTube videos above is that it shows how to do this with first starting out designing it within Scene Builder 2.0 which is not the way I did it when following the first YouTube video.

So is there a way to transfer what I have in java to the Scene Builder to create the control?

My complete slider switch code:

package application;
	
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.animation.FillTransition;
import javafx.animation.ParallelTransition;
import javafx.animation.TranslateTransition;
import javafx.beans.binding.Bindings;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.scene.Parent;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.FontSmoothingType;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;
import javafx.util.Duration;

public class Main extends Application {
	static Text text;
	static Pane root = new Pane();
	
	private Parent createContent() {
        root.setPrefSize(300, 300);
        TranslateTransition translateAnimation2 = new TranslateTransition(Duration.seconds(0.25));
        ParallelTransition animation2 = new ParallelTransition(translateAnimation2);
        
        Rectangle bg = new Rectangle(300, 300);

        ToggleSwitch toggle = new ToggleSwitch();
        toggle.setTranslateX(100);
        toggle.setTranslateY(100);
        
        text.setTranslateX(toggle.getTranslateX());
        text.setTranslateY(toggle.getTranslateY() + 9);
        
        translateAnimation2.setNode(text);
        
        root.getChildren().addAll(toggle, text);
        
        return root;
    }

    private static class ToggleSwitch extends Parent {
        private BooleanProperty switchedOn = new SimpleBooleanProperty(false);
        private TranslateTransition translateAnimation = new TranslateTransition(Duration.seconds(0.25));
        private TranslateTransition translateAnimation2 = new TranslateTransition(Duration.seconds(0.25));
        private FillTransition fillAnimation = new FillTransition(Duration.seconds(0.25));
        private ParallelTransition animation = new ParallelTransition(translateAnimation, fillAnimation);
        private ParallelTransition animation2 = new ParallelTransition(translateAnimation2);
        
        public BooleanProperty switchedOnProperty() {
            return switchedOn;
        }

        public boolean checkSwitch() {
        	switchedOn.set(!switchedOn.get()); 
        	return switchedOn.get();
		}

		public ToggleSwitch() {
            Rectangle background = new Rectangle(30, 10);
            background.setArcWidth(10);
            background.setArcHeight(10);
            background.setFill(Color.rgb(255, 161, 161));
            background.setStroke(Color.SLATEGREY);

            Circle trigger = new Circle(10);
            trigger.setCenterX(8);
            trigger.setCenterY(6);
            trigger.setFill(Color.rgb(245, 245, 245));
            trigger.setStroke(Color.SLATEGREY);

            DropShadow shadow = new DropShadow();
            shadow.setRadius(2);
            trigger.setEffect(shadow);
            
            text = new Text();
            text.setFont(Font.font("Verdana", FontWeight.MEDIUM, 8));
            text.setFill(Color.rgb(0, 0, 0));
            text.setTextAlignment(TextAlignment.CENTER);
            text.setFontSmoothingType(FontSmoothingType.LCD);
            text.textProperty().bind(Bindings.when(switchedOnProperty()).then("ON").otherwise("OFF"));
            text.setOnMouseClicked(e -> {
            	switchedOn.set(!switchedOn.get());
            });

            translateAnimation.setNode(trigger);                        
            translateAnimation2.setNode(text);
            
            fillAnimation.setShape(background);

            getChildren().addAll(background, trigger);
			
            switchedOn.addListener((obs, oldState, newState) -> {
                boolean isOn = newState.booleanValue();
                
                translateAnimation.setToX(isOn ? 45 - 30 : 0);
                translateAnimation2.setToX(isOn ? this.getTranslateX() + 17 : this.getTranslateX());
                fillAnimation.setFromValue(isOn ? Color.rgb(255, 161, 161) : Color.rgb(156, 240, 168));
                fillAnimation.setToValue(isOn ? Color.rgb(156, 240, 168) : Color.rgb(255, 161, 161));
                animation.play();
                animation2.play();
            });

            setOnMouseClicked(event -> {
                switchedOn.set(!switchedOn.get());                
            });
        }
    }

    @Override
    public void start(Stage primaryStage) throws Exception {    	    	
        primaryStage.setScene(new Scene(createContent()));
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

[Lou Hamers]

Did you figure this out? I'll be honest and confess, although I do use Scene Builder a lot for JFX UIs, I don't really do much (if anything) with custom components in Scene Builder. Generally it's too much hassle and you don't get much in return. What I'll do instead is use Scene Builder to configure a container that a custom component will go into, and then I'll create the custom component in code, adding it to that container at runtime.

If you still REALLY want to get this working, you could try loading some open source 3rd party libs into Scene Builder, and then take a look at how they created the components in their repo. ControlsFX for example is one you could try. (I suspect the 2nd video shows how to do that but it looks like that video is gone now...)

From my own experiments messing around with it before, it seemed like simply pointing SB to any jar, it would magically just find some "components" to add. I never looked into how that works - maybe it's just auto-detecting anything that inherits from Node or something like that.

That code you have above might just work if you point scene builder to it. Just find the jar that it's creating after you do a build and try loading it in SB. You might need to re-create ToggleSwitch as a regular public Java class instead having it private and inline like that, though.