"To Die For" Style Editing

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.

When we shipped "Reef" - a big update to Creator 1.0 last December,
one of the new features was a CSS property editor.
In the "What's New In Reef"
feature overview
posted on the web site,
the CSS support was described as a "To Die For" Style Editor.

That was jumping the gun a little. We had in development really
good CSS support, but only one minor part of that was actually
added into Reef. Of course, it's now available in Creator 2 EA.
I was just asked by a user how to edit full stylesheets, not just
the style attributes of components. And this is
precisely what the new CSS editing support is for: full
fledged CSS file editing.

So without further ado, let me introduce a screenshot of what
happens when you open a CSS file in Creator today (click
for full image):

There are many things to notice here (not all are shown):

• Code completion on properties and property values. For example,
  here the caret (right under the mouse pointer) is in the value
  are for a border-style property, so the completion popup
  is showing the possible values for that property (solid, double, etc.)
  along with a visualization of these values.


• There's a live preview of the style declaration near the bottom right.
  Let's say you had a style declaration only defining the text color to
  be orange. In that case, you'd only see sample text, in orange.
  Here we have a more complex style declaration, setting borders,
  font weight and size, etc. These rules are all reflected immediately
  while you're tying in the style declaration.


• There's also a customizer area on the bottom where you can easily
  choose fonts, background colors or images, margins, etc. etc. These
  automatically update the current style declaration with new properties
  or value updates. Also, as you're tying in the text area, the right
  values are selected in the customizer.


• Notice the property sheet on the right - it's showing the properties
  set for the current style declaration. This is also kept in sync with
  the other views. (The customizer and preview area, which takes up a lot
  of space here, can be toggled on and off with a toolbar button, and when
  it's off the property sheet is pretty useful.)


• You can navigate styleclasses with the combobox in the editor toolbar.


• There is Syntax highlighting and Code Folding of style rules


• There's a Reformat action which reformats the stylerules such that
  all property declarations are on their own lines; indentation is uniform, etc.


• There's a style builder dialog which lets you construct new style declarations
  with more complicated selectors.


• There's background error checking too.

Something fun to try is to use this facility to explore the stylesheet that's built
into the theme you see applied to the new Creator components -- gradients on buttons,
etc.

Go into the Project Navigator, look under Libraries,
locate the Default Theme item, expand it, then expand the css package, and open
the css_master.css stylesheet. As you can see it's not a trivial stylesheet,
clocking in at over a thousand lines!