We're happy to announce our first beta release of JVx' JavaFX UI with version number 0.9

The release is two weeks later than planned but we had some extra tasks to do. We didn't set 1.0 as version number because we have some open tickets which are important, in our opinion, for 1.0. The 0.9 beta is already feature complete with some known bugs.

We also released an extra library: JFXtensions
It contains all standalone controls and extensions which are independent of JVx. The MDI system, our layouts, styled scene and much more.

Here are the download links:

• JVxFX UI & JFXtensions
• DnDTabPane (dependency for JVxFX UI)

All libraries are available on maven central as well.

We've released DnDTabPane as external lib on maven central, because it wasn't available and our UI needs the dependency. The DnDTabPane is licensed under EPL 1.0 and JVxFX UI, JFXtensions are Apache 2.0 licensed.

The DnDTabPane is still based on Tom Schindls implementation for Efxclipse.

We've a very cool video of our work during the last 4 months. It's the visualizaton of our dev repository:

Developer Information

The dev2015 branch was merged back to trunk. If you're working with our branch, please switch to trunk.

This article is about our new Research project: Application Coder.

The application is a very simple Java Code Editor. It shows a tree with Java files and has a Code Editor for modifying files. The code editor is the popular Ace Editor and we use Eclipse JDT for java compilation. The application was written as standard JVx application with vaadin UI.

We made tests as single-page vaadin application, embedded with iframes and embedded with div areas. All versions work without problems but the last one is preferred. If you embedd a vaadin application with divs, it's a little bit tricky because you have to configure the client-side on your own, but you get full access to the whole html page. This wouldn't be possible if you use an iframe because you can't access the main html page.

Some cool features of our editor are: error annotations and error markers. And the best feature is our LIVE Preview of code changes!

Annotations and marker

Our coder application has a push mechanism and reloads every preview window automatically and immediate after compilation.

Above video shows multiple instances of our coder application, embedded in divs and it's possible to drag around and resize the applications (thanks to jquery-ui).

The application is a perfect showcase of JVx because it's not a database application as many other JVx applications. We've used vaadin, jquery-ui and vaadin-addons to create a great UX. JVx is technology independent and open for other technologies.

JavaFX doesn't define a specific model for table or tree. The implementations are based on ObservableList which is not more than an extension of standard List interface with some additional listeners and sorting, filtering. The general design doesn't take care of one important feature: Lazy loading of records.

This is an important feature if you're working with databases or large datasets. If you have millions of records, it's not a good idea to show all records in your GUI. You shouldn't load more than needed and of course, not more than the user is able to handle.

We have a model in our JVx framework which supports lazy loading of records (not only database records). To use our model with JavaFX, we had to do some Trial and Error because an ObservableList is too lightweight. Sure it wasn't a problem to simulate more entries than the list really had. This was needed to load records on demand. If a "virtual" element was requested it was simply loaded from the datasource. Sounds simple enough. To be honest - it was that simple!

A bigger problem was the scrollbar handling of the controls because it didn't set the scrollhandle position correctly after loading "virtual" records. We didn't find a perfect solution for this problem but our current solution works and is user-friendly enough. We've used our JVx model implementation for TableView and TreeView.
Means: One model for all UI controls.

A simple screencast of our test application is available on YouTube. The video shows a simple TableView which loads records from a remote server via http. The remote server reads data from a HSQLDB. The table contains 317027 records with filenames and additional filesystem information. The remote server returns exactly 100 records, per request, for our test application.

We have the same lazy loading mechanism for TreeView.

Our implementation was done for JVx' model (IDataBook), but the mechanism should work with any other model definition. The complete source code is available in our dev repository. Simply start with ObservableDataBookList.

Trees are always tricky, because it's not easy to fill a tree with data. The problem is not the tree itself, but the preparation of data for the three. It's easy if your data is structured or if you have only few records to prepare. If you have differnet datasources, it could be very tricky to build a tree.

The official tree documentation from Oracle has some examples.

It's boring to create trees because it needs a lot of boilerplate code - per tree. You need more boilerplate code if your trees should be editable.

We solved the "boilerplate code problem" with JVx and the active model implementation. I'll show you a simple example with a self-joined database table. The database table contains all filesystem folders of our Linux test VM.

The table was created with following statement:

Not really tricky. The table contains an unique identifier, the folder name and the identifier of the parent folder. A simple self-joined table.

The UI code for the tree:

Short and no boilerplate code!
The missing piece is the createDataBook() method, because it defines the access to our database table:

The code is similar to other examples likeJavaFX, JVx and data binding or Plain JDBC vs. DBStorage.

The tree will look like this one:

Self-joined tree

The whole source code is available in our dev branch.

Above test application reads records from a remote database via http, but it could also use a memory databook without database access, like this one:

An example with a MemDataBook is available in our kitchensink application.

The current update release of VisionX 2.2.135 is available for our customers or as trial. It's a smaller update release with two important new features:

• Vaadin 7.4.2

  We've bundled vaadin 7.4 with our application and you can use all available features of vaadin 7.4. We currently don't use new Grid component of vaadin 7.4 because it's not implemented in our vaadin UI. We'll replace the Table with Grid as soon as possible.

