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

apanizo · Accepted Answer · 2013-12-30 09:50:44Z

1

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");
}

answered Dec 30, 2013 at 9:50

apanizo

6285 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Marcel Piquet Over a year ago

Many thanks apanizo, but in this case I'm looking for a solution in SmartGWT which is an extension of Google Web Toolkit (an Ajax, Javascript processor written by Google)

Marcel Piquet Over a year ago

I just Googled a bit and I found that GQuery is an extension for GWT, it seems like a port of jQuery to GTW correct?

apanizo Over a year ago

Yes, is an extension of GWT. But much more (it has Promises (for dealing with async stuff), Ajax's helpers...) take a look into stackoverflow.com/questions/16962622/benefits-of-gwtquery/… Happy codding!

apanizo Over a year ago

They have done a very impressive talk in the GWT.Create event (so, yes, you are playing with GWT stuff :D ).

Marcel Piquet · Accepted Answer · 2014-01-01 16:53:03Z

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");
        }
    });

Collectives™ on Stack Overflow

SmartGWT switch CSS class at runtime

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related