Putting effect in effective way...JavaFX

With me, it happens most of the time. The basic code is over and I stuck in giving a good color to a button or a text. Now a day, a good UI is as required as basic functionality. In my 7 year of Computer life including college + work I always ran away from animations and coloring. 

Last day, I was making a button and it took me pretty much time to finish it off. But, I find a good observation from it. A simple and quick way to color a button or giving a glossy effect. Have a look at these buttons. 

If you are not a grahics designer, then you probably like these buttons. These buttons has been made with very simple effort, just a small work of Linear Gradient. But the fight is which color to put in Linear Gradient. So, here is my observation, you need to put the color which are close to each other and can be easily merged with each other. Like .. hmm :

LIGHTBLUE, DARKBLUE, LIGHTBLUE.(3rd button)

This is actually the best pattern. 

2nd button is also the result of same :

LIGHTGREEN, DARKGREEN, LIGHTGREEN.

So, check more with this simple code :

Stage {
    title: "Some Cool Buttons"
    width: 250
    height: 280
    scene: Scene {
        fill:Color.BLACK
        content: [
            Rectangle {
                x: 10,
                y: 10
                width: 90,
                height: 30
                fill: LinearGradient {
                    startX: 0.0
                    startY: 0.0
                    endX: 0.0
                    endY: 1.0
                    proportional: true
                    stops: [
                        //   Stop { offset: 0.0 color: Color.BLACK },
                      Stop {
                            offset: 0.0
                        color: Color.LIGHTGREEN },
                        Stop {
                            offset: 0.5
                        color: Color.DARKGREEN },
                        Stop {
                            offset: 1.0
                        color: Color.LIGHTGREEN }
                    ]

                }
                opacity:0.6
                arcHeight:5
                arcWidth:5
            },
            Text {
                font: Font {
                size: 12
                name: "Arial Bold"
                letterSpacing: 0.15

            }
                fill:Color.WHITE
                x: 18,
                y: 30
                content: "HelloWorld"
            } ] }

Some of my fav. combinations(2 already mentioned) :

1. Stop {
                            offset: 0.0
                        color: Color.LIME },
                        Stop {
                            offset: 0.5
                        color: Color.DARKGREEN },
                        Stop {
                            offset: 1.0
                        color: Color.LIME }

This will look awesome, if you are writing a flashy application. Very vibrant in color.

2.  Stop {
                                offset: 0.0
                            color: Color.ALICEBLUE },
                            Stop {
                                offset: 0.5
                            color: Color.BLUE },
                            Stop {
                                offset: 1.0
                            color: Color.ALICEBLUE }

3. Stop {
                                offset: 0.0
                            color: Color.ORANGE },
                            Stop {
                                offset: 0.5
                            color: Color.RED },
                            Stop {
                                offset: 1.0
                            color: Color.ORANGE }

4. A very plain and descent effect :

Stop {
                                offset: 0.0
                            color: Color.LIGHTYELLOW },
                            Stop {
                                offset: 0.5
                            color: Color.YELLOWGREEN },
                            Stop {
                                offset: 1.0
                            color: Color.LIGHTYELLOW }

Enough, please let me know your choice. Is there any pattern, you follow !

Comments:

hi...
i am trying to devolop application similar to i-Phone software...

how can i do screen swapping in javafx......how can i load the content dynamically.....

help me out.....

Posted by Mufaddal kamdar on February 03, 2009 at 04:42 AM IST #

Loading content dynamically is generally in JavaFX done like this :

Make a group :

Group gp = [c1, c2, c3, c4 ] ; // these are initial content

onSomeMouseAction :

insert c5 into gp;

or

delete c1 from gp;

In this way you can add and delete things dynamically..

please let me know if you want any sample code for this. I guess you can write it down, its easy.

Posted by Vaibhav Choudhary on February 03, 2009 at 04:50 AM IST #

Post a Comment:
Comments are closed for this entry.
About

Hi, I am Vaibhav Choudhary working in Sun. This blog is all about simple concept of Java and JavaFX.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today