Creating a partially rounded rectangle

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).

[jfx]
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
]
}
[/jfx]

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

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

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’sMobile 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

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

While pouring over bug reports today I ran across an older one, 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 🙂

[jfx]
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();
[/jfx]

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:

[jfx]
def transition = TypewriterTextTransition {
rate: .5s
node: someTextNodeOrLabelOrSomething
toValue: "This is the text I’d like to transition to"
}
[/jfx]

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!