e4 Modelled UI + CSS = Cool!
In our current e4 self hosting SDK workbench, the perspective switcher is a tab folder (we didn’t have time to put a more custom control in). I wanted to style it different than the editor/view tabs because (1) it has a different function and (2) with the new tab styling the perspective switcher tabs were grabbing the eye too much.
Last week Eric had pointed me to the code where we generate the perspective switcher. My plan was to mark that resulting ETabFolder with a CSS classname, then have different markup in the style sheet to differentiate it from the other tabs. But I didn’t have time to work on it last week and couldn’t remember today where we were making that ETabFolder (some tricky legacy dance).
I put a breakpoint in the ETabFolder constructor, figuring first hit would be the perspective switcher, inspected the variables to make sure it was the right one, then noticed that the model element part had an ID “PerspectiveSwitcher”. Turns out all model elements have an ID. Also turns out that last week I put in a change where, when we bind the part to it’s resulting rendered widget, we set the CSS ID on the widget to be the same as that on the part.
Hmmm… all widgets have the same ID as their parts… D’oh! I don’t have to write any code! All I needed was to modify the existing CSS, like for example:
#PerspectiveStack {
background-color: rgb(246, 246, 251);
margin: 0px;
tab-margin-offset: 12px;
}
#PerspectiveStack > ETabItem {
background-color: rgb(241, 240, 245);
padding-top: 6px;
padding-bottom: 2px;
margin-top: 0px;
}
#PerspectiveStack > ETabItem:selected {
margin-top: 0px;
}
#PerspectiveStack > ETabItem.active {
background-color: rgb(241, 240, 245);
}
#PerspectiveStack > ETabItem.active:selected {
background-color: rgb(255, 255, 255) rgb(246, 245, 250);
}
For those who aren’t CSS enabled, it roughly says:
- The thing called #PerspectiveStack should have these values
- Tab items inside #PerspectiveStack’s should look like this
- Selected tabs inside #PerspectiveStack’s should look like this
- etc…
What really blew me away was how elegant the solution became. No code was harmed in the process. It’s this great combination of a first class model of the UI, with a clear mapping to CSS concepts so its look can be styled independently of it’s construction.
I think this really shows the power of the architectural concepts in e4. Not only do you get externalized styling, like you do in the web, but you also get a simple, composable model of the UI, abstracted above that of the widgets, which you don’t normally get in the web. Where in the web you must hope that some random JavaScript somewhere tagged the html element you care about with a CSS class or a CSS ID, in e4 because we have a first class description of the parts before they become widgets, we can markup the parts during construction and map that through all the way to the CSS.
We have a logical model on the one hand, a styling description on the other, and some simple rules for how they relate. Very cool.
Posted July 24th, 2009 by Kevin McGuire in category: Uncategorized
You can skip to the end and leave a response. Pinging is currently not allowed.
Leave a Reply
You must be logged in using your Eclipse Bugzilla account to post a comment.
