CODEWITHSUNDEEP
gwt
junaidp
junaidp

Reputation: 11221

GWT how to change the css at run time

We have a requirement of accessibility in our next application and we will need customized themes for this. The first goal to achieve is to be able to increase and decrease the font size in the application. For this we will have two buttons, one to increase, the other to decrease the size of text in all components. You can use Enterprise Blue as a reference theme. You can see an example of this at the URL: http://emag.governoeletronico.gov.br/emag/#. You can click on "Aumentar Fonte " and "Diminuir Fonte".

Any idea how can i acheive this in GWT/SmartGWT

thanks

Upvotes: 3

Views: 1455

Answers (2)

Suresh Atta
Suresh Atta

Reputation: 122026

Short answer is RootPanel.getBodyElement().

The most Convenient way is to apply classes on body element.

There are multiple ways to do it.

RootPanel.get("body").setStyleName("newbodyclass"); //Not recommended.

Efficient way

RootPanel.getBodyElement().setClassName("newbodyclass"); //Recommended

Few new ways:

Document.get().getBody().setClassName("newbodyclass");

Finally best for you problem:

Document.get().getBody().getStyle().setFontSize(value, unit);

Upvotes: 1

A1exandr Belan
A1exandr Belan

Reputation: 4780

static Label lblNewLabel = new Label("New label");
Button btnNewButton = new Button("New button");
private int fontSize=10;

btnNewButton.addClickHandler(new ClickHandler() {
  public void onClick(ClickEvent event) {
    fontSize += 5;
    lblNewLabel.getElement().getStyle().setFontSize(fontSize  , Unit.PX);
  }
});

Upvotes: 1

Related Questions