Joshua Marinacci's Blog

Joshua Marinacci first tried Java in 1995 at the request of his favorite TA and never looked back. He has spent the last ten years writing Java user interfaces for wireless, web, and desktop platforms. After tiring of web programming at a certain home improvement retail center, a wireless carrier, and a document management company he joined the Swing team at Sun to finally get back to into high quality user interfaces. Joshua recently co-authored O'Reilly's Swing Hacks with Chris Adamson. He also leads the Flying Saucer open source project and helps out with JDIC and SwingLabs. Joshua holds a BS in Computer Science from Georgia Tech and recently moved to San Jose, California.

At the speed of JavaFX

As we all rush headlong into JavaOne prep someone (okay it was James Gosling) sent me an email about performance of JavaFX. Speed is a crucial issue for anything dealing with user interfaces, so we care deeply about performance in our work with JavaFX. On the other hand we are focusing on bug fixes and correctness right now, not optimization, so it's not as fast as it could be.

So how do we fare?

Well, as a rough measurement, since there aren't any real benchmarks yet for rich internet applications, we have been using a website called BubbleMark, which has a simple graphics application written in many different languages/runtimes. It's the closest thing we have to a cross platform bench mark.

So, how do we fare?

James had this to say: "I just tried it on a MacPro running JDK6(developer preview 10) and the swing version runs at 198 fps with 32 balls, and the JavaFX version runs at 186 fps. Flex (cached) ran at 58...".

So JavaFX's graphics layer, built on the currently un-optimized SceneGraph library, is only a few percentage points behind the plain Java2D/Swing version, and they are both 3 to 4 times faster than the Flex version. Not bad!

Back from Australia

Okay, so I've actually been back for several weeks, but JavaOne stuff has kept me super busy.

I had a simply awesome time in Syndey. It's really a great city to visit. Very clean and friendly. And some truly excellent coffee. If you ever go be sure to order a flat white.

I was in Australia for the Sydney Tech Days, speaking on JavaFX. While there I also gave a short presentation on Dynamic Languages for the JVM to several local universities. My focus was on Ruby, JavaScript, Groovy, and JavaFX Script. I specifically left out Jython because it was not being supported very well and looked like it might die. Of course, literally a day after I said this Sun announced that we are hiring two of the main Jython guys and it will be very well supported from now on. So I'm already out of date. Such is the life of a traveler.

While in Sydney I also did an interview with David Coldrick on JavaFX and the state of desktop Java. You can see my interview at Youtube below or watch the super high-res version here

Oh, and enjoy a few photos from the zoo and aquarium.

www.flickr.com Joshua Marinacci's Sydney 2008 photoset

Bleg: do you know of any good forum software?

Today I think I shall use the power of my blog for evil instead of good. Well, maybe not evil but at least for my own personal gain.

I need some forum software. After searching online for an hour or so and asking a few friends the consensus seems to be phpbb. Is this really the best of the bunch? The many forum software packages I have found all leave a great deal to be desired. They are often ugly, have extra features I don't need, are missing a few crucial features that I do need, and seem to have a plethora of config options. Surely there is something good out there I'm missing. So my question to you is: what forum software do you recommend?

Here are my constraints:

