Creating a Swing Dashboard Widget - Summary

So the original intention was to create a Dashboard style widget UI using Swing.

In nine fairly simple steps we've gone from a blue square:



...to a nice looking widget that hopefully looks at home on the modern Desktop:



The only shortcut I took was not to pull out the maths book and write my own transform filter.

I'm very pleased with the result, it was a lot easier than I thought it would be. Hopefully this exercise proves (again) that Swing can be more than just a boring, gray, toolkit suitable for boring, gray, form-filling applications.
The new transparency features especially allow vibrant, modern looking UI's that are relatively simple and quick to create.

So that's really it for the UI.

A few non-UI remarks...

Java widgets have a number of benefits over other widgets systems:
- No framework or widget manager needed
- Platform independent
- Installed from a web-page
- The extensive JDK library available as standard
- Sandboxed and secure automatically
- Familiar language with powerful UI toolkit
- Customizable, fast, accelerated painting (try that in Javascript)

There are still a few non-UI things to do before making this code truly useful: preferences and desktop startup spring immediately to mind.

Performance is also an issue. On my machine the two widgets take about 20 MB of RAM each and 0 CPU cycles when just sitting there. 20MB is considerably more than a simple Widget in Apple's Dashboard for example.
However, in modern machines with RAMs of 1GB+ as standard, and depending who you're asking, maybe this is an increasingly unimportant issue. Especially if the widget is useful.

Feel free to use the Source Code. Don't forget you'll need the filters classes from JHLabs.

Source Code Download

Creating a Swing Dashboard Widget

Java 6 u10 will allow transparent windows and undockable applets. This should allow the creation of some Dashboard widget like Swing apps.

I'll see how close I can get to creating a basic widget in Swing. I'll take it one step at the time and post all the code and a demo at the end.

The exercise is purely a UI one. The code marvelousness and resource usage won't be a top concern here.

Step 1 - Test app with basic widget

In this case a blue square that does nothing. In the next few steps I'll try and get it more widget like.

<br />public class Frame1<br /> extends JFrame<br />{<br /> public Frame1()<br /> {<br /> setLayout(new FlowLayout());<br /> ((JComponent)this.getContentPane()).setBorder(<br /> BorderFactory.createEmptyBorder(20,20,20,20));<br /> setSize( new Dimension(220, 240));<br /> setTitle("Widget");<br /> add(createComp()); <br /> <br /> setLocationRelativeTo(null);<br /> setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );<br /> setVisible(true);<br /> }<br /><br /><br /> private JComponent createComp()<br /> {<br /> JPanel panel = new JPanel();<br /> panel.setPreferredSize(new Dimension(160,160));<br /> panel.setOpaque(true);<br /> panel.setBackground(new Color(20,50,110));<br /><br /> return panel;<br /> } <br /> <br /> public static void main(String[] args)<br /> {<br /> new Frame1();<br /> }<br />}<br />

Looks like this:

Leopard Compatibility

I've just upgraded to Leopard. Here's how my widgets fare:

ZX Spectrum - 100% OK
BBC ListenAgain - 100% OK

SOWPODS Word Checker - Updated to version 1.2 now 100% OK
Word Finder - Updated to version 1.1 now 100% OK

TrackIt - Updated to version 1.1. now OK.

Hopefully I'll have updates soon. It'll be nice to use the full release of Dashcode for the first time.

Dashcode Beta Expired

Looks like Apple made good on their original expiry date for Dashcode Beta. Starting yesterday Dashcode will simply display a dialog saying the beta has expired. Annoyingly, this date was originally set to be after the release of Leopard allowing developers to upgrade the OS and keep working and supporting their widgets. Apple slipped the release of Leopard, but didn't similarly move the Dashcode expiry date.

Choices now are:
- Upgrade to Apple Select (for $500) and install a pre-release (flaky) version of Leopard.
- Wait patiently till October.
- TextEdit + Safari + Webkit debugger + a big headache.
- Set the date back on your machine while starting Dashcode Beta - this, amazingly, works. You'll have to have downloaded the beta already as it's no longer available on Apple Developer Center.

Create other word lists for the Word Finder widget

These are instructions on how to use other languages or dictionaries with my Word Finder widget.

Requirements: Your word list in a file, one word per line, saved to the desktop.

Part A - Format your list...
- Download this file to the Desktop.
- Open Applications/Terminal
- 'cd Desktop'
- 'perl convert.pl yourWordListName'

You should see the wheels turning and 14 word lists will be produced, one for each word length.

