que - selectores css
Cómo declarar nombres de estilo dependientes con UiBinder (6)
Tengo un widget simple de UiBinder 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>
Quiero controlar el color de fondo de este área de texto para los estados escribibles y de solo lectura. GWT usa el decorador de nombres de estilo "-readonly" para lograr esto. Entonces pruebo 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 están ofuscados por CssResources, dando como resultado algo como esto:
.G1x26wpeN {
background-color:yellow
}
.G1x26wpeO {
background-color: lightgray;
}
El resultado HTML para textarea escribible se ve así:
<textarea tabindex="0" class="G1x26wpeN" rows="3"/>
El área de texto de solo lectura se ve así:
<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 decolorador "-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.
¿No hay un error tipográfico en tu UIBinder?
Tienes:
<g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />
..pero creo que necesitas usar "stylePrimaryName", es decir.
<g:TextArea stylePrimaryName="{style.textBoxStyle}" visibleLines="3" />
Pero supongo que esta pregunta ya ha sido respondida.
¿Por qué no pruebas algo así?
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 solo lectura ...
Y, por supuesto, en el UiBinder deberías tener algo así 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>
Aquí hay algo valioso que descubrí al reunir información de otras publicaciones en este hilo, especialmente ...
Si usa @external, puede anular los estilos de gwt. ¡El problema es que este cambio se aplica globalmente! Sin embargo, es posible ampliar y 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 para crear una clase css con un nombre de clase gwt + un sufijo y usar addStyleDependantName ()).
Aquí hay un ejemplo del uso de UIBinder + a CssResource para extender un estilo gwt. Dejé la parte de CssResource, pero entenderás ...
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>
A continuación, aplique un widget al estilo especificando 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, definí un botón que tiene un estilo en el método estándar (se cambia fácilmente a través de la herencia del 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.
En este momento (GWT 2.4) no es compatible, y no está claro si / cuándo será compatible, vea el problema 4746 en el rastreador de problemas GWT.
La solución alternativa es agregar @external , que desactiva la ofuscación de esos estilos. En este caso, eso sería:
@external textBoxStyle, textBoxStyle-readonly;
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 el TextArea de solo lectura.
PD: de los 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 no utilizado) para nombres de clase mucho más cortos, porque en las configuraciones predeterminadas no se gana mucho por ofuscación (textBoxStyle - 12chars, G1x26wpeN - 9chars, X0 - 2 chars ;)).
Prueba ahora este, espero que lo obtengas.
Con el elemento <ui:style> , puede definir el CSS para su UI justo donde lo necesita
Nota: los elementos <ui:style> deben ser 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>