Getting started

Before I could really start working on a major project, I had to choose a VCS. I went with mercurial based on a friend’s insistence that I introduce myself to a DVCS (specifically Hg) immediately. I knew what it was but never took time to try it myself. I am very glad I tried it.

Looking back, though, I think git may have been a (very slightly) better choice. Regardless, mercurial has served me very well and I strongly encourage anyone who hasn’t given a DVCS a spin to do so!

After getting some code and tests written, it was time to pick a project host. I chose kenai.com because it integrated well with NetBeans (which is THE IDE for JavaFX), it supported mercurial, and I like the direction Kenai is taking.

Communicating with Remember The Milk: GroovyRTM

RTM has a REST API that you can use to interact with the service. I decided to start by creating my own Groovy consumer of that API that would do the heavy lifting of interacting with Remember The Milk so I could keep my options open when looking for a UI technology.

I chose Groovy because:

• I didn’t want to write and maintain a lot of code
• I wanted to be able compile to Java classes I could use with other languages that run on the JVM
• It has great utilities for parsing XML and making HTTP requests

In the end, Groovy totally came through for me. It did everything I needed and more, easily.

UPDATE: I’ve been polishing GroovyRTM a lot since May and I’m confident in saying it is, by far, the best Java API kit available. If you have suggestions or improvements, let me know!

The UI

JavaFX was a natural choice for me since I’d been playing with it since before it was 1.0. I was eager to develop something more than a demo app with it. The two key features here were:

• Easily using Java classes – just an import
• Deployment to the desktop AND mobile phones (hoping to deploy to Android eventually). I’m holding off on mobile right now because RTM introduced their own Android app which I can’t compete with (yet)
• Java Web Start deployment gave me a lot of goodies for the desktop (title, icon, auto-update etc.)

Here is where I thank Jim Weaver and Rakesh Menon in particular for their useful JavaFX examples, helping me find a couple bugs, and their suggestions. If you use JavaFX and you’re not subscribing to their blogs, it’s time to come out from under that rock.

Frankly, I don’t think JavaFX was ready for building real applications until version 1.2 (released in June). Even then, including the JFXtras project is a must. There is no way I could have done this without them. I still had to create or adapt a few custom components. In all fairness, JavaFX is a young technology and I know that the team is working very, very hard on producing a lot more for JavaFX 1.3. Oh, and I can’t wait for the Sun to release the JavaFX visual designer.

Launch

Last but not least, I needed to easily make a screencast to introduce Cheqlist. After listening to Faceoff Show’s excellent screencasting review, I chose Screenr. The only thing that caught me by surprise is that the video didn’t embed in my aggregation feeds. Could have been my idiot mistake, though.

You can catch my intro video here if you haven’t for some reason.

Updates!

• Where’d my edit button go? Oh yeah, you don’t need it anymore since all task edits occur immediately now.
• Create and delete lists (including smart lists)
• Toaster looks and acts much better ;)
• Cheqlist is now on twitter! Follow @cheqlist for news and updates.
• Yet another update: Cheqlist has been approved for the Java Store!

In addition, you should know that I’m currently working on notes management, minimizing to taskbar icon, and undo functionality. Anything else you want? Hit me up on twitter, email me or submit an issue.

What would you have done differently? Comment!

Related posts:

1. Cheqlist: A free, open-source desktop app for Remember The Milk
2. Lifehacker: 88 tech tricks to turbocharge your day
3. Why I’m moving my projects to GitHub

With that in mind, I am introducing an application that I think will help you with that: Cheqlist. A desktop application powered by Remember The Milk that does 2 things very well: make managing tasks very efficient and look sweet on your desktop.

What makes Cheqlist awesome

I wanted to build an application that I, myself, would use everyday. There are a few key features that would make that happen:

