{{ !articles[0].partner.isSponsoringArticle ? "Platinum" : "Portal" }} Partner

JavaFX - Fullscreen, Animation, and Transparency

Sometimes we need to switch an application to full-screen mode. Let's examine an example of such an application...

The transparent window expands on all screen. You can draw and write down a note at this window. Control buttons appear at the top of the screen:

  • Hide - iconify a window
  • Clear - clears a window
  • Exit - exit from the application

How to create a window similar to this example

Here we have code for switching a window in an exclusive mode:
var w=frame.getWindow ();
GraphicsEnvironment.getLocalGraphicsEnvironment ().getDefaultScreenDevice()
.setFullScreenWindow (w);
Let's make a screenshot of the desktop and we shall place it on the form for imitation of transparency:
Canvas {
scaleToFit: true
content: me.imageView
How to create screenshot of the desktop:
var file=File.createTempFile ("fsmemo", ".jpg");
file.deleteOnExit ();
var background = robot.createScreenCapture (screenRectangle);
ImageIO.write (background, "jpg", file);
var image=new Image {preloadIfLocal: true};
image.url=file.toURL () .toString ();
- a variable robot is a java.awt.Robot

Let's place this code in the trigger on frame attribute /iconified/ so that at each minimzing of the window, a new screenshot is taken.

Drawing on the screen

Let's create Canvas and place a Polyline on it:
curve: Polyline
curves: [Polyline]
Canvas {
content: bind me.curves

We shall add points in MouseDragged event:

onMouseDragged: operation (e: CanvasMouseEvent) {
insert [e.x, e.y] as last into me.curve.points;

We shall add this line in a array of lines in MousePressed event:

onMousePressed: operation (e: CanvasMouseEvent) {
me.curve = Polyline {
points: [e.x, e.y]
stroke: new Color (1,0,0,1)
strokeLineCap: ROUND
strokeWidth: 5
insert me.curve as last into me.curves;

How to store lines

Let's use standard class Properties for a data storage

    operation save (curves:Polyline *) {
var s = "";
for (all in curves) {
for (one in all) {
var c = "/y ";
for (p in one.points) {
if (c.equals ("/y")) {
c = ", x ";
} else {
c = "/y ";
s = " {s} {c} {p} ";
s = " {s}; ";
var properties=new Properties ();
properties.setProperty ("curves", s);
properties.store (new FileOutputStream (propertiesFileName(), "FxMemo");

The code above will save data about the drawn lines in a user home folder


Let's create an animation at start of the application. Let the picture from last session appear not at once but in parts. We shall create the trigger for this purpose:

trigger on FSFrame.tick [oldTick] =nextTick {
var numberFormat=NumberFormat.getInstance ();
for (i in [oldTick.. nextTick-1]) {
var one=lastSession [i];
if (one.trim () .length ()> 0) {
var tcurve = Polyline {
stroke: new Color (1,0,0,1)
strokeLineCap: ROUND
strokeWidth: 5
var xyArray=one.split (",");
for (xy in xyArray) {
if (xy.trim () .length ()> 0) {
var points=xy.split ("/");
var x=numberFormat.parse (points [0] .substring (1));
var y=numberFormat.parse (points [1] .substring (1));
insert [x, y] as last into tcurve.points;
insert tcurve as last into curves;

We shall change attribute /tick/ in a following code:

if (count> 0) {
var time=250*count;
frame.tick = [1.. count] dur time linear;

Loading of data will looks approximately so:


fsmemo.zip - 2.5 Mb

- The source, the compiled application and JavaFx runtime.

For start of the application it is necessary to click a file dist/JavaFXFullScreen.jar.

Drawing is saved before exit in a user home folder in a file fxmemo.properties.txt and loaded at next start.


{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks