Undecorator - "Add a better look to your JavaFX stages" - Part I

Each time, when I start a new JavaFX project all begins with the following generated code:

public class UndecoratorStageDemo extends Application {

@Override
 public void start(final Stage stage) throws Exception {

Parent root = FXMLLoader.load(getClass().getResource("ClientArea.fxml"));

Scene scene = new Scene(root);

stage.setScene(scene);

stage.show();
 }

public static void main(String[] args) {
 launch(args);
 }

And the visual result is obviously the same as in the Scene Builder once launched from Netbeans:

Classic look under Windows 7

The window style is inherited from the system. Since I’d like my application to have a consistent look (not mixing Windows frame decoration and JFX content) I immediately activated the “undecorated” flag of the stage and of course I’ve lost all resize, move, maximize… capabilities.
Currently using JavaFX, there’s no out of the box skin for undecorated window, so I started working on a humble implementation as a learning purpose.

UnDecorate this!

Since I’d like to reuse this work for many project, I wrote kind of an helper class to decorate the main stage. Here is the current usage:

Instead of:

Parent root = FXMLLoader.load(getClass().getResource("ClientArea.fxml";));

Scene scene = new Scene(root);

Simply add the Undecorator jar into your classpath and add Undecorator calls into your code, and set it as root of the scene:

        Parent root = FXMLLoader.load(getClass().getResource("ClientArea.fxml"));
        Undecorator undecorator = new Undecorator(stage, root);

       // Default theme
        undecorator.getStylesheets().add("skin/undecorator.css");

        Scene scene = new Scene(undecorator);

In order to add the nice Drop Shadow effect, adjust your Scene and Stage to be TRANSPARENT:

// Transparent scene and stage
 scene.setFill(Color.TRANSPARENT);
 stage.initStyle(StageStyle.TRANSPARENT);

The complete stage initialization looks like:

public class UndecoratorStageDemo extends Application {

@Override
 public void start(final Stage stage) throws Exception {

 Parent root = FXMLLoader.load(getClass().getResource("ClientArea.fxml"));
 Undecorator undecorator = new Undecorator(stage,root);
 undecorator.getStylesheets().add("skin/undecorator.css");
 Scene scene = new Scene(undecorator);

 // Transparent scene and stage
 scene.setFill(Color.TRANSPARENT);
 stage.initStyle(StageStyle.TRANSPARENT);

// Set minimum size
stage.setMinWidth(500);
stage.setMinHeight(400);

 stage.setTitle("No title bar");
 stage.setScene(scene);

 stage.show();
 }

And? UI make-up!

Simpyl as the undecorator.jar into your classpath and that’s it:

(Un)decoration!

Looks better no ?

Recipe

Four “layers”:

1. A transparent Stage with Drop shadow effect
2. Your Content
3. A transparent decoration layer with all actions and menu.
4.  A frame for resize capabilities,

Layers of the implementation

The main interest in having layers is it allows to create”non rectangular” user interfaces such as the example below (GitHub Windows client mimic):

Ever seen this before …

Customize it! Play with skin/undecorator.css

Use your imagination !

.undecorator-background {
  -fx-fill: radial-gradient(focus-angle 45deg, focus-distance 20%, center 25% 25%, radius 50%, reflect, #eeeeee88, #55555588 75%, dimgray);
  -fx-arc-width:25;
  -fx-arc-height:25;
}

Result is:

You also can  provide your own “stagedecoration.fxml” i.e. all buttons of the transparent decoration pane. As an example,  the built-in one is in  /insidefx/undecorator. Simply copy it, reuse the fx:id, and the built-in controller will handle actions on your buttons.

In you main class, invoke the constuctor with a third parameter:

    Undecorator undecorator = new Undecorator(stage, myClientArea, "mystagedecoration.fxml");

From classic to fancy look:

Code

Test it on your machine by clicking on this executable

Access to the code, project and binaries here:

Next Enhancements

• Bugs
• API

• Stage “Utility” style,
• Win7 window behavior on desktop’s edges
• i18n
• Themes

Please share your feedbacks, bugs, request for enhancement in the comment section.

Thanks!

About these ads