JavaFX – ComboBox [Mobile]

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

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.

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

JavaFX – ClipView [ Scroll + Pane ]

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:

• Main.fx

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

JavaFX – System Monitor

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′;

JavaFX – LineChart

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

• Type of Chart – Area, Bar, Bubble, Line, Pie, 3D-Pie, Scatter
• Chart Series – Area, Bar, Bubble, Line, Scatter
• Chart Data – Area, Bar, Bubble, Line, Pie, Scatter

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:

• Main.fx
• CPUMonitor.fx
• UpdateListener.java
• CPUData.java

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

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

JavaFX – Color Picker

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

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:

• Main.fx
• SkinPalette.fx

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

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

JavaFX – Fish Eye Menu

I came across a nice comparison of Fish-Eye-Menu in Flash and Silverlight. Looks Cool! So thought of writing one in JavaFX and compare..

For Applet mode, click on above image

For standalone mode

So how much time did it take to implement it in JavaFX?
Any guess?!

Source:

• Main.fx

var dzone_url = “http://jfxstudio.wordpress.com/2009/04/30/simple-fish-eye-menu/”;
var dzone_style = ’2′;

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

JavaFX – Color Chooser

Simple Color-Chooser implemented using JavaFX.

Click on above image to load as Applet

New Color Picker control available!.

Source

• ColorChooser.fx