Append custom css class to the default class of FormItem in SmartGWT

[Vadimy]

SmartClient Version: v8.3_2012-11-20/LGPL Development Only (built 2012-11-20)
Firefox 19.0

SmartGWT will set the css class for some FormItem by default value if we don't set the class explicitly. For example, a TextItem will look like this:

<input ... class="textItem" ...>

There is a method in SmartGWT which sets a css class for some FormItem explicitly:

textItem.setTextBoxStyle("foo");

BUT this method removes all previous css classes including the default class. Is there a way not to remove but to append (or insert) some custom class to the FormItem? I want to get the following result:

<input ... class="textItem foo" ...>

SmartGWT will be changing the last css class during the user interaction according to the fired events. So I would insert my custom class before the default class in order to keep the FormItem looking the same:

<input ... class="foo textItem" ...>
<input ... class="foo textItemFocused" ...>
<input ... class="foo textItemDisabled" ...> ect.

I've tried to append my custom css class to the default one with something like this:

textItem.setTextBoxStyle(textItem.getTextBoxStyle() + " foo");

But getTextBoxStyle() always returns null. The method getTextBoxStyle() returns a value only if I set it before with setTextBoxStyle() explicitly.

[amcculley]

Not sure why the getStyle call is returning null, but adding on the styles (css classes) works fine.

To find the default, check the built-in theme's css and append your style names to that. Should work.

[Isomorphic]

Just to clarify that, you can't current apply multiple CSS styles via setTextBoxStyle(). However this is not a limitation in terms of easily customizing FormItem styling, because in CSS if you just add an additional definition for eg the style series used with a textItem:

.textItem,
.textItemFocused,
... other states ...
.textItemDisabled { 
    .. some css ..
}

This will be merged into the existing textItem styles (from the skin).

[Vadimy]

you can't current apply multiple CSS styles via setTextBoxStyle()

Exactly. Now we use this as a workaround:

setTextBoxStyle("myCustomStyle textItem");

SmartGWT appends its own prefixes according to the situation:

<input ... class="myCustomStyle textItemFocused">
<input ... class="myCustomStyle textItemDisabled">

I know this approach is horrible.

this is not a limitation in terms of easily customizing FormItem styling

To be honest, the matter is not a the visual styling. We're trying to make our application more testable with Selenium WebDriver. We use WebDriver because of the following reasons: we write tests on pure Java, we use the latest versions of all modern browsers, we want to interact with a page just like a human do it... I mean without any JavaScript behind the scenes. As I know support for WebDriver is currently under development. What would you recommend to do in our case? From my perspective the only way I see is to keep hooking widgets and form elements with .set...Style()...

[Isomorphic]

None of those is a reason to use WebDriver. We provide extensive Selenium RC support which fulfills all of those requirements. See the Automated Testing overview.

Even if you had some legit reason to insist on WebDriver, you should not be using DOM-level hacks to insert extra styles, you should use the SmartClient-level AutoTest APIs and work with locators.

[Vadimy]

OK. We'll try to use SeleniumRC. Thanks for the answer!