• Adding tasks quickly using RTM’s new Smart Add feature
• Visual appeal and lots of room for customization. Special thanks to Rakesh Menon for allowing me to use his JavaFX color picker
• Easily search tasks and use RTM’s custom search keywords
• Must work on all the OSes I use: Windows, Mac OS X, and Linux

On top of that, I think there are some things you’ll come to appreciate:

• Easy-update: Cheqlist checks for updates on startup, and if you want to upgrade, it takes just seconds!
• Free and open-source
• Lots of nice “easter egg” features for those of you who take time to find them ;)

A quick look

I’ve created a short (3 minutes) introductory video to show you the main features. UPDATE: Apparently screenr videos don’t show up in RSS properly. View it here.

Here are a few screenshots:

You can find more on the Cheqlist Wiki.

Try it out!

What you need:

• A marginally recent (6u11 or newer) version of Java
• Remember The Milk account
• Launch Cheqlist

Other resources

Something missing? Request a feature at the issue tracker.

Having trouble? Let me know directly.

For more information, you can hit the project page and Wiki on GitHub.

Enjoy!

Related posts:

1. Introducing GroovyRTM: A Groovier way to Remember The Milk
2. What and why: the tech behind Cheqlist
3. Why I’m moving my projects to GitHub

Check out the slide deck »

What I covered

1. What is JavaFX and why do you care?
2. Comparisons between Java and JavaFX syntax
3. JavaFX language features
4. Building a sample application
5. Platform support
6. Additional resources

How I approached the talk

I took Fred Jean’s advice and used the Codex presentation system which is a Ruby gem that adds to Eric Meyer’s S5. Unlike Fred, though, I opted to use Mercurial to keep track of versioning.

To get some good practice for my talk I hosted a brown-bag discussion at Sun. This was a good idea because it made sure I was prepared fairly early and I got good feedback from my co-workers. Hopefully they learned something as well. I ended up about 20 minutes short during my brown-bag so I added 10 more slides (which hardly helped… I talked much too fast).

What I would change

Since I ran so short at BJUG, I’d probably try to talk about more JavaFX language features and explain them in greater detail than I did. Making jokes during the presentation seemed to go over very well and I might throw in a couple more.

If you missed my talk, you can Check out the slides. I hope the speak about this again at the Denver JUG later this year. Hope to see you there!

Related posts:

1. How to add JavaFX to SyntaxHighlighter
2. Holiday fun with JavaFX
3. What I wanted to know before I left college: A programmer reflects

How to implement it

First, you’ll want to download SyntaxHighlighter or get the Wordpress plugin (and make a donation, it really is a cool piece of work). Next, unzip or otherwise install it. Download my shBrushJavaFX.js and copy it to <install_directory>/scripts

If you’re using the Wordpress plugin, you’ll have to edit the syntaxhighlighter.php file like so:

