Friday Jul 03, 2009

JavaFX - ComboBox


JavaFX 1.3 introduces many new controls.
Please use ChoiceBox, MenuButton or SplitMenuButton

JavaFX SDK provides Control and Skin interface which can be used to create custom controls. Lets create a ComboBox with these two classes...

Update: Please also refer to JFXtras - XPicker for more advanced picker control.

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

For Applet mode, click on above image

For standalone mode

The ComboBox is created using a combination of Label and ListView. The ListView instance is dynamically inserted into content of Scene so that it appears on top of all existing content. Its deleted from Scene on making list invisible.

The entire logic of control is implemented in Skin. Behavior class can be implemented to handle keyboard events. The look can be easily customized.

Also available - Color Picker

Try it out and let me know feedback


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

Wednesday Jun 10, 2009

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>

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