JavaFX Real-World Apps: Monastery Disentis

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_text]

Finally the first “JavaFX Real World Apps” post that actually covers an “app” and not an “application”, meaning the first JavaFX application in this series that was designed for mobile devices and not the desktop. The application is simply called “Monastery Disentis”. It was developed by cnlab in Switzerland. It can be used by visitors of the monastery as a guide. Below you can see a couple of screenshots that were taken on an Android device.

Video: a screencast of the application.[/fusion_text][fusion_text]What is cool about this application is that everybody can try it out be following the links to the app stores, either the Apple App Store for iPhone users or Google Play for Android.

As usual I asked the development team a couple of questions and Daniel Zimmermann was nice enough to answer them below:

General Questions

What is the name of your product / project?

Monastery Disentis

Who are your users / customers?

Monastery of Disentis, Mustér, Switzerland.

What is the purpose of your software? What are its benefits?

Mobile app to guide the user through the monastery church.

Is the application operational? If yes, since when. If not when do you plan to go live?

Yes. It can be installed via the iTunes app store or Google play.

iTunes: https://itunes.apple.com/ch/app/hora-benedicti/id930800749?l=en&mt=8

Google Play: https://play.google.com/store/apps/details?id=ch.cnlab.horabenedicti

Development

How did you get the necessary JavaFX Know-How into your team? (Consultants, Internal / External training courses)?

Internal training.

With which version of JavaFX did you start? 1, 2, 8?

We started with version 8.

When did you start developing the application and how long did it take?

September, 2016, 6 Month with some pauses in between.

How many developers worked on it? In total and on the UI.

2 Developers in total. 1 exclusively on the UI.

How big is the application? Lines of code, Number of classes.

Lines of Code: 11000, No. of Classes: 113.

How big is the JavaFX client? Lines of code, Number of classes.

Lines of Code: 7500, No. of Classes: 51

Why did you choose JavaFX as frontend technology? And very importantly: why did you not choose HTML / Web?

The developer already knew Cordova, but wanted something else. The app‘s scope

seemed small enough to be used for it.

Was it difficult to convince decision makers to agree on JavaFX?

No. Since so we did not need to create two native apps with two developers.

What were the biggest challenges / problems / issues / bugs you faced in the JavaFX part and how did you solve them?

Rendering performance of Text nodes – heavily relied on asynchronous content loading and

lazy content display (in other words: lazily put it onto the Scene Graph).

Which 3rd-party products / frameworks / tools (open source and commercial) did you use and why did you choose them?

JavaFXPorts, Gluon Charm Down, ControlsFX, FontawesomeFX, jackson, commons-codec, Afterburner.fx, ScenicView.

Did you mix JavaFX and Swing code?

No.

Outlook

Would you use JavaFX again for your next project? Please elaborate why or why not.

Yes, but I will think twice for mobile, because the performance is not yet where it needs to

be on all platforms / phone variants.

Which recommendations do you have related to JavaFX for other companies / projects?

Not much, except for: Just give it a try. If you need platform independent Desktop

applications and/or don‘t want to rely on long-term browser support, this is a good and

good-looking alternative.

Which features would you like to see being added to JavaFX?

CSS closer to Web, faster CSS, improved layouting/API, faster text rendering performance.

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Advertisement

JavaFX Tip 24: Custom Layouts for Performance and Flexibility

I just finished a two month sprint on advancing CalendarFX and getting it ready for release 8.4.0. One focus of this sprint was on performance. There are many things that can influence performance but when it comes to JavaFX the number of nodes in your scenegraph and CSS styling are top candidates for optimisation. After reviewing the custom controls that ship with CalendarFX I realized that many of them used a lot of nested panes (BorderPane, VBox, HBox, GridPane) in order to achieve a specific layout. Nested panes result in a high node count and complex CSS styling instructions.

One simple example are the views that CalendarFX creates to visualize calendar entries in the DayView control. This control shows the 24 hours of a day vertically and places DayEntryView instances on them. These entry views look like this:

In the previous releases of CalendarFX the skin of the entry view used a VBox instance to lay out the two labels that show the title of the entry and its start time. That was the only purpose of the VBox. Doesn’t sound like a big issue but when your application starts to show hundreds of those entries then you end up creating hundreds of VBox instances, too.

