Skinning a GWT App on GAE depending on Domain
I host a Google App Engine (GAE) site under two domain names because the content is common but filtered to each domain.
I want to apply different branding depending on which domain name is used to arrive at the site. Let's inject different CSS depending on the value of Window.Location.getHostName(). At the end, you'll see a different site in your dev environment depending on whether you use http://127.0.0.1:8888/SkinIt.html?gwt.codesvr=127.0.0.1:9997 or http://localhost:8888/SkinIt.html?gwt.codesvr=127.0.0.1:9997 to access it from your browser.
Using UiBinder, my EntryPoint looks like this
public class SkinIt implements EntryPoint {
@UiField Label mLogoLabel;
boolean mUseDefaultStyle = true;
public void onModuleLoad() {
mUseDefaultStyle = Window.Location.getHostName().equals("localhost");
// Inject correct global style.
if (mUseDefaultStyle) {
GWT.<DefaultResource>create(DefaultResource.class).mCSS().ensureInjected();
} else {
GWT.<AlternateResource>create(AlternateResource.class).mCSS().ensureInjected();
}
// Create the UI
HTMLPanel outer = mBinder.createAndBindUi(this);
RootLayoutPanel root = RootLayoutPanel.get();
root.add(outer);
mLogoLabel.setText(mUseDefaultStyle ? "localhost label text" : "alternative label text");
}
interface Binder extends UiBinder { }
private static final Binder mBinder = GWT.create(Binder.class);
}
with the UI as
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel addStyleNames="logoStyle">
<g:FlowPanel ui:field="mLogoPanel">
<g:Label ui:field="mLogoLabel"/>
</g:FlowPanel>
</g:HTMLPanel>
The resource bundles look like this:
DefaultResource.java
public interface DefaultResource extends ClientBundle {
@NotStrict
@Source("resources/default.css")
CssResource mCSS();
}
AlternateResource.java
public interface AlternateResource extends ClientBundle {
@NotStrict
@Source("resources/alternate.css")
CssResource mCSS();
}
Each css looks like
.logoStyle {
background-image: url('images/default.png');
}