Comment déclarer des noms de style dépendants avec UiBinder

Question

J'ai un 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 les états en écriture et en lecture seule. GWT utilise le décorateur de nom de style "-readonly" pour y parvenir. Donc j'essaie 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>

Évidemment, cela ne fonctionnera pas car les noms de style sont obscurcis pour les CssResources, ce qui donne quelque chose comme ceci :

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

Le résultat HTML pour la zone de texte inscriptible ressemble à ceci :

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

La zone de texte en lecture seule ressemble à ceci :

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

Comment puis-je déclarer le style pour que GWT obfusque la partie primaire mais pas le décodeur "-readonly" ?

Je sais que je peux désactiver l'obscurcissement pour l'ensemble du nom du style. Mais j'aimerais conserver l'obfuscation tout en utilisant les décorateurs.

Answer 1

Pour le moment (GWT 2.4), il n'est pas supporté, et il n'est pas clair si/quand il sera supporté, voir numéro 4746 dans le suivi des problèmes de GWT.

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

@external textBoxStyle, textBoxStyle-readonly;

Answer 2

Si vous voulez utiliser ce style pour tous vos documents en lecture seule TextArea alors je suggérerais de modifier simplement le fichier .gwt-TextArea-readonly dans le fichier CSS de votre thème GWT.
Sinon, je ne peux penser qu'à ajouter votre style personnalisé de manière programmatique lorsque vous définissez l'attribut 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 ceci (avec "empty" ou "X" ou tout autre préfixe inutilisé) pour des noms de classe beaucoup plus courts - parce qu'avec les paramètres par défaut, vous ne gagnez pas beaucoup en obfuscation (textBoxStyle - 12 caractères, G1x26wpeN - 9 caractères, X0 - 2 caractères ;)).

Answer 3

Pourquoi n'essayez-vous pas de faire quelque chose 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 permettrait de changer le style si une zone de texte est "normale" ou en lecture seule...

Et bien sûr, dans le UiBinder vous devriez avoir quelque chose 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 4

Essayez maintenant celui-ci, j'espère que vous l'aurez.
Avec le <ui:style> vous pouvez définir le CSS de votre interface utilisateur à l'endroit précis où vous en avez besoin.
Note : <ui:style> doivent être des enfants directs de l'élément Root.

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

N'y a-t-il pas une faute de frappe dans votre UIBinder ?

Vous avez :

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

.. mais je pense que vous devez utiliser "stylePrimaryName", c'est à dire.

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

Mais je suppose que cette question a déjà reçu une réponse