• the UI must be skinnable
• it must have true email support, where some readers can read and post via email and some readers can read and post via the website.
• it must be open source or at least free for commercial use (though i'm not averse to purchasing a support contract after evaluation)
• Being written in Java is desired but not essential. As long as it runs on Linux or Solaris I'm fine.

Any ideas?

Thanks.
  Josh

You need at least 386 Power

This is some old videos from the early days of the internet. And by videos I mean VHS. Videos from the mid 1990s that taught you about what the internet is and how to use it. Check out the screenshots of Yahoo circa 1995 and the mention of Gopher.

Internet Power, Volume 1: Flashback to the VHS-Era Web

I recall trying to explain the internet to friends and family back then and had trouble describing the scale of it.

Me: It sends files.
Them: so it's like a fax machine?
Me: it sends email.
Them: So it's like the postal system?
Me: It finds things.
Them: So it's like a phone book?
Me: Gaaah!
Them: I don't see what the big deal is.

Of course we now know the Internet is all of those things and more, fundamentally changing the way everything is done. Now I could summarize it as: The Internet is the new electricity.

JavaFX Doodle #3: A Paper Cutout Demo

I just flew back from Australia where I spoke at the Sydney tech days and boy are my arms tired. Actually, it's more my legs than my arms, and technically I arrived before I left which is pretty weird... but anyway, I'm back now. I'm exhausted and don't have my photos in order yet so the Sydney post will have to wait until next week. For now, however, I thought I'd share with you Doodle #3, which is one of the demos I showed in Sydney.

A Paper Cutout is a style of application common in the Flash world. It has a character of some sort with a bunch of pieces of clothing or other accessories next to it. You can think of it as the modern equivalent of a paper doll or Mr. Potato head. One of my favorites it the South Park character builder. You can run my humble little version of it here.

Paper Cutout: run it

I built this demo in about an hour. I spent 10 minutes writing the code and 50 minutes badly drawing the artwork in Photoshop. When you run the demo you can move the pieces around and drop them on the canvas. Notice the drop shadow below the piece when you drag it. The code to do this is very simple. Each of the pieces is just a PNG image drawn in Photoshop. To add the movement I subclassed ImageView to create the Cutout class.

class Cutout extends ImageView {
    attribute x: Number;
    attribute y: Number;
    attribute url: String;
    attribute movable: Boolean;
}
attribute Cutout.movable = true;
attribute Cutout.image = Image { url: bind url };
attribute Cutout.transform = bind translate(x,y);

The code above is pretty straight forward. The subclass adds x and y attributes which are bound to the transform, meaning the transform will update whenever the x or y coordinate changes. The image is bound to the url, so when you set the url attribute the real image will be loaded automatically. Now we just need some event handlers:

attribute Cutout.onMousePressed = operation(e:CanvasMouseEvent) {
    this.filter = ShadowFilter { distance: 10, radius: 10, opacity: 0.7 };
};
attribute Cutout.onMouseReleased  = operation(e:CanvasMouseEvent) {
    this.filter = null;
};
attribute Cutout.onMouseDragged = operation(e:CanvasMouseEvent) {
    if(movable) {
        this.x += e.dragTranslation.x;
        this.y += e.dragTranslation.y;
    }
};

When the mouse is pressed it will turn on a shadow filter. When the mouse is released it will turn the shadow off. When you drag the mouse it will update the x and y attributes. The JavaFX API saves you from the pain of coordinate conversion by providing a pre-converted dragTranslation point. Just add it to the x and y attributes and you are off to go. Notice the if(movable) test. This is to turn off dragging if necessary, which is required for the image of the main character in the code below.

Now just combine them in a MainCanvas group and you are done.

class MainCanvas extends CompositeNode {  }
operation MainCanvas.composeNode() {
    return Group {
        transform: [translate(50,60)],
        content:  [
            Cutout { x: 200, y: 0, url: "paperdoll/frog.png", movable: false  },
            Cutout { x: 5, y: 0, url: "paperdoll/hat.png" },
            Cutout { x: 5, y: 80, url: "paperdoll/patch.png" },
            Cutout { x: 5, y: 140, url: "paperdoll/moustache.png" },
            Cutout { x: 40, y: 190, url: "paperdoll/goatee.png" },
            ]
    };
}

So that's doodle number three. Almost entirely declarative and quite simple. See you next week.

   - Josh

Resources

• NetBeans project
• Java Webstart link

JavaFX Script Doodles, #2: a tabbed rectangle

Before I dive into my second doodle I'd like to mention the following Groodle. Allow me to explain. Andres Almiray saw my first JavaFX Doodle and decided to recreate it using the GraphicsBuilder syntax of Groovy; hence a Groodle! :) His first version is verbose, but later he updated it using the new alias syntax to be more compact. JavaFX is still a more concise syntax (IMHO), but Groovy is getting close and certainly has it's own strengths. I hope in the future Groovy will be another great way to build graphically rich apps on the Java platform. After all, why have one awesome way to build apps when you can have two! Be sure to watch Andres' excellent blog for updates.

Now, on to the next doodle.

A Tabbed Round Rectangle

This is another sample for you to paste into NetBeans. It's a tabbed rectangle that looks like this:

Basic TabRect

Here's the basic code. I started by subclassing CompositeNode and defining the attributes that I want to expose, which is mostly the same ones as the RoundRectangle.

import javafx.ui.canvas.*;
import javafx.ui.*;
public class TabRect extends CompositeNode {
    attribute fill: Paint;
    attribute stroke: Paint;
    attribute x: Number;
    attribute y: Number;
    attribute width: Number;
    attribute height: Number;
    attribute tabSize: Number;
    attribute strokeWidth: Number;
    attribute arc: Number;
}
attribute TabRect.fill = red;
attribute TabRect.stroke = black;
attribute TabRect.x = 0;
attribute TabRect.y = 0;
attribute TabRect.width = 100;
attribute TabRect.height = 50;
attribute TabRect.tabSize = 10;
attribute TabRect.strokeWidth = 3;
attribute TabRect.arc = 10;

So that's pretty straight forward. A clean definition with decent defaults. Good defaults are always important, since it lets developers get started right away. Now I could create this by drawing a rotated rectangle for the tab on top of a regular round rectangle, but that wouldn't be very dynamic. Really I want something that grows and shrinks properly. Then I can use it in cool transition effects, (more on that later). So instead of doing some funky shape unions I just made the shape out of curves and line segments. Note the bind statements everywhere.

operation TabRect.composeNode() {
    return Group {
        transform: bind [translate(x,y)]
        content: [Path {
    
            fill: bind fill
            stroke: bind stroke
            strokeWidth: bind strokeWidth
            d:[
                MoveTo{x: 0, y: bind arc},
                LineTo{x: 0, y: bind height-arc},
                ArcTo {x: bind arc, y: bind height, rx: bind arc, ry: bind arc },
                LineTo{x: bind (width/2-tabSize), y:bind height},
                LineTo{x: bind width/2,y:bind height+tabSize},
                LineTo{x:bind width/2+tabSize,y:bind height},
                LineTo{x:bind width-arc, y: bind height},
                ArcTo {x: bind width, y: bind height-arc, rx: bind arc, ry: bind arc },
                LineTo{x:bind width, y: bind arc},
                ArcTo {x: bind width-arc, y: 0, rx: bind arc, ry: bind arc },
                LineTo{x:bind arc, y: 0},
                ArcTo {x: 0, y: bind arc, rx: bind arc, ry: bind arc },
            ]
            transform: [translate(10.0,10.0)]
        }]
    };
}

It's those bind statements above which contain the magic. Each part of the shape is defined in terms of the height, width, tabSize, and arc variables. This means you can animate those properties and the shape will automatically adapt, no special updating code required.

To use this new shape, just create an instance like this:

TabRect{ tabSize: 10, strokeWidth: 3, width: 100, height: 50};

That will give you a decent looking shape but how about some animation? A nice transition would be handy. The code below does this by changing the height, tabSize, arc, and opacity over one second. The tab nicely fades in and grows down. This would be a nice effect to have when you rollover a waypoint, for example.

var op = 0;
var tab = TabRect{ var: me, tabSize: 10, opacity: bind op, strokeWidth: 3};
Group {
    content: [
    tab,    
    Rect { x: 200, y: 50, fill: red, width: 20, height: 20, 
        onMousePressed: operation(e) {
            tab.tabSize = [0..10] dur 300 delay 1000;
            tab.height = [0 .. 100] dur 1000;
            tab.arc = [0 .. 10] dur 1000;
            op = [0, 0.1 .. 1.0] dur 1000;
        }
    }
    ]
}

And here's what this would look like. Notice the delay 1000 for the tabSize part which makes the tab pop in after the rest of the shape, creating a sort of cartoon like effect. (And yes, one day these doodles will be inline applets, but the compiler support isn't quite there yet. We are working very hard and will have something soon. Stay tuned.)

