The demo is published on this page.
This is the first basic demo and perhaps one of the simplest JavaFX application you can write beyond Hello World. Its main purpose is to highlight the essential features of WebFX, and to propose a starting frame for developing WebFX applications.
This demo has a decent start time, and a quite small footprint (87 KB download) despite the big size of the JavaFX library. This is achieved mainly thanks to the dead code elimination (DCE) feature of GWT. The WebFX architecture is designed to make this DCE efficient and only the part of the JavaFX library required by your application will remain in the final web application.
The main job of WebFX is to map all nodes of the JavaFX scene graph into HTML elements of the browser DOM. If you inspect the demo DOM in your browser, you will recognize the JavaFX scene graph structure (nodes have the "fx-" prefix, for example: fx-scene, fx-group, fx-circle, etc...).
This demo is an example of how you can easily reuse existing pieces of code written in JavaFX in a WebFX application. In this case, we reused this original code of the Oracle demo and slightly modified it, so the circles better fit in the browser window (because on the web platform, the window is sized by the browser, whereas on the JavaFX platform the window is sized by the code). Here is the resulting code of this demo.
Although WebFX is focusing on the web platform, it can be combined with other JavaFX tools to produce executables (including native) for all other major platforms. This means that you can write WORA (Write Once Run Anywhere) applications with WebFX and target all these other platforms at the same time from a single source code.
For example, this demo has a Github workflow triggered on each push on the main branch that automatically generates the executables for Windows, MacOS, Linux, Android & iOS and upload them in the assets of the current SNAPSHOT release. This workflow also copies the result of the GWT compilation into the web-build branch that Netlify uses as the source for the live demo. In this way, the live demo is also automatically updated during this process.