Here’s an excerpt:

A San Francisco cable car holds 60 people. This blog was viewed about 3,100 times in 2011. If it were a cable car, it would take about 52 trips to carry that many people.

Click here to see the complete report.

With rendering glitches

WITHOUT rendering glitches

Some time ago I stumbled upon an issue with JavaFX that was generating a lot of rendering glitches, namely: objects disappearing or partially disappearing. As can be seen it the pictures. Thankfully, I was able to isolate the source of the problem and also an easy workaround.

This issue happens when you have an empty Path object on your scenegraph, that is a Path without any elements added to it. The solution: just add paths which are not empty to the scenegraph, wait till you populate the path and then only then add it to the scenegraph. Another option is to pass in the following to the JVM “-Dprism.dirtyopts=false”, this will turn off the dirty region optimization and force a complete repaint of the scene each time the scene changes.

It has been fixed on JavaFX 2.1: : http://javafx-jira.kenai.com/browse/RT-18080. However till then you’ll have to rely on this easy workaround.

To create a Popupmenu in JavaFX you can use the ContextMenu class. You add MenuItems to it and can also create visual separators using SeparatorMenuItem.

In the example below I’ve opted to subclass ContextMenu and add the MenuItems on its constructor.

public class AnimationPopupMenu extends ContextMenu{
public AnimationPopupMenu()
{
(...)
  getItems().addAll(
    MenuItemBuilder.create()
    .text(ADD_PARTICLE)
    .graphic(createIcon(...))
    .onAction(new EventHandler() {
    @Override
    public void handle(ActionEvent actionEvent) {
      // some code that gets called when the user clicks the menu item
    }
    })
    .build(),

(...)
    SeparatorMenuItemBuilder.create().build(),
    MenuItemBuilder.create()
    .text(ADD_DISTANCE_MEASURER)
    .onAction(new EventHandler() {
    @Override
    public void handle(ActionEvent actionEvent) {
      // Some code that will get called when the user clicks the menu item
    }
  })
  .graphic(createIcon(...))
  .build(),
(...)
  );
}

• Line 5: I get the Collection of children of the ContextMenu and call addAll to add the MenuItems;
• Line 6: Uses the MenuItem builder do create a MenuItem;
• Line 7: Passes in the text of the menu item. Variable ADD_PARTICLE is equal to “Add Particle”;
• Line 8: Calls graphic which receives the menu item icon returned by createIcon:

  
      ImageView createIcon(URL iconURL)
      {
          return ImageViewBuilder.create()
                                 .image(new Image(iconURL.toString()))
                                 .build();
      }
  

• Line 9: onAction receives the event handler which will be called when the user clicks the menu item;
• Line15: Finally the MenuItem gets created by executing build() on the MenuItemBuilder class;
• Line18: Creates The Separator which you can see on the figure on the start of this post. It’s the dotted line between “Add Origin” and “Add Distance Measurer”;
• The other lines of code just repeat the same process to create the rest of the menu items.

Using JavaFX Popup Menus inside JFXPanel

If your embeding a JavaFX scene in a Swing app you’ll have to do some extra steps manually, if you don’t there won’t be hover animations on the popup menu and it won’t get dismissed automatically when the user clicks outside of it. There is a fix targeted at JavaFX 3.0 for this –  http://javafx-jira.kenai.com/browse/RT-14899

First you’ll have to request the focus on the javafx container so that the popup gets hover animations and when you click outside your app window it gets dismissed. In my case I pass a reference to the javafx swing container on the construtor of the popup menu, then I’ve overwritten the show method of ContextMenu so as to request the focus on the swing container before actually showing the popup:

public void show(Node anchor, MouseEvent event)
{
  wrapper.requestFocusInWindow();
  super.show(anchor, event.getScreenX(), event.getScreenY());
}

And lastly you’ll have to also dismiss the popup when the user clicks inside the javafx scene but outside of the popup by calling hide().

I almost forgot.. thanks to Martin Sladecek (Oracle JavaFX team) for giving me some pointers.

I’d like to point out that if you want to keep using javafx script in javafx 2.0 you can use Visage: http://code.google.com/p/visage/

1. CustomNode class doesn’t exist any more. Extend Group or Region to create “custom nodes”.
2. No more blocksMouse.
   In javafx 2.0 mouse events are only received by the top most node.
   There is also a new method on Node: setMouseTransparent(boolean). Mouse events on node with mouseTransparent set to true will be ignored and captured by the topmost node below.
3. Use properties to bind values.
   Javafx 2.0 has a set of classes you can use to bind values to each other. For each primitive type there is a class – SimpleBooleanProperty, SimpleDoubleProperty, etc, and for reference types you use an Object Property instance, for instance if you want to bind colors you can use SimpleObjectProperty<Color>.
4. Not all variables from the API are “bindable”.
   In Javafx 1.3 script you could bind to any variable of the API. In javafx 2.0 java language, that means that all variables from the API would need to be available as propertys. But that is not the case, for instance Bounds, LinearGradient, Stop are examples of classes that do not have propertys, so you can’t bind directly to their fields.  In this situations you’ll need to use other methods like low-level binding.

