Archive

Posts Tagged ‘controls’

JavaFX – ComboBox [Mobile]

November 26, 2009 8 comments

Bookmark and Share

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

Its more almost 6 months since I implemented a sample ComboBox using Control and Skin interface. There is lot of interest for proper implementation of this control. This post is still among my top posts. So thought of enhancing the implementation a bit so as to make it work on real mobile!

For Applet mode, click on above image

For standalone mode

I could also run this sample on Sony-Ericsson XPERIA

Try this new version and let me know feedback

Advertisements
Categories: javafx Tags: , , ,

JavaFX – ComboBox

July 3, 2009 25 comments

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.

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

Categories: javafx Tags: ,

JavaFX – ClipView [ Scroll + Pane ]

June 30, 2009 9 comments

JavaFX 1.3 introduces many new controls with CSS support. Please refer to UI Controls documentation. You may use new ScrollView control instead of approach mentioned below.

JavaFX has new layout – ClipView – which can be used to implement scroll or pannable view.

We can set a node to ClipView which needs to be clipped and shown. The clip area can be controlled by specifying attributes – clipX and clipY. ClipView can also handle panning using mouse, which can enabled using pannable attribute.

For Applet mode, click on above image

For standalone mode

In above sample a large image is added to ImageView, which in-turn is added to ClipView. The clipX and clipY attributes are bound to horizontal and vertical ScrollBars. The clip rectangle can be updated by moving the scrollbars.


var scrollClipView : ClipView = ClipView {
    clipX: bind hScroll.value
    clipY: bind vScroll.value
    node: imageView
    pannable: false
    layoutInfo: LayoutInfo {
        width: 300
        height: 200
    }
}

The second ImageView is again added to ClipView. This time clipX and clipY are not bound to scrollbars. Instead the pannable attribute is set to true. User can move the image using mouse.

Try it out and let me know feedback!

Source:

var dzone_url = “http://blogs.sun.com/rakeshmenonp/entry/javafx_clipview”;
var dzone_style = ‘2’;

Categories: javafx Tags: , ,

JavaFX – System Monitor

June 26, 2009 6 comments

My previous post on LineChart uses simulated CPU usage data. Just thought of updating that to show live CPU and Memory information.

A tribute to all    users

For Applet mode, click on above image

For standalone mode

One of the way to implement this is to use some existing command line utilities. I used – top – command to get the CPU and Memory usage information. Execute top using ProcessBuilder, get the Process instance. Get the output stream from process and read the output of top command. Now parse this content (a bit tricky, each version had its own output format) to get the information.

Note: The implementation is not concrete (as it relies on simple text parsing), may not work on some platforms or locales due to difference in output of top command. It will not work on platforms which does not support top command.

Try it out and let me know feedback


var dzone_url = “http://blogs.sun.com/rakeshmenonp/entry/javafx_system_monitor”;
var dzone_style = ‘2’;

Categories: javafx Tags: , , ,

JavaFX – LineChart

June 22, 2009 12 comments

JavaFX 1.2 introduces new Chart APIs. Here we discuss about how to plot line chart using LineChart API.

For creating a chart, we need to create following instance

Note: Pie chart is an exception. In this case we don’t need to create instance of Series. Series is required only for X-Y chart types.

Lets implement a Line-Chart which updates its data dynamically. In this case a CPU monitor is simulated by generating random data from java class. The data is generated in a java Thread. The data is sent to JavaFX using a listener interface so as to update the chart. The notification is done via Event Dispatch Thread.

Update: Sample using live CPU and Memory information is available here.

For Applet mode, click on above image

For standalone mode

Create an instance of Series to plot chart for CPU usage of user, system and idle:


    var cpuLineChartSeries : LineChart.Series[] [
        LineChart.Series name: "User" },
        LineChart.Series name: "System" },
        LineChart.Series name: "Idle" }
    ];

Create an instance of Chart and associate the Series with this chart:


    var cpuLineChart = LineChart {
        
        title: "CPU Monitor"
        legendSide: Side.TOP
        showSymbols: false
        
        data: cpuLineChartSeries
        
        xAxis: NumberAxis {
            lowerBound: 1
            upperBound: 10
            tickUnit: 1
            label: "Minitues"
            tickMarkLength: 10
        }

        yAxis: NumberAxis {
            lowerBound: 0
            upperBound: 100
            tickUnit: 20
            label: "CPU %"
            tickMarkVisible: false
        }
        
        height: height
        width: width
    }

A simple UpdateListener interface is created. Which will be used to update data from java to javafx. Dummy CPU data is generated by CPUData class. The update is performed via Event Dispatch Thread using SwingUtilities.invokeLater( <Runnable> ).


    /**
     * Update listeners via Event Dispatch Thread
     */
    SwingUtilities.invokeLater(new Runnable() {
        public void run() {
            updateListener.updateCPU(user, sys, idle);
        }
    });

This update notification is handled in the JavaFX class and we can insert the data in chart as shown below.


    public override function updateCPU(user : Integer, sys : Integer, idle : Integer) {
        
        insert LineChart.Data 
            xValue: cpuIndex
            yValue: user
        into cpuLineChartSeries[0].data;

        insert LineChart.Data {
            xValue: cpuIndex
            yValue: sys
        into cpuLineChartSeries[1].data;

        insert LineChart.Data {
            xValue: cpuIndex
            yValue: idle
        into cpuLineChartSeries[2].data;

        cpuIndex += 1;
    }

When the index reaches the upper-bound, we can adjust the lowerBound and upperBound attributes of X-Axis, so as to shift the chart towards left. Also we may remove the initial chart data which are not visible.

Update:

As noted in comments section below, there is some Memory-Leak when we try to continuously update the bounds. Updation of bounds triggers updation of ticks and Skin related code of Label. For now instead of NumberAxis I have used a custom NoTickNumberAxis which supress the tick updates.


class NoTickNumberAxis extends NumberAxis {
    override function updateTickMarks() : Void {

    }
}

Try it out and let me know feedback!

Source:

var dzone_url = “http://blogs.sun.com/rakeshmenonp/entry/javafx_linechart&#8221;;
var dzone_style = ‘2’;

digg_skin = ‘compact’;
digg_window = ‘new’;

Categories: javafx Tags: , ,

JavaFX – Color Picker

June 12, 2009 4 comments

Simple JavaFX Color-Picker control. I have provided similar controls before as part of blog and sample but this one can be easily incorporated into other products.

For Applet mode, click on above image

For standalone mode

The control can be instantiated and added just like any other node using layout or translate.
Try it out and let me know feedback.

Also available – ComboBox

JavaFX – Skinnable Controls

June 10, 2009 9 comments

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

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:

var dzone_url = “http://blogs.sun.com/rakeshmenonp/entry/javafx_skinnable_controls&#8221;;
var dzone_style = ‘2’;

digg_skin = ‘compact’;
digg_window = ‘new’;

Categories: javafx Tags: , ,