Thursday August 11, 2005

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!