JavaFX - Skinnable Controls


JavaFX 1.3 introduces many new controls with CSS support. Please refer to UI Controls documentation, Style-Editor sample and Dean Iverson's Blog for quick start. Also refer to article Applying CSS to UI Controls.

Its long time since I blogged and lot of things happened during that time - Release of JavaFX 1.2, Java Store, New Samples... and lot more to write about! :) Let me start with UI Controls...

Following are some of the UI controls - Button, CheckBox, Hyperlink, Label, ListView, ProgressBar, ProgressIndicator, RadioButton, ScrollBar, Slider, TextBox, ToggleButton

<script src="http://dl.javafx.com/1.2/dtfx.js"></script><script src="/rakeshmenonp/resource/ControlSkin/ControlSkin.js"></script>

For Applet mode, click on above image

For standalone mode

The article on Node-Based Controls demonstrates its usage. So let me focus on how to update the skin of these controls.

The skin attribute of Control class allows you to associate a Skin. The Skin is responsible for implementing the user interface using on scene-graph nodes and defining the behavior of the control. The Behavior has the logic for handling key and mouse events.

Sounds complicated? confused? Control, Skin, Behavior.. For now lets look at a simple and straight forward way to just change the color and some basic attributes of Skin.

JavaFX already has a default skin implementation - Caspian. Its in com.sun.javafx.scene.control.caspian package. For each control, there is corresponding skin implementation. We can change few attributes of these skin implementations and customize the look of controls.

Example: To update skin of Button, we can customize the attributes of ButtonSkin implementation.

var button = Button {
    text: "Button"
    skin: ButtonSkin {
        borderFill: Color.BLACK
        focusFill: Color.BLUE
        highlightFill: Color.GREEN
        shadowFill: Color.GRAY
        textFill: Color.RED
        fill: Color.WHITE
    }
}

Similarly a TextBox can be customized as shown below:

var textBox = TextBox {
    text: "TextBox"
    skin: TextBoxSkin {
        backgroundFill: Color.YELLOW
        borderFill: Color.BLACK
        caretFill: Color.BLUE
        focusFill: Color.BEIGE
        highlightFill: Color.BLUE
        promptTextFill: Color.GRAY
        selectedTextFill: Color.WHITE
        shadowFill: Color.DARKGRAY
        textFill: Color.BLACK
    }
}

Please note, all those attributes are instance of Paint, so we can assign instance of Color, LinearGradient or RadialGradient. More attributes and implementation is available in the source.
Try it out and let me know feedback!

Source:

<script type="text/javascript">var dzone_url = "http://blogs.sun.com/rakeshmenonp/entry/javafx_skinnable_controls";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>

Comments:

Hello Rakesh Menon,
I is very good tuotorial for development in javafx. I have created autocomplete text box by using ListView and TextBox. But I am not able to restrict user to use Ctrl V (Past), Ctrl X(Cut), Ctrl Z(Undo) etc key. Is is any way in javafx to implement these restriction on text box.

Thanks in advance

Regards
Ashwani Rawat

Posted by Ashwani Rawat on July 13, 2009 at 04:58 AM IST #

@Ashwani Rawat You can extend TextBox and override methods cut, copy, paste to do no operation.

Posted by Rakesh Menon on July 14, 2009 at 02:36 AM IST #

Hi Ashwani,

I also want to implement Auto complete in my POC.
could you please share your code with me.

thanks and regards,
bikkie

Posted by bikkie on August 10, 2009 at 02:19 PM IST #

Hi Rakesh ,

your examples are really informative to me ...

but i want to know that where can i find the documentation of following classes

com.sun.javafx.scene.control.caspian.ButtonSkin;
com.sun.javafx.scene.control.caspian.ToggleButtonSkin

Posted by Nihar [ntimesc@gamil.com] on August 23, 2009 at 06:26 AM IST #

@Nihar There are no documentation available as of now. The team is working on this. I have used all attributes that are accessible for ButtonSkin and ToggleButtonSkin in Main.fx Let me know if you are looking for anything beyond that, I can check and get back to you.

Posted by Rakesh Menon on August 25, 2009 at 04:14 AM IST #

Hi Rakesh,

I have found many interesting example on your blog which really accelerate me to develop rich internet application in JavaFX.

But i have one doubt i.e. in JavaFX one can set background gradient using LinerGradient but if i have a image gradient in png format and i want to render it as a background on Rectangle with a repeat mode (like people do by setting repeat-x property in CSS) then what would be the approach to do that ?

Posted by nihar on September 09, 2009 at 10:41 AM IST #

@nihar Thanks! I think you are referring to something like TexturePaint in JavaSE.. http://java.sun.com/javase/6/docs/api/java/awt/TexturePaint.html Its \*not\* available in JavaFX 1.2, its work in progress.

Posted by Rakesh Menon on September 09, 2009 at 11:02 AM IST #

Thanks Rakesh ,

One more thing as in JavaFX there is no Table/Grid Control exist as of now...
So do u know what could be the other alternatives that looks good and easy to use/plug in javafx ?

Posted by nihar on September 09, 2009 at 02:31 PM IST #

@nihar You may refer to http://jfxtras.org/ and http://code.google.com/p/jfxtras/ Another way is to use JavaSE Swing Table and embed in JavaFX using javafx.ext.swing.SwingComponent.wrap API

Posted by Rakesh Menon on September 10, 2009 at 01:52 AM IST #

Hi Rakesh,

I've posted my problem of slow response to mouse clicks as the last reply on the below topic on Sun forums.Could you tell me how to customize it?

http://forums.sun.com/thread.jspa?threadID=5414849

Posted by Shalabh Vyas on January 22, 2010 at 02:14 AM IST #

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


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
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