   For example suppose you wanted to bind a variable to the width of the layout bounds of a node. Since the field width of Bounds is not available as a property you would have to do something like this:

   In Javafx script:

   float nameLabelXPosition = bind - nameLabel.layoutBounds.width / 2;
   

   In Javafx2.0 java language:

   nameLabelXPosition.bind(new DoubleBinding() {
       {
           super.bind(nameLabel.layoutBoundsProperty());
       }
   
       @Override
       protected double computeValue() {
           return nameLabel.getLayoutBounds().getWidth() / 2;
       }
   });
   

5. When you used javafx script initiliazer blocks you can now use javafx builders.
   However in javafx script you could use binding in the initializer block, on java you can’t do that with builders. Only in JavaFX 3.0 (Lombard) will you be able to do that:http://javafx-jira.kenai.com/browse/RT-13680. So, whenever you used binding on javafx script initializer blocks you can’t use builders in java javafx 2.0.
6. No more language level support for sequences on javafx 2.0 java.
   Wherever you used sequences you now will use ObservableLists. To create ObservableLists you can use FXColections creator methods, there you’ll find all sorts of methods to create ObservableLists, even empty ones.
   Sequences present on the API have been converted to ObservableLists. If, for instance, you want to insert a node on a Group you need to get it’s children ObservableList and than call the method add on it. Like so: .getChildren().add(Node)
7. No more function types.
   Since only on java8 will there be support for Closures, the Oracle team has relied on the use of SAM types instead. That is a Class with only a single abstract method that you’ll have to override (Single Abstract Method). You can use the same strategy as Oracle and write SAM types wherever you used function objects.
8. No more triggers.
   Replace triggers with change listeners. You can assign a change listener to a property which is the same as assign a trigger on javafx script.
9. No more variable overrides on subclasses.
   For these one you won’t have a substitute on java, the best thing you can do is reassign a value to the variable on a subclass. But it is not the same, since overriding variables, assigned values before initializer blocks of superclass were invoked.

For further reading on this topic checkout:
http://weblogs.java.net/blog/opinali/archive/2011/05/28/javafx-20-beta-first-impressions

If you have any more valuable tips on this topic which I don’t cover please add them in the comments and I’ll insert them in the post.

• Converting from java.awt.color  to javafx.scene.paint.Color and vice versa
• Converting from java.awt.image.BufferedImage to javafx.scene.image.Image and vice versa

Nothing too fancy but I thought it might come in handy to other people so here’s the code:

public class SwingUtils {

    public static java.awt.Color toAWTColor(javafx.scene.paint.Color fxColor)
    {
        return new java.awt.Color((float)fxColor.getRed(), (float)fxColor.getGreen(), (float)fxColor.getBlue(), (float)fxColor.getOpacity());
    }

    public static javafx.scene.paint.Color fromAWTColor(java.awt.Color awtColor)
    {
        return ColorBuilder.create()
                            .red(awtColor.getRed() / 255.0)
                            .green(awtColor.getGreen() / 255.0)
                            .blue(awtColor.getBlue() / 255.0).build();
    }

    // There is a problem with this implementation: transparent pixels on the BufferedImage aren't converted to transparent pixels on the fxImage.
    public static javafx.scene.image.Image convertToFxImage(java.awt.image.BufferedImage awtImage) {
    	if (Image.impl_isExternalFormatSupported(BufferedImage.class)) {
    		return javafx.scene.image.Image.impl_fromExternalImage(awtImage);
    	} else {
    		return null;
    	}
    }

