Java Hair

First, let me tell you why VirtualBox doesn’t rock, it’s that copying VMs really seems to be more work that it needs to be. VMWare is much easier this way.

However, VirtualBox does rock, and I’m sometimes more clueless than I think I am.

As it turns out, VirtualBox has a feature (and has had it for some time now, hence the clueless part!) wherein the guest OS can run seamlessly on the host OS. Basically this means that instead of having to open a separate desktop that has the guest OS in it, you can open applications directly onto the desktop of the host operating system. Check out the picture of my desktop at home, it is Windows Vista running a VirtualBox VM with Ubuntu 8.10 installed.

VirtualBox Seamless Integration (Vista and Ubuntu)

I don’t know why I feel so strongly about this, but this is one of those small things that really makes me happy to be alive in this day and age. It is just plain cool. It would be cooler if I could transfer files from the VM to the Host just by dragging and dropping, but for now I’ll settle for being able to cut and paste between the two (yes, you can do that!).

How do you accomplish this, you ask? It’s straightforward actually.

1. Download VirtualBox from Sun.
2. Install it.
3. Create a VM.
4. On the guest OS, install the VirtualBox tools.
5. Restart the guest OS.
6. Click on Machine->Seamless.
7. Enjoy.

In my few days of experimenting I found that with Windows Vista as the host and Ubuntu as the guest, it worked practically flawlessly. With Ubuntu as the host and Windows xP as the guest, it was a little slow moving into seamless mode and has more graphical hiccups. It could be the graphics card in this desktop though. Even with the hiccups, it is pretty sweet however.

So it is official, VirtualBox is right up there with Synergy as the two tools that really make me happy and, in fact, more productive in my day-to-day.

I have updated the sourcecode for my JavaFX flashcard game example to be compatible with release 1.1.  There certainly were a lot of changes from the pre-release to the release and this serverely impacted the example code.  So severely, in fact, that it was just chock full of compile erros and other issues.  I will attempt to cover most of the changes by explaining the resulting new classes.

The actual structure of the program hasn’t changed, The FlashcardApp is the main program, it builds an array of Flashcard objects.  Each Flashcard object is made up of a Word and a CardImage.  The Word is then made up of individual letters.

Let’s start by taking a look at the Letter.fx file.  This Letter.fx is a little better designed than the last one.  In this case, instead of extending the generic CustomNode I extended Text.  After doing that I was able to just override the variables I was interested in. I could set the alignment, font, color and relative position this way. Another change that had to be made was to drop using attribute and use var instead.

I stored the actual letter as a String because I wanted the option of tying two characters together to make one sound (called bends (”cl” or “st”) or diagraphs (”sh” or “ch”)).

The letter is class is repsonsible for displaying the letters and thus needs to know where to position them, therefore the size and position numbers are provided so it can determine where in the canvas to put the letters.

public class Letter extends Text {
    public var myLetter: String; //String the represents a Letter in the Card
    public var position: Number; //Position the letter is in in the current word
    public var size: Number; //Size of the entire word
    override var textAlignment = TextAlignment.CENTER;
    override var textOrigin = TextOrigin.TOP;
    override var translateX = bind ((scene.width - 40) - (((scene.width-40)/size) * (size+1 - position)));
    override var translateY = bind (scene.height - scene.height) / 2 ;
    override var font = Font{ name: 'Arial', size: 150 };
    override var fill = Color.BLACK;
    override var content = bind myLetter;

}

The Word.fx file did not change too much except to extend CustomNode and override the translateX and translateY variables to position the word correctly.

It contains an operation to flip the card, one to show the Word (to reset the state), and a constructor. The interesting part here is the “constructor”. As I mentioned in a previous post, there is no real constructor per say, instead you define a method with the same name as the class and this is used as a constructor.

public class Word extends CustomNode {
    var letters: Letter[];
    var show:Boolean = true;
    override var translateX = bind (scene.width - 40 - boundsInLocal.width) / 2 ;
    override var translateY = bind (300 - boundsInLocal.height)/2 - 20 ;

    public var word: String = null on replace {
       var aSize = word.length();
       var i = 0;
       while (i < aSize) {
            var nLetter = Letter { myLetter:word.substring(i,i+1) position:i+1 size:aSize};
            insert nLetter into letters;
            i++;
       }
    }

    public function flip() {
        show = not show;
    }

    public function showWord() {
        show = true;
    }

    public override function create(): Node {
        return Group {
            visible: bind show
            content: [
                letters
            ]
        };
    }
}

The CardImage file is similar in the changes there. I also made use of fitWidth and fitHeight to make all my images consistent sizes in the ImageView.

The show boolean is used in the CardImage class and the Word class to indicate whether or not it should be visible. This is what allows the flip() function to work in FlashCardApp by just setting one to true and the other to false.

