GWT CssResource Personnalisation

Question

J'écris un widget GWT à l'aide UIBinder et MVP. Les styles par défaut du widget sont définis dans TheWidgetView.ui.xml :

<ui:style type="com.widgetlib.spinner.display.TheWidgetView.MyStyle">
    .textbox {
        border: 1px solid #red;
    }
    .important {
        font-weight: bold;
    }
</ui:style>

L'interface CssResource de widget est défini dans TheWidgetView.java :

public class TheWidgetView extends HorizontalPanel implements TheWidgetPresenter.Display {
    // ... some code
    @UiField MyStyle style;
    public interface MyStyle extends CssResource {
        String textbox();
        String important();
    }
    // ... more code
}

Je voudrais que le consommateur de ce widget pour être en mesure de personnaliser une partie des styles du widget et d'avoir cela dans leur MyExample.ui.xml :

<ui:style type="com.consumer.MyExample.MyStyle">
    .textbox {
        border: 2px solid #black;
    }
</ui:style>

Et ce sera leur MyExample.java :

public class MyExample extends Composite {
    // ... some code
    @UiField MyStyle style;
    interface MyStyle extends TheWidgetView.MyStyle{
        String textbox();
    }
    // ... more code
}

Est-il possible que mon widget peut avoir des styles par défaut, mais que le consommateur du widget peut remplacer l'un d'entre eux? Lorsqu'une interface étend TheWidgetView.MyStyle, le consommateur du widget doit définir tous les styles répertoriés dans cette interface mère. Je l'ai vu quelques bibliothèques de widgets ont constructeur du widget de prendre dans un ClientBundle comme paramètre, que je suppose que pourrait appliquer à CssResource. Bien que, je ne sais pas comment je passe dans cet objet de style dans un constructeur invoqué par UIBinder.

Merci beaucoup à l'avance!

Answer 1

Je l'ai jouer avec quelque chose de similaire pour faire ma demande skinable. Je commencerais en regardant le code source pour l'une des widgets cellulaires. Ils semblent prendre les ressources en tant que constructeur, mais ils ont aussi des constructeurs qui utilisent GWT.create (Resources.class) pour créer les ressources si elles ne sont pas fournis. En ce qui concerne votre question sur l'utilisation de ce modèle pour UIBinder, il y a 3 options mentionnées . Cependant, vous pouvez rencontrer le poulet et les problèmes d'œufs en essayant de définir le style à l'intérieur du UIBinder.

La question que vous utilisez dans votre autre code est que vos 2 différentes implémentations du style car uibinder crée son propre ensemble de ressources qui ne fait pas référence à la css du parent. Il existe 3 solutions:

1) Déchirer le css sur le fichier liant ui dans son propre fichier et utilisez ui: avec combiné avec soit un champ fourni ou uifactory pour injecter le style en utilisant votre propre bindle de ressources où vous pouvez composer les sources (c.-à-@Source ({DEFAULT_CSS, "myCss.css"})).

2) Votre autre option est de regarder le code généré et utiliser la syntaxe qu'ils utilisent pour refernce le css dans le fichier uibinder, mais il y a 2 questions que vous aurez à surmonter: le poulet et le problème de l'œuf et la fait que Google peut changer sans vous dire et casser vos affaires. Voici un exemple du faisceau de client généré par un de mes fichiers:

@Source("uibinder:com.foo.gwt.client.workspace.select.SelectWorkspaceViewImpl_SelectWorkspaceViewImplUiBinderImpl_GenCss_style.css")
SelectWorkspaceViewImpl_SelectWorkspaceViewImplUiBinderImpl_GenCss_style style();

3) La dernière solution est d'utiliser différée contraignante pour remplacer le style par défaut.

<replace-with class="com.foo.gwt.laf.mpe.resource.CellTableResources">
    <when-type-is class="com.google.gwt.user.cellview.client.CellTable.Resources" />
    <when-property-is name="laf" value="MPE" />
</replace-with>