Experiments With JavaFX Script

by Weiqi Gao, Principal Software Engineer

Its highly recommended reading and I wish it was around when I was learning JavaFX. Its in by bookmarks bar for quick reference every time I can’t remember a bit of syntax. Hope it helps you to.

• Little image viewer app for our Java FX University session, I will post the source for this soon.
  
• We had a demo called “Swish” which we were going to show during the JavaFX keynote at Devoxx, someone suggested would it not be cool if we could create a Devoxx themed version of it, expecting a logo somewhere or something like that. Well it gave me a chance to put the JavaFX Production Suite through its paces and see what we could do. So a few hours later we had a full Devoxx themed version. The swish demo takes a bunch of graphics created in Photoshop along with animation paths drawn in Illustrator and animates them to make a cool little visual demo. The cool thing is you can take completely new graphics files as long as they follow the same basic form and create a completely new version of the application with no code changes needed.
  
• After showing Stephan Janssen he suggested how cool it would be if we could replace the full backdrop behind the slides on the cinema screen. So a  second minimal version of Devoxx Swish in full 1080p HD was born which was projected on the full Cinema screen while people were entering/exiting the keynote and when the Beatbox artist Roxorloops was performing.
  
• Next I got asked if we could put together a little application for the Sun Booth to select prize winners from a text file of names, so a couple of hours later we had it up and running spinning and zooming random names when the mouse was clicked.
  
  Seemed to draw quite a crowd, or maybe it was just the cool prizes and free beer!
  
• When I was creating the prize draw application I needed to work out the Spline interpreter numbers to make the names thud down. I ended up using Romain Guy’s Spline Editor for Swing which makes it nice and easy. So thought it was about time we had a JavaFX version, and it could not be too hard. So a couple hours and a couple hundred bind statements later we have a very cool little Spline Editor that lets you edit the spline and see the effect in real time then copy the code to paste into your JavaFX application.
  
  If you would like to try it for your self click here:  you can also download the source Netbeans project.

I hope all of you who attended Devoxx this year had as much fun as I did and all of you who did not attend you really missed something great and hope to see you all there next year. I will be posting all the slides to our sessions here very soon. All the sessions were recorded and will be posted on www.parleys.com at some point next year.

Nimbus properties follow some rules and you can not only use the property keys that we have added in as default but you can create your own. Nimbus Look and Feel scans the UIDefaults table when ever you add a property with UIManager.put(<<key>>,<<value>>) then updates its internal state. When that new property matches the current state of the component it applies to then it will be applied to that component. Properties cascade like CSS and the most specific matching one is used.
Example:

• foreground = Color.BLACK
• Label.foreground = Color.BLUE
• Label[Disabled].foreground = Color.GRAY
• "SomeLabel"[Disabled].foreground = Color.WHITE

In these examples foreground applies to the foreground of all regions of all components, Label.foreground applies to only Label components, Label[Disabled].foreground applies to only Label components in the Disabled state. "SomeLabel"[Disabled].foreground applies to all components named “SomeLabel” that are in the disabled state. Hopefully that also explains the different ways you can write a rule to match a Component. The only 2 cases that are not covered here are Component.Region.foreground which lets you specify a sub-region of a component and ComponentA:ChildComponentB.foreground which lets you specify a ChildComponentB contained within ComponentA. You can see many examples of these in the complete table below and then play with writing your own. For example you can use the “name” property of a component in a similar way to “class” in CSS, say naming a bunch of buttons “hotButton” and then specifying new rules for them in the defaults table. I already explained in my last blog how you can override the global defaults on a single instance bases which matches the “style” attribute with HTML CSS.

Colors in Nimbus are derived, which means there are a core set of colors which are constants and all the other colors are calculated from those. This means you can simply change those and the 1000s of other colors that are related and used in the painters will update to reflect the new base color. These colors are shown in the “Primary Colors” section of the table. The colors in the “Secondary Colors” section are derived from those in the “Primary Colors” section but themselves are used as the base colors for other colors. You may need to change the secondary colors to tweak the results of changing the primary ones if you are not happy with the results. You can you derived colors in your own code as well so that you colors can change when the primary colors change. This will allow you to make your application color theme-able idea for white label branding etc. The method you need is on NimbusLookAndFeel called getDerivedColor :

/**
 * Get a derived color, derived colors are shared instances and is color
 * value will change when its parent UIDefault color changes.
 *
 * @param uiDefaultParentName The parent UIDefault key
 * @param hOffset             The hue offset
 * @param sOffset             The saturation offset
 * @param bOffset             The brightness offset
 * @param aOffset             The alpha offset
 * @param uiResource          True if the derived color should be
 *                            UIResource, false if it should not be
 * @return The stored derived color
 */
public Color getDerivedColor(String uiDefaultParentName,
               float hOffset, float sOffset, float bOffset, int aOffset,
               boolean uiResource)

Hopefully the rest will make sense as you read though the table and look at all the examples. After that its just a matter of try playing with some and see what you can do. I hope you see that power in this that Richard Bair and I designed and hoped would be useful. The complete defaults properties table is way to big to include in this post so I have put it on a separate page.

• Nimbus UIDefaults Properties List

If you would like to see how I made this list, here is the code that creates the html.

NimbusBrowser.java

All of the Nimbus skin comes from a set of properties in the UIManager defaults table. The keys we will be changing for this example are:

• “Slider.thumbWidth”
• “Slider.thumbHeight”
• “Slider:SliderThumb.backgroundPainter”
• “Slider:SliderTrack.backgroundPainter”

