(Apologies for poorly formatted HTML message, mail reader is not well
configurable)
I am spending some time on the stylesheet, but more importantly making the
stylesheet more useful. I think I have a pretty good scheme for attaching style
information:
1: For each component created, it is assigned a class name. This class name is
based on some formula, like "xap" + the name of the element capitalized.
("xapButton", "xapTreeTable", etc)
2: In addition, when the component changes state a new class is added/remove.
That class is of the form CLASS_NAME + STATE_NAME. For example:
"xapButtonMouseDown"
3: The states are:
MouseDown
MouseOver
Focused
Disabled
All of this is handled by the base AbstractWidgetBridge so not many changes are
required. An example css entry for button:
.xapButton{
border-top : 2px outset #ccc;
border-right: 2px outset #ccc;
border-bottom: 2px outset #ccc;
border-left: 2px outset #ccc;
padding: 2px 2px 2px 2px;
}
.xapButtonMouseOver{
background-color: #EEEEFF;
color:orange;
}
.xapButtonMouseDown{
border-top : 2px inset #ccc;
border-right: 2px inset #ccc;
border-bottom: 2px inset #ccc;
border-left: 2px inset #ccc;
padding: 4px 0px 0px 4px;
}
.xapButtonDisabled{
color : gray;
border-top : 2px solid gray;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
border-left: 2px solid gray;
}
This is very flexible and nice, some highlights:
Disabled buttons are grey.
When you press a button the content shifts down and to the right and the border
changes to inset.
Rolling over a button turns it blue with orange text. (Graphic designer I am
not)
I will check in a stylesheet with some entires for a couple of key components
along with the general scheme. One thing I need to determine is how to make
this play well with dojo components that define their own class names already,
including on divs etc nested inside the component.
James Margaris
