SmartGWT switch CSS class at runtime

Question

I would like to know if and how it is possible working on SmartGWT to change the class associated to an element at runtime.

Take for example the underlying code that renders contents inside a div, I would like to know if and how I can modify at runtime the css class associated to the div.

    HTMLFlow productInfo = new HTMLFlow(productInfoHtml);
    productInfo.setStyleName("loginProductInfo");
    productInfo.setHeight(13);
    productInfo.setMargin(5);

Note: I'm using Smart GWT version 4.0

Answer 1

In fact, the solution is simpler than I had thought. It is sufficient to keep a reference to the object of which you want to change the css class, then invoke again the method setStyleName. Keep a reference to the widget (in our case productInfo) as a field of the original class, then change the css assignment when necessary.

So in the end the object productInfo becomes a field in the main class and then we can change the css assignment simply by invoking again the method setStyleName passing the new css class.

The object productInfo becomes a field in the main class

protected HTMLFlow productInfo = new HTMLFlow();

The code of the question example is modified as in the snippet

    productInfo.setContents(productInfoHtml);
    productInfo.setStyleName("login-product-info");
    productInfo.setHeight(16);
    productInfo.setWidth100();

Now I can change the css class assigned to the widget productInfo when the event onMouseOver occurs on the object forgot.

    forgot.addMouseOverHandler(new MouseOverHandler() {

        @Override
        public void onMouseOver(MouseOverEvent event) {
            productInfo.setStyleName("my-new-style");
        }
    });

Answer 2

I have not used SmartGWT, but if HTMLFlow is a widget you can use GQuery for changing classes on fly, or css' rules.

Something like:

if (something) {
  GQuery.$(productInfo).css("width", "70px");
else{
  GQuery.$(productInfo).css("width", "30px");
}

About the css classes:

if (something) {
  GQuery.$(loginProductInfo).removeClass("loginProductInfo");
} else {
  GQuery.$(loginProductInfo).addClass("secondLoginProductInfoCss");
}