You can customize the look for a Component either globally for all instances of the component or locally for a single component instance. To change all sliders globally you can set these properties using UIManager.put(key,value) but in this example I will just set them locally for a single slider. To set UI defaults localy for a single component instance you need to create a UIDefaults map, insert you properties and then set it as a client property on the component:

                JSlider slider = new JSlider(0, 100, 50);
                UIDefaults sliderDefaults = new UIDefaults();
                ....
                sliderDefaults.put(<<key>>,<<value>>)
                ....
                slider.putClientProperty("Nimbus.Overrides",sliderDefaults);
                slider.putClientProperty("Nimbus.Overrides.InheritDefaults",false);

The “Nimbus.Overrides.InheritDefaults” key states if the values in “Nimbus.Overrides” should be merged with the defaults(false) or replace them(true). So next some examples for what properties we should set to skin the slider:

                sliderDefaults.put("Slider.thumbWidth", 20);
                sliderDefaults.put("Slider.thumbHeight", 20);
                sliderDefaults.put("Slider:SliderThumb.backgroundPainter", new Painter() {
                    public void paint(Graphics2D g, JComponent c, int w, int h) {
                        g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
                        g.setStroke(new BasicStroke(2f));
                        g.setColor(Color.RED);
                        g.fillOval(1, 1, w-3, h-3);
                        g.setColor(Color.WHITE);
                        g.drawOval(1, 1, w-3, h-3);
                    }
                });
                sliderDefaults.put(”Slider:SliderTrack.backgroundPainter”, new Painter() {
                    public void paint(Graphics2D g, JComponent c, int w, int h) {
                        g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
                        g.setStroke(new BasicStroke(2f));
                        g.setColor(Color.GRAY);
                        g.fillRoundRect(0, 6, w-1, 8, 8, 8);
                        g.setColor(Color.WHITE);
                        g.drawRoundRect(0, 6, w-1, 8, 8, 8);
                    }
                });

The lets pop that code into a sample app and run it and see what it looks like.

The original Nimbus slider on the bottom and the skinned one on top, both running in the same application. Here is the source so you can try it your self. Let me know if this was useful and what other examples you would like to see.

SliderSkinDemo.java

If you missed our talk and BOF at Java One this year here are the presentations:

Java One 2008 Nimbus Talk PDF

Java One 2008 Nimbus BOF Presentation PDF

A lot of you have been asking about the Nimbus Designer Tool that I demoed at Java One. I have been working at getting it opensourced but it is a slow bureaucratic process so I am sorry. In the mean time I thought I would try and do a couple blogs on how you can skin Nimbus your self with out the tool. It is very easy to do providing you are not worried about getting your hands dirty writing some Java 2D drawing code. You could always use images or a SVG library if you don’t fancy raw Java 2D. I would like to split the designer tool into 2 parts the first part the lets you create a Painter classes with Java 2D drawing code by drawing graphics. The second part would let you assign painters to components and generate the code to populate the UIManager defaults table. But both those parts are not hard to do your self if we help you get started so I will see what I can do.

So just a quick hello to say I am still alive, next to try and post a couple blogs on how to skin Nimbus.

Grand Canyon 733Mpix

Its 127 12Mpix images stitched together in 3 rows every 5 degrees using a 300mm zoom lens. After some research and experimenting with different software for joining all the photos the best I found was Autopano Pro which rocks at auto detecting matching points in each photo and stitching and blending all the photos together. You can check out my results and other photos from our trip on my updated Photos Page. I took about 10 panoramas of the Grand Canyon including some HDR (High Dynamic Range) ones with 3 bracketed exposures per photo. Autopano Pro has support for stitching HDR panos but I did not have much luck as the was clear banding from photo to photo. If any of you have any tips on how to stitch HDR panos I would love to here. Well its been a fun break, back to fixing the last pre-beta Nimbus bugs tomorrow.

Hoover Dam

Back when I was doing Imagery I created an alternative implementation of ListSelectionModel because I needed an easy way to convert the selection into a SQL where clause. After much thought I came up with the idea of representing the selection as a list of ranges of selected ids. This means that you can then convert the selection into a list of "id >= rangeMin AND id <= rangeMax" SQL expressions. This solution is well suited to the case where the selection is created by the user. The only way for a user to create more than one range is to “Control” click the rows. It is unlikely that the user will ever select more than a couple dozen ranges. This results in a model that is always simple however many rows there are in the List/Table. As a by product of this alternative selection model can be up to 88,000x faster than the default with large amounts of rows. I have put together a couple of JUnit tests, one does a huge amount of random operations on both a DefaultListSelectionModel and a RangeListSelectionModel and compares the results at each stage. This means that I can be very sure that my implementation is fully compatible with the default one. The second unit test does some performance tests to compare the two models. The data set is 1,000,000 rows and 20,000 operations for each test

Performance Results

As you can see from the results that it is a large win on average. The test that it is slow at is AddSelectionInterval this is because it ends up with 17482 ranges. This should never happen in most real world applications, the only way I can see it happen is if you select all table rows that meet some search criteria which results in 1000s of random rows being selected. In all cases where the selection is user controlled then this will never happen.

Conclusion

I have seen bug reports coming in of hugely bad JTable performance when adding/removing rows from a huge table. After profiling I found that it was the SelectionModel causing the problems. You can see from the performance results that it can take minutes to do a large chunk of selection changes on a big table. So please try out my Ranges implementation in your application and tell me how it performs. If the responses are good I could change it to the default ListSelectionModel implementation in Java 7. To use it you just need to add the line “myTable.setSelectionModel(new RangeListSelectionModel());“.

Code Downloads

Here are the sources so you can try it out for yourself:

RangeListSelectionModel.java

RangeSelectionModelPerformanceTest.java

RangeSelectionModelTest.java