The way to avoid this is to mange the positioning of these labels yourself and to implement / override the layoutChildren() method of the skin. Not only do we save one node but it also gives us more flexibility. We can now decide to hide or show the labels based on the available space. In the case of the DayEntryView we can decide to hide the start time label if the available height of the view is not big enough to show both labels. This kind of, may I dare to say it, “responsiveness” is not possible when using the out-of-the-box layout panes that are shipping with JavaFX.

The code of the layoutChildren() method of DayEntryViewSkin can be seen below.

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

    @Override
    protected void layoutChildren(
                               double contentX, 
                               double contentY, 
                               double contentWidth, 
                               double contentHeight) {

        // Title label.
        double titleHeight = titleLabel.prefHeight(contentWidth);

        // It is guaranteed that we have enough height to display 
        // the title (because "computeMinHeight" returns the min
        // height of the title label).

        titleLabel.resizeRelocate(
                snapPosition(contentX), 
                snapPosition(contentY), 
                snapSize(contentWidth), 
                snapSize(titleHeight));

        // Start time label (only show it when there is enough space).

        double timeLabelHeight = 
                           startTimeLabel.prefHeight(contentWidth);

        if (contentHeight - titleHeight > timeLabelHeight) {

            // make sure to set visibility to true again
            startTimeLabel.setVisible(true);

            startTimeLabel.resizeRelocate(
                    snapPosition(contentX), 
                    snapPosition(contentY + titleHeight), 
                    snapSize(contentWidth), 
                    snapSize(timeLabelHeight));

        } else {
            // Not enough space, hide the start time label.
            startTimeLabel.setVisible(false);
        }
    }

The nice thing about the layoutChildren() method is that it tells you exactly which space it is that your children nodes can use. The space is given by the four parameters contentX, contentY, contentWidth, and contentHeight. So there is no need to first lookup things like insets or padding. The “content” rectangle is the space that is available to you.

The second nice thing when writing your own layoutChildren() method is that you can utilize the snapXYZ() methods provided by the SkinBase superclass. These methods ensure that the child nodes will be sized and placed in such a way that they will appear crisp and not blurry. Why is this needed? Because JavaFX uses double precision coordinates to place nodes and unfortunately “int” coordinates are actually located between pixels on your display. So the snapPosition() method might take your x / y coordinate of 100 / 100 and change it to 100.5 / 100.5.

As mentioned before, the DayEntryView is a simple example. Obviously you can also create very complex layouts by overriding the layoutChildren() method. Did I always do this in the current release of CalendarFX? No, I did not. Very often I exchanged all those nested panes with instances of type GridPane, which does give you a lot of layout options but unfortunately no support for responsiveness.

Hope this has been helpful for some of you.

