SideBarFX

Дата публикации: 04.11.2013 13:58:54

Let's create a fullscreen window first. In the current implementation such windows can be opaque only. By this reason this window cannot be used as a SideBar, but its width and height will be further used.

def screen = Stage {   fullScreen: true // TODO:rewrite! } 

You should wait until the window appears in order to initialize its dimensions. As soon as the window's height becomes greater than 0, you can close the window and use its dimensions to initialize the main window. Note that if the auxiliary fullscreen window is closed before the main window is shown up, the application terminates.

def height = bind screen.height on replace {   if (height > 0) {     screen.close();     // initialize main stage     ...   } } 

The main window contains the following content.

The base of the window is a translucent shape intended for processing of mouse events. This shape is based on a rectangle, whose left edge is a cubic curve instead of a line. Note that the shape of the window is not set, because JavaFX has no appropriate API. Besides, shaped windows do not support anti-aliasing.

        Path {           fill: color           opacity: opacity           elements: [             MoveTo {               x: predefined             }             HLineTo {               x: offset             }             CubicCurveTo {               x: offset   controlX1: x1   controlX2: x2               y: height   controlY1: y1   controlY2: y2             }             HLineTo {               x: predefined             }           ]         } 

The left edge of the shape is set off with a thick opaque cubic curve, whose parameters match those of the basic shape.

        CubicCurve {           fill: null           stroke: COLOR           strokeWidth: 4           startX: offset           endX: offset   controlX1: x1   controlX2: x2           endY: height   controlY1: y1   controlY2: y2         } 

Drawn over the shape is the rotated translucent text. Although the text has the same color and opacity as the basic shape, the text looks less transparent, because the opacity values are summed up.

        Text {           content: "JavaFX"           opacity: OPACITY           fill: COLOR           font: Font {size: 220}           scaleY: 0.8           translateX: 240           translateY: height           transforms: Rotate {angle: 270}         } 

The close button is drawn in the right top corner of the main window.

        Group {           translateX: stage.width - 22           translateY: 22           cursor: Cursor.HAND           content: [             Circle {               fill: COLOR               opacity: OPACITY               radius: 8             }             Line {               stroke: COLOR               strokeWidth: 4               strokeLineCap: ROUND               startX: -4   endX:  3               startY: -4   endY:  3             }             Line {               stroke: COLOR               strokeWidth: 4               strokeLineCap: ROUND               startX: -4   endX:  3               startY:  3   endY: -4             }           ]           onMouseClicked: function(event) {             stage.close()           }         } 

The logo of Sun Microsystems is added to the center of the window. The clock widget from my first post about JavaFX is added over the logo. Note that the paused variable of the clock widget is bound to the visible variable. Thus you do not waste the processor time to update the hidden clocks.

        ImageView {           translateX: stage.width - 142           translateY: 224           image: Image {             url: "{__DIR__}sun.png"           }         }         Clock {           translateX: stage.width - 222           translateY: 22           paused: bind not visible           radius: 100           fill: COLOR         } 

The SideBar slides out when the mouse cursor hovers over the SideBar content and slides in when the mouse cursor leaves the window.

def slide = Timeline {   keyFrames: [     at (0s) {stage.x => screen.width - stage.width}     at (1s) {stage.x => screen.width - stage.width / 10}   ] } var visible = bind group.hover on replace {   slide.rate = if (visible) -1 else 1;   slide.play() } 

This approach has a couple of disadvantages. First, JavaFX has no API to keep the window on top of other windows even if it has the focus. Second, the closed fullscreen window does not receive events on the screen resolution changes. Therefore the SideBar will work incorrectly when the resolution changes.

Note that the application is signed and requires all permissions to slide out off the screen. The source file of the example is available.

PS. This article was originally posted on the Java.net site.