Archive for February, 2013

Undecorator – Final “Stage”

Undecorator 1.0, not bug free but finally at a usable stage!

In this “1.0” version you will get the following improvements:

  1. An experimental “docking” feature on screen’s edges
  2. Full screen capability in Stage’s menu
    1. Despite a JavaFX bug  on Mac OS: popup menu are not well displayed (http://javafx-jira.kenai.com/browse/RT-19457)
Full screen menu item

Full screen menu item

3. Fade transition on window showing and closing

    undecoratorScene.setFadeTransitionEnabled();

4. Localization of messages (maximize, minimize …)

5. UTILITY stage style support The usage of UTILITY Stage style is:

/**
 * UndecoratorScene constructor
 * @param stage The main stage
 * @param stageStyle could be StageStyle.UTILITY or StageStyle.TRANSPARENT
 * @param root your UI to be displayed in the Stage
 * @param stageDecorationFxml Your own Stage decoration or null to use the built-in one
 */
 public UndecoratorScene(Stage stage, StageStyle stageStyle, Parent root, String stageDecorationFxml)

Take a look!

Try!

Executable jar file is still here:macJar and to access to the code, project and binaries it’s still there:github-logo-transparent

How to use it

public class UndecoratorSceneDemo extends Application {

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

// The Undecorator as a Scene
 Region root = FXMLLoader.load(getClass().getResource("ClientArea.fxml"));
 final UndecoratorScene undecoratorScene = new UndecoratorScene(stage, root);

// Enable fade transition
 undecoratorScene.setFadeInTransition();

/*
 * Fade transition on window closing request
 */
 stage.setOnCloseRequest(new EventHandler<WindowEvent>() {
 @Override
 public void handle(WindowEvent we) {
 we.consume(); // Do not hide
 undecoratorScene.setFadeOutTransition();
 }
 });

stage.setScene(undecoratorScene);
 stage.sizeToScene();
 stage.toFront();

 // Set minimum size based on client area's minimum sizes
 Undecorator undecorator = undecoratorScene.getUndecorator();
 stage.setMinWidth(undecorator.getMinWidth());
 stage.setMinHeight(undecorator.getMinHeight());

 stage.show();
 }

}

What is coming next?

I’ll make a break on the improvement of the Undecorator series and I’ll concentrate my efforts on using it as a stage decorator for my other projects, so I’ll certainly provides updates if it’s not sufficient, especially on Mac OS where maximization on top of the screen and fullscreen capability  have some trouble…
Stay tuned 🙂 !

As usual, please give your feedbacks,

Thanks!

12 Comments

Undecorator (Part II) – The UndecoratorScene class

Back on the Undecorator track… with a light (but not least) enhancement.

After some refactoring, I finally added a new and easier way to integrate the Undecorator feature into your apps.

This time, I’ve provided the helper thru a subclass of “javafx.scene.Scene”. The usage now looks like:


public class UndecoratorSceneDemo extends Application {

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

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

  // The Undecorator as a Scene
  UndecoratorScene undecoratorScene = new UndecoratorScene(stage, root);

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

  stage.setScene(undecoratorScene);

  stage.show();
 }

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

So basically, only one line of code :-).

There is also a small API on the UndecoratorScene class for you to provide your decoration FXML or your own CSS.

Code:

Executable jar file is here:macJar   and access to the code, project and binaries is here:github-logo-transparent

What’s coming next?

Since native Windows feature such as dragging a window close to screen edges to maximize/dock it, is not supported by UNDECORATED stages (http://javafx-jira.kenai.com/browse/RT-27571) I’ll try to provide this feature in this API. Unfortunately, it will also bring this functionality on Mac :-).

Have Fun and feel free to comment!

, ,

2 Comments

Undecorator – “Add a better look to your JavaFX stages” – Part I

Warning: I strongly encourage you to use the latest Undecorator version named UndecoratorBis.

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(&quot;ClientArea.fxml&quot;));

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

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(&quot;ClientArea.fxml&quot;;));

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(&quot;ClientArea.fxml&quot;));
        Undecorator undecorator = new Undecorator(stage, root);

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

        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(&quot;ClientArea.fxml&quot;));
 Undecorator undecorator = new Undecorator(stage,root);
 undecorator.getStylesheets().add(&quot;skin/undecorator.css&quot;);
 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(&quot;No title bar&quot;);
 stage.setScene(scene);

 stage.show();
 }

And? UI make-up!

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

(Un)decoration!

(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

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 ...

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:

roundedbordersAndRadialGradientTransparent

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, &quot;mystagedecoration.fxml&quot;);

From classic to fancy look:

Code

Test it on your machine by clicking on this executable macJar

Access to the code, project and binaries here:github-logo-transparent

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!

80 Comments