JavaFX 2.0 – NodeCodeEditor

As I previously said I am working on a Software Component Editor. Transforming my inkscape visual prototype to my FX Application was quiet easy thanks to JavaFX SVGPath. At least for the shape contour, but I had another problem to solve to manage gradient.

So I started groping around JavaFx Gradient paint (RadialGradient and LinearGradient). Modifying and launching again and again to adjust my gradient attributes change. And then I get bored… I mean, It was about to take me a whole life making theses adjustments !

Thinking about it I remembered the way prototypes are built in my company, using SmallTalk language and performing changes on code on the editor that is taken into account as soon as they are “accepted”. Well I can do that too ! Thanks to Eclipse IDE debug mode. The only constraint was to have no structural change in my code and finding a way to have a loop that will take into account all changes on my JavaFX graphical Application.

Please welcome my little NodeEditionVisualizer ! It is simply a JavaFX Application that loop on a method call that draw a user created Node continuously. It has to be launched in debug mode so that changes are taken into account when you save. It is composed of an X/Y axis and a user created Node that can be changed dynamically.

protected ScheduledThreadPoolExecutor executor = new ScheduledThreadPoolExecutor(1);
 
public static void main(String[] args) {
	NodeEditionVisualizer.launch(args);
}
@Override
	public void start(final Stage primaryStage) throws Exception {
		final Group pane = new Group();
		pane.translateXProperty().set(50);
		pane.translateYProperty().set(50);
 
		Scene scene = new Scene(pane);
		scene.setFill(Color.BLACK);
 
		primaryStage.setScene(scene);
		primaryStage.setWidth(550);
		primaryStage.setHeight(550);
		primaryStage.setX(0);
		primaryStage.setY(0);
		primaryStage.setTitle("C3 Shape Editor");
		primaryStage.show();
 
		final Path axis = PathBuilder.create().elements(
			new MoveTo(0, 0),
			new LineTo(0, 100),
			new LineTo(-10, 90),
			new MoveTo(0, 100),
			new LineTo(10,90),
			new MoveTo(0, 100),
			new LineTo(0, 3000),
 
			new MoveTo(0, 0),
			new LineTo(100, 0),
			new LineTo(90, -10),
			new MoveTo(100, 0),
			new LineTo(90, 10),
			new MoveTo(100, 0),
			new LineTo(3000, 0)).stroke(Color.WHITE).build();
 
		final Text origin = TextBuilder.create()
		.text("(0,0)").fill(Color.WHITE).x(-10).y(-5)
		.build();
 
		final Text x = TextBuilder.create()
		.text("X Axis").fill(Color.WHITE).x(50).y(-5)
		.build();
 
		final Text y = TextBuilder.create()
		.text("Y Axis").fill(Color.WHITE).x(-25).y(70).rotate(-90)
		.build();
 
		this.executor.scheduleAtFixedRate(new Runnable(){
			@Override
			public void run() {
				Platform.runLater(new Runnable(){
					@Override
					public void run() {
						pane.getChildren().clear();
 
						Node dut = createShape();
 
						pane.getChildren().addAll(dut, axis, origin, x, y);
					}
				});
			}
		}, 200, 200, TimeUnit.MILLISECONDS);
 
		primaryStage.setOnCloseRequest(new EventHandler() {
 
			@Override
			public void handle(WindowEvent paramT) {
				executor.shutdownNow();
			}
		});
	}
 
	public Node createShape(){
		Rectangle rectangle = RectangleBuilder.create()
                .x(50).y(100).width(250).height(100).fill(Color.RED).stroke(Color.BLACK)
                .build();
 
                Circle circle = CircleBuilder.create()
                .centerX(150).centerY(100).fill(Color.BLUE).radius(200)
                .build();
 
                return new Group(circle, rectangle);
	}
}

As usual, code is available in a jar on download page.

Feel free to reuse this code ! If you have some suggestions, I would be glad to take them into account !

LoNee

4 comments

  1. Hi Chris,

    Did you take time to try JavaFx ? I have to contact you to talk about the Component Editor !
    You will always be my jedi master, don’t worry :)

Leave a Reply

Your email address will not be published. Required fields are marked *