JavaFXWindow Decorating

Window Decorating

Aren't you tired of the old fashion default window title from JavaFX? Have you ever thought about creating your very own window title and the minimize icon? This section will teach you how to decorate the window title bar, and the icon. To create an image to use for your icon, make sure it is a 32x32 pixel. Lets see an example.

/* The class contains the stage definition * */ package stagestyle; /** * @author JJ */ import javafx.scene.text.*; import javafx.scene.paint.*; import javafx.scene.input.MouseEvent; import javafx.stage.Screen; import javafx.scene.shape.Line; import javafx.scene.effect.DropShadow; public class stageStyle { //Sets the stage variable public var exit : Boolean = false; public var min : Boolean = false; //Holds the title text public var title : String = "Desktop Decoration"; //This is the title of the window public var titleText = Text { x:500 y:25 content:bind title fill: Color.RED font:Font.font("AR DELANEY", FontWeight.DEMI_LIGHT, 20) } //Minimize the screen public var minLine = Line { startX: Screen.primary.visualBounds.width -200 startY: 15 endX: Screen.primary.visualBounds.width - 180 endY: 15 strokeWidth: 6 stroke: Color.BLUE effect: DropShadow { offsetX: 2 offsetY: 3 color: Color.YELLOW radius: 2 } onMouseClicked: function (ae: MouseEvent): Void { min = true; } } //The exit button of the screen public var exitText = Text { layoutX:Screen.primary.visualBounds.width - 148 layoutY: 25 content:"X" font:Font.font("AD DELANEY", FontWeight.BOLD, 30) fill:Color.BLUE effect: DropShadow { offsetX: 3 offsetY: 4 color: Color.YELLOW radius: 10 } onMouseClicked: function (e: MouseEvent): Void { FX.exit(); } } }

This is the stageStyle class. Inside here we create the minimize button, exit button, and the title for the window. As for the minimize and exit button I created a mouse event,
every time the user clicks on the buttons the mouse action will fire up. Now, we will create a main method that contains the Stage.

/* * Main.fx * * Created on Mar 27, 2010, 6:46:51 PM */ package stagestyle; import javafx.stage.Stage; import javafx.scene.image.Image; import javafx.stage.StageStyle; import javafx.scene.Scene; import javafx.scene.paint.Color; import javafx.stage.Screen; /** * @author JJ */ var stageVariable = stageStyle{}; Stage { visible:true resizable:false /* Create the display icon when the window is minimize * */ iconified: bind stageVariable.min icons: [ Image { width:16 height:16 url:"{__DIR__}robot.jpeg" } ] //Opacity range is from 0 to 1 opacity:0.98 //By using undecorated style, we are able to eliminate the old fashion title bar style:StageStyle.UNDECORATED //Assign the width and height basic on the screen width and height width:Screen.primary.visualBounds.width-100 height:Screen.primary.visualBounds.height-100 scene:Scene { //Fill the background color of the window fill:Color.BLACK //Display the window title, exit image, and minimize image content: [ stageVariable.exitText,stageVariable.minLine, stageVariable.titleText, ] } }

This is the main class, it consists the Stage. We call the stageStyle class to create the title bar, minimize, and exit button. In addition we create the minimize display icon inside the stage class.
Copy the program, test it yourself and see.