Recently in JavaFX Category

After playing around with the modification I made im my previous post to MediaView, I was able to come up with a solution that works for any Node you pass in. The class is called FXContainer. Its purpose it to scale its contents to whatever width & height you specify, while maintaining the aspect ratio of the original.

By default, this results in the "black bar" effect that you've probably seen used to maintain aspect ratio in movies. That is usually appropriate, but there are also times when you may want the content expanded to fit the FXContainer, while still respecting the aspect ratio. For example, you may want a background image to fill the entire frame, but not become distorted. That is what the fillDimensions attribute does.

Here are screenshots demonstating the FXContainer:
 
Here is the source code.

/* * FXContainer.fx * * Created on Aug 4, 2008, 10:02:32 PM * * This class provides a container that can scale and * center its contents while maintaining the aspect * ratio of the original */ package org.coffeejolts.javafx.tests; import javafx.scene.*; import javafx.application.*; import javafx.scene.transform.*; /** * @author coffeejolts */ public class FXContainer extends CustomNode{ attribute fillDimensions:Boolean = false; attribute content:Node; attribute width:Integer; attribute height:Integer; private attribute group:Group = Group{ content: bind content transform: bind [translate, scale] } private attribute sf:Number = bind getScale(width,height,content.getBoundsWidth(),content.getBoundsHeight(),fillDimensions); private attribute scale:Scale = Scale{ x: bind sf; y: bind sf; }; private attribute translate:Translate = Translate{ x: bind getTranslation(width, content.getBoundsWidth() * sf); y: bind getTranslation(height, content.getBoundsHeight() * sf); }; private function getTranslation(a1:Number, a2:Number):Integer{ return ( a1 - a2) / 2.0 as Integer; } private function getScale(vw:Number, vh:Number, sw:Number, sh:Number, fullscreen:Boolean):Number{ var ar_v:Number = vw / vh; var ar_s:Number = sw / sh; var arViewLower:Boolean = ar_v < ar_s; if( fullscreen){ arViewLower = not arViewLower; } if( arViewLower){ return vw / sw; } return vh / sh; } function create():Node{ return group; } }

You can run the demo via webstart below. I have pack200 enabled, which will greatly reduce the download size for those of you using the Java 1.6.10 beta.

Since the JavaFX Preview SDK was released, I have been toying around with its video support. Overall, it is really, really good. I'm impressed and I've only hit the tip of the iceberg. Of course, there is room for improvement. For example, the current MediaView class does not have any concept of width nor height, whereas the ImageView class does. I was able to fix that with this amazingly short piece of code.

package org.coffeejolts.javafx.tests; /* * BetterMediaView.fx * * adds width, height, and surrounding bar color to * MediaView.fx */ import javafx.scene.media.MediaView; import javafx.scene.paint.Color; import javafx.lang.*; /** * @author coffeejolts */ public class ImprovedMediaView extends MediaView{ attribute fill:Color = Color.BLACK on replace{ myJPanel.setBackground(fill.getAWTColor()); }; attribute width:Integer on replace{ sgc.setSize(width, height); }; attribute height:Integer on replace{ sgc.setSize(width, height); }; }

Yes, that is really it. To use it, just swap out ImprovedMediaView for MediaView, and set your width, height, and fill like this...

package org.coffeejolts.javafx.tests; var frame:Frame = Frame { title: "ImprovedMediaView Test" width: 430 height: 360 closeAction: function() { java.lang.System.exit( 0 ); } visible: true stage: Stage { content:[ Rectangle{ x: 10, y: 10 width: bind frame.stage.width - 20 height: bind frame.stage.height - 20 fill: Color.DARKGRAY }, ImprovedMediaView{ width: bind frame.stage.width - 40 height: bind frame.stage.height - 40 translateX: 20 translateY: 20 fill: Color.BLACK clipAntialiased: true mediaPlayer: MediaPlayer{ autoPlay: true repeatCount: MediaPlayer.REPEAT_FOREVER media: Media{ source: "file:/C:/media/movie.avi"; } } } ] } }

The result looks like this:

In anticipation of the JavaFX SDK preview release, I have whipped up a very primitive JavaFX Script brush for Syntax Highlighter. Adding the brush is easy, so I will not bore you with boilerplate. Include the brush, set your code class to "jfx", and you get nicely highlighted JavaFX Script code on your blog!