Part B - Replace my word lists with yours...
- Download my widget to the Desktop
- Right click and select 'Show package contents'
- Open the 'Bingo' folder to see my lists.
- Drag those to the Trash and drag in yours from the Desktop
- Double click on the widget file and it should load into Dashboard ready to go with your word list.

(Your widget now lives in 'Your Home/Application Support/Widgets')

If you make a Widget with other useful lists or languages then mail me and I'll host it here.

Create other word lists for the Word Finder widget

These are instructions on how to use other languages or dictionaries with my Word Finder widget.

Requirements: Your word list in a file, one word per line, saved to the desktop.

Part A - Format your list...
- Download this file to the Desktop.
- Open Applications/Terminal
- 'cd Desktop'
- 'perl convert.pl yourWordListName'

You should see the wheels turning and 14 word lists will be produced, one for each word length.

Part B - Replace my word lists with yours...
- Download my widget to the Desktop
- Right click and select 'Show package contents'
- Open the 'Bingo' folder to see my lists.
- Drag those to the Trash and drag in yours from the Desktop
- Double click on the widget file and it should load into Dashboard ready to go with your word list.

(Your widget now lives in 'Your Home/Application Support/Widgets')

If you have a Widget with other lists then let me know and I can host it here.

Let me know if there are any problems.

Use the command line (to read/write files and other fun stuff)

Using the command line from a widget adds the ability to make widgets much more powerful than standard web pages. It's really easy to do by using the widget.system call.

e.g., to run a script (drag the script to your widget 'Files' section):

  widget.system("./myscript.sh", null);

Simple write to file 'data.txt'"

  widget.system("/bin/echo Some data >> data.txt", null);
  widget.system("/bin/echo More data >> data.txt", null);

Simple file read from 'data.txt':

  var data =
     widget.system("/bin/cat data.txt ", null).outputString;

Run a java application:

  widget.system("/usr/bin/java ", null)

Note the use of the path to the executable in the system call. Looks like the widget doesn't have a good path variable set up in it's shell. Not sure why, but it's easy enough to find an executable location by typing 'which java' in Terminal.

Make sure that the widget has the attribute 'Allow Command Line Access' turned on or instead you'll get a non obvious exception when executing the system call.

Aqua Button Image Templates

Warning, drawing images takes ages!
Bizarrely writing the code for widgets always seems to be the quickest bit, drawing graphics and wrestling with Dashcode sucks up most of the time.

To help with drawing I followed an online guide to creating Aqua buttons and created long and round versions.
Here are the saved template files for Gimp to save all the bother. It's easy to change size, colour and put an icon inside.

(The icons are deliberately rotated above for maximum shock value when viewing the page, hold your laptop sideways for a more realistic view of what to expect)

Round Template
Long Horizontal Template

Full Screen Widgets

It is possible to have widgets that can enter a full screen mode. This would be useful for my ZX Spectrum widget where the user might want to quickly step back in time and pretend for a while that their $1000 Macbook is a humble 48K ZX Spectrum.

The only catch is that your useful widget code must be written in Java.

Java has the immensely useful Java full screen mode. The catch here is that an applet by default doesn't have enough permissions to use it. We can work around this by running as a application and starting Java from the command line rather than embedded in a web page. For full screen mode the rendering must be done to the contents of a Frame or Window.
So if you'd like to work in two modes: one as the contents of a small widget area in Dashboard and also as optionally full screen: write your code so it can be started as an applet and as an application.

Invoking full screen is easy ('this' is a JFrame containing our UI):

    GraphicsEnvironment ge = 
      GraphicsEnvironment.getLocalGraphicsEnvironment();
    GraphicsDevice[] gs = ge.getScreenDevices();
    setUndecorated(true);
    gs[0].setFullScreenWindow(this);
    setVisible(true);

We also want to exit full screen when the user hits 'Escape', I added this to the JFrame:

    protected void processKeyEvent(KeyEvent e){
        if (e.getKeyCode() == KeyEvent.VK_ESCAPE)
        {
            System.exit(0);
        }
    }

To run this from a Dashboard widget, use the widget.system command to run the application. Ensure that 'allow command line access' and 'allow java execution' is turned on in the widget preferences.

    widget.system("/usr/bin/java -jar 
      FullScreenTest.jar fullscreentest.Main", null);

Boom! and that's it.

I've bundled this up into a test widget to demo the experience:

Widget: Full Screen Test
Java source: fullscreentest.Main