Writing flexible code is always good. Though I myself write lot of hard coded stuff but nothing wrong in giving good lecture :D. Weeks back I planned to make flexible template in JavaFX, so that we all can use it by just writing one line of code and that is making an instance of that template in our main file. In general the code we write comes with OS frame like on Windows XP it will come with blue frame and close button, min/max buttons, but for good graphics its between to use own template 
and off course it will work on mobile too.
Here are some examples :
So, I have just created a close button on which we call FX.exit(), nothing else. If we can customize the close button, say hmm to save the data or to save the position of the application. Most of the time it happens, we want the application to open at same position where we dragged it last time.
Important thing to notice is the upper rectangle I mean the title bar adjust the length from its own. So, even the landspace(90 degree rotating the mobile) will give us the correct template form(title bar). I agree, it should be small in case of mobile, and even that can be manageable with code(I have not done in this example).
How to do this can be understandable in 3 basics steps :
1. Define scene as an instance and use that inside stage like this :
public var s = Scene {
height: 200
width: 200
fill: Color.GRAY
content: [
Text {
font: Font {
size: 20
}
x: 10,
y: 100
content: "Application content"
}
]
};
and then:
Stage {
title: "Flexible Themes"
style: StageStyle.TRANSPARENT
width: 240
height: 320
scene: s
……
2. Everything will be effected with scene width and height. So, take this in a var. like :
public var width = bind s.width;
public var height = bind s.height;
Now, every component, like rectangle, arc, circle will be properly bind with width and height. Changes width and height will change all the component in relative term. So, rectangle(border line) is :
Rectangle {
x: 0,
y: 0
width: bind sceneWidth - 1
height: bind sceneHeight - 1
fill: Color.TRANSPARENT
stroke: Color.BLACK
strokeWidth: 2
},
where,
var sceneWidth = bind Main.width;
var sceneHeight = bind Main.height;
This code is written in different file so you need to take width and height from main file.
This is title bar rectangle(the blue and the green) :
Rectangle {
x: 1,
y: 1
width: bind sceneWidth - 1,
height: 30
opacity: 0.8
fill: LinearGradient {
startX: 0.0
startY: 0.0….
So, height is hard coded here but it should vary according to the size of window. For small window like mobile screen we need to reduce it with some factor.
3. Since Main is used as many place, the compiler will confuse with the entry point, so write the main stage code in function run(). Like:
function run() {
var s1 = Stage {
title: "Flexible Themes"
style: StageStyle.TRANSPARENT
width: 240
height: 320
scene: s
}
}
Here are the files :
Main File (Please rename this file to Main.fx, else you will get some problem)
Blue Theme, Green Theme
There can be lot to do with Themes, like adding min/max button, giving drag option which is default in OS Frames or save option as we already mentioned. Please let me know if I missed something :).
Thanks to Josh for making it possible for all screen.
If liked it, then why not share!
Java,JavaScript,Threading,
Optimization and more with Vaibhav 
