Archive for category JavaFX

ThreeDOM: SceneBuilder in liberty and in 3D!

My summer Experiment!

As a first project to learn JavaFX 3D APIs, I’ve chosen to implement this fancy feature, inspired from FireFox.

So, please welcome, ThreeDOM, the 3D viewer of flat 2D user interfaces!

Use 3D when 2D reaches its limits!

ThreeDOM creates a 3D representation of a 2D Node hierarchy, using textured Box nodes. It supports 3D rotation, translation and throws mouse events that can be handled by the host application.

Why 3D?

We can distinguish 2 use cases:

Static visualization

For that, I created a sample using the excellent SceneBuilder Kit, and it helps to:

  • Understand Complex layering
  • Investigate bad performance,
  • Facilitate nodes arrangements,
  • Easily grab “hidden” components to edit them.

Dynamic for application analysis

  • Like ScenicView displays all nodes details, ThreeDOM displays your applications in a 3D space. With this new capability you’re able to analysis the “depth” of your UI, and so optimize it…

What’s next?

I’ll post the code soon, so you will be able to play with it.

For a better integration with SB-Kit, it would require API extensions like graphical model listeners, snapshot capabilities, editing notifications… Or even better: a native integration into SceneBuilder! Hey fabulous SB team, are you there? :-)

Have a great Summer FX!

 

,

5 Comments

Undecorator for Java 8

Hi,

Little update to make Undecorator running on Java 8.

Lesson learnt: Panes are now opaque (Modena?).

Jar is here and works for both Java7 and Java8. Sources have been updated on GitHub.

Have fun!

Java8

2 Comments

aLive is alive!

alive icon native v3

aLive is a free playlist manager software written in JavaFX.

It’s an application I wrote (in my free time :)) to help music bands to organize rehearsals. As musicians, we often need to know, “Who’s playing on what?”, ”Where are the tabs, the lyrics…?”,“What is the total length of the playlist” etc… The basic aim is to simplify the presentation of classical playlists that are usually described in an Excel file. In addition, I took the opportunity to include fancy features provided by the Java/JavaFX platforms. I also reuse my two previous project Undecorator and iBreed.   Current version is delivered as native installers for Mac and Windows (I don’t have Linux distrib on my computer). Now, Feel free to test it even if you’re not familiar with musical activities :-).

For Mac                                                     For Windows

The principle

3 main screens:

The playlists:

The data source of a playlist is currently an Excel file (xls or xlsx). A built-in playlist is provided for demo purpose. Once your playlist opened, you access to all songs of the playlist and you can modify them. This file could be local or downloaded from an URL (read only mode).

Playlists

The songs:

This screen displays all songs with their respective order, length and color syntax from original excel file. You can filter the songs list by keywords (title, key, who plays on it…). You also can add and remove songs. Playlist

The song

Here the “main” screen which displays all details of the Song. Basically, each column of a song row in the original Excel file is bound to a field of this screen. This is a bidirectional binding, if you modify the text of a field in this screen, it will later be saved in the Excel file. If you have custom column in your playlist file you want to display, e.g. “Style”, you also can display this custom column in the 2 remaining fields by simply typing “Style” in the editable part. The media panel supports all audio files supported by JavaFX. It also supports URL, in this case a WebView will be used to render the media. song  songMedia

I want to manage my own playlist file!

As a starter kit, in the first screen click on “save” button of the demo playlist, then a “save as” dialog will appear. Select a target location, and aLive will write all the data used for the demo (xls, mp3, tabs, custom screen sample). Now, feel free to edit you own based on these files. The demo file is also editable, and if you modify its content and come back to first screen or quit, the same “save as” dialog will be shown.

Customize the song screen

This feature is not user friendly (yet), since you have to use an external tool to edit it. The principle is simple; all dynamic fields in the screen are linked to a column in the Excel file. This is done using the “JavaFX CSS Id” that points to a column name. custom Ok, let’s try… When saving the demo playlist folder from first screen, a “custom_Song_Screen” folder is created. Use this folder as an example of custom song screen. You will find the song.fxml file in it and you will need SceneBuilder 1.1 tool to edit it correctly. Once done, you can specify your own song screen through the Preferences dialog.

prefs

 

 

In future version, I’ll include part of the Scene Builder Kit API in order to directly edit the song screen in the aLive application without editing it with an external Developer tool.

Next steps

Enhance the User Experience! Add some great controls such as ControlFX ones…
Customize Native installers.
Upload aLive to the Apple AppStore.
I would like this app to run on iOS/Android devices, so there’s still some work to do there…

 

My near future