Final TabRect with animation.

Enjoy. Any ideas for more doodles?

Upcoming Java and JavaFX Events you should attend

Travel, travel, and more travel.

Between many FX related meetings, tech conferences, the holidays, and my wife's travel, I have been in an airport about once a week since June. Clearly whoever said technology would remove the need for travel never had to work on JavaFX. I'm sure technology will abolish travel one day, though, just as offices no longer use paper. :)

So in case you are interested in traveling as well, here are some Java and Java related events coming up, including some featuring me.

Sun Tech Days: March 4th-6th, Sydney, Australia.

Yes, I'm heading to the land down under to talk about JavaFX and NetBeans. James Gosling and Bob Brewin will also be there. I've even done a video promo for the event that should be up soon. Since this is my first trip to the southern hemisphere I'm taking a few extra days after the conference for some much needed vacation. Since I live in Oregon the thought of summer sunshine was more than enough incentive to rope me into a 20 hour plane trip.

Oh, and if you live in Australia but can't get to Sydney, click on the link above anyway. We will have satellite events in several other cities.

The Java Posse Roundup: Crested Butte, CO. March 4th-7th

I can't attend this year's Roundup since I will be in the aforementioned land down under, but I'll be there in spirit. Last year's event was incredible and intense. Oh, and the skiing was pretty good too. This year the topic is DRY: Don't Repeat Yourself. If you aren't in Australia you should come to this event.

