Archives for the month of: February, 2010

Creating a partially rounded rectangle

February 28, 10 //
0

After seeing a twitter message today asking whether it was possible to create a rectangle in JavaFX which was a mixed rounded and normal rectangle, I thought I’d post how I did this a few months back.

The code below will draw a rounded rectangle in the top-right, bottom-right, and bottom-left corners. The top-left corner is a square point. You can change this by editing the four parameters, and of course trivially modify this code to be a function taking four arguments.

The reason why I have the test for if (topRightCurve > 0) is because when I was writing this code there was a known issue with drawing arcs with a zero radius. I know this has been fixed, but I’m not sure when it was fixed (it may be in 1.2, but most certainly it’s fixed in 1.3).

public var topLeftCurve:Number = 0;
public var topRightCurve:Number = 0;
public var bottomLeftCurve:Number = 0;
public var bottomRightCurve:Number = 0;

Path {
	fill: color
	stroke: stroke
	strokeWidth: 1
	elements: bind [
		// starting just past the top-left curve
		MoveTo { x:topLeftCurve,  y:0 },

		// draw line to where top-right curve should start
		HLineTo { x:menuWidth - topRightCurve },

		// arc around to just below the top-right curve
		if (topRightCurve > 0) {
			ArcTo {
				x:menuWidth, y:topRightCurve,
				radiusX:topRightCurve, radiusY:topRightCurve,
				sweepFlag:true
			}
		} else null,

		// go to just above the bottom-right curve
		VLineTo { y: menuHeight - bottomRightCurve }

		// arc around to just to the left of the bottom-right curve
		if (bottomRightCurve > 0) {
			ArcTo {
				x:menuWidth-bottomRightCurve, y:menuHeight,
				radiusX:bottomRightCurve, radiusY:bottomRightCurve,
				sweepFlag:true
			}
		} else null,

		// draw line to where bottom-left curve should start
		HLineTo { x:bottomLeftCurve },

		// arc around to just above the bottom-left curve
		if (bottomLeftCurve > 0) {
			ArcTo {
				x:0, y:menuHeight-bottomLeftCurve,
				radiusX:bottomLeftCurve, radiusY:bottomLeftCurve,
				sweepFlag:true
			}
		} else null,

		// go to just below the top-left curve
		VLineTo { y: topLeftCurve }

		// arc around to just above the bottom-left curve
		if (topLeftCurve > 0) {
			ArcTo {
				x:topLeftCurve, y:0,
				radiusX:topLeftCurve, radiusY:topLeftCurve,
				sweepFlag:true
			}
		} else null
	]
}

Also, if you’re using the JFXtras project, there is a shape in there, called the MultiRoundRectangle that does precisely this as well.

JavaFX links of the week, March 1

February 28, 10 //
0

Another week, another bunch of JavaFX links. It was a relatively quiet week this week in the JavaFX-sphere, but there is still a few good links which I’ve included below.

  • The JavaFX community is a nice tight-knit group of enthusiasts and developers. Whilst we mostly keep in touch via twitter, we all worry about the people who aren’t part of the twitter community, and who may feel lost and isolated when learning JavaFX. Well, now that JavaFX is an Oracle product, we also mingle in Oracle Mix. Join us if you want to ask questions or just discuss JavaFX.
  • The JavaFX Composer team (a NetBeans plugin developed at Sun/Oracle which makes building JavaFX-based graphical forms easier) have started a new blog to publicise their progress as they work towards a final release. Everything I’ve heard from people using it is that it is a great tool, and very, very useful for building quality JavaFX-based software.
  • Simon Morris has posted the second tutorial on his website, covering FXD manipulation.
  • Rakesh Menon has blogged about some recommended performance optimisations when developing JavaFX applications. These are all very good tips, so do take a moment to make sure you’re aware of them. He plans to maintain this post with similar advice for JavaFX 1.3.
  • In another blog post, Rakesh shows off his results from using the JavaFX Composer tool to build a JavaFX-based user interface.
  • Drew continues his work on a JavaFX game using Phys2D. This week he updated the graphics, and also added some effects to his game.
  • I happened upon this website recently, which is just a single (but rather long) page outlining all of the JavaFX Script syntax. It seems like a very good reference for anyone new to the language.

