e(fx)clipse 1.0 – New Features – LayoutPanes can be controlled by CSS

e(fx)clipse 1.0.0 is just around the corner and scheduled to be released on August 15th, while we are polishing the final bits, the Eclipse IP-Team checks our IP-Log, … .

I’d like to introduce you the new and exiting features that we worked on in the last months since we released 0.9.0 in February.

Blog series

Controlling our layout panes with CSS

The JavaFX library makes heavy use of CSS allowing you to control fairly any L&F aspect of your application through CSS, while this API was not available as API in JavaFX 2.2, JavaFX introduced StyleableProperties as public API and so it can be consumed by external libraries like e.g. our LayoutPanes

Let’s look at an example when using our Pane-Library who provides:

FillLayoutPane: who uses the same layout algorithm you know from SWT-FillLayout
GridLayoutPane: who uses the same layout algorithm you know from SWT-GridLayout
RowLayoutPane: who uses the same layout algorithm you know from SWT-RowLayout

Let’s take GridLayoutPane as an example which allows you to control the horizontal & vertical space between cells like this:

package application;
	
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.stage.Stage;

import org.eclipse.fx.ui.panes.GridData;
import org.eclipse.fx.ui.panes.GridLayoutPane;


public class Main extends Application {
  @Override
  public void start(Stage primaryStage) {
    GridLayoutPane p = new GridLayoutPane();
    p.setHorizontalSpacing(50);
    p.setVerticalSpacing(5);
    p.setNumColumns(2);
			
    {
      TextField field = new TextField();
      GridLayoutPane.setConstraint(field, 
        new GridData(GridData.FILL_HORIZONTAL));
      p.getChildren().addAll(new Label("Firstname"), field);				
    }
			
    {
      TextField field = new TextField();
      GridLayoutPane.setConstraint(field, 
        new GridData(GridData.FILL_HORIZONTAL));
      p.getChildren().addAll(new Label("Lastname"), field);				
    }
			
    Scene scene = new Scene(p,400,400);
    scene.getStylesheets().add(
      getClass().getResource("application.css").toExternalForm());
    primaryStage.setScene(scene);
    primaryStage.show();
  }
	
  public static void main(String[] args) {
    launch(args);
  }
}

which would produce an UI like this

In the above case we are defining the gaps between the cells in a programmatic fashion which is not that nice but should be better controlled via CSS which is possible with the 1.0 version of the e(fx)clipse layout panes because they make use of the new public StyleProperty-API provided, let’s take a glance at the implementation:

package org.eclipse.fx.ui.panes;

public class GridLayoutPane extends AbstractLayoutPane<GridData> {
  // ....
  private static final CssMetaData<GridLayoutPane, Number> HORIZONTAL_SPACING = 
    new CssMetaData<GridLayoutPane, Number>(
      "-fx-hspace", SizeConverter.getInstance(), Integer.valueOf(5)) { //$NON-NLS-1$

    public boolean isSettable(GridLayoutPane node) {
      return !node.horizontalSpacingProperty().isBound();
    }

    public StyleableProperty<Number> getStyleableProperty(GridLayoutPane node) {
      return (StyleableProperty<Number>) node.horizontalSpacingProperty();
    }
  };

  @NonNull
  private final IntegerProperty horizontalSpacing = 
    new SimpleStyleableIntegerProperty(HORIZONTAL_SPACING, this, 
      "horizontalSpacing", Integer.valueOf(5)); //$NON-NLS-1$

  public final void setHorizontalSpacing(int value) {
    horizontalSpacingProperty().set(value);
  }

  public final int getHorizontalSpacing() {
    return horizontalSpacingProperty().get();
  }

  public final @NonNull IntegerProperty horizontalSpacingProperty() {
    return this.horizontalSpacing;
  }
}

the effect of the code above is that we can now instead of setting the horizontal & vertical properties via Java code let our css-file control them.

GridLayoutPane {
  -fx-hspace: 50px;
  -fx-vspace: 5px;
}