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 !

Monday Feb 18, 2008

Play Safe with Swing

Last month, I was writing a GUI based code in Java. As Swing provides
rich UI so I decided to go for Swing. Here is a simple piece of
Suggestion, which most of us know already. If you are a novice in
Swing, you always need to take care in calling UI work. Reason is
simple, swing is not thread-safe and calling GUI work randomly will
lead to a deadlock in code. We are seeing 'n' no. of problem with Swing
code, just because developers don't know(or maybe forget) that swing is
not a thread-safe world. Sometime you are not able to see the problem
initially but afterward when your code is going heavier and heavier you
will face lot of problems.

How to make Swing Thread-safe ?

Its not a tough job. First see this, this is more or less like a rule and you can apply anywhere to write a safe code:

public static void main(String[] args) {
JFrame frame = new JFrame();
frame.show();
// Anything after this is going to be crappy and thread unsafe
}

If
you are going to write two UI work, and since things are not
synchronized, you can go into a big mess. I wanted to post my code
where I got the problem some days back, but its too big to post. No
worries I got a code from here which is amazing ! You know what is cool, it crashes every time :)

import javax.swing.\*;
import java.awt.\*;

public class StrangeProblem extends JFrame {
static {
new StrangeProblem();
}

private static void staticMethod() {
System.out.println("This is never reached");
}

private StrangeProblem() {
getContentPane().add(new MyJDesktopPane());
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(300, 300);
setVisible(true);
// If commented out, program works fine, otherwise it hangs
new JInternalFrame();
}

private class MyJDesktopPane extends JDesktopPane {
protected void paintComponent(Graphics g) {
super.paintComponent(g);
System.out.println("We will now call the static method...");
staticMethod();
System.out.println("Static method was called.");
}
}
public static void main(String[] args) {
}
}
(Thanks for the poster of this code)

So now you got the thumb rule, what not to do ! Alright time to see what to do.

Simple.
Run your code in the event-dispatching thread. Most of the UI like
event, mouse clicks are always handled by event-dispatching thread.
SwingUtilities class provide two methods invokeLater() and
invokeAndWait() to get rid of this problem. Now, why two different
methods is a big mystery, but use invokeLater() if its a case of Swing.
So, now the code skeleton is :

public static void main(String[] args) {

SwingUtilities.invokeLater(new Runnable() {
public void run() {
JFrame f = new JFrame();
f.show();
// you can write more UI work here
}
});
}

I can leave it on to you to make the above code deadlock free :). For more detail, see the SwingUtilities class JavaDoc.

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