blog.elevenworks.com

I intended to write about the Java Swing layout manager that I now use as my next post; however I got sidetracked on a small experiment that I wanted to post about first.

Almost 5 years ago to the day, I had posted on my previous blog about how to create a Cocoa based calculator using the now defunct Cocoa-Java bridge. At that time, I was working on a commercial tool called XMLFace that allowed you to define your GUI (view) using XML, write your controller code in Java and then run your application (assuming you used standard controls) using either Swing or SWT. The Cocoa/Java calculator example was my first experiments into researching the viability of adding Cocoa bindings to XMLFace. Luckily, due to the lifespan and robustness (or lack thereof) of the Cocoa/Java bridge, I didn't spend much more time on it.

Recently, I've been intrigued with the idea that I could use Ruby to write cross platform applications instead of Java; where the controller logic is in Ruby, and the view, while implemented in Ruby, is platform specific so that the application feels (or actually is) native. Also, this would give me an opportunity to learn a new language after working almost exclusively with Java and C# in the recent years.

I decided last week, waiting in an airport for a delayed flight to arrive, to try to implement that Calculator example that I had written using the Cocoa/Java bridge using MacRuby. It took me the duration of the flight, and a few hours at home afterwards to get it up and running (mostly due to my lack of Ruby experience and due to an initial lack of understand of how MacRuby wraps the Cocoa framework); however I did get it working rather painlessly. Here is the obligitory screenshot:

If your curious, you can download the source code to the original Java source code here: Calculator.java.

The source code to the ruby version is below; however if you want to download it, you can download it here: Calculator.rb.

Note: I've only run this on the version of MacRuby available in their SVN trunk. I'm not sure if it works with the downloadable version (0.2) available on the website.

Since this process was rather painless, I'm thinking about attempting to port an existing Java Swing application that I wrote for my personal use over to Cocoa + MacRuby. In the end, I think the hardest part will be giving up the nice code completion and language support I get from IntelliJ when doing Java development. For this experiment I used Netbeans as my Ruby editor; however I might give a few others a try. (I did try XCode shortly, but discarded it since I didn't want/need to use Interface Builder.)

I'm sure I'll have more to post on this subject as time goes on.

This post is a precursor to to my next blog entry, which will be about the custom layout manager that I now use for most of my Swing layout needs.

Almost 6 years ago, James Elliott wrote an article about a layout manager that he had written called RelativeLayout. At that time, as I do now, I created all of my Swing GUI's by hand without the use of a designer, so I was intrigued by RelativeLayout since I wasn't happy with the standard Java layout managers.

RelativeLayout (as published by James in that article) allowed you to to either programatically, or via XML, define how the position of each control related to the position of another control or it's container. You essentially were defining constraints like "the left edge of component1 is 5 pixels to the right edge of component2". Here is an example of what one of the XML files might look like:

Note: WordPress keeps mangling the XML snippet above, so there is actually a few inaccuracies in case you wanted to copy and paste this to try with RelativeLayout.

What drew me to RelativeLayout is that my Java code would no longer be littered with layout code and I could externalize and manage layout separately from the code. (Note: I also tend to externalize my form definition to XML or YAML as well so that my Java code contains controller code only.)

I immediately started to use RelativeLayout, and it's XML constraint files, on several projects; however I started modifying it to meet my needs soon after beginning with it . One of my first additions was to port it to work with SWT, which I was working with in parallel. (Note: I posted the source code to the Swing/SWT version on the predecessor blog to this blog, so that version might be floating around in the wild somewhere.) The second addition I made was to replace the XML based constraint files with a simpler, more readable, less verbose, text file (properties file) format.

Here is the XML constraints file above in my text format:

Over the years, I made other additions to RelativeLayout, such as adding support for baselines, as the features of Swing have evolved. I have/had been pretty successful in using RelativeLayout for the majority of my layout needs; however there have been times when it didn't meet my needs, or where I had to manage different constraint files for the same panel/form. I had to manage different constraint files when I either wanted to tailor the layout for a specific platform (mac vs. windows vs. linux) to follow GUI design guidlines, or because of the localization of the application (localization into German was the specific culprit here because of word length).

As you may have figured out, I no longer use RelativeLayout itself; however it's concept is the basis for the new layout manager that I use. In fact, the textual constraint files can be used with my newer layout manager without modification, though there are additional things that you can do that don't make the constraint files backward compatible.

I plan to post about the new layout manager later this week as time allows.

Wow, it's been over two years since I last posted. Once you start getting bombarded with comment spam, it becomes more of a chore to post than fun.

I have a few things I want to write about (Some UI rants, and some new Swing code to share) so I thought I'd spend time cleaning things up:

... upgrade WordPress (check)
... delete all 473,262 comment spams (check)
... create new template since my WordPress template had been hacked (check)
... install and activate plugin(s) to help with comment spam (check)
... start posting content again (soon)

Well, it only took a month and a half longer than I thought, but I've finally had the time to post the source code and an example of how to use my iTunes-like tree table control. If you are already using the JXTreeTable from the swingx project, then this should be a drop in replacement.

Here is a screenshot of the sample application:

It demonstrates how to use JXTreeTable to create a treetable displaying the component hiearchy of a running Swing application. It should be a good starting point for anyone wanting to use JXTreeTable, as well as how to use my look and feel with it. Here are the download links:

