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

Other posts in this series are:

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
app

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;
}
This entry was posted in e(fx)clipse and tagged . Bookmark the permalink.

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

  1. Pingback: e(fx)clipse 1.0 – New Features – Generate JavaFX Properties accessors | Tomsondev Blog

  2. Pingback: e(fx)clipse 1.0 – New Features – CSS Gradient Editor | Tomsondev Blog

  3. Thank you, Tom! Especially for the final usable GridLayoutPane!

    When it comes to JavaFX I really like the look and feel, all the tiny little things and the declarative way (although I prefer to use you FXGraph….). What I really missed all the time where the Layouts as I knew them from SWT.

    Greetings,
    Daniel

  4. Pingback: e(fx)clipse 1.0 – New Features – Drag and Drop for e4/JavaFX applications | Tomsondev Blog

  5. Pingback: e(fx)clipse 1.0 – New Features – The clever CSS-Editor who got more clever | Tomsondev Blog

  6. Pingback: e(fx)clipse 1.0 – New Features – StyledText control to build a code editor (framework) | Tomsondev Blog

  7. Pingback: e(fx)clipse 1.0 – New Features – Integration of JavaFX source and property JavaDoc | Tomsondev Blog

  8. Pingback: e(fx)clipse 1.0 – New Features – Consume none OSGi-Artifacts from a maven repository | Tomsondev Blog

  9. Pingback: e(fx)clipse 1.0 released | Tomsondev Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s