Romain Guy's Blog

Synth Week, Custom Lines Style

Every Swing look and feel relies on properties to customize the rendering. One of these properties allows you, With BasicLookAndFeel and therefore Metal and Ocean, to change JTree's lines style from solid to dashed:

UIManager.put("Tree.lineTypeDashed", Boolean.TRUE);

The following screenshot shows the difference between dashed tree lines on the left and regular solid tree lines on the right.

Fig. 1. Regular and dashed lines style in a JTree.

Although not vital, this feature was used from time to time and was unfortunately unsupported by Synth. Actually, bug #6258272 reporting this problem had even 3 votes. As part of Mustang b53, this bug is now fixed but instead of just supporting dashed lines we went a step further and added an opportunity for later enhancements. The following snippets enables dashed tree lines in Synth:

<style id="treeStyle">
  <property key="Tree.linesStyle" type="string" value="dashed" />
</style>

As you can see, the property used in Synth is more generic than BasicLookAndFeel. Even though only two styles are supported, dashed and the default one which is solid, you can easily create your own. Indeed, whenever you declare a Synth style (which you later bind to a region or a component by its name), you can provide a graphics utilities entity:

<style id="myStyle">
  <object class="MyGraphicsUtils" id="graphics" />
  <graphicsUtils idref="graphics" />
</style>

The specified class, in this case MyGraphicsUtils, derives from javax.swing.plaf.synth.SynthGraphicsutils and provides several helper methods Synth invokes to render components. One of these methods is drawLine():

void drawLine(SynthContext context, Object paintKey, Graphics g,
              int x1, int y1, int x2, int y2)

The paintKey identifies the type of line. A tree will for instance draw lines of type "Tree.horizontalLine" and "Tree.verticalLine". Since this method is invoked by several UI delegates, the paintKey must be used to change the behavior according not only to the component but also to which line is being drawn. Mustang b53 adds new drawLine() method with the following signature:

void drawLine(SynthContext context, Object paintKey, Graphics g,
              int x1, int y1, int x2, int y2, Objet styleKey)

A new parameter called styleKey identifies the requested style of the line being drawn. In current implementation the only special style supported is "dashed", and only for horizontal (y1 == y2) and vertical lines (x1 == x2). Oblique lines are drawn with the default solid style. You must also know that only JTree will benefit from this new method. If it proves to be useful, we will gradually add support of styled lines to other components as well. Nevertheless, the styleKey gives you a new degree of freedom; you can for instance use it to paint curved lines in a tree as in the following example (screenshot from the chat demo of JavaOne 2005 session Extreme GUI Makeover):

Fig. 2. Curved lines style.

Happy styling!

Comments

• I had never seen that screenshot before. It' amazing.

  Posted by: urddd on September 23, 2005 at 08:15 PM

• Well you should see it in action then :)

  Here are some cool screenshot:
  Other style for the contacts list
  Extreme looking login dialog
  Extreme looking login dialog
  Drag n' drop like never before

  Posted by: gfx on September 23, 2005 at 08:37 PM

• Romain,

  The last screen shot of a custom tree is amazing, as is the shot of it in action. You seem to have a real flair for this sort of work: the rare combination of a visual design sense coupled with strong technical capacity.

  Are you creating a full synth lnf? I would be fascinated to see a themed lnf with such flair. Imagine the kudos java on the desktop would receive from bundling a very professional lnf with JSE. In my work at an investment bank, C# is becoming the norm on the desktop simply because it looks better. It would be great to challenge that notion, and a strong (/standard) lnf (i.e. aqua did this for the new macs) is actually precisely the way to change the perception of swing in the marketplace.

  Cheers,
  Andrew, London

  p.s. I realise that this would potentially compete with commercial lnf's, but should we should not avoid raising the bar of JSE just to placate vendor interests. As the bar rises, the vendor's products will move up also.
  

  Posted by: andrewmcveigh on September 24, 2005 at 12:49 AM

• Thanks but actually I did not write the code of the last screenshot. You have to thank Shannon Hickey for that :)

  I am actually working on a Synth theme. Its goal is to be an implementation reference so that you can just grab the code and slam your own pictures in it to get a new look and feel. Synth is full of subtelties and it will definitely help developers. Also I am not working alone on that. Anyway, I don't think this will really compete with commercial LaF because to serve as a reference it needs to be kept "simple" (understand I won't write dozens of custom painters to offer richer features like animations).

  Posted by: gfx on September 24, 2005 at 01:05 AM

• hi Romain, its really ammazing to come know that we can do this much in Swing Components., Really nice presentation.. it will really helpful one for novice programmers like me... i want to know the tricks.. could u please tell me how to design this..??

  Posted by: techgokul on November 17, 2005 at 03:57 AM

• can we have the source code for this...this is awesome..

  Jaji

  Posted by: lukman_jaji on June 19, 2007 at 10:15 AM

This work is licensed under a Creative Commons License.