public class CardImage extends CustomNode {
    override var translateX = bind (scene.width - 40 - boundsInLocal.width) / 2 ;
    var show: Boolean = false;

    public var imageSrc: String = null on replace {
        show = false;
    }

    public function flip() {
        show = not show;
    }

    public function hideImage() {
        show = false;
    }

    public function CreateCardImage(anImage:String) : CardImage {
        var cardImage1 = CardImage { imageSrc: anImage
        }
        return cardImage1;
    }

    public override function create():Node {
        var cardImage = Image {
            url: imageSrc
        }
        return ImageView {
            translateY: 25
            fitWidth: 500
            fitHeight: 250
            visible: bind show
            image: cardImage
        }

    };

}

Nothing too exciting in the FlashCard.fx file either, but I’ll include here for the sake of completeness. Note the flip function here as mentioned above. Also, this is the class where the sound integration is done. It isn’t as much sound as I originally intended as it was originally meant to be able to sound out individual letters or letter groups. I don’t think that would be too difficult to implement but I haven’t done it yet and probably won’t since my children have outgrown this little game already.

public class FlashCard extends CustomNode {
    public var cardImage: CardImage;
    public var showFront: Boolean;
    public var cardWord: Word;
    public var mp3: Mp3;

    public var aWord:String = null on replace {
       cardWord = Word{ word:aWord };
    }

    public var anImage:String = null on replace {
        cardImage = CardImage{imageSrc:anImage};
    }

    public var aMp3:String = null on replace {
        mp3 = new Mp3(aMp3);
    }

    public function showWord() {
        cardWord.showWord();
        cardImage.hideImage();
    }

    public function flip() {
        cardWord.flip();
        cardImage.flip();
        mp3.play();
    }

    public override function create():Node {
        return Group{
            content: [
            Rectangle {
                x: 10
                y: 10
                height: 300
                width: 550
                arcHeight: 20
                arcWidth: 20
                fill: Color.WHITE
                stroke: Color.BLACK
                strokeWidth: 2
            }
            ,
                Group {
                    content: [ cardWord,
                            cardImage ]
                }
            ]
        };
    }

}

FlashCardApp.fx had a couple of changes and some things of interest. First of all, instead of using a Frame, it uses a Stage component, as the Frame no longer exists. Inside the VBox I had to put the content inside a Group in order for the displayed FlashCard to be updated when the index changed. Essentially I needed to bind the “card” variable and I could not do that without it being inside a Group component.

The last thing I had to change was to remove a slash from the pointers to the images and mp3’s. The old insert statement looked like this:
insert FlashCard{aWord:”cat”, anImage:”{__DIR__}/img/cat.png”, aMp3:”{__DIR__}/sounds/cat.mp3″} into flashcards;

Note the “/” after the {__DIR__} in both instances. I had to remove that slash so that it now looks like:
insert FlashCard{aWord:”cat”, anImage:”{__DIR__}img/cat.png”, aMp3:”{__DIR__}sounds/cat.mp3″} into flashcards;

At first I thought this might have been because i was developing this new version on Linux, but it appears that it is necessary for Windows also. It appears the {__DIR__} includes a slash at the end of the directory and having 2 was a problem for the classes.

var flashcards:FlashCard[];
var myIndex:Integer = 0;
var size:Number = 5;
var card = bind flashcards[myIndex];
insert FlashCard{aWord:"cat", anImage:"{__DIR__}img/cat.png", aMp3:"{__DIR__}sounds/cat.mp3"} into flashcards;
insert FlashCard{aWord:"dog", anImage:"{__DIR__}img/dog.png", aMp3:"{__DIR__}sounds/dog.mp3"} into flashcards;
insert FlashCard{aWord:"car", anImage:"{__DIR__}img/car.png", aMp3:"{__DIR__}sounds/car.mp3"} into flashcards;
insert FlashCard{aWord:"hat", anImage:"{__DIR__}img/hat.png", aMp3:"{__DIR__}sounds/hat.mp3"} into flashcards;
insert FlashCard{aWord:"fish", anImage:"{__DIR__}img/fish.png", aMp3:"{__DIR__}sounds/fish.mp3"} into flashcards;

