common feature: predefined constants for css attribute names.

[kro...@googlemail.com]

common feature: predefined constants for css attribute names.

Sometimes it's usefully (in case of a complex component), to set the
background color of an element (or an other css attribute):
DOM.setStyleAttribute(element, "backgroundColor", color);

Some developers had the problem of knowing the right constant for the
css attribute name (in this case its "backgroundColor" and not
"bgcolor" or "background-color").

It would be nice to have a class width defined constants names (see
below):
DOM.setStyleAttribute(element, DomConstants.CSS_BACKGROUND_COLOR ,
color);

Perhaps, there is a class in gwt and i didn't find it yet.

Greetings
Marc
-----------------------------------------
/**
* see http://www.w3.org/TR/2000/PR-DOM-Level-2-Style-20000927/css.html
*/
public class DomConstants {

public static final String CSS_AZIMUTH = "azimuth";
public static final String CSS_BACKGROUND = "background";
public static final String CSS_BACKGROUND_ATTACHEMNT =
"backgroundAttachment";
public static final String CSS_BACKGROUND_COLOR =
"backgroundColor";
public static final String CSS_BACKGROUND_IMAGE =
"backgroundImage";
public static final String CSS_BACKGROUND_POSITION =
"backgroundPosition";
public static final String CSS_BACKGROUND_REPEAT =
"backgroundRepeat";
public static final String CSS_BORDER = "border";
public static final String CSS_BORDER_COLLAPSE = "borderCollapse";
public static final String CSS_BORDER_COLOR = "borderColor";
public static final String CSS_BORDER_SPACING = "borderSpacing";
public static final String CSS_BORDER_STYLE = "borderStyle";
public static final String CSS_BORDER_TOP = "borderTop";
public static final String CSS_BORDER_RIGHT = "borderRight";
public static final String CSS_BORDER_BOTTOM = "borderBottom";
public static final String CSS_BORDER_LEFT = "borderLeft";
public static final String CSS_BORDER_TOP_COLOR = "borderTopColor";
public static final String CSS_BORDER_RIGHT_COLOR =
"borderRightColor";
public static final String CSS_BORDER_BOTTOM_COLOR =
"borderBottomColor";
public static final String CSS_BORDER_LEFT_COLOR =
"borderLeftColor";
public static final String CSS_BORDER_TOP_STYLE = "borderTopStyle";
public static final String CSS_BORDER_RIGHT_STYLE =
"borderRightStyle";
public static final String CSS_BORDER_BOTTOM_STYLE =
"borderBottomStyle";
public static final String CSS_BORDER_LEFT_STYLE =
"borderLeftStyle";
public static final String CSS_BORDER_TOP_WIDTH = "borderTopWidth";
public static final String CSS_BORDER_RIGHT_WIDTH =
"borderRightWidth";
public static final String CSS_BORDER_BOTTOM_WIDTH =
"borderBottomWidth";
public static final String CSS_BORDER_LEFT_WIDTH =
"borderLeftWidth";
public static final String CSS_BORDER_WIDTH = "borderWidth";
public static final String CSS_BOTTOM= "bottom";
public static final String CSS_CAPTION_SIDE = "captionSide";
public static final String CSS_CLEAR = "clear";
public static final String CSS_CLIP = "clip";
public static final String CSS_COLOR = "color";
public static final String CSS_CONTENT = "content";
public static final String CSS_COUNTER_INCREMENT =
"counterIncrement";
public static final String CSS_COUNTER_RESET = "counterReset";
public static final String CSS_CUE = "cue";
public static final String CSS_CUE_AFTER = "cueAfter";
public static final String CSS_CUE_BEFORE = "cueBefore";
public static final String CSS_CURSOR = "cursor";
public static final String CSS_DIRECTION = "direction";
public static final String CSS_DISPLAY = "display";
public static final String CSS_ELEVATION = "elevation";
public static final String CSS_EMPTY_CELLS = "emptyCells";
public static final String CSS_FLOAT = "cssFloat";
public static final String CSS_FONT = "font";
public static final String CSS_FONT_FAMiLY = "fontFamily";
public static final String CSS_FONT_SIZE = "fontSize";
public static final String CSS_FONT_SIZE_ADJUSTED =
"fontSizeAdjust";
public static final String CSS_FONT_STRETCH = "fontStretch";
public static final String CSS_FONT_STYLE = "fontStyle";
public static final String CSS_FONT_VARIANT = "fontVariant";
public static final String CSS_FONT_WEIGHT = "fontWeight";
public static final String CSS_HEIGHT = "height";
public static final String CSS_LEFT = "left";
public static final String CSS_LETTER_SPACING = "letterSpacing";
public static final String CSS_LINE_HEIGHT = "lineHeight";
public static final String CSS_LIST_STYLE = "listStyle";
public static final String CSS_LIST_IMAGE = "listStyleImage";
public static final String CSS_LIST_STYLE_POSITION =
"listStylePosition";
public static final String CSS_LIST_STYLE_TYPE = "listStyleType";
public static final String CSS_MARGIN = "margin";
public static final String CSS_MARGIN_TOP = "marginTop";
public static final String CSS_MARGIN_RIGHT = "marginRight";
public static final String CSS_MARGIN_BOTTOM = "marginBottom";
public static final String CSS_MARGIN_LEFT = "marginLeft";
public static final String CSS_MARKER_OFFSET = "markerOffset";
public static final String CSS_MARKS = "marks";
public static final String CSS_MAX_HEIGHT = "maxHeight";
public static final String CSS_MAX_WIDTH = "maxWidth";
public static final String CSS_MIN_HEIGHT = "minHeight";
public static final String CSS_MIN_WIDTH = "minWidth";
public static final String CSS_ORPHANS = "orphans";
public static final String CSS_OUTLINE = "outline";
public static final String CSS_OUTLINE_COLOR = "outlineColor";
public static final String CSS_OUTLINE_STYLE = "outlineStyle";
public static final String CSS_OUTLINE_WIDTH = "outlineWidth";
public static final String CSS_OVERFLOW = "overflow";
public static final String CSS_PADDING = "padding";
public static final String CSS_PADDING_TOP = "paddingTop";
public static final String CSS_PADDING_RIGHT = "paddingRight";
public static final String CSS_PADDING_BOTTOM = "paddingBottom";
public static final String CSS_PADDING_LEFT = "paddingLeft";
public static final String CSS_PAGE = "page";
public static final String CSS_BREAK_AFTER = "pageBreakAfter";
public static final String CSS_BREAK_BEFORE = "pageBreakBefore";
public static final String CSS_BREAK_INSIIDE = "pageBreakInside";
public static final String CSS_PAUSE = "pause";
public static final String CSS_PAUSE_AFTER = "pauseAfter";
public static final String CSS_PAUSE_BEFORE = "pauseBefore";
public static final String CSS_PITCH = "pitch";
public static final String CSS_PITCH_RANGE = "pitchRange";
public static final String CSS_PLAY_DURING = "playDuring";
public static final String CSS_POSITION = "position";
public static final String CSS_QUOTES = "quotes";
public static final String CSS_RICHNESS = "richness";
public static final String CSS_RIGHT = "right";
public static final String CSS_SIZE = "size";
public static final String CSS_SPEAK = "speak";
public static final String CSS_SPEAK_HEADER = "speakHeader";
public static final String CSS_SPEAK_NUMERICAL = "speakNumeral";
public static final String CSS_SPEAK_PUNCTUATION =
"speakPunctuation";
public static final String CSS_SPEECH_RATE = "speechRate";
public static final String CSS_STRESS = "stress";
public static final String CSS_TABLE_LAYOUT = "tableLayout";
public static final String CSS_TEXT_ALIGN = "textAlign";
public static final String CSS_TEXT_DECORATION = "textDecoration";
public static final String CSS_TEXT_INDENT = "textIndent";
public static final String CSS_TEXT_SHADOW = "textShadow";
public static final String CSS_TEXT_TRANSFORM = "textTransform";
public static final String CSS_TOP = "top";
public static final String CSS_UNICODE_BIDI = "unicodeBidi";
public static final String CSS_VERTICAL_ALIGN = "verticalAlign";
public static final String CSS_VISIBILITY = "visibility";
public static final String CSS_VOICE_FAMILY = "voiceFamily";
public static final String CSS_VOLUME = "volume";
public static final String CSS_WHITE_SPACE = "whiteSpace";
public static final String CSS_WIDOWS = "widows";
public static final String CSS_WIDTH = "width";
public static final String CSS_WORD_SPACING = "wordSpacing";
public static final String CSS_Z_INDEX = "zIndex";

}

