Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Eclipse 4 and the CSS Spy

DZone's Guide to

Eclipse 4 and the CSS Spy

· Java Zone ·
Free Resource

Verify, standardize, and correct the Big 4 + more– name, email, phone and global addresses – try our Data Quality APIs now at Melissa Developer Portal!

I’ve been learning about styling using CSS in Eclipse 4. I’m capturing some of the steps that I’ve been following with these posts. Think of this as more of a journal than any sort of “how to” on the topic.

The CSS Spy is a handy resource for figuring out how to refer the various parts of the user interface and sorting out the kinds of properties that you can apply. It lets you drill into the properties of the various UI elements, but doesn’t yet let you actually modify any values and modify many of them. [correction: CSS Spy lets you change some of the properties]

Rather than install the CSS spy into my Eclipse for RCP and RAP Developers Juno M5 instance (available on the “Developer Downloads” page), I pulled the code from the e4 Incubator project‘s Tools Git repository, and have been running it in a debug launch of Eclipse. Being incubator code, it’s a little rough around the edges, but it’s still a pretty useful bit of software.

The first rough bit that I encountered was the key sequence to open the CSS Spy: Alt+Ctrl+F4 means something to Fedora 14 and, instead of getting the CSS Spy, keying that particular combination switched me to a new terminal. Instead, I used the handy “Quick Access” feature to open the CSS Spy (just type “CSS Spy” into the entry field and click on the corresponding entry in the popup).

The CSS Spy provides a handy hierarchical breakdown of the workbench UI. It shows the part type, its corresponding CSS Class and–if specified–the CSS Id. When you click on an entry in the tree, it outlines the corresponding UI element in the workbench. In the above snapshot, I’ve highlighted the CTabFolder that’s shown highlighted in red. This particular instance of CTabFolder has the “MPartStack” CSS Class and id “topLeft”. Using this information, I can apply styles as generally or specifically as I’d like.

There are several other parts that share the same CSS class. I can style them all with an class entry in my CSS file:

.MPartStack {
font-size: 11;
simple: false;
mru-visible: false;
outer-keyline-color: #B4B4B4;
background-color: #E2E2E2;
}

I can specifically target the “topleft” MPartStack by including the id in my CSS file:

.MPartStack#topleft {
outer-keyline-color: #000000;
}

With this combination of styles, the “topleft” stack will be outlined in black (#000000), but all other stacks will be oulined in a medium-darkish grey (#B4B4B4). The “topleft” stack will inherit all of the remaining properties from the more general entry.

One of the things I started exploring today is how one might set the background colour of an element to a colour defined by the system. i.e. how do you leverage system properties when stylin’? More–hopefully–on this later.

Developers! Quickly and easily gain access to the tools and information you need! Explore, test and combine our data quality APIs at Melissa Developer Portal – home to tools that save time and boost revenue. 

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}