    public static java.awt.image.BufferedImage convertToAwtImage(javafx.scene.image.Image fxImage) {
    	if (Image.impl_isExternalFormatSupported(BufferedImage.class)) {
    		java.awt.image.BufferedImage awtImage = new BufferedImage((int)fxImage.getWidth(), (int)fxImage.getHeight(), BufferedImage.TYPE_INT_ARGB);
        	return (BufferedImage)fxImage.impl_toExternalImage(awtImage);
    	} else {
    		return null;
    	}
    }
}

This will probably be added on Lombard (next javafx version) as shown by this issue: http://javafx-jira.kenai.com/browse/RT-14038

Modellus 5 beta1 is available for download here. This version should be extremely usable.

Unpack files and run Modellus5.jar through the JVM (Java 1.6 update 20 is the minimum requirement). This is the PC version, I suspect some things won’t work on Mac and Linux although I haven’t tried it yet.

Modellus 5 is free. It is primarily used to aid teaching. By using only a mathematical language (no need to learn any new language) students and teachers are able to create models which then they can interact/view using animations/graphs/tables, etc.

From a technical standpoint, this version was created using javafx and swing. The animation window (background) was done in javafx while all the rest is Swing.

I’ll be posting more information about this version, shortly.

There are some examples you can try: here and here these are Modellus 4 examples though, they don’t use version 5 new features.

Let me know of any bugs you encounter or feature requests.

Normally in javafx you’ll use binding to listen to state changes and update other objects as appropriate. However this approach is not adequate when you want to listen to something that doesn’t imply a state change, something like say pressing a button (not a two state button, that would involve state).

With this post I wanted to share an idea I had about how javafx could handle those cases not covered by binding.

In JavaFX functions are variables, you can have a sequence of functions with this:

var buttonPressedListeners: function(:MouseEvent)[];

Let’s say you have a button and every time the button is pressed you iterate through the sequence above and call the listener functions. If you want to expose this to any interested listener you can declare the above sequence public. Now lets say a listener wants to register for listening, he can do so by inserting a function on the listener sequence:

insert fooListener into button.buttonPressedListeners;

If he wants to unregister this simple call would do it:

delete fooListener from button.buttonPressedListeners;

There is however a problem with this, you can insert the same listener two times into the sequence. We could iterate through the sequence list and check for duplicates but that would imply writing the same boiler plate code over and over again. So I would propose a language feature to enable declaring a sequence which doesn’t allow repeating values. Something like:

var buttonPressedListeners:  function(:MouseEvent) unique [];

Every time you want to call the functions on the sequence you’ll have to write down a for each statement which iterates through the sequence of functions, to fix this I would propose a second language feature: the ability to call all the functions in a function sequence with a single method call.

And that’s my event handling proposal.

Image by Mundilfari

On July 1st I’ll be no longer working full time with Modellus and as a consequence with JavaFX. I will however continue to work on it as an hobby, Modellus 5 is almost complete and I wish on having a very usable version on September.
From that point one, I preview Modellus will start to evolve at a quick pace taking advantage of the change of swing to javafx.

Despite some flawed features and omissions I’ve grown to like JavaFX very much, I think its based on solid concepts and will grow to become a very powerful language. I hope somewhere in the future I can continue working with it at a professional level..

Thanks to Feel Fine who has given us all their assets from their funny game Sweet Dreams (available on the IPhone) for free, we were able to add a bit more fun for kids learning science subjects through the use of Modellus.

On a technical aspect I don’t think there is much to say because I found things rather easy, the hardest part was retouching the images to fit nicely on Modellus format.
For every animation i use something like this Timeline :

var animationX:Timeline = Timeline {
 repeatCount: Timeline.INDEFINITE
 keyFrames: [
  KeyFrame {
   time: 0s
  },
  KeyFrame {
   time: 1s / fpsPerSecond
   action: function()
   {
     currentFrameIndex = (currentFrameIndex + 1) mod (sizeof frames); // change frame index
     currentImage = frames[currentFrameIndex]; // change currentImage which is bound to an ImageView image property
     if (currentSelectedFramesIndex == (sizeof selectedFrames) - 1)
     {
       // This is the final frame. I'm just going to stop the animation
        animationX.stop();

     }
   }
 }
 ]
};

You can see the new characters in action on the following video – the animations are actually much smoother than in the video (don’t know why):

If you’re a designer and would like to contribute some of your work: icons, animations, etc to Modellus please contact me (we don’t have the necessary time to create them) – mail is on the about page. Modellus is a free tool, used all around the globe, which aims to aid teaching of science subjects. Please help us shape the future of teaching making it more fun and less abstract. Your work will be credited and will obviously still remain your property.

To better plan my projects I’ve always been nosing around trying to figure out what to expect on future JavaFX releases.

After someone on a thread asked me to tell him what I knew about what is to come, I figured that since the list is a bit extensive and other people might be interested in knowing I’d do a post about it on my blog.

So here is what I know so far:

• New graphics stack called Prism, no longer dependent on awt/swing. Expect better performance.

(Update: You’re probably able to choose whether or not you want to use Prism )

• All bindings will be lazy (not sure how will that cope up with the rest)

(Update:The runtime will figure out what type of bind to use and always try to choose lazy over normal bind to get better performance. The scene graph has been changed to better accommodate lazy binding. On replace triggers will use normal binding by default.)

3D:

• 3D Space with 3d transforms putting 2d objects on a 3d space.
• Perspective and Parallel camera – probably the same feature that exists in Java3D
• Bounds now is on 3D

A little bit disappointed that there will be no 3d shapes, I needed that on my app. But than again there aren’t probably many people needing this.

(Updade: Just reminded that 3d shapes are done with transformed 2d shapes like triangles or squares, duuuuhhhhh! So you should probably be able to create 3D shapes yourself using the existing 2d shapes.)

Controls:

• Multi-line TextBox (TextBox is a text input field)
• Better skinning API. Added Regions
• Caspian Skin
• Password Box control
• Separator control
• ChoiceBox control. (not sure what this is, if someone knows please post a comment) Its a non-editable ComboBox
• Spacer Control (for layout purposes)
• Custom cell support on Lists
• Menus
• ToolBar
• Tree
• CSS support for charts

The biggest miss here is Table. Of course you can always rely on Swing Table

Graphics:

• Support for custom cursors
• Filling shapes with a texture

That’s all I know, also expect bug fixes and performance tuning here and there. I’m guessing It won’t take long for 1.3 to be released.

I think this release will give the so much needed boost to JavaFX: except for the table almost all standard controls, better performance, 3d capabilities and some other nice goodies.

Edit: Don’t forget that this is only what I suppose will be available on 1.3. These are not facts and somethings are probably wrong or not 100% right