Change CSS in execution time

1,310 views

Skip to first unread message

jamer

unread,

Feb 6, 2008, 8:29:12 AM2/6/08

to Google Web Toolkit

Hello I am developing an application with GWT and I would like that
into time of execution the user could change the aspect of the same
one (changing the css or something like that) on having touched a
button.
Since it happens for example in the page of igoogle.

Thank you very much

Pd:Si utilizas GWT y hablas español aquí dejo el enlace del grupo en
español, haber si entre todos lo conseguimos sacar adelante.

http://groups.google.es/group/google-web-toolkit-en-espanol

Peter Blazejewicz

unread,

Feb 6, 2008, 4:00:03 PM2/6/08

to Google Web Toolkit

hola jamer,

the simplest solution is to apply skinning similiar to those used in
YUI UI library:
http://developer.yahoo.com/yui/articles/skinning/

e.g.:

having two different css for your application:

default:

.gwt-Label {
font-size: 16px;
color: white;
}

.gwt-FlowPanel {
margin: 30px;
}

.theme-default .gwt-Label {
background-color: black;
}

.theme-default .gwt-FlowPanel {
background-color: white;
color: black;
}

and custom skin (green):

.theme-green .gwt-Label {
background-color: green;
}

-theme-green .gwt-FlowPanel {
background-color: green;
color: white;
}

and:
<body class="theme-deault">

skin for application can be changed at runtime:

package com.mycompany.project.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class CSSSample implements EntryPoint {
public static final String DEFAULT_THEME_STYLE = "theme-default";
public static final String GREEN_THEME_STYLE = "theme-green";
private Button clickMeButton;

public void onModuleLoad() {
final RootPanel rootPanel = RootPanel.get();
rootPanel.setStyleName(DEFAULT_THEME_STYLE);

clickMeButton = new Button();
rootPanel.add(clickMeButton);
clickMeButton.setText("Click me!");
clickMeButton.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
String className = rootPanel.getStyleName();
if (DEFAULT_THEME_STYLE.equalsIgnoreCase(className)) {
rootPanel.setStyleName(GREEN_THEME_STYLE);
} else {
rootPanel.setStyleName(DEFAULT_THEME_STYLE);
}

}
});
final FlowPanel flowPanel = new FlowPanel();
rootPanel.add(flowPanel);
flowPanel.setStyleName("gwt-FlowPanel");
final Label label = new Label("New Label");
flowPanel.add(label);
}
}

regards,
Peter

Reply all

Reply to author

Forward

0 new messages