[Konstantin Scheglov]

Isn't it better to change CSS style instead (most probably using
addStyle)? AFAIK this is recommended "GWT way" to change GWT widgets
look.

[kro...@googlemail.com]

as a general rule : yes.

BUT there are some occasions to change the style directly:
One sample:

look at this:
public void setBackgroundColorAttribute(String color) {
DOM.setStyleAttribute(body, "backgroundColor", color);
DOM.setStyleAttribute(divContent, "backgroundColor",
"transparent");
for (int i = 0; i < divCorners.length; i++) {
DOM.setStyleAttribute(divCorners[i], "color", color);
}
}

It's a code fragment from a BigRoundedPanel component.
The user of the component can set the color in an easy way:
roundedPanel.setBackgroundColorAttribute("orange");

This component has 10 div elements. The background color of this
component is the background color of some of these 10 divs und the
foregroundcolor of some others child divs. So it would very complicated
to explain the user , what styles are required to change forground and
background color.

if you have a lot of this components in your screen, you have to write
o lot of css code in the style sheet.

It's only one example, where its usefull to use
DOM.setStyleAttribute(...)

If you search in the blog, you will find some user questions, like
"DOM.setStyleAttribute(elem, "background-color, ...) doesn't work,
please help".

Remember, it's only one example, but i think that there are some more.

[Konstantin Scheglov]

Ok, agree.

[ash]

wow, thanks for this. i was actually doing the same thing on an as
needed basis, based on
1. http://codepunk.hardwar.org.uk/css2js.htm

i put my constants in an inteface but i wanted to check against the
reference above before replacing mine with your _complete_ set. the
only main difference that I observed was:

your public String CSS_FLOAT = "cssFloat";

and
[1] public String STYLE_FLOAT = "styleFloat";

what is there difference if any between the two?

rgds ash

[kro...@googlemail.com]

Have a look at http://www.w3schools.com/htmldom/dom_obj_style.asp
cssFloat IE5(+Mac) firefox1 Mozilla6
styleFloat for IE4 only

or a look at this:
http://www.howtocreate.co.uk/tutorials/javascript/domcss
...
The only odd style is float, which is a reserved word in many
languages, including JavaScript. As a result, the float style must be
set using cssFloat in standards compliant browsers, and styleFloat in
Internet Explorer (some standards compliant browsers also provide this
as well). Simply set both of them. It will not cause any problems, and
will work in all possible browsers.
...

Greetings
Marc