• Corporation view

  This awesome view is now available out-of-the-box. Simply enable the design via web application settings screen.

The rest are fixes for smaller bugs:

• Support for username/password in Oracle JDBC Url
• protected access instead of public, for DBAccess
• Support all web setting in live preview (corporation design, navigation, mobile)
• Support for loading resources form public content area
• Don't delete unknown events from source file
• Designer update for better free-form layouts

Have fun with VisionX 2.2.135.

We started with our JavaFX UI in January and we are on the home stretch!
All features were implemented and we have some Feature Requests and known Bugs in our Ticketing system and some open Issues in the JavaFX ticketing system (JIRA, at the moment).

At the beginning we thought that 2 months will be sufficient to implement the whole UI We were very optimistic but not far away from the reality but we didn't know that JavaFX had a lot of missing pieces.

Missing pieces?

Don't get me wrong, because JavaFX is an awesome UI toolkit and will be a perfect replacement for Swing, but it needs some real world applications. Yes, applications and not fancy hello world examples. Sure, there are some great applications but most use custom controls because of problems with standard controls. The overall performance is still not perfect and there's still a lot of tuning potential. Currently a swing application acts faster without delays.

The biggest problem for us was that standard controls like Toolbar, Menus didn't work as expected and other controls like DesktopPane or Internal Frame weren't available. We didn't find a date + time combobox editor. Some standard controls like Button, CheckBox or RadioButon didn't offer specific alignment options and another problem was the coding philosophy because many useful methods are public final or private. You can't replace internal listeners or remove internal listeners because you can't access all list elements.

But this article shouldn't cover our development problems because many of them will be solved with Java8 u60 and we have custom controls for the rest. Currently we have many useful classes for our UI and also for you, because we tried to implement all extensions independent of JVx. This article gives a short overview.

Re-usable controls and classes

• FXSelectableLabel

  A selectable label, like RadioButton or CheckBox.

  

  FXSelectableLabel

• FXMonthView

  A simple month pane.

  

  FXMonthView

• FXDateTimePicker
  

  FXDateTimePicker

• FXButton, FXCheckBox, FXRadioButton, FXToggleButton

  Better alignment control for the text:

  

  FXButton

  

• FXImageChoiceBox

  A multi-state control with image representation of selected value.

  

  FXImageChoice

• FXNumberField

  Only accepts numbers.

  

  FXNumberField

• FXPasswordField

  Optionally shows a custom character instead of the bullet.

  

  FXPasswordField

• FXTextArea

  A TextArea with horizontal alignment support.

  

  FXTextArea

We have some additional classes without images:

• FXNullPane

  Acts like a Swing panel with null layout.

• FXSceneLocker

  From the javadoc: The FXSceneLocker is a static helper utility that allows to to lock a Scene, meaning that only events that belong to the locking Node or its children are processed. If a Scene is locked by multiple Nodes, that last one does receive events.

You'll find all other utilities and controls in the dev repositoriy. The ext Package is independent of JVx. We use it as base for our UI implementation.

We had a lot of fun this week - with JavaFX

My last article was about JavaFX on mobile devices with JavaFXPorts. It was awesome that JavaFX worked without bigger problems on mobile devices but the number of needed re-deployments was high. The app build process needs some time (~2-3 mins) and if you do a lot of UI related changes in your application (CSS, layout, ...) you lose development time.

How to save deployment time?

Simply don't deploy!

We have our product VisionX and it has a Live Preview for applications while developing. Our idea was that we could use the existing functionality to show changes on mobile devices immediately. It should work with Android devices because dynamic class loading is possible with custom classloaders.

But as so often, things won't work as expected.

Android has support for URLClassLoader but it doesn't work because the implementation is "legacy" . This means that loading classes with URLClassLoader didn't work. Android has a DexClassLoader!

The DexClassLoader works great if you have the archive on the device. But it has no support for remote class loading. The other thing was that DexClassLoader needs a jar that contains a classes.dex archive. The classes.dex contains all class files (in dex format).

The first problem was: How to create the DEX archive?

Not too hard because Android comes with dx.bat and dx.jar. It's super easy to convert a jar file or a classes folder to a dex archive. After the hardest part was solved, it was simple to implement remote class loading with Android, for our JavaFX application! If you need more information, leave a comment!

Here's the result of our Live Preview experiment as Video:

It works great and reduces deployments to a bare minimum: 1

A few hours ago, we published a screenshot from our Demo ERP application running on Nexus 9 (an Android tablet).
It wasn't a fake!

Use JVx and write an application for all polpular platforms and devices.
This is real "write once run anywhere".

Create an application for Windows, Linux, Mac, iOS, or Android, PS4, OUYA or WiiU. Run it as desktop application, as html5 application in web browsers, as native iOS or Android application or as JavaFX application on Android and iOS devices. There's nothing like JVx in the world - not with only one framework with such a small footprint as JVx and certainly not Open Source!

Here are the screenshots:

Maximized frame with charts

Frame with tree

Also in portrait mode:

