Resources

This explains bootstrapping and using resources. This goes over resource types Messages, Constants, CSS and Images.

Reference

The code snippets are taken from GWTP-Samples-Tab sample.

Resources Directory

The properties, images and css file types are located in the resources folder. The resources need to exist in the same package or in the resource folder matching package to be used.

CSS Injection

Loading resources is as simple as binding a eager singleton in the ClientModule.

  • Example of binding resource loader in the client module. ClientModule
public class ClientModule extends AbstractPresenterModule {
    @Override
    protected void configure() {
        install(new DefaultModule(DefaultPlaceManager.class));
        install(new ApplicationModule());
        //...

        // Load and inject CSS resources
        bind(ResourceLoader.class).asEagerSingleton();
    }
}
  • Example of the ResourceLoader class using ensureInjected(): ResourceLoader
public class ResourceLoader {
    @Inject
    ResourceLoader(AppResources resources) {
        resources.styles().ensureInjected();
        resources.sprites().ensureInjected();

        //... Inject more css into the document here on boot
    }
}

Demo Css Injection

//...
    @UiField(provided = true)
    AppResources resources;

//...

    private final AppConstants appConstants;
    private final AppMessages appMessages;

    @Inject
    HomeNewsView(Binder uiBinder,
                 AppResources resources,
                 AppConstants appConstants,
                 AppMessages appMessages) {
        this.resources = resources;
        this.appConstants = appConstants;
        this.appMessages = appMessages;

        initWidget(uiBinder.createAndBindUi(this));
    }
//...
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <ui:with field="resources"
             type="com.gwtplatform.samples.tab.client.resources.AppResources"/>

    <g:HTMLPanel>
        <!-- Resource Examples Below -->
        <div>Example use of Messages:</div>
        <g:HTML ui:field="orderText"/>

        <div>Example use of Constants:</div>
        <g:HTML ui:field="gwtpTitle"/>

        <div>Example use of ImageResource:</div>
        <g:Image resource="{resources.logo}" styleName="{resources.styles.logo}"/>

        <div class="{resources.styles.divBorder}">Example use of Css Resource:</div>
    </g:HTMLPanel>
</ui:UiBinder>

Demo AppMessages

@LocalizableResource.DefaultLocale("en")
public interface AppMessages extends Messages {
     String iWillOrderNumberOf(Integer number);
}
//...
    private final AppConstants appConstants;
    private final AppMessages appMessages;

    @Inject
    HomeNewsView(Binder uiBinder,
                 AppResources resources,
                 AppConstants appConstants,
                 AppMessages appMessages) {
        this.resources = resources;
        this.appConstants = appConstants;
        this.appMessages = appMessages;

        initWidget(uiBinder.createAndBindUi(this));
    }
//...
    @Override
    public void display() {
        String orderNumberOf = appMessages.iWillOrderNumberOf(5);
        orderText.setText(orderNumberOf);

        String gwtpTitle = appConstants.gwtpPlatformTitle();
        this.gwtpTitle.setText(gwtpTitle);
    }
//...