That’s us for another week. Catch you again next week! :-)

JavaFX links of the week, February 22

February 21, 10 //
0

A lot of good links this week in the JavaFX-sphere. It’s interesting to read the fun that people are having with JavaFX, as well as the controversy of people who don’t quite get JavaFX and it’s relevance. Personally, I think people should continue to discuss their thoughts of JavaFX, but by no means should they write it off just yet – 1.3 is going to be a rocking release and really set the foundation for future releases. Also – give JavaFX a chance, posts like Jonathan Merritts recent post are becoming more frequent as people find hidden delights in JavaFX Script and the API’s being developed.

Anyway – on with the news.

  • As I mentioned, it’s been a funny old week in JavaFX-land, with both negative posts and positive posts. Being a good link reporter, I’ll leave you to make up your own mind.
  • The Silicon Valley JavaFX Users Group posted the video for Hinkmond Wong’s ‘Mobile Dojo‘ talk, which I’ve posted on FX Experience in a slightly larger size. You can also see just the slides at Stephen Chin’s blog.
  • Richard Bair posted about text transitions following a recent bout of bug triage, where he encountered a requested feature which he’s putting back out to the community to try and solve. This is something we occassionally encounter – deciding whether we should develop something internally or rely on third-parties to develop functionality.
  • Details about the JavaFX Composer preview 2 release came online this week. I’m not sure if this coincided with the actual preview 2 release or not. JavaFX Composer is a plugin for NetBeans that makes it easy to build JavaFX-based user interfaces (although it’s intended for developers moreso than designers, who should use the forthcoming Authoring Tool being developed at Oracle).
  • Jonathan Merritt decided to use the JavaFX Charting API to roughly predict when he believes the JavaFX 1.3 release will be. He notes that it was more of a chance to play with the chart components (and linear regression models) than anything else, and he is not in a position to actually know the release date – so take it for what it is. Also, note that his chart can only report on the public issues in the JavaFX bug tracker.
  • Geeky coder (I’m assuming that’s not his/her real name) posted a JavaFX tip titled ‘Reducing development time by running JavaFX application using class file and with JRebel‘.
  • Jan Goyvaerts posts his thoughts on implementing the Observer pattern in JavaFX.

That’s all folks. Keep on playing/working with JavaFX and, if you have a website, posting about your experiences with JavaFX. As always, I encourage you to email me, or talk to me on Twitter. You can find us at @fxexperience, and personally at @richardbair, @jasperpotts, and @jonathangiles.

Hinkmond Wong at Silicon Valley JavaFX users group

February 19, 10 //
5

Stephen Chin has just announced that the slides for the third Silicon Valley JavaFX Users Group have been posted online. This talk was by Hinkmond Wong and therefore covered mobile aspects of Java and JavaFX. As I have done for both Richard’s and Amy’s talks previously, I have also embedded the video below for your enjoyment. You can flick between video and the slides by clicking in the top-right area of the player below.

The next talk coming up is a joint talk with the Silicon Valley Web JUG, covering Java Store and JFrog Artifactory. This is on March 10th at 6:00PM at the Googleplex, and you can find all other relevant details at the link above. Be sure to RSVP if you plan to attend, virtually or in person. Remember that attending virtually allows for you to watch the presentation live, and interact with both the presenter via Google moderator questions, as well as taking part in chat with others attending virtually. So it’s not much worse than being there in person!

Text Transitions

February 16, 10 //
4

While pouring over bug reports today I ran across an older one, RT-4829">RT-4829. Essentially what the bug submitter wanted was the ability to animate text in a Text node or label. So it starts out with no characters and then a character at a time is added to the node. The sample code posted in the bug report was pretty cool, it looked a lot like one of the text bubbles you’d see in Dragon Warrior or some other old school RPG. It occurred to me that this is fertile ground for an aspiring JavaFX library developer :-) 

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.effect.DropShadow;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.scene.text.Font;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;