Happy coding![/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

JavaFX Real-World Apps: SkedPal

A new entry in the “Real World Applications” series. This time it is SkedPal, an application for managing a busy person’s life intelligently. I have been consulting the SkedPal team in matters related to JavaFX and also when they made the decision to start using the CalendarFX framework for their calendar requirements. Below you can see a couple of screenshots of this attractive application. If you want to try it out yourself then you can simply register on the SkedPal website and download the desktop client (they also have mobile clients).

I have asked Saied ArBabian, the found of SkedPal to answer a couple of questions related to their product, their development, and (of course) their use of and thoughts about JavaFX.

General Questions

What is the name of your product / project?

SkedPal

Who are your users / customers?

SkedPal is a publicly downloadable application made for busy professionals who need to schedule their work in order to better manage their time.

What is the purpose of your software? What are its benefits?

SkedPal’s key objective is to assist busy professionals to deliver their projects on time by scheduling all their work intelligently. It’s a SOA cloud-based application that includes a Narrow Artificial Intelligence scheduling engine in the cloud with a JavaFX client for the desktop and an iOS companion app.

Is the application operational? If yes, since when. If not when do you plan to go live?

We’re in public Beta since 2014. We’re into our 3rd pivot and getting closer to the sweet spot for our users.

Development

How did you get the necessary JavaFX Know-How into your team? (Consultants, Internal / External training courses)?

The team was familiar with Swing and it didn’t take too long to get on board with JavaFX in order to deliver the first version. The training process was internal.

With which version of JavaFX did you start? 1, 2, 8?

Started with version 2.

When did you start developing the application and how long did it take?

We have released two versions so far, and we’re in the middle of our third version. We started in late 2013, and had our first version released in Oct 2014. The second version was released in Jun 2015.

How many developers worked on it? In total and on the UI.

5 Developers in total. 2 exclusively on the UI.

How big is the application? Lines of code, Number of classes.

Lines of Code: 132,000, No. of Classes: 860

How big is the JavaFX client? Lines of code, Number of classes.

Lines of Code: 76,000, No. of Classes: 548

Why did you choose JavaFX as frontend technology? And very importantly: why did you not choose HTML / Web?

Our team’s experience was primarily in Java so in order to immediately get started to deliver a front-end application, it was a natural decision to go for JavaFX. In hindsight, a stronger developer community as it exists for HTML/Web could have been a huge help.

Was it difficult to convince decision makers to agree on JavaFX?

No, decisions in startups are made faster and easier than in enterprise environments.

What were the biggest challenges / problems / issues / bugs you faced in the JavaFX part and how did you solve them?

The high memory consumption of JavaFX was particularly a trouble area for us. The only way to resolve it was to consider the performance constraints in our next iteration design and limit our design to what works.

Which 3rd-party products / frameworks / tools (open source and commercial) did you use and why did you choose them?

Initially we used the MiG Java Calendar which was based on Swing code, and then we switched to CalendarFX for its better UI design and use of JavaFX instead of Swing. We developed our own MVVM framework to support our Service Oriented Architecture. It turned out to be a huge project of its own, and we might open source it at some point to contribute to the JavaFX developer community.

Did you mix JavaFX and Swing code?

Initially yes when we used MiG Java Calendar.

Outlook

Would you use JavaFX again for your next project? Please elaborate why or why not.
Which recommendations do you have related to JavaFX for other companies / projects?

We have made a significant investment in JavaFX technology both in terms of team’s experience over the years, as well as development of a complex MVVM framework. This is a strong reason to stay with JavaFX. On the other hand, we really envy the strong developer community that exists for the web apps and we can see how fast development can become once you have access to such communities with large portfolio of open source codes.

In addition, we’re facing severe issues when our users do not opt to update their client to the latest version. Distribution of JavaFX applications for Internet users is a lot more challenging than web based applications.

Which features would you like to see being added to JavaFX?

We’d like to see better performance (speed and memory.)

Do you plan to provide a mobile version of your application or a mobile addition?

We already have a native (Objective C) iOS app integrated into our SOA architecture. The mobile app and the JavaFX desktop apps work in tandem very well in our MVVM framework.

Shadow Fields vs. Property Accessor Interface

Carl Dea recently followed up on a blog post of mine called Save Memory! Use Shadow Fields for Properties. In his blog he suggested the use of an interface called “Property Accessor” to eliminate the heavy use of boilerplate code that is needed in order to use  shadow fields. Carl also mentioned that he hasn’t tested his approach with a lot of data and that he or some reader might follow up with a performance comparison. So here it comes.

I wrote a small test application that implements the three strategies that Carl mentions in his post:

1. standard properties that are instantiated at the same time when the class gets instantiated
2. property accessor interface as proposed by Carl
3. shadow fields as proposed in my recent blog post

The code can be found on GitHub. (when you run it please make sure to set the initial and the maximum heap size to 2048 MB -ms2048m -mx2048m, otherwise the memory allocations will mess up the results).

The application allows the user to execute these strategies either with or without asking for the properties. It measures the time spent and the memory used. It should be noted that the measurements are not scientific as I used System.currentTimeInMillis() and Runtime.gc(). When run several times I would still argue that the qualitative value of these tests are acceptable.

The first screenshot below shows the numbers you get when you create between 1,000 and 2,000,000 instances of the Employee class that Carl used for his blog. The tests do not ask for the properties that are available on Employee (name, powers, supervisor, minions):

As you can see the “shadow field” strategy is the fastest and also uses the least amount of memory. This makes sense as the “standard properties” strategy always creates those fat property objects and the “property accessor interface” internally manages a hash map for each model object. Only the “shadow field” strategy works with a minimal amount of data structures. In the case of the selected test it saves a total of 230 MB. If you now imagine that typical applications have many model classes and many of those much more complex than the Employee test class then you can imagine how much memory you can save.

The next screenshot shows the measurements taken when also accessing all four properties and observables inside the Employee class.

Now the “standard properties” strategy is the fastest and also the one that uses the least amount of memory. Once again, this makes sense, as this strategy now implements the perfect approach for the given use case. However, the “shadow field” strategy comes in at a very close 2nd place.

Conclusion

The “Property Accessor Interface” strategy is successful at reducing  the noise created by all the boilerplate code needed for shadow fields but it comes at a price that I believe is too high to pay for any application that creates more than just a few model objects.

 

 

P.S.: it should be noted that the comparison is even more in favour of the “shadow fields” strategy when the initial heap size of the JVM is left at its default setting. In this case the test app has to keep asking for more heap space which is quite an expensive operation.

CalendarFX In Action: SkedPal!

If you are interested you can now see CalendarFX live in action. As of version 1.7 the AI scheduling software SkedPal has replaced their Swing-based calendar (MigCalendar) with CalendarFX 1.3 for JavaFX 8. The result is a much more consistent look and feel and user experience.

SkedPal 1.7 with CalendarFX 1.3 – Day View

Week View

Month View

JavaFX Tip 23: Save Memory! Shadow Fields for Properties.

Properties and property bindings introduced in Java 8 are extremely useful programming concepts. They are especially useful when you are developing user interfaces. In fact they are so useful that developers have fallen victim to the idea that everything should be a property instead of a primitive. Unfortunately they easily forget that properties such as SimpleLongProperty are much bigger objects than standard types such as Long. And of course they are much bigger than primitive data types such as long.

In one of my current projects pretty much every model object used by the client is composed of properties. For many of these model objects it is the right approach because they will be edited / modified via JavaFX controls. But there are also many model objects that are not edited. They exist to support the rendering of schedules in the FlexGanttFX control. These objects do not need to be observed, hence they do not need to provide properties … but they do and they waste a lot of memory because they do.

One way to fix this would be to refactor the model classes and to get rid of all properties, but then again we might want to use these objects in a future release in a different context and then we might need properties because we want to edit them directly. What to do?

Shadow Fields

The solution to this problem is something I recently saw Gerrit Grunwald do in the code of his Medusa project and a pattern that was described by Mr. Properties himself Michael Heinrichs.  The pattern makes use of a “shadow field” that is of the same type as the wrapped object inside the property. When using this pattern a property will only be created when it is really needed (“when somebody asks for it”).

Example

In this example we want to manage an attribute called “title”. We need a setter, a getter, and the property accessor.

private String _title = "Untitled"; // shadow field

private StringProperty title;

public final String getTitle() {
    return title == null ? _title : title.get();
}

public final void setTitle(String newTitle) {
    if (title == null) {
        _title = newTitle;
    } else {
        title.set(newTitle);
    }
}

public final StringProperty titleProperty() {
    if (title == null) {
        /// !!!! pass shadow field to constructor
        title = new SimpleStringProperty(this, "title", _title);  
    }

    return title;
}

By using this pattern I was able to bring down the memory footprint from 310 MB to 250 MB for a specific use case in my project. The saved memory is ten times the total memory my computer had when I was a student. Just think about that!

JavaFX “Missing Features” Survey Results

I recently conducted a survey asking the community to tell me which features they are missing the most in JavaFX 8. The survey has been closed by now. It received over 100 submissions from various people, various companies, various industries. Overall the participants very quite satisfied with JavaFX so I would argue that the feedback was submitted by people who really care about the platform and would like to see it evolve over time.

The following chart shows the exact distribution of the answers given by the participants when asked how satisfied they were with JavaFX.

Categories / Issue Areas

The feature requests can be roughly grouped into these categories:

• Table View
• Performance
• Quality
• Properties
• CSS & FXML
• OpenGL & 3D
• Media
• Missing Controls
• Missing API
• Other

I will try to create a blog for each one of these categories over the next couple of weeks. So stay tuned!

JavaFX Real-World Apps: PSI Advanced Scheduling and Monitoring

I am happy to announce that there is a new entry for the “Real-World Apps” list. The company PSI has developed an application for “advanced scheduling and monitoring”.

The software will be used by the manufacturing industry. The screenshots look quite polished and attractive. PSI is one of the earliest adopters of FlexGanttFX, my JavaFX framework for visualizing schedules of any kind.

PSI – Operation Gantt

PSI – Operation Detail

PSI – Production Order

PSI – Report

PSI – Structural Gantt

As usual I have done an interview with the developers. Michal Bocian (Development Manager) and Dobieslaw Chabrzyk (MES Product Manager) of PSI were kind enough to provide the answers.

General Questions

What is the name of your product / project?

PSI Advanced Scheduling and Monitoring

Who are your users / customers?

Customers: manufacturing industry in following areas:

• Serial production
• Metal re-working
• Made-to-order constructions

Users:

• Production schedulers
• Shop floor stuff
• Production managers

What is the purpose of your software? What are its benefits?

Purpose:

• Scheduling and execution monitoring of production process

Benefits:

• Reduce manufacturing costs
• Reduce work in process
• Improve customer service
• Lower implementation and maintenance costs compared to existing IT solutions

Is the application operational? If yes, since when. If not when do you plan to go live?

Official go to market is planned for April 2016.

How big is the budget for your project?

A few hundred thousand euros.

Development

How did you get the necessary JavaFX Know-How into your team? (Consultants, Internal / External training courses)?

Mostly from the Internet (StackOverflow, Official APIs etc).

With which version of JavaFX did you start? 1, 2, 8?

JavaFX 8.

When did you start developing the application and how long did it take?

We started the development around April 2014. The development lasts till now.

How many developers worked on it? In total and on the UI.

We have 5 developers working on both server and client side.
We have 1 developer who is adjusting our CSS.

How big is the application? Lines of code, Number of classes.

230,000 Lines of Code, 2000 Classes.

How big is the JavaFX client? Lines of code, Number of classes.

190,000 Lines of Code, 1600 Classes.

Why did you choose JavaFX as frontend technology? And very importantly: why did you not choose HTML / Web?

PSI is specialized in creating applications based on the Java platform. JavaFX is the natural successor of Swing. We were considering HTML / Web for the frontend – but because of limited performance we had to give up for now. Our application needs to hold about 500,000 complex domain objects in memory to perform extraordinary parallel calculations on them.

Was it difficult to convince decision makers to agree on JavaFX?

No, it was easy. Our company is specialized in Java technology – especially in Swing. JavaFX is the choice for company like ours.

What were the biggest challenges / problems / issues / bugs you faced in the JavaFX part and how did you solve them?

We’ve found some bugs in JavaFX but none of them were critical nor major. We reported them on JavaFX’s bugtracker, and we are waiting for the fixes. Meanwhile we did some temporary workarounds.

Which 3rd-party products / frameworks / tools (open source and commercial) did you use and why did you choose them?

• FlexGanttFX – because of modularity, quality and performance.
• Eclipse E4 – because of window manager and dependency injection.

Did you mix JavaFX and Swing code?

We’ve tried it once, but we had to give up. It is stable when used in static layouts, but when the user tries to perform complex interactions with the UI, many unusual bugs take place.

Outlook

Would you use JavaFX again for your next project? Please elaborate why or why not.

In our case JavaFX was the only choice we had. Our application needs a lot of memory and it has to be multithreaded. If you combine these two requirements with the server written in JavaEE – JavaFX is the only choice. If our application had different non-functional requirements we would probably create our application in HTML/Web.

Which recommendations do you have related to JavaFX for other companies / projects?

If you consider JavaFX as your potential platform, check if all the special and non-standard UI requirements are meet.

Which features would you like to see being added to JavaFX?

At the moment we are suffering from a lack of good date and time picker.

Do you plan to provide a mobile version of your application or a mobile addition?

Yes, but since our product needs a lot of resources, we plan to deliver simplified application (e.g. without interactive Gantt chart).

JavaFX Real-World Playlist

I finally found some time to create a YouTube playlist with all the “Real-World” JavaFX applications that Alexander Casall and I presented at JavaOne 2015. Maybe you can find some inspiration.

The videos show the following applications:

• EIZO – Curator Caliop
• Emirates Airlines – Network Capacity Optimization
• AISO – HRC-Matic Business Registry
• European Broadcasting Union – NEOS
• MINT Software Systems – Training and Resource Management (TRMS)

Enjoy!

JavaFX: The Power of CSS

I recently presented the NEOS application that was developed for the European Broadcasting Union. Now that a few weeks have passed the UI has been polished and a lot of work was invested into styling it via the CSS support of JavaFX. I really like the results and thought it would be good to show you.

After

Editing a Transmission

Searching for Transmissions

Editing a Resource

Before