Vaibhav's Blog Space

Take care of Basic User Interface - JavaFX

Guest Author

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;

    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 !

Join the discussion

Comments ( 8 )
  • Vaibhav Saturday, May 9, 2009

    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)


  • Vaibhav Sunday, May 10, 2009

    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 :)

  • Vaibhav Sunday, May 10, 2009

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

  • Vaibhav Choudhary Monday, May 11, 2009

    hmm nothing to say right now :)

  • Philippe Lhoste Monday, May 18, 2009

    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.

  • Vaibhav Choudhary Friday, May 22, 2009

    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 :)

  • Tag Heuer watches Sunday, December 20, 2009
  • MBT Shoes Tuesday, January 5, 2010

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

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.