Poner color de fondo a celdas en modo lista

[JOSE ELIAS]

Hola JP, hasta ahora, para conseguir esto, tengo una propiedad calculada que, en función de la combinación de valores de las propiedades a dar color, da un valor u otro. Con esta combinación, llamo a custom.css y pinto los fondos que correspondan. Pego como queda.
El problema es que cuando hay varias casillas, hasta 3 lo he hecho así, el tema de las combinaciones se complica.
¿Existe alguna forma, que se te ocurra, de darle color de fondo, a cada celda por separado, en función de su valor?

[Javier Paniza]

Hola José:

Un solución para ese problema es crear un formateador lista para un editor, y aplicarlo a todas las propiedades que que necesiten color. Algo así:

    <editor name="Colorido" url="textEditor.jsp">
    <list-formatter
        class="org.openxava.test.formatters.ColoridoFormatter"/>        
    <for-stereotype stereotype="COLORIDO" />
</editor>

Ojo, si usas editores.xml (en lugar de editors.xml) tendrás que poner el XML en español

Ahora en tu entidad:

public class MyEntity {

    @Stereotype("COLORIDO")
    String tipo;

}

En lugar de estereotipo también puedes crear una anotación @Colorido, si quieres.

Ahora escribe el código para ColoridoFormatter e implementa el método format() donde puedes envolver el valor con HTML, según la condición que te plazca:

if (valor.equals("SERVICIO")) {
    return "<span class="color-para-servicio">" + valor + "</span>";
}

Y en custom.css ya puedes:

.color-para-servicio {
    background: purple;
}

---

Ayuda a otros en este foro como yo te ayudo a ti.

[JOSE ELIAS]

Hola JP, perdona, no me he explicado bien.
Este es mi ejemplo...

La clase Albaran hace referencia a la clase TipoOferta. Lo que necesito es que en el modo lista de Albaran, cuando se pinte tipoOferta.valor, y en funcion de su valor, se pinte de un color u otro.

He intentado seguir la documentación, pero nada, no consigo que funcione.

[Juan Pelaez Boismorand]

Buenas
Yo me encontré en una situación similar quizás menos compleja y lo resolví digamos "manualmente". Identifiqué cada combinación con un valor "estado" y después con un @tab :
@Tab(
rowStyles= {@RowStyle(style="row-green", property="estado", value="1"),
@RowStyle(style="row-red", property="estado", value="2"),
@RowStyle(style="row-blue", property="estado", value="3")},
properties="usuario, nombre, direccion.viaPublica, email, telefono, consultaPdte, docsCaducados, estado"

)

y un .css personalizado :

.row-green td:nth-child(8) {
background: #ccffcc !important;
}

.row-red td:nth-of-type(9) {
background: #ffb3b3 !important;
}

.row-blue td:nth-child(8) {
background: #ccffcc !important;
}
.row-blue td:nth-child(9) {
background: #ffb3b3 !important;
}

Pero imagino que esto es lo que haces ahora.

No se si te sirve de algo.

[Javier Paniza]

Hola José:

cuando se pinte tipoOferta.valor, y en funcion de su valor, se pinte de un color u otro.

Justo te he explicado como hace eso, con código incluido.

---

Ayuda a otros en este foro como yo te ayudo a ti.

[JOSE ELIAS]

Uyyy que pena, mira la diferencia de como se ve con la configuración de @RowStyle y usando este método con @Stereotype

Funcionalmente, tu opción es mucho mejor, pero visiblemente gusta mucho más la otra.
¿No sé si sabrías cómo usar lo mejor de las dos opciones?

[Javier Paniza]

Hola José:

Tienes razón, porque con el formateador lista solo controla la genarción del dato, no de la celda. En CSS no tenemos una forma de que teniendo el id o clase de un elemento se afecte al elemento padre. Pero por fortuna somos programadores, lo que significa que podemos hacer cualquier cosa que imagenimos. Así que esto se puede resolver con un poco de JavaScript.

Añade un colorear.js en tu xava/editors/js con un contenido como este:

openxava.addEditorInitFunction(function() {
    $(".color-para-servicio").closest("td").addClass("color-para-servicio");
});

No lo he probado, deberías ajustarlo hasta que te funcione. Pero seguro que funciona.

---

Ayuda a otros en este foro como yo te ayudo a ti.