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 !

Comments:

That was nice insight, can you throw some light on using vector graphics in javafx, I am trying to use, but I don't know where to start, a simple introduction like using 2 parts of a vector graphic file and then try to rotate one of them would be nice.
One more thing , when I use a stroke in a rectangle which have rounded edges it doesn't smoothen out, sorry for asking you directly but can you give some insight or a workaround
more UI advices are welcome.
here is a link of what I am talking about(look at the edges)

http://tinyurl.com/oggmms

Posted by Vaibhav on May 10, 2009 at 04:34 AM IST #

thanks !

Yes, I can remember one bug locked with the arcHeight and arcWidth smoothness.. let me search the status of that.

Regarding vector graphics, we have lot of things to discuss if you can wait for 10-15 more days :)

Posted by Vaibhav on May 10, 2009 at 07:42 AM IST #

Thanks for quick response, I'll surely wait , is there any preliminary information or sample code where can I get my hands dirty , thanks.

Posted by Vaibhav on May 10, 2009 at 07:54 AM IST #

hmm nothing to say right now :)

Posted by Vaibhav Choudhary on May 11, 2009 at 09:02 AM IST #

I don't know for your OS, but on Windows XP and browsers I have, cursor doesn't change to hand over buttons. It is better to make buttons look like buttons (not simple/bland rectangles) and perhaps make them react on mouse over.
Otherwise, you have some good advices.

Posted by Philippe Lhoste on May 18, 2009 at 12:12 PM IST #

oh oo ... here it the image. Hence it will not change. I am talking of code. Sorry, I have not added any applet or JNLP here. Sometime in mobile we need to fairly deal with performance so black is not bad :)

Posted by Vaibhav Choudhary on May 22, 2009 at 08:02 AM IST #

Cheap MBT Shoes, Begin A Revolution In The Field Of Shoes

Posted by MBT Shoes on January 06, 2010 at 04:31 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