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

Follow

Get every new post delivered to your Inbox.