//About line 112, just after this line
$this->aliases = apply_filters( 'agsyntaxhighlighter_aliases', array(

//Add the following:
'JavaFX'  => array('jfx', 'javafx'),

Now give it a try using the language “javafx” or “jfx”!

JavaFX highlighting demo

def wheelCenterY:Number = stageHeight / 2 - 30;
var winnerId:Integer;
var wheelRotation:Number = 360 on replace {
    //Set winner
    winnerId = ((wheelRotation mod 360) / 360.0 * arr.size()).intValue();
}
var contestants = ["Eric","Fred","Helga"];
insert "Olaf" after contestants[0];
// contestants -> Eric,Olaf,Fred,Helga
delete "Helga" from contestants;
// contestants -> Eric,Olaf,Fred

Download the Javascript code for SyntaxHighlighter 2.0.x or SyntaxHighlighter 1.5.x. Let me know if you see any bugs or have any feedback. Enjoy!

Related posts:

1. JavaFX for the Java developer presentation
2. Holiday fun with JavaFX
3. Microformats: Add hCard to your blogroll in 2 minutes flat

WTF is JavaFX and why might you care?

JavaFX is basically a way to develop much cooler GUIs with much less effort than Swing and have your app run almost everywhere. I would argue that it’s not as easy as Flex BUT it allows gives you more control.

A little holiday app for you

If you want to try it out yourself, just run it here (with JavaFX installed) or grab the NetBeans JavaFX project, unzip it, and import it. Here is the code:

package holiday;
import javafx.animation.*;
import javafx.scene.*;
import javafx.scene.control.TextBox;
import javafx.scene.image.*;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;
import javafx.scene.text.*;
import javafx.stage.*;
import java.lang.System;

var stageWidth = 325;
var stageHeight = 200;
var titleFont = Font { name:"Helvetica", size: 15 };
var footerFont = Font { name:"Helvetica", size: 10 };
// Node positioning
var titleHeight = 25;
var detailY = stageHeight;
var footerHeight = 25;

class Holiday {
    public var title:String;
    public var greeting:String;
}
var holidays:Holiday[];

public class HolidayList extends CustomNode {
    public var holidays:Holiday[];

    public override function create():Node {
        return Group {
            translateX: 0, translateY: 10,
            content: bind for(i in holidays) {
                var holidayY = indexof i * 20 + titleHeight;
                Group {
                    id: "{i.title}",
                    content: [
                        HolidayListItem {
                            holiday: i,
                            holidayY: holidayY,
                            originalHolidayY: holidayY
                        }
                    ]
                }
            }
        }
    }
}
var holidayList = HolidayList { holidays: bind holidays };

class HolidayListItem extends CustomNode {
    public var holiday:Holiday;
    var expanded:Boolean = false;
    public var holidayY:Number;
    public var originalHolidayY:Number;
    public var holidayWidth:Number = stageWidth - 20;
    public var holidayHeight:Number = 20;

    public override function create():Node {
        return Group {
            translateY: bind holidayY,
            blocksMouse: true,
            clip: Rectangle {
                width: bind holidayWidth,
                height: stageHeight,
                fill: Color.WHITE
            },
            content: [
                Rectangle {
                    width: holidayWidth,
                    height: stageHeight,
                    fill: Color.WHITE
                },
                Text {
                    content: holiday.title,
                    translateX: 10, translateY: 10,
                },
                Rectangle {
                    var holidayHoverFill = Color.rgb(0,0,0,0);
                    y: -14, x: 10,
                    width: holidayWidth,
                    height: bind holidayHeight + 10,
                    fill: bind holidayHoverFill,
                    onMouseEntered: function(e:MouseEvent) { holidayHoverFill = Color.rgb(0,0,0,0.07); e.node.cursor = Cursor.HAND; },
                    onMouseExited: function(e:MouseEvent) { holidayHoverFill = Color.rgb(0,0,0,0); e.node.cursor = Cursor.DEFAULT; },
                    onMouseClicked: function(e:MouseEvent) {
                        if (currentHoliday == holiday) {
                            currentHoliday = null;
                        } else {
                            currentHoliday = holiday;
                        }
                        System.out.println("--applying onclick for {currentHoliday.title}");

                        if (expanded == false) {
                            var expand = Timeline {
                                keyFrames: [
                                    KeyFrame {
                                        time:0.6s values:holidayY => 20.0 tween Interpolator.LINEAR
                                        action: function() {
                                            holidayHeight = 150;
                                        }
                                    },
                                ]
                            };
                            expand.play();
                            expanded = true;
                        }
                        else {
                            var collapse = Timeline {
                                keyFrames: [
                                    KeyFrame {
                                        time:0.6s values:holidayY => originalHolidayY tween Interpolator.LINEAR
                                        action: function() {
                                            holidayHeight = 20;
                                        }
                                    },
                                ]
                            };
                            collapse.play();
                            expanded = false;
                        }
                    }
                }
            ]
        }
    }
}

class HolidayDetail extends CustomNode {
    public var curHoliday:Holiday = Holiday {
        title: "NA",
        greeting: "NA"
    }
    public var detailFillColor:Color = Color.RED;
    public var detailFont:Font = Font.font("sansserif", FontWeight.REGULAR,24);
    public var detailBgColor:Color = Color.WHITE;
    public override function create():Node {
        System.out.println("----got holiday {curHoliday.title}");
        return Group {
            content: [
                Rectangle {
                    width: stageWidth,
                    height: stageHeight-60,
                    fill: bind detailBgColor,
                    blocksMouse: true
                },
                Text { content: bind curHoliday.greeting, translateX: 10, translateY: 40, font: detailFont, fill: detailFillColor },
            ]
        }
    }
}
var holidayDetailPane = HolidayDetail { translateY: bind detailY };

// Shows and hides Holiday detail when a Holiday is clicked
public var currentHoliday:Holiday = null on replace {
    var newDetailY = stageHeight; //Default to below the stage
    if (currentHoliday != null) {
        newDetailY = 27 + titleHeight;
        holidayDetailPane.curHoliday = currentHoliday;
        System.out.println("clicked holiday: {currentHoliday.title}");
    }
    // Show/hide detail pane
    var anim = Timeline {
        keyFrames: [
            KeyFrame { time: 0s, values: detailY => detailY tween Interpolator.LINEAR },
            KeyFrame { time: 0.7s, values: detailY => newDetailY tween Interpolator.LINEAR }
        ]
    };
    anim.play();
}

var titleBar = Group {
    content: [
        Rectangle { width: stageWidth, height: titleHeight, fill: Color.WHITE },
        Text { x: 85, y: 18, font: titleFont, fill: Color.BLACK content: "Choose-a-holiday" },
        Line { startX: 0, startY: titleHeight, endX: stageWidth, endY: titleHeight, stroke: Color.DARKGRAY }
    ]
}

var footerBar = Group {
    content: [
        Rectangle { x: 0, y: stageHeight-footerHeight, width: stageWidth, height: footerHeight, fill: Color.WHITE },
        Text { x: 75, y: stageHeight - 10, font: footerFont, fill: Color.BLACK, content: "created by Eric Wendelin" }
    ]
}

def stage = Stage {
    title: "Choose-a-holiday",
    resizable: true,
    width: stageWidth,
    height: stageHeight,
    visible: true,
    scene: Scene {
        content: Group {
            content: bind [
                holidayList,
                holidayDetailPane,
                titleBar,
                footerBar
            ]
            clip: Rectangle {
                width: stageWidth,
                height: stageHeight
            }
        }
        fill: Color.TRANSPARENT
    }
}

function run() {
    //Add holidays
    insert Holiday {
        title: "Christmas",
        greeting: "Merry Christmas!"
    } into holidays;
    insert Holiday {
        title: "Hanukkah",
        greeting: "Happy Hanukkah!"
    } into holidays;
    insert Holiday {
        title: "Kwanzaa",
        greeting: "Happy Kwanzaa!"
    } into holidays;
    insert Holiday {
        title: "Festivus",
        greeting: "Festivus for the rest of us!"
    } into holidays;
    insert Holiday {
        title: "New Year's Day",
        greeting: "Happy New Year!"
    } into holidays;
}

Cool, no?

How to make your own JavaFX app

I downloaded the NetBeans with JavaFX bundle since that seemed like the easiest way to get started. They say it doesn’t work on Linux, but they lie. Follow these instructions and you’ll be setup quickly.

Create a new "JavaFX Script Application" project, set it as the main project, and have it auto-create a Main .fx file. Copy the source above and hit "Run Main Project". If you decide to play around with JavaFX, you’ll definitely need the JavaFX API Docs.

Enjoy! Merry Christmas!

Related posts:

1. How to add JavaFX to SyntaxHighlighter
2. JavaFX for the Java developer presentation
3. Create a Color Palette Using CSS and MooTools 1.2