I’ll do a little break on that project, waiting for your feedbacks!
Now, I will adapt all my other sub projects to Java8.
Once done, I’m excited to begin my brand new project based on 3D capabilities of JavaFX.

  Stay tuned!

2 Comments

aLive: App for Musicians

Hi all,

I’m proud to present you my very last app, named:

aLive

Here is the (very fast!) teaser of this incoming JavaFX application for musicians. This tool is designed to make it easier for all musicians to manage their playlists for rehearsals and/or live concerts.

The details of this free application will be posted soon.

Technically, this app is fully based on Java platform (7u51) with a JavaFX front-end.

Feel free to comment and stay tuned for the first release!

Thanks.

Leave a comment

Undecorator – Automn enhancements

Hi Folks!

For my next application development I needed a refresh of the Undecorator helper, so here are the details of the enhancements:

Title bar

Image

Title bar label

 

How to display the title set on the stage:

public void start(final Stage primaryStage) throws Exception {
primaryStage = stage;
// Set the title before to create the Undecorator class
primaryStage.setTitle("Undecorator Scene Demo");
UndecoratorScene undecoratorScene = new UndecoratorScene(primaryStage, root);

New dock feedback

And many issues fixed… and found :-):

      JavaFX bugs  (Mac only):

  • Set stage as fullscreen using Keyboard accelerator (Ctrl+Cmd+F) crashes JVM
  • KeyCombination does not respect keyboard’s locale (i.e. always QWERTY key code)
  • Multi screen: On second screen JFX returns wrong values, e.g. MinY ==300 (?!)

Check this out!

Executable jar file is still here:  macJar

and to access to the code, project and binaries it’s still there:github-logo-transparent

That’s all for today and stay tuned for my next JavaFX App announcement :-)!

26 Comments

Undecorator – update

Back to Undecorator, with little code cleaning, bug fixing and comments added.
As mini feature, a direct access to fullscreen mode via a button in the window “title” bar:

Fullscreen button on title bar

Fullscreen button on title bar

The UndecoratorSceneDemo and UndecoratorStageDemo now includes an example for the UTILITY stage mode.

As a reminder the difference between those 2 demos are:

  • UndecoratorStageDemo: Use directly the Undecorator class as an helper to enhance your existing apps
  • UndecoratorSceneDemo: Use the UndecoratorScene class which replace your Scene, code is more simpler.

To see the Utility stage mode, just press the “Show Utility stage” button and…

Show utility stage button

Show utility stage button

An undecorated utility stage appears with its capabilities.

Utility window

Utility window

Try!

Executable jar file is still here:  macJar

and to access to the code, project and binaries it’s still there:github-logo-transparent

Still to investigate:

  • Behavior with Java8 (visual artifacts)
  • Menus are not displayed on fullscreen mode on MacOS: They are displayed “under” the main window.

Stay tuned ’till next update :)
Have a nice summerFX to you all.

A.

7 Comments

iBreed: Hybrid application framework for JavaFX/HTML – Part I

iBreed: Part I

A new episode on my JavaFX UI series articles.
For the application I’m currently developing, I’d like to have a nice window decoration so I worked first on the “Undecorator” series. Now, I need to mix HTML5 content in my JavaFX app so I decided to create a light framework to facilitate this hybrid ecosystem.

So, please welcome: iBreed!

iBreed is a light framework for hybrid JavaFX/HTML5 applications.

Why hybrid?

To use the best of both worlds! Leverage the JavaFX platform (desktop integration, file system, back-end, Frameworks, gestures…) mixed with the HTML5 “universal” content.

The goal of iBreed

Mixing technologies is not a recommended approach. Now days, things are going fast and reuse instead of rewriting could be a tactical and interesting step.
And with JavaFX, this is possible ☺!
More than a mixing framework, it should be “fused”. Combining JavaFX and HTML technologies means bringing the same experience to the end-user: same look and feel, same fonts, unique drag and drop… i.e. the user interface must look uniform, no visual difference between HTML and JavaFX parts (e.g. no URL loading progress bar ☺!).

At current stage, here is what iBreed could bring to you:
1. A ready to run executable JAR to quickly test your HTML pages in a JavaFX context.
2. A WebView “injector” class with all implemented handlers (dialogs, Java Script bridge…)
3. A polished windowing system for hybrid applications.
4. A test HTML page with examples of interoperability (dnd, JS 2 Java…)

