Comment déclarer les noms de style à charge avec UiBinder

Question

Je simple widget UiBinder contenant un TextArea:

<!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:TextArea visibleLines="3" /> 
</ui:UiBinder> 

Je veux contrôler la couleur d'arrière-plan de cette zone de texte pour inscriptible et lire seulement les états. GWT utilise le décorateur de nom de style "-readonly" pour y parvenir. J'essaie donc ceci:

<!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"> 

    <ui:style> 
     .textBoxStyle { 
      background-color:yellow; 
     } 
     .textBoxStyle-readonly { 
      background-color:lightgray; 
     } 
    </ui:style> 

    <g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" /> 
</ui:UiBinder> 

Il est évident que cela ne fonctionnera pas parce que les noms de style sont obscurcis pour CssResources résultant en quelque chose comme ceci:

.G1x26wpeN { 
    background-color:yellow 
} 
.G1x26wpeO { 
    background-color: lightgray; 
} 

Le résultat HTML pour textarea inscriptible ressemble à ceci:

<textarea tabindex="0" class="G1x26wpeN" rows="3"/> 

La lecture seule textarea ressemble à ceci:

<textarea tabindex="0" class="G1x26wpeN G1x26wpeN-readonly" readonly="" rows="3"/> 

Comment déclarer le style afin que GWT obbuse la partie principale mais pas le décodeur "-readonly"?

Je sais que je peux désactiver l'obfuscation pour le nom de style entier. Mais je voudrais garder l'obscurcissement tout en faisant usage des décorateurs.

Answer 1

Si vous souhaitez utiliser ce style pour tous vos TextArea en lecture seule, je vous suggérerais simplement de modifier le style .gwt-TextArea-readonly dans votre fichier CSS de thème GWT.
Sinon, je ne peux penser à ajouter votre style personnalisé par programmation lorsque vous définissez le TextArea en lecture seule.

PS: du docs:

<set-configuration-property name="CssResource.obfuscationPrefix" value="empty" />` can be used for minimal-length selector names, but this is only recommended when the GWT module has total control over the page. 

Je recommande d'utiliser ce (avec « vide » ou « X » ou tout autre préfixe utilisé) pour les noms de classe beaucoup plus courtes - parce que les paramètres par défaut vous ne gagnez pas autant par obfuscation (textBoxStyle - 12chars, G1x26wpeN - 9chars, X0 - 2 caractères;)).

Answer 2

Pourquoi ne pas essayer STH comme ça

public class MyFoo extends Widget { 
    interface MyStyle extends CssResource { 
    String normal(); 
    String readonly(); 
    } 

    @UiField MyStyle style; 

    /* ... */ 

    void setEnabled(boolean enabled) { 
    getElement().addStyle(enabled ? style.normal() : style.readonly()); 
    getElement().removeStyle(enabled ? style.readonly() : style.normal()); 
    } 
} 

cela vous permet de changer le style si une zone de texte est « normal » ou ... readonly

Et bien sûr, dans le UiBinder vous devriez avoir qqch comme

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'> 

    <ui:style type='com.my.app.MyFoo.MyStyle'> 
    .redBox { background-color:pink; border: 1px solid red; } 
    .normal { color:black; } 
    .readonly { color:gray; } 
    </ui:style> 

    <div class='{style.redBox} {style.normal}'>I'm a red box widget.</div> 

</ui:UiBinder> 

Answer 3

en ce moment (GWT 2.4), il est pas pris en charge, et on ne sait pas si/quand il sera pris en charge, voir issue 4746 dans le suivi des problèmes GWT.

La solution de contournement consiste à ajouter @external, ce qui désactive l'obfuscation pour ces styles. Dans ce cas, ce serait:

@external textBoxStyle, textBoxStyle-readonly; 

Answer 4

Essayez maintenant This One I Hope Vous obtiendrez.
Avec l'élément <ui:style>, vous pouvez définir le CSS pour votre droit de l'interface utilisateur où vous en avez besoin
Note:<ui:style> éléments doivent être les enfants directs de l'élément racine

<!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:TextArea visibleLines="3" /> 
    </ui:UiBinder> 

<!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"> 

    <ui:style field='MyStyle'> 
     .textBoxStyle { 
      background-color:yellow; 
     } 
     .textBoxStyle-readonly { 
      background-color:lightgray; 
     } 
    </ui:style> 

    <g:TextArea name="myText" styleName="{MyStyle.textBoxStyle}" visibleLines="3" /> 
</ui:UiBinder> 

Answer 5

est pas là une faute de frappe dans votre UIBinder?

Vous avez:

<g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" /> 

.. mais je pense que vous devez utiliser "stylePrimaryName", par exemple.

<g:TextArea stylePrimaryName="{style.textBoxStyle}" visibleLines="3" /> 

Mais je suppose que cette question a été répondue vraiment déjà ..

Answer 6

est ici quelque chose de précieux que j'ai compris en mettant ensemble les informations d'autres messages dans ce fil particulier ...

Si vous utilisez @external, vous pouvez remplacer les styles gwt. Le problème est que ce changement est appliqué globalement! Il est cependant possible d'étendre & outre des attributs de sélection sans affecter chaque instance d'un type de widget. (Cela ressemble à la méthode de création par programmation d'une classe css avec un nom de classe gwt + un suffixe et en utilisant addStyleDependantName().)

Voici un exemple d'utilisation de UIBinder + une CssResource pour étendre un style gwt. J'ai omis la partie CssResource, mais vous aurez l'idée ...

Dans votre fichier xxxx.ui.xml, exposez le style gwt, mais ne le faites pas!

<ui:style> 
    @external .gwt-Button; .gwt-Button {} 
</ui:style> 

Ensuite, créez un widget en spécifiant 2 (ou plus) styles dans l'attribut styleName. C'est à dire. le style gwt, et celui (ou plus) de votre ressource.

<g:Button ui:field="submitButton_" text="Submit" styleName="{style.gwt-Button} {res.loginStyles.submitButtonStyle}" /> 

est ici la classe css:

.submitButtonStyle{ 
    margin: 3px 5px 5px 0px; 
} 

Dans ce cas, je définissais un bouton qui est de style dans la méthode standard (facilement changé par héritage du module), mais avec une marge spécifique qui reste fixe . Cela ne gâchait pas le style global, il ne nécessitait pas de définir tous les attributs manuellement, et permettait de permuter le style global à volonté avec clean.css, dark.css, etc.