GWT CssResource Personnalisation

Question

J'écris un widget GWT en utilisant UIBinder et MVP. sont définis les styles par défaut du widget dans TheWidgetView.ui.xml:

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

interface CssResource de Le 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 de l'avoir 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 parent. J'ai vu certaines bibliothèques de widgets que le constructeur du widget prenait en paramètre ClientBundle, ce qui, je suppose, pourrait s'appliquer à CssResource. Bien que, je ne suis pas sûr comment je passerais dans cet objet de style dans un constructeur invoqué par UIBinder.

Merci beaucoup d'avance!

Answer 1

Je joue avec quelque chose de similaire pour rendre mon application skinable. Je commencerais par regarder le code source pour l'un des widgets de la cellule. 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 fournies. En ce qui concerne votre question sur l'utilisation de ce modèle pour UIBinder, il y a 3 options mentionnées here. Cependant, vous pouvez rencontrer des problèmes de poule et d'œuf en essayant de définir le style à l'intérieur de l'UIBinder.

Le problème que vous rencontrez avec votre autre code est celui de vos 2 différentes implémentations du style car uibinder crée son propre ensemble de ressources qui ne fait pas référence au css du parent. Il y a 3 solutions:

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

2) Votre autre option est de regarder le code généré et d'utiliser la syntaxe utilisée pour référencer le css dans le fichier uibinder, mais il y a 2 problèmes que vous devrez surmonter: le problème de la poule et de l'œuf. le fait que google peut changer cela 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 consiste à 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>