Stylish Buttons in Java Fx

Question

Hi,
This is Rakesh . I'm trying to create stylish buttons and menus in JavaFx
and for this purpose i'm trying to study about the role of gradient and
other such effects in styling the UI . I have surfed for various buttons in google
and trying to replicate the CSS buttons and cool Menus in JavaFx .
How ever i have found buttons with Text that look deep inside and for such buttons i'm not able to find any CSS
or any other information on how to create them .
For Example in the button [http://sites.google.com/site/javafxpoint/DeepTextbtn.gif|http://sites.google.com/site/javafxpoint/DeepTextbtn.gif]
i see that the text appears to be some what deep .
And in the button [http://sites.google.com/site/javafxpoint/notSoDeepbtn.gif|http://sites.google.com/site/javafxpoint/notSoDeepbtn.gif] ,
i see that the text does not appear so Deep .
We can download both those buttons to our desktop and try to enlarge them
and find that the color in the top half of the button is some what lighter when compared to the bottom half
and that can be achieved using Gradient .
But now my issue is that i'm not able to find out why the Text in the button1 seems to be very deep
and the test in the button2 seems to be normal . Is there any JavaFx effects or properties
that i can make use of to create Deep Text buttons using JavaFx .
Thanks
Edited by: vrakesh.techie on Oct 21, 2009 5:43 AM
Edited by: vrakesh.techie on Oct 21, 2009 5:44 AM
Edited by: vrakesh.techie on Oct 21, 2009 5:45 AM

Answer 1

Hi PhiLho,
I have tried your suggestion and it has worked for me .
I'll upload the demo soon .
But i think i need to play more with it so as to achieve perfection in it .
In my current sample i have placed the black shadow text on click of the button so as to make
the test look deep and then when its clicked again i have set the opacity of the black text to 0
so that the text does not look deep .
By clicking it again and again , we can feel that the text goes deep and comes up but i did not know how
to increase or decrease the depth of the text in a countable fashion .
( currently it's going deep or staying up based on whether i set the opacity of the black text to 0 or 1 ) .
I tried replacing the offSet of posX ,i.e posX + 1 with posX + 2 and posX + 0.5 and other options but they made it more clumsy .
I think i will have to play with the font weight properties so as to increase the depth of the text in a
measurable fashion .
Code used by me for testing :
===============================================================================================================
* simpleBtn.fx
* Created on Oct 22, 2009, 6:57:07 PM
package fancyButton;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Rectangle;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
* @author rvagvala
// place your code here
var rect = Rectangle {
width: 150
height: 50
arcWidth: 20
arcHeight: 20
stroke: Color.BLACK
strokeWidth: 1
fill: LinearGradient {
startX: 0.0
startY: 0.0
endX: 0.0
endY: 1.0
proportional: true
stops: [
Stop {
offset: 0.0
color: Color.LIGHTBLUE
Stop {
offset: 1.0
color: Color.BLACK
var text1 : Text;
text1 = Text {
content: "Button"
fill: Color.WHITE//Color.RED
font: Font.font("Arial", FontWeight.BOLD, 14)
x: bind rect.x + rect.width/2 - 20
y: bind rect.y + rect.height/2
var text2 : Text;
var opac = 0;
text2 = Text {
content: "Button"
fill: Color.BLACK
font: Font.font("Arial", FontWeight.BOLD, 14)
x: bind rect.x + rect.width/2 - 20 + 1
y: bind rect.y + rect.height/2 - 1
opacity : bind opac
Stage {
title: "Stylish Buttons Demo"
width: 800
height: 600
scene: Scene {
fill: Color.BLACK
content : Group {
translateX: 50
translateY: 50
content: [
rect,
text2,
text1
onMouseClicked: function(e:MouseEvent){
if(opac==0) then opac = 1 else opac = 0;
====================================================================================================================
Thanks for your help .
bye
Edited by: vrakesh.techie on Oct 22, 2009 7:07 AM
Edited by: vrakesh.techie on Oct 22, 2009 7:08 AM