Sunday May 10, 2009

Take care of Basic User Interface - JavaFX

For a developer perspective, I always appreciate the work of Graphics Designer. Immense level of smoothness, simple though beautiful, delicacy in every movement and most important fulfill the functionality in most easier way. Though we all can't think like a UE or a Graphics Designer but we can maintain the correct functionality in code. Some code which I have seen in last one month are awesome but some simple points are missing not because they are tough to write but because we forgot to write.

1. Use the correct cursor when required :  Like if its a button or a Hyperlink, cursor should be Cursor.HAND like this code :

package cursorsample;

import javafx.scene.Cursor;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

Stage{
    title: "Button Cursor"
    width: 250
    height: 280
    scene: Scene{
        content: [
            Rectangle {
                cursor: Cursor.HAND
                x: 10,
                y: 10
                arcHeight: 10
                arcWidth: 10
                width: 100,
                height: 30
                fill: Color.BLACK
            },
            Text {
                fill: Color.WHITE
                font: Font {
                    name: "Arial Bold"
                    size: 14
                }
                x: 15,
                y: 30
                content: "Hand Cursor"
            }
        ]
    }
}

If you are navigating inside the map or graph or if you are dragging things out. Cursor is supposed to be Cursor.MOVE. Please check the complete list supported in FX: http://java.sun.com/javafx/1.1/docs/api/javafx.scene/javafx.scene.Cursor.html

2. Simple opacity Game : Changing the opacity with simple values can make the UI rich. Simple code like this :

var opacity = 0.6;

onMouseEntered: function( e: MouseEvent ):Void {
                    opacity = 1.0;
                }
                onMouseExited: function( e: MouseEvent ):Void {
                    opacity = 0.6;
                }

 and bind the opacity of rectangle with opacity variable.

3. Gradient give life : "My Button" is simple but you will find it much better than only Black or only GRAY. Same way, you can make it more rich with filling correct gradient. Most of the time we find it a problem in setting Gradient color. My simple formula says, take 2 color of same family and try to mix. Never mix color like RED and GREEN. Mix LIGHTGREEN and DARKGREEN, RED and DARKRED, BLUE and AQUA. Using these, we can see effects like this :


 4. Gradient at title bar -> I love to write custom title bar in place of OS defaults which always gives a feeling that I am living in old age. Color in title bar can be made cool with gradient like :

This is simple DARKGREEN, BLACK and DARKGREEN linear gradient. Though, I am misusing the close button concept here. Close button should not be green in color, preferable color is RED.

5. If we want it to be simple: If application itself is too complex and we want to minimize the cost of gradient, colors. Best is to go with simplicity. A black background with white text is one of the awesome combination. 

6. Web services or HTTP request : If we are using PullParser and HTTP, onDone method is one of the important places for everything. Consider on a button click you called a web service and web service takes sometime and showed the output. In the middle, you need to show a screen to user saying "We called this web service and it will take sometime", else user will impatiently close the window.

So, waitingText.visible = true when mouse click ! In onDone() {   waitingText.visible = false; }

Soon, we will have more example on this :).

That's it. 

Have fun with JavaFX !

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