Gimenoblog

El tema, del que habla Aitor, de desarrollar interfaces gráficas de usuario mediante XML+CSS me parece muy interesante. Voy a aportar mi granito de arena.

Supongamos que tenemos un XML para definir los componentes como el que tenemos a continuación.

<frame id="frame">

<panel>

<label id="user-label"/>
<text-field id="user-text"/>

</panel>
<panel>

<label id="pass-label"/>
<text-field id="pass-text"/>

</panel>

</frame>

A través de CSS definiríamos el aspecto de la interfaz. Por ejemplo:

@media x-swing {
  #frame {
    layout: grid-layout(2, 1, 20, 30); /* filas, columnas, hgap, vgap */
    width: 400;
    height: 200;
  }

  panel {
    layout: border-layout(20, 20); /* hgap, vgap */
  }

  #pass-label, #user-label {
    position: border-layout.west;
    color: blue;
    font-size: 20px;
  }
}

Como se puede observar podemos explotar al máximo las capacidades de CSS creando nuestras propias funciones (como grid-layout y border-layout) y propiedades para definir colores, tipografías y layouts. También se podrían definir propiedades CSS diferentes según la librería gráfica que vayamos a utilizar mediante la creación de diferentes medias

La librería que interpretase esta información podría hacer uso de la implementación DOM de velero. Acceder a las propiedades sería algo parecido a esto:

Document document = ...; //se carga el documento
ViewCSS view = (ViewCSS)((DocumentStyle)document.getDefaultView());
Element e = ...; //un elemento cualquiera

//obtenemos un objeto que almacena las propiedades asignadas a este elemento
CSSStyleDeclaration declaration = view.getComputedStyle(e, null);

//obtenemos las propiedades individualmente
float width = declaration.getPropertyCSSValue("width").getFloatValue();
RGBColor color = declaration.getPropertyCSSValue("color").getRGBColor();

Como se observa, para obtener las propiedades CSS de un elemento sólo hay que llamar al método getComputedStyle() pasándole el elemento en cuestión. Esto nos devuelve un objeto CSSStyleDeclaration con el que podemos acceder a las propiedades a través de getPropertyCSSValue(String property).

Aitor, si estás interesado en llevar estas ideas a la realidad, aquí estoy para echarte una mano en lo que necesites. Supongo que tendré que liberar el código de Velero que por el momento está sólo en mi disco duro.

Aprovechando os dejo otra captura de pantalla de Velero. En este caso se puede ver un documento XML visualizándose en una versión antigua de Mozilla y a la derecha el mismo documento visualizándose en un componente que estoy desarrollando que permitirá hacer un editor/navegador web a través de Velero.