Download the brush here: http://coffeejolts.com/downloads/shBrushJavaFX.js

Here is a sample from James Weaver's blog, highlighted using my brush:
/* * ButtonNode.fx - * A node that functions as an image button * * Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com) * to demonstrate how to create custom nodes in JavaFX */ package com.javafxpert.custom_node; import javafx.animation.*; import javafx.input.*; import javafx.scene.*; import javafx.scene.effect.*; import javafx.scene.image.*; import javafx.scene.paint.*; import javafx.scene.text.*; public class ButtonNode extends CustomNode { /** * The title for this button */ public attribute title:String; /** * The Image for this button */ private attribute btnImage:Image; /** * The URL of the image on the button */ public attribute imageURL:String on replace { btnImage = Image { url: imageURL }; } /** * A Timeline to control fading behavior when mouse enters or exits a button */ private attribute fadeTimeline = Timeline { keyFrames: [ KeyFrame { time: 0ms values: [ fade => 0.0 ] }, KeyFrame { time: 600ms values: [ fade => 1.0 tween Interpolator.LINEAR ] } ] }; /** * This attribute is interpolated by a Timeline, and various * attributes are bound to it for fade-in behaviors */ private attribute fade:Number = 1.0; /** * This attribute represents the state of whether the mouse is inside * or outside the button, and is used to help compute opacity values * for fade-in and fade-out behavior. */ private attribute mouseInside:Boolean; /** * The action function attribute that is executed when the * the button is pressed */ public attribute action:function():Void; /** * Create the Node */ public function create():Node { Group { var imageRef:ImageView var textRef:Text content: [ imageRef = ImageView { image: btnImage opacity: bind if (mouseInside) 1.0 - fade / 2 else fade / 2 + 0.5 }, textRef = Text { translateX: bind imageRef.getWidth() / 2 - textRef.getWidth() / 2 translateY: bind imageRef.getHeight() - textRef.getHeight() textOrigin: TextOrigin.TOP content: title fill: Color.WHITE opacity: bind if (mouseInside) fade else 1.0 - fade font: Font { name: "Sans serif" size: 16 style: FontStyle.BOLD } }, ] onMouseEntered: function(me:MouseEvent):Void { mouseInside = true; fadeTimeline.start(); } onMouseExited: function(me:MouseEvent):Void { mouseInside = false; fadeTimeline.start(); me.node.effect = null } onMousePressed: function(me:MouseEvent):Void { me.node.effect = Glow { level: 0.9 }; } onMouseClicked: function(me:MouseEvent):Void { fadeTimeline.start(); action(); me.node.effect = null; } }; } }

Sun has posted some slides from a presentation on Java Media Components on the JavaONE website. Unfortunately, the demos weren't included, but the source code in the slides hints at a very simple to use media API.

For example:
class SimplePlayerDemo extends JFrame { MediaPlayerDemo() { JMediaPlayer mp; try { mp = new JMediaPlayer(new URI("movie.mov")); } catch (Exception e) { System.out.println("Error opening media" + e); ... } add(mp); pack(); setVisible(true); mp.play(); } ...
I am SO looking forward to the SDK pre-release.
http://dsc.sun.com/learning/javaoneonline/2008/pdf/TS-6509.pdf

I went hunting for more information on Java Media Components, and found that there are two sessions scheduled for JavaOne that should shine some light on the new API.

https://www28.cplan.com/cc191/session_details.jsp?isid=296509&ilocation_id=191-1&ilanguage=english

https://www28.cplan.com/cc191/session_details.jsp?isid=296511&ilocation_id=191-1&ilanguage=english

I was hacking around on the JavaFX 2D Tutorial application when I noticed a bug in the ImageView class. Setting antialias: true actually disables antialiasing; and setting antialias: false enables antialiasing.

antialias: true

antialias: false:

ClockUI.fx

I went back and applied this to the sellmic.com clock that I've been hacking on. You can launch the clock with antialiasing enabled below.

I have been playing around with the clock on http://sellmic.com/blog/2007/05/20/javafx-clock/, which is really cool. A number of people commented that the implementation was chewing up too many CPU cycles, so I decided to see if I could fix that. I found that the timer loop was the culprit. After modifying the code to use a Swing timer, CPU usage is almost 0%. You can launch the new Clock via webstart below.

Source
ClockUI.fx
JfxClock.fx