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"
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
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-styleproperty, 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,
Go into the Project Navigator, look under Libraries,
locate the Default Theme item, expand it, then expand the css package, and open
css_master.css stylesheet. As you can see it's not a trivial stylesheet,
clocking in at over a thousand lines!