I'm pretty sure I'm not the only one that dropped his jaw in awe at JavaOne 2006 when Romain Guy demonstrated Aerith during the opening keynote. Aerith represents the holy grail of Swing applications. It looks and behaves like a native OSX application, the catch being that it is a Java Swing application filled with many tricks that only the dream team (at that moment) formed by Romain, Richard, Jasper and Scott (I'm sorry if I left someone out) were able to muster a few days before the show began. It truly was a remarkable feat, the code was even released into the wild a year later, however there are few to none publicly available applications that follow Aerith's steps.

Now, I don't promise that the newly released Griffon Transition Plugin will turn your application into an Aerith clone, it just makes the job of creating animated transitions a snap, one of the first features that you find when running Aerith. This plugin would not have been possible if it weren't for Jeremy's work on Transition2D and Kirill's Trident Animation Library. It also follows the spirit of Animating CardLayout.

The following video demonstrates the plugin in action. There is a basic start screen (which relies on GfxBuilder to draw the background and Griffon's logo by the way). When the logo is clicked a fade-to-black transition is triggered and we see the first pane of a rather boring enterprise form mock up. Click the edit button and another animated transition (Swivel) shows an editable view of said form.



The following code was used to setup the View
import net.miginfocom.swing.MigLayout import griffon.transitions.TransitionLayout import griffon.transitions.FadeTransition2D import com.bric.image.transition.Transition2D import com.bric.image.transition.spunk.SwivelTransition2D def field = { args -> if(args.edit) { label(args.label, preferredSize: [50,27]) textField(columns: args.size ?: 30, constraints: args.constraints ?: "wrap", text: bind(target: model, targetProperty: args.property, mutual: true)) } else { label(args.label, preferredSize: [50,27]) label(constraints: args.constraints ?: "wrap", text: bind(source: model, sourceProperty: args.property)) } } actions { action(id: "nextAction", name: "Edit", closure: {container1.layout.next(container1)}) action(id: "previousAction", name: "Save", closure: {container1.layout.previous(container1)}) } application(title: "Transitions", size: [400,320], pack: true, resizable: false, locationByPlatform: true, iconImage: imageIcon('/griffon-icon-48x48.png').image, iconImages: [imageIcon('/griffon-icon-48x48.png').image, imageIcon('/griffon-icon-32x32.png').image, imageIcon('/griffon-icon-16x16.png').image]) { borderLayout() panel(id: "container0", constraints: context.CENTER, layout: new TransitionLayout(duration: 2000L, defaultTransition: new FadeTransition2D())) { canvas(constraints: "page0_0") { group(bc: "none") { background(color: color('black')) antialias true image(classpath: "griffon-icon-128x128.png", x: 180, y: 79, mouseClicked: {container0.layout.next(container0)}) } } panel(constraints: "page0_1") { borderLayout() panel(constraints: context.NORTH, layout: new MigLayout("fill")) { label("Person", constraints: "split, span, gaptop 10") separator(constraints: "growx, wrap, gaptop 10") } panel(id: "container1", constraints: context.CENTER, layout: new TransitionLayout(duration: 1000L, defaultTransition: new SwivelTransition2D(Transition2D.CLOCKWISE))) { panel(constraints: "page1_0", layout: new MigLayout("fill","[left][left, grow, fill][center]")) { field(label: "Name:", property: "name", constraints: "growx") button(nextAction, constraints: "wrap") field(label: "Lastname:", property: "lastname") field(label: "Address:", property: "address1") field(label: " ", property: "address2") field(label: "City:", property: "city") field(label: "State:", property: "state") field(label: "Zip:", property: "zip") } panel(constraints: "page1_1", layout: new MigLayout("fill","[left][left, grow][center]")) { field(label: "Name:", property: "name", constraints: "growx", edit: true) button(previousAction, constraints: "wrap") field(label: "Lastname:", property: "lastname", edit: true) field(label: "Address:", property: "address1", edit: true) field(label: " ", property: "address2", edit: true) field(label: "City:", property: "city", edit: true) field(label: "State:", property: "state", edit: true, size: 2) field(label: "Zip:", property: "zip", edit: true, size: 5) } } } } swingRepaintTimeline(container0, loop: true) }This small example was also inspired by Eitan's work on JMatter using Animating CardLayout. A similar animated transition is triggered whenever you'd like to edit a domain object using the framework's default show/edit views.

Feedback is always appreciated.

Keep on Groovying!