Skip to main content

Customizing Ocean Gradients

Posted by zixle on September 26, 2005 at 8:37 AM PDT

In my last blog I went over how we were able to make Ocean perform as well, and in some cases better than Steel. In this blog I'm going to cover how you can change the gradients that Ocean draws.

For a quick refresher the gradients in Ocean consist of 4 distinct regions as shown here:

As with other visual properties Ocean determines how to draw this gradient from the defaults table. JButton uses the defaults key "Button.gradient" to get the value that dictates what to draw. The value is a java.util.List consisting of five values. The first value is the percentage (as a Number) of the width (or height) for the first gradient. The second number gives the percentage (again as a Number) of the the width (or height) for the solid region. The remaining three values are the colors: start color for gradient 1, end color for gradient 1 and end color for gradient 2.

The algorithm for drawing a vertical gradient is roughly like:

  List values = ...;
  int gradient1Height = ((Number)values.get(0)).floatValue() * h;
  int solidHeight = ((Number)values.get(1)).floatValue() * h;
  Color c1 = (Color)values.get(2);
  Color c2 = (Color)values.get(3);
  Color c2 = (Color)values.get(4);
  // First gradient
  // Fictional method that draws a gradient of the specified size.
  drawGradient(0, 0, width, gradient1Height, c1, c2);
  // Solid rectangle
  fillRect(0, gradient1Height, width, solidHeight);
  // First gradient inverted
  drawGradient(0, gradient1Height + solidHeight, width, gradient1Height, c2, c1);
  // Last gradient
  drawGradient(0, gradient1Height * 2 + solidHeight, width, h - (gradient1Height * 2 + solidHeight), c1, c3);

And the code to initialize the value is roughly like:

  java.util.List buttonGradient = Arrays.asList(
                 new Object[] {new Float(.3f), new Float(0f),
                 new ColorUIResource(0xDDE8F3), getWhite(), getSecondary2() });

Because the colors are not hard coded, you can change the way Ocean looks by changing the value in the defaults table. For example, you can go for the garish:

To the minimalist:

Or a slightly brighter Ocean look:

You can even get a look similar to that used by Incor's Alloy Look and Feel:

Or an XP like gradient:

Ocean Gradient Customizer

If you have 1.5 you can try your hand at a good combination using the Ocean Gradient Customizer. Post your favorite combinations and I'll do a future blog on the various combinations people have come up with.

Related Topics >>