Note: Since I based the windows look on a flat style, I incorporated JMetro style as the root CSS of all Scenes (BTW, great work from Pixel Duke http://pixelduke.wordpress.com, available in JFXtras 2).

Try it out!

To Hybrid your App, take a look at the IBreedSkeleton class (https://github.com/in-sideFX/iBreed/blob/master/src/demoapp/IBreedSkeleton.java) that contains a minimal implementation. This “skeleton” provides an “undecorated” Stage with a customized WebView (WebViewInjector) fused with a basic JavaFX pane. Of course, include the iBreedDemo.jar (or get Undecorator.jar + iBreed.jar from repo) into your project.

public class IBreedSkeleton extends Application {

    @FXML
    private WebView webView;
    @FXML
    private TextField urlTxt;

    UndecoratorScene undecoratorScene;

    // The bridge object
    JavaScriptBridge javaScriptBridge;

    @Override
    public void start(final Stage stage) throws Exception {
        Pane root = null;
        // UI part of the decoration
        try {
            FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("ibreedskeleton.fxml"));
            fxmlLoader.setController(this);
            root = (Pane) fxmlLoader.load();
        } catch (Exception ex) {
            System.err.println(ex);
        }

        // Add Chrome
        undecoratorScene = new UndecoratorScene(stage, root);
        undecoratorScene.setFadeInTransition();
        setAsHybrid(stage);
        stage.setTitle("iBreed");
        stage.setScene(undecoratorScene);
        stage.sizeToScene();
        stage.toFront();
        stage.centerOnScreen();

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

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

        stage.setWidth(undecorator.getPrefWidth());
        stage.setHeight(undecorator.getPrefHeight());
        if (undecorator.getMaxWidth() > 0) {
            stage.setMaxWidth(undecorator.getMaxWidth());
        }
        if (undecorator.getMaxHeight() > 0) {
            stage.setMaxHeight(undecorator.getMaxHeight());
        }
        stage.show();
    }

    /**
     * Customize the user interface for hybrid application
     *
     * @param stage
     */
    public void setAsHybrid(Stage stage) {
        // The generic object for JS and JavaFX interop
        javaScriptBridge = new JavaScriptBridge(webView.getEngine());
        javaScriptBridge.fromJSProperty.addListener(new ChangeListener<String>() {
            /**
             * Invoked when JavaScript sends a new message
             */
            @Override
            public void changed(ObservableValue<? extends String> ov, String t, String t1) {
                System.out.println("Something changed on Java Script side...");
            }
        });

        // Inject WebView customizations (handlers...)
        WebViewInjector.inject(stage, webView, javaScriptBridge);

        // Default URL to load
        final String url = getClass().getResource("page_skeleton.html").toExternalForm();
        webView.getEngine().load(url);

        // Reflect the current URL in the text field
        webView.getEngine().getLoadWorker().stateProperty().addListener(
                new ChangeListener<Worker.State>() {
            @Override
            public void changed(ObservableValue<? extends Worker.State> ov,
                    Worker.State oldState, Worker.State newState) {
                if (newState == Worker.State.SUCCEEDED) {
                    urlTxt.setText(webView.getEngine().getLocation());
                    urlTxt.setStyle("-fx-background-color:white;;-fx-border-color: #bababa;-fx-border-width: 2px;-fx-border-style: solid;");
                    // urlTxt.setStyle("-fx-background-color:white;");
                } else if (newState == Worker.State.FAILED) {
                    urlTxt.setStyle("-fx-background-color:red;");
                }
            }
        });
    }

    /**
     * If user enters new url
     *
     * @param event
     */
    @FXML
    private void onUrlTxtChanged(ActionEvent event) {
        String url = urlTxt.getText();
        webView.getEngine().load(url);
    }

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

Visual result is:

iBreed skeleton window

iBreed skeleton window

IBreed demo

I also delivered a more complete example as a test “suite” for my hybrid application.

You can execute it by clicking on this icon:  macJar

This sample covers:
• The 3 main popup types (prompt, confirm, alert)
• The external “browser” window popup type
• Basic drag and drop
• The two ways communication (Java to JS and JS to Java).
And it looks like:

iBreed Stage

iBreed Stage

Video:

Takeaway

All sources and binaries are here: https://github.com/in-sideFX/iBreed/blob/master/

What’s next?

I’ll enrich iBreed by:
• Providing a consistent Look and feel (CSS) across the app: Stage, JavaFX Node’s skin, HTML CSS.
• Delivering more helpers (dnd…)
• Adding fancy effects for html page loading
• Fixing some “bugs” and performance issue on Windows using Java 8 (big fonts, Stage resize is slow…)

Thanks for reading and feel free to comment!

7 Comments

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!

6 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!

, ,

1 Comment

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

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!

(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, "mystagedecoration.fxml");

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!

36 Comments

Follow

Get every new post delivered to your Inbox.