Portrait mode

Styled stage

Sure, the application wasn't optimized for mobile devices. It has the same style as the desktop application. The mobile version should have bigger frame buttons and a bigger frame header To be honest - MDI on mobile devices? We were positively surprised about the usability. But, whatever. You have the option and decide what's best for your application (but please don't use MDI for smartphones).

Are you interested in some details?

We've used Netbeans IDE because there's a very useful plugin from gluon. We're Eclipse users but it was easier to use a preconfigured environment without doing everything manually. It was simple to configure Netbeans with gluon plugin and there's a video for your first steps. A "bigger" problem was gradle because the project was a gradle project and we've never used gradle. We love using ant.

We had a bad start with Hello World application because it didn't work. There were different problems: Missing ANDROID_HOME or DEX compiler problems. After reading the documentation it was possible to start compilation. The DEX problem was very strange because we had JVM 1.8 u31 and JVM 1.8 u40 configured in Netbeans, but Netbeans didn't use our configured JVM 1.8 u40. We removed the JVM 1.8 u31 from Netbeans and after that we successfully compiled our Hello World application. Very strange!

The next step was using JVx as library dependency for our project, but how did this work with gradle? We had the library in the libs directory of the project, in the file system. We didn't use a maven lib because it was easier to replace the library after recreation. We tried to find a solution in the official gradle documentation and found Chapter 51. C'mon gradle is a build tool and not a programming language! So much documentation means: complexity. Sure, ant wasn't the holy grale but it it's simple to understand and doesn't hide anything.

Our current gradle script:

It's short but we ddin't know what happened behind the scenes without additional research. But if it works it's good enough for many developers.

The integration of JVx was simple because JVx was compiled with JVM 1.6. The Dalvik VM or DART do support 1.6 and 1.7 syntax. It was cool to see that JVx and especially the communication worked without problems - Great job from Johan Vos and all people behind JavaFXPorts!

Our next step was the integration of additional dependencies like our JavaFX UI. It was based on JVM 1.8 u40 and heavily used lambdas. But lambda expressions weren't supported from Dalvik or ART. We thought that gluon plugin solves the problem for us, but it didn't. It contains retrolambda but only for project source files and it doesn't touch your dependencies. There was no additional gradle build task for that, so we had to convert the libs manually. Not a problem but you must be aware of it.

After we solved all dependency problems, we had the first version of our desktop ERP running on our android device. But don't think everything was trouble-free. We had problems with method references, Java Preferences because of write problems, new Date API, forEach calls, scene size and much more. We did solve most problems but not all - yet.

In my last article about JavaFX, JVx and data binding you saw a first impression of our chart binding. We have additional screenshots for you. The first two images show a Swing application with different charts. The next two images show the same application, with JavaFX. Which UI do you like more?

Bar chart with Swing		Line chart with Swing
Bar chart with JavaFX		Line chart with JavaFX

The JavaFX UI is clean and fresh. It looks modern compared to Swing. A desktop application should look modern and not dusty!

How about the data binding?

Our screen has two charts. Every chart gets its records from a data book (our model class). The labels and values are dynamic and every change in the databook updates the chart. Here's the source code for the chart definition:

The complete source code is available on sourceforge. It's from our Demo ERP application.

The databooks are remote databooks because our Demo ERP is a 3-tier application. The databook definition:

Both remote databooks are connected to a remote storage, identified by name (v_statistic_order_offer_year, v_statistic_order_offer_month). The storages are defined as server objects:

Both storages read data from database views (instead of tables). The views are not magic and could also be simple tables, but our Demo ERP has views for demonstration purposes.

Here's the definition of the view, used for the BAR chart:

That's it. It's really simple to bind a JavaFX chart to a database table or view.

Our new application frame has two different vaadin menubars. One for the application menu and one as "hidden" menubar for the user options.

Here's a merged screenshot of both menubars:

Menubar popup

As you can see, the left popup is dark and the right popup is bright. Usually, vaadin doesn't allow custom "additional" style definitions for menubar popups. The default style name is:

v-menubar-popup

The name is defined in the class com.vaadin.shared.ui.menubar.MenuBarState as

If you want to add an additional style class, it's simply not possible because the client implementation (com.vaadin.client.ui.VMenuBar) sets the primary style name, from the menubar, as style name for the popup overlay. The only thing you can do is, to change the primary stylename of your menubar. The problem is that you have to define all styles for the menubar-popup and menuitems, submenus, ... again in your style file. We tried it but it was horrible because you can't easily change the theme.

We tried to find a solution without changing vaadin client. We tried to set a primary style name as e.g. customstylepopup v-window-popup. But the client menu implementation has following code in getPrimaryStyleName:

(it makes sense to do this!)

So, it wasn't possible with simple tricks. The only solution - we found - was an extension of VMenuBar to override getPrimaryStyleName and return a custom style class concatenated with the default style class, something like this:

It wasn't our preferred solution, but we had another hack for setting ids of menu items. So it wasn't hard to add another hack for the style name

With our modification, it'll be possible to add custom style classes to menubar popups:

Custom style names

The source code is available on sourceforge.