def BASE_WIDTH = 800;
def BASE_HEIGHT = 600;
def MARGIN = 20;

var backgroundRect = Rectangle
{
  x:        0
  y:        0
  width:    BASE_WIDTH
  height:   BASE_HEIGHT

  onMouseClicked: function(event) { t.playFromStart() }
}

var boundingRect = Rectangle
{
  x:            MARGIN * 2
  y:            BASE_HEIGHT * 2 / 3 - MARGIN
  width:        BASE_WIDTH - MARGIN * 4
  height:       BASE_HEIGHT - (BASE_HEIGHT * 2 / 3)
  fill:         Color.rgb(255, 255, 255, 0.2)
  stroke:       Color.WHITE
  strokeWidth:  2
}

var displayedText = Text
{
  x: boundingRect.x + MARGIN
  y: boundingRect.y + MARGIN
  wrappingWidth: boundingRect.width - MARGIN * 2
  content: ""
  font: Font { size: 36 }
  textOrigin: TextOrigin.TOP
  //stroke: Color.BLACK
  fill: Color.WHITE
  effect: DropShadow {}
}

def FINAL_TEXT = "I was trying to get the text to wrap, but the text layout engine would keep putting a character on the previous line until the full word was visible.";
var charCount = 0 on replace
{
  var textToDisplay = FINAL_TEXT.substring(0, charCount);
  displayedText.content = textToDisplay;
}

Stage
{
  title:   "Text demo"
  visible: true
  scene:   Scene
  {
    width:   BASE_WIDTH
    height:  BASE_HEIGHT
    fill:    Color.BLACK
    content:
    [
      backgroundRect,
      boundingRect,
      displayedText
    ]
  }
}

var t = Timeline
{
  keyFrames:
  [
    // In reality the speed would be per letter so the times would
    // be computed dynamically.  I have an idea of how to do that.
    // Initial experiments also suggest that the speed of displaying
    // each letter should be relative to the width of the letter.
    KeyFrame { time:  0s, values: charCount => 0 }
    KeyFrame { time:  3s, values: charCount => FINAL_TEXT.length() }
  ]
};
t.play();

I think the actual feature the developer was asking for (the ability to say, KeyFrame { time: 3s, values: text => “This is the text to transition to” }) wasn’t the right way to go about the problem. Rather, there should be a handful of Transition class implementations for handling special text transition effects. So that you would be able to write something like:

def transition = TypewriterTextTransition {
    rate: .5s
    node: someTextNodeOrLabelOrSomething
    toValue: "This is the text I'd like to transition to"
}

And then you start the transition and voilà! It encapsulates all the nasty details and provides useful knobs for various types of effects you may want (for example, in addition to just having the letters appear, you could fade them in one at a time or have them drop from the sky or whatever you want).

Seems like a cool project for somebody who wants to get into learning JavaFX!

JavaFX links of the week, February 15

February 14, 10 //
0

A heap of JavaFX links this week. It’s great to see more and more chatter going on in twitter and other places related to JavaFX. It feels like people are becoming more excited about what is available now, and what is coming up in JavaFX 1.3. Here’s the links for the past week – I hope you enjoy them!

That’s us for another week. Catch you all same bat time, same bat channel next week.

JavaFX links of the week, February 8

February 7, 10 //
1

The main news out this week was the availability of a maintence release of JavaFX 1.2, taking the version number up to 1.2.3.  Other than that, there have been a number of interesting posts by people exploring physics-based software and using ‘advanced’ features of JavaFX such as clipping. I hope you find these links useful, and as always please feel free to email me any links you think might be useful to include here.

That’s it for another week. Keep up the hard work people – it’s great to see the growing enthusiasm for JavaFX, especially on your blogs, and on twitter. By the way, the FX Experience team all have twitter accounts, as well as one for this website. You can find us at @fxexperience, and personally at @richardbair, @jasperpotts, and @jonathangiles.