Stage {
    title: "Flash Card JavaFX"
    width: 600
    height: 400
    scene: Scene {
    fill: Color.GREY
    content: VBox {
        content: [
            Group { content: bind card },
            HBox {
                content: [
                    SwingButton {
                        translateX:0
                        translateY:10
                        text: "Next"
                        action: function() {
                            flashcards[myIndex].showWord();
                            if (myIndex < (size - 1)) {
                                myIndex++;
                            } else {
                                myIndex = 0;
                            }
                        }
                    },
                    SwingButton {
                        translateX:20
                        translateY:10
                        text: "Flip Me!"
                        action: function() {
                            flashcards[myIndex].flip();
                        }
                    }
                ]
            }

        ],
        }
    }

You can download all of the new sourcecode here. You will need the JLayer library for the Mp3 class to compile.

Be sure to check out the other articles on my blog related to JavaFX and the Flashcard game for more details on the Flashcard JavaFX code itself.

Stephin Chin has a good post about some of the changes from the pre-release to the release.

Before I start posting heavily with the hard-core design and development content again, I wanted to lighten it up a little with another music-based post.  I haven’t actually posted anything about music since November of last year, and even that was about a book about a musician.

Sentimental Education

So let me indulge myself a little and write about one of the more interesting bands that I’ve come across in my life.  I’m sure most of you out there have at least heard of Sonic Youth, that fountain of post-punk, experimental, sometimes rock music that exists even now, lead by Thurston Moore and Kim Gordon.  Well, Thurston Moore does some solo stuff, and Kim Gordon does a bunch of side projects, one of which is a few albums released by a band called Free Kitten.

Free Kitten was formed by Kim Gordon and Julie Cafritz around 1992, the current line-up also includes Yoshimi P-We of The Boredoms.  Free Kitten released Unboxed in 1994, it’s good if you like them, but it isn’t their best.  If you want to listen to something interesting that you haven’t heard before and that you are sure to never hear on the radio, check out Sentimental Education which was released in 1997,  Never Gonna Sleep would be my recommended single off that album, it is #2 on my list of most listened to tracks in iTunes.

They recently (in 2007, actually) released a new album, Inherit, after a 10 year hiatus and that album turned out to be pretty good too.  One of my prized possessions is an autographed copy of that cd case (pictured here).

So what do they sound like?  Well, they sound like a lot of noise, but not as much noise as some of the Thurston Moore releases, most of their songs at least have a good beat and some interesting guitar work.  Almost all feature Kim Gordon on vocals.  Basically, if you like Sonic Youth, but you think it’s too accessible, you’ll love Free Kitten.

Lately I have been doing a lot of work with XML Schemas.  The main thrust of the project I have been working on is to generate a Canonical XML Schema from many different XML Schemas that are used for many different reports but all report on bascially the same type of data.

In order to make better use of my time on this project I decided to take a look to see what types of tools might be available for me to use.  The budget for tools is very low so free tools were at the top of the priority list.

I decided on using NetBeans because it seemed to have more capability with XML Schemas than Eclipse did.  I have since tried Eclipse and even JDeveloper.  I found Eclipse less intuitive to use than NetBeans and JDeveloper about the same as NetBeans though a lot more colorful.

When working with XML Schemas, NetBeans provides 3 different views that you can work with.  The Source, Schema, and Design views.

NetBeans XML Schema Source View

The Source view allows you to work directly with the schema file itself.  This can be quite a time saver when copying and pasting element definitions or when moving elements or types around.  It provides color coding and the right-click menu will allow you to Check or Validate your schema in addition to formatting it so everything lines up correctly.  Just as in the other views you can use Goto from the right-click menu to switch to one of the other views.

NetBeans XML Schema View

The Schema view is where I started off doing most of my work.  It allows you to right click and create new types or elements with a wizard type interface.  Customizing the elements and changing properties can also be done here, very handy if you can’t remember the syntax for a particular attribute.  Copying and pasting can be done in the Schema view but I still haven’t quite gotten the hang of it and I find it much easier in the source code view.  The Schema view does provide the ability to refactor an element or type and rename it so that it becomes renamed in any other schemas in the project that reference it.  This alone makes it worth the price of admission even if you mostly work with the source view.

I found the wizards to be extremely helpful in developing schemas for the reason most wizard-type interfaces are useful, I did not have to remember the specific details of the syntax, I could just choose the properties I wanted.  When choosing an existing built-in type, a small window provides a description of the element which made it really easy to choose the types I wanted.  The biggest drawback which seems like an oversight is the inability to add properties to the element you are creating inside the wizard, you can choose the type of element and name it, but if you want to change the properties, such as minOccurs or nillable, you have to create the element and then right-click and bring up the properties window where it can be changed.

NetBeans XML Schema Design View

The Design view provides a nice picture of the schema or schemas you are working with and makes it easy to see your entire schema in a nice tree format.  I found this view especially helpful when talking about the schema with the business non-techie folk.  I had started a review in Eclipse but found it’s view hard for me to work with and not as easy for the non-techies to grasp, switching to the NetBeans view made the conversations much easier.  One issue I noticed with this view is that once viewed it isn’t always in sync with changes that are made to that schema file.  Sometimes it seemed to be stuck showing me the last revision or a version from a couple changes ago.  Restarting NetBeans caused it to refresh the view, but closing and re-oopening the schema itself did not.

You can also edit your schema from the design view, being able to drag and drop attributes and elements into your design as well as delete or refactor elelements and types much in the way you can in teh schema view.  Personally, I found the schema view easier to work in and the design view really nice for being able to step back and get an overall picture of the schema design.