JavaFX layout

Hi,

At last, I have started to work on JavaFX. For my first development, I share with you a new Layout named RefPointLayout. It’s principal is simple as you define one node position or two points node relatively to some reference points.

With one point you can set only the node position. With two points you can set the node position and size. The below diagram shows you the main key points of this layout :

Let’s see together an example with scaled node and fixed size node. The HMI contains two scalable list views and two fixed size buttons. For the list view of the left side, its top left corner is relative to the top left parent reference point and the bottom right corner is relative to the bottom centre parent reference point. This way it is following window resize with a constant delta x and y. For the two buttons their position is set relatively to the middle centre reference point.

The code to create the above HMi is the following :

package org.capcaval.ermine.jfx.layout._test;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ListView;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

import org.capcaval.ermine.jfx.layout.JfxRefPointLayout;
import org.capcaval.ermine.layout.RefPointEnum;

public class JfxRefPointLayoutMain extends Application {
    public static void main(String[] args) {
        Application.launch(args);
    }
    
    @Override
    public void start(Stage stage) {
        stage.setTitle("RefPoint Layout");
        stage.setMinHeight(200);
        stage.setMinWidth(200);
        
        Pane pane = new Pane();
        Scene scene = new Scene(pane, 400, 400, Color.WHITE);
        
		// use a ref point layout
		JfxRefPointLayout layout = new JfxRefPointLayout(pane); 
        
        final ObservableList<String> lDataList = FXCollections.observableArrayList("A","B","C");
        final ListView<String> leftListView = new ListView<String>(lDataList);

        layout.addResizableNode( leftListView, 
        		RefPointEnum.topLeftPoint, 10, 10, 
        		RefPointEnum.bottomCenterPoint, -25, -10);
        
        final ObservableList<String> rDataList = FXCollections.observableArrayList("D", "E", "F");
        final ListView<String> rightListView = new ListView<String>(rDataList);

        layout.addResizableNode( rightListView, 
        		RefPointEnum.topCenterPoint, 25, 10, 
        		RefPointEnum.bottomRightPoint, -10, -10);

        Button sendRightButton = new Button(">");
        Button sendLeftButton = new Button("<");
        VBox menu = new VBox(5);
        menu.getChildren().addAll(sendRightButton,sendLeftButton);
        
        layout.addNode(menu, RefPointEnum.middleCenterPoint, -15, -40);
       
        stage.setScene(scene);
        stage.show();
    }
}

package org.capcaval.ermine.jfx.layout._test;

import javafx.application.Application;

import javafx.collections.FXCollections;

import javafx.collections.ObservableList;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.control.ListView;

import javafx.scene.layout.Pane;

import javafx.scene.layout.VBox;

import javafx.scene.paint.Color;

import javafx.stage.Stage;

import org.capcaval.ermine.jfx.layout.JfxRefPointLayout;

import org.capcaval.ermine.layout.RefPointEnum;

public class JfxRefPointLayoutMain extends Application {

public static void main(String[] args) {

Application.launch(args);

}

@Override

public void start(Stage stage) {

stage.setTitle("RefPoint Layout");

stage.setMinHeight(200);

stage.setMinWidth(200);

Pane pane = new Pane();

Scene scene = new Scene(pane, 400, 400, Color.WHITE);

// use a ref point layout

JfxRefPointLayout layout = new JfxRefPointLayout(pane);

final ObservableList<String> lDataList = FXCollections.observableArrayList("A","B","C");

final ListView<String> leftListView = new ListView<String>(lDataList);

layout.addResizableNode( leftListView,

RefPointEnum.topLeftPoint, 10, 10,

RefPointEnum.bottomCenterPoint, -25, -10);

final ObservableList<String> rDataList = FXCollections.observableArrayList("D", "E", "F");

final ListView<String> rightListView = new ListView<String>(rDataList);

layout.addResizableNode( rightListView,

RefPointEnum.topCenterPoint, 25, 10,

RefPointEnum.bottomRightPoint, -10, -10);

Button sendRightButton = new Button(">");

Button sendLeftButton = new Button("<");

VBox menu = new VBox(5);

menu.getChildren().addAll(sendRightButton,sendLeftButton);

layout.addNode(menu, RefPointEnum.middleCenterPoint, -15, -40);

stage.setScene(scene);

stage.show();

}

In order to compile the above code, you need to download Ermine.jar. The layout is also available as a pane. Personally I quite like it as an independent layout interface. In the future, I might improve it by adding some customed reference points.

Cheers,

Mik

4 thoughts on “JavaFX layout”

Pingback: JavaFX links of the (past few) week(s), October 13 // JavaFX News, Demos and Insight // FX Experience
Pingback: Java desktop links of the (past few) week(s), October 13 « Jonathan Giles
Tom on 13/10/2014 at 07:07 said:

Interesting approach and it will work up to a degree. I forsee one of two problems: either you need to juggle a lot of absolute values, when enough nodes are place into a single container (you can only have so many node in the pane until it becomes confusing), and that may be with a lower number than expected. Or you will need to use a lot of nested layouts, like the HBox, and that is a well known performance issue, in both Swing and JavaFX.

There are layout managers that work similarly, but also use other nodes as reference (so you get rules like “top the top of the parent” and “to the left of child x”).

Reply ↓
- mik on 13/10/2014 at 13:50 said:
  
  Hi Tom,
  Thanks for your feedback. About your two points :
  I agree that having too many values can be too complex. In order to reduce the number of values you can simply use some variables. This way it will be easier to read.
  About the performance problem of nested layouts, as I have just started using JavaFx, I have to admit that I do not know how bad or good it is. I will see it soon probably. But on swing, I have developed quite a lot of complex near real time HMI on embedded system( hardware is much less powerful than standard desktop), and I never had such problem even on old system.
  If you encounter such problem with some nested RefPoint layout please give a sample and I will try to solve it by adding some simple optimization patterns.
  Personally, I prefer having a tree organisation of layout and pane this way split of work is simpler and reuse of a sub pane is much easier.
  Thanks again for your interest.
  
  Reply ↓