• Compiled version of my TreeTable (and the rest of my iTunes-like components/delegates)
• Source code version of my TreeTable (and the rest of my iTunes-like components/delegates)
• Source code for the sample application

Note: As usual the source code for this is released under the Apache license.

I'm working on cleaning up the code a bit for the new components and UI delegates, so I thought I would post a screenshot of one of my personal applications that uses them. (It's a small tool to manage metadata about Java classes).

In the screenshot below, you can see an example of the new iTunes-like JXTreeTable implementation, as well as an MacOSX-like toolbar UI delegate.

The UI delegate for the toolbar was simple to create wheras customizing the look and feel of JXTreeTable was a little trickier. I didn't want to rewrite JXTreeTable, only subclass it, which made creating this control a little harder than normal. I think I tried 3 or 4 approaches before I finally found one that worked.

Wow! It's been around 5 months since I lasted posted!

Mostly, I've been so busy with work that I haven't had time for my pet projects. However, I've been able to do a little GUI work the past few days, so I'll be adding some new posts here shortly. I've created a version of the "swingx" JXTreeTable control that looks like an iTunes, as well as a new JToolbar delegate. Both should make it up on the blog quickly.

I've also decided to share the source code of a custom control that will show people what's involved in something more complex that the standard buttons, toolbars, etc... It's going to take a while to package it up with examples and documenation, so it may be a week or so before that becomes available.

Look for some posts later this week. Also, I've been thinking of packaging up all of my custom controls into a real deliverable... Anyone interested in something like that?

Instead of just posting my source code that shows how to simulate the iTunes user interface, I decided to write a few more of my "tutorial" style posts about how I simulated the look. The first thing that I'll demonstrate is how to create the "info panel" that appears at the top of the iTunes window:

In order to implement this, I decided to implement a JPanel UI delegate as opposed to subclassing JPanel iteself. The first thing we obviously need to do is create a new java class that extends BasicPanelUI.

Next, the default behavior for a JPanel is to have it be opaque, which means we wouldn't be able to see any panels drawn behind it (such as a brushed metal or gradient panel). In order to ensure any JPanel using ourUI delegate would not be opaque we need to override the installDefaults method to have it set the panel as not opaque:

Now that we have that small detail out of the way, we can begin the implement the code to paint the panel. We do this by overriding the paint method. The first thing we will need to do is take the insets into consideration and calculate the x, y, width and height of the panel. Additionally, since this panel has rounded corners, we need to consider the size of the corner arc:

Now that we know the position and size of the panel, we can begin to draw it. In order to do this, we are going to create a rounded rectangle clipping area, and then use fillRect to draw the two different background colors.

At this point, we have enough implemented where we can write and run a test application to view the panel. In my test application, I added a gradient panel behind the info panel to simulate how it would look in an application that looked like iTunes. Here is what our panel looks like:

Now that the background is done, we need to draw the border and the shadows of the panel. The first thing will do is reset the clipping region to it's original value, then we will create a gradient paint and rounded rectangle border:

If we run our test application now, this is what we will see:

Obviously, with just that border, the panel doesn't look very good, so we need to draw a few more highlights. The next thing we will do, is set a new clipping area so we don't draw a shadow at the bottom, and then we will draw a shadow with a transparent version of the border color:

If we run our test application now, this is what we will see:

This looks alot closer to the desired look we are trying to get, but if you look at the original version in iTunes, there is a slight shadow at the bottom of the panel. In order to create this, we will use an even more transparent version of the border color than we used before, and then draw another rounded rectangle:

If we run our test application now, this is what we will see:

As you see, this is pretty close to the panel that is used in iTunes, and really wasn't too hard to create.

As with all of my examples, I'm releasing the source code under the Apache license so that you can use this in your own applications. Here are the links to download the source code:

• Download the source code to the UI delegate
• Download the source code to the test application
• Download the source code to the gradient panel used by the test application

I was browsing through JavaBlogs yesterday and I stumbled upon this post from Adam Walker where he was adding a Tiger/iTunes 5 look to his application. After seeing this I was inspired (and had some free time for once) to try to update my iTunes in Swing demo to look like the newly released iTunes 5.

I have a little more work to do, but here is what I have so far:

I'll clean up the code, add copyright notices and get it posted this weekend for whoever's curious. In the process, I've also fixed a few bugs and made a few improvements to some of the UI delegates, so when I post the source code, it'll include the previous (brushed-metal) example as well.

I want to apologize for the delay in getting this posted as I had planned on posting this a few weeks ago. Unfortunately, I got swamped with real work.

You can download the source code for the sample here. I've included an ANT build script to compile and run the application. Simply execute the "run" target to compile and start it.

Let me know if there are any questions!

Note: You will need Java 5 to run and compile this example.

Last night I had a chance to (finally) implement 2 of 3 missing UI items from my Swing based iTunes clone. I implemented a UI delegate for the buttons at the bottom of the window, as well as implementing the delegate for the volume slider. I still haven't implemented anything for the scroll bars, and I have a laundry list of things that I'd like to improve, but I now think it is "good enough" to show.

I took the time to create a WebStartable version of the example in case anyone wants to see what it looks like on their machine. You'll need to have Java 5 installed in order to run it. Here is the link:

• Run the example with Webstart

If you don't want to run the example to see what it looks like, here is the most recent screenshot:

As I haven't had time to write tutorials on how to create something like this as fast as I would have liked, I am thinking about releasing the source code and then explaining it later. Any thoughts?