Introduction

Nous avons déjà vu comment faire un widget simple et fonctionnel, mais pas très esthétique. Il est bien sur possible d'arranger ça pour obtenir un rendu un peu plus agréable.

Ajouter des styles

Nous allons en profiter pour tester une autre des nouvelles fonctionnalités annoncées, le ClientBundle, qui à la manière de l'ImageBundle, permet de regrouper toutes ses ressources pour les transférer au client dans une seule requête HTTP.

Celà se fait à l'aide de l'interface ClientBundle :

public interface ExampleResources extends ClientBundle {
    /**
     * Sample CssResource.
     */
    public interface MyCss extends CssResource {
        String greyText();

        String loginButton();

        String box();

        String background();
    }

    @Source("Example.css")
    @Strict
    MyCss style();
}

Celà nous permet de binder le fichier css:

.greyText {
}

.loginButton {
}

.box {
}

.background {
}

Il faut ensuite injecter la feuille de style dans la page :

 public Example() {

     StyleInjector.injectStylesheet(GWT.create(ExampleResources.class).style().getText());
     
     initWidget(binder.createAndBindUi(this));

    }

Déclarer la ressource dans le fichier .ui.xml :

<gwt:UiBinder xmlns:res='urn:with:sfeir.uibinder.example.client.ExampleResources'>

Et on peut maintenant utiliser les styles sur nos éléments directement :

<gwt:Label text="Login" res:styleName="style.greyText" />
<gwt:TextBox ui:field="loginBox" res:styleName="style.box" />

En choisissant les couleurs et le style dans le css fait plus haut, on peut obtenir un rendu un peu plus agréable que précédemment :

Les sources complètes sont toujours disponibles et mises à jour sur le svn ici : http://code.google.com/p/sfeir/source/browse/#svn/trunk/ubinder-example