JavaFX Boot Camp: Indianapolis on April 9 - 11

James Weaver, JavaFX coder extraordinaire, is hosting an intensive bootcamp to learn JavaFX. I believe that this is the first non-Sun JavaFX related event, which is pretty cool. Sadly I can't attend this conference since I'll be in JavaOne prep mode, but I'm sure it'll be fun.

JavaOne 2008: San Francisco, May 6-9th

And of course the granddaddy of all Java events is JavaOne. I have 2.5 sessions accepted this year so I'll be seeing you all there in early May. We've got tons of cool stuff coming. It's really amazing what's happened in the year since last JavaOne and we can't wait to show you. Betas for the JavaFX Script compiler, the scenegraph, hardware accelerated effects, HTML, and the Java 6 Update 10 are all converging upon JavaOne. And of course cool demos of everything. Oh, and we just might have a few other things up our sleeves. Be sure to refresh your blogs if you can't make it in person.

Community One, May 5th

Though JavaOne is rather pricey, the day before it starts (Monday May 5th) we will have a free event focusing on open source technologies like Java, NetBeans, and Open Solaris. It's called Community One and space is limited so sign up early.

So get your walking boots on. It's going to be a busy spring.

JavaFX Doodles: Doodle #1

About four years ago when I started my blog I created a series of posts called Swing Hacks. This series eventually formed the basis of my similarly named book with Chris Adamson and led to my job at Sun. I think the series was successful. I still get an amazing number of hits to Swing Hacks 4, the Universal Right Click.

I wish I had carried the series longer, however, since there was probably much more I could talk about. So this is why I'm starting a new series for JavaFX that I'm going to call JavaFX Doodles. Each doodle will be a small example of code snippet that does something compact but useful. I will cover only JavaFX Script initially, then add mobile and designer tools later. Also note that I am using the currently available interpreter version of the JavaFX Script syntax. I will switch to the compiler version with a slightly different syntax when it becomes available (which shouldn't be too much longer).

I hope this series goes well and produces easily usable samples that will improve your own code. Let me know if there's anything you'd like to see a Doodle of. Here goes!

JavaFX Doodle #1

This is a simple demo I often use in my presentations. It uses basic binding and animation to create a grid of fading red cells.

Cells.fx in action

Most of this code is boilerplate. It declares a subclass of Rect called Cell which adds two attributes (the JavaFX Script term for properties): red and col. Then it creates a subclass of CompositeNode called RolloverGrid which returns a Group of 300 cells in a 30x10 grid. That's all pretty straight forward. I'll explain the interesting bits below.

package simpledemos;
import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
import java.lang.System;
class Cell extends Rect {
    attribute red : Number;
    attribute col : Color;
}
attribute Cell.x = 0;
attribute Cell.y = 0;
attribute Cell.width = 20;
attribute Cell.height = 20;
attribute Cell.red = 0.0;
//bind the red component of the color to the red attribute of the Cell.
// this will be auto-updated when ever the red attribute changes.
attribute Cell.fill = Color {
    red: bind red, green:0.0, blue:0, opacity: 1.0};
//animate the red attribute from 1 to 0 over 5 seconds, in 0.05 increments.
attribute Cell.onMouseEntered = operation(e) {
    red = [1.00,0.95 .. 0.00] dur 5000 linear; };
class RolloverGrid extends CompositeNode { }
operation RolloverGrid.composeNode() {
    var cells: Cell*;
    for(j in [0..10]) {
        for(i in [0..30]) {
            //insert a new cell into the cells list
            insert Cell { x: i*21, y: j*21 } into cells;
        }
    }
    return Group{ content: [Rect { x: 0, y: 0, width: 31*21, height: 11*21, fill: black},cells] };
}
Canvas { content: RolloverGrid { } }

There are two interesting parts to this code which do all of the work. The first is the initializer for the fill attribute (in bold above). It says that the fill attribute will be set to a Color composed of red, green, blue, and opacity components. Notice that green, blue, and opacity are set to constants (0,0 and 1, respectively). red, however, is set to bind red. This means it will be bound to the red attribute of the enclosing class, Cell. Because of this bind operation the red component of the fill attribute will be automated updated whenever the red attribute of Cell class changes.

The second important part is one line further down where the code sets an onMouseEntered handlers. In this operation it creates a animation for the red property. The code red = [1.00,0.95 .. 0.00] means 'make red go from 1 to 0 in steps of 0.05'. The dur 5000 part means to take 5000 milliseconds. The linear keyword says to animate linearly rather than with the default, which is a smooth in and smooth out (I'll describe these keywords in greater detail in a future blog).

Whenever the mouse enters a cell it will kick off an animation for that cell. The color will go immediately to bright red and then fade back to black (since the other components of the color are already 0). That's it! These two lines do all of the hard work to create an interactive animation.

Limitations

You may have noticed a problem with this code. If you move the mouse in and out of a cell repeatedly within 5 seconds then then a new animation will start. There is no way to know if the animation is already running and optionally stop it. This is a limitation in the current animation system that is currently being overhauled by the compiler team. When the new syntax is ready I'll show you how to update to it.

To try out this code just paste it into an open JavaFX Script buffer into NetBeans 6 with the latest plugin (instructions for setting up NetBeans here)

Biblioteca

• Swing Hacks 4, the Universal Right Click.
• JavaFX Plugin for NetBeans

April 2008

Search this blog:

Categories

Archives

April 2008
March 2008
February 2008
January 2008
December 2007
November 2007
October 2007
September 2007
August 2007
July 2007
June 2007
May 2007
April 2007
March 2007
February 2007
January 2007
December 2006
November 2006
October 2006
September 2006
August 2006
July 2006
June 2006
May 2006
April 2006
March 2006
February 2006
November 2005
September 2005
August 2005
July 2005
June 2005
May 2005
April 2005
March 2005
February 2005
January 2005
December 2004
October 2004
September 2004
August 2004
July 2004
June 2004
May 2004
April 2004
March 2004
February 2004
January 2004
December 2003
November 2003
October 2003
September 2003
August 2003

Recent Entries

At the speed of JavaFX

Back from Australia

Bleg: do you know of any good forum software?

Articles

Mapping Mashups with the JXMapViewer
Having introduced SwingLabs' JXMapViewer and JXMapKit in a previous article, Joshua Marinacci puts these components to work by showing how you can bring in geographic data from external sources and use Painters to create custom geodata GUIs. Nov. 13, 2007

Building Maps into Your Swing Application with the JXMapViewer
Mapping is a common feature of many applications, and a new component from SwingLabs makes it easy to add maps to your Java GUI application. Joshua Marinacci shows you how to adding maps to your Swing app can be as simple as dropping a JXMapViewer component into a NetBeans layout. Oct. 30, 2007

Generating PDFs for Fun and Profit with Flying Saucer and iText
Generating PDFs used to require proprietary and/or difficult-to-use tools, but the combination of the Flying Saucer XHTML renderer and the iText PDF library makes it easy to generate PDFs from a variety of markup formats. Flying Saucer founder Joshua Marinacci shows how it's done. Jun. 26, 2007

All articles by Joshua Marinacci »

This work is licensed under a Creative Commons License.