¿Cómo declarar los nombres de estilo dependientes con UiBinder

Question

tengo un widget UiBinder simple que contiene 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> 

que quieren controlar el color de fondo de esta área de texto para los permisos de escritura y leer sólo los estados. GWT usa el decorador de nombres de estilo "-readonly" para lograr esto. Así que intento esto:

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

Obviamente, esto no funcionará porque los nombres de estilo se ofuscado por CssResources que resulta en algo como esto:

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

El HTML resultado para el área de texto se puede escribir el siguiente aspecto:

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

La única área de texto leído se parece a esto:

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

¿Cómo declaro el estilo para que GWT ofusque la parte principal pero no el declorador "-readonly"?

Sé que puedo desactivar la ofuscación de todo el nombre de estilo. Pero me gustaría mantener la ofuscación al hacer uso de los decoradores.

Answer 1

Si desea utilizar este estilo para todas sus TextArea s de solo lectura, le sugiero que modifique el estilo .gwt-TextArea-readonly en su archivo CSS de tema GWT.
De lo contrario, solo puedo pensar en agregar tu estilo personalizado mediante programación cuando configuras TextArea de solo lectura.

PS: Del 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. 

Recomiendo usar esto (con "vacío" o "X" u otro prefijo sin usar) para los nombres de clase mucho más cortos - porque en la configuración por defecto que no ganar eso a través de la ofuscación (textBoxStyle - 12chars, G1x26wpeN - 9chars, X0 - 2 chars;)).

Answer 2

¿Por qué no pruebas STH como esto

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()); 
    } 
} 

Esto le permitiría cambiar el estilo si un cuadro de texto es "normal" o de sólo lectura ...

Y por supuesto, en el UiBinder usted debe tener algo como

<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 este momento (GWT 2.4) no se admite, y no es claro si/cuando se apoyará, ver issue 4746 en el seguimiento de incidencias GWT.

La solución consiste en agregar @external, que deshabilita la ofuscación de esos estilos. En este caso sería:

@external textBoxStyle, textBoxStyle-readonly; 

Answer 4

oportunidad ahora Este Una espero que conseguirlo.
Con el elemento <ui:style>, se puede definir el CSS para su correcta interfaz de usuario donde se necesita que
Nota:<ui:style> elementos deben ser los hijos directos del elemento raíz

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

no está presente un error tipográfico en tu UIBinder?

tiene:

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

.. pero creo que necesita utilizar "stylePrimaryName", es decir.

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

Pero supongo que esta pregunta ha sido contestada realmente ya ..

Answer 6

Aquí hay algo valioso que me di cuenta al reunir información de otros mensajes en este hilo ... especialmente

Si utiliza @external, puede anular los estilos de gwt. ¡El problema es que este cambio se aplica globalmente! Sin embargo, es posible ampliar & anular los atributos de selección sin afectar a cada instancia de un tipo de widget. (Esto es como el método de estilo programático de crear una clase css con un nombre de clase gwt + un sufijo y usar addStyleDependantName()).

Aquí hay un ejemplo de usar UIBinder + a CssResource para extender un estilo gwt. Dejé fuera la parte CssResource, pero obtendrá la idea ...

En su archivo xxxx.ui.xml, exponga el estilo gwt, ¡pero no se meta con eso!

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

Entonces, el estilo de un widget que mediante la especificación de 2 (o más) estilos en el atributo styleName. Es decir. el estilo gwt, y el (o más) de su recurso.

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

Aquí está la clase CSS:

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

En este caso, he definido un botón con el estilo en el método estándar (cambiado fácilmente a través de la herencia módulo) pero con un margen específico que permanecerá fijo . Esto no estropeó el estilo global, no requirió la definición de todos los atributos manualmente, y permitió intercambiar el estilo global a voluntad con clean.css, dark.css, etc.