Referencia de temas

Visión general

Es necesario tener ciertas nociones de cómo trabajar con CSS y HTML para las tareas complejas. La interfaz de usuario (IU) web de WebSphere Service Registry and Repository (WSRR) se ha grabado mediante CSS 2.1 y XHTML 1.1, cuando ha sido posible, por razones de compatibilidad con los navegadores y de conformidad con los estándares. Inevitablemente, lograr la compatibilidad con navegadores ha dado como resultado la existencia de valores de configuración específicos de navegadores en la CSS. Se han resaltado estas diferencias. La utilización de un navegador conforme a los estándares actuales minimiza cualquier problema que se pueda encontrar.

Diseño de página

La interfaz de usuario web funciona con dos estilos de diseño diferentes:

Estilo de diseño estándar sin árbol de navegación:

Mensaje de cabecera y pie de página

<div class="banner">
  <div class="bannerlogo" id="bannerlogo">
    <div class="bannerleft">
      <div class="bannerright"></div>
      <img src="theme/${currentTheme}/images/productLogo.png"
        alt="" id="webspherelogo"/>
      <img src="theme/${currentTheme}/images/productName.png"
        alt="<sr:message key='banner.wsrr.logo'/>"
        title="<sr:message key='banner.wsrr.logo'/>" id="productname"/>
      <img src="theme/${currentTheme}/images/companyLogo.gif"
        alt="<sr:message key='banner.IBM.logo'/>"
        title="<sr:message key='banner.IBM.logo'/>" id="ibmlogo"/>
    </div>
  </div>
  <div class="bannerbottom">
    <div class="bannerbottomleft"></div>
    <div class="bannerbottomright"></div>
  </div>
</div>

Mantenga el exterior que contiene DIV clasificado como banner o footer, para proporcionar un documento englobado y un selector adicional para el estilo CSS que coincida específicamente con los mensajes de cabecera y de pie de página.

El tema activo actual debe hacer referencia a imágenes. Para ello, la variable de lenguaje de expresión (EL) currentTheme puede utilizarse como está en el fragmento HTML del mensaje de cabecera del ejemplo anterior. Por ejemplo, la ubicación origen de una imagen puede especificarse como theme/${currentTheme}/images/productLogo.png, lo que siempre resuelve el URL de imagen en el tema activo actual.

El texto que se muestra puede introducirse de forma explícita directamente en la fragmento HTML o, si no, en el paquete de recursos. Para proporcionar el texto visualizado en el paquete de recursos, debe cargar un archivo JAR de recursos de interfaz de usuario en WSRR que contenga los recursos que necesite mostrar. Cuando se carga un archivo JAR de recursos, puede utilizar la etiqueta <sr:message> para colocar el archivo JAR de recursos en el texto HTML. Para obtener más detalles sobre los archivos JAR de recursos, consulte el enlace relacionado.

Canal

sr:message tag

Panel de perspectiva

El panel de perspectiva que cubre el lado derecho del mensaje de cabecera, incluido el enlace de cierre de sesión, está siempre presente en la página y se establece para cubrir una parte en blanco del lado derecho del mensaje de cabecera en el tema estándar. Si necesita recolocar este panel, debe ajustar la información de posición en la clase CSS signoutcontainer.

Barra de menús

La barra de menú está ubicada bajo el área de mensaje de cabecera y proporciona espacio para la caja de búsqueda que está en el lado contrario de los menús. Hay dos barras de menú en cada página: el panel de perspectiva contiene el segundo menú para la lista de las perspectivas y utiliza el mismo estilo básico que la barra de menú principal.

Navegación

El área del árbol de navegación puede mostrarse u ocultarse según las preferencias del usuario. Esto se consigue con una columna DIV de ancho fijo en el área de contenido de la página y la utilización de los archivos showLeftColumn.css y hideRightColumn.css. Lo único que puede cambiarse en estos dos archivos es la anchura predeterminada de 225 píxeles. Para ajustar la anchura de la columna de navegación, cambie todas las apariciones de dimension 225px por el nuevo valor, en píxeles, en los archivos pageStyles.css y showLeftColumn.css, incluyendo los valores negativos.

Consideraciones sobre idiomas de derecha a izquierda (RTL)

En la modalidad RTL, todos los elementos de la pantalla se organizan de derecha a izquierda y se alinean en el lado derecho de la ventana del navegador. Los elementos que tienen una asociación de posición derecha o izquierda como el árbol de navegación también están presentes en el lado opuesto en la modalidad RTL. Estos cambios son automáticos y se basan en el entorno local que requiere el navegador. Los usuarios que deseen cambiar el tema tienen que tener en cuenta la existencia del soporte RTL, incluso si no se pretende utilizar el tema con lenguaje RTL.

CSS

Dimensiones y medidas

Siempre que sea posible, las unidades relativas, como por ejemplo em (altura de la letra del elemento) o ex (altura de la letra x minúscula de la fuente utilizada), deben utilizarse para especificar valores de dimensiones y medidas. Esto asegura que los tamaños de fuentes aparezcan en proporción a los espacios en la página cuando se cambie el tamaño de texto, ya sea de forma automática por la elección de entorno local, o manualmente por cambios que haga el usuario final en los valores del navegador. Las unidades absolutas, como px, pt, pc, cm y mm, deben intentar evitarse salvo para elementos en posición absoluta, bordes y elementos de tamaño fijo como imágenes.

Fuentes

La propiedad de familia de fuentes se utiliza con bastante moderación. El valor principal que heredera la mayoría de elementos HTML viene de la etiqueta body. Esto se refuerza en entradas y tablas por la misma razón que se repite el tamaño de fuente. De forma adicional, se da una fuente no proporcional para los elementos que lo necesitan, pre y samp. Esto hace muy sencillo el cambio de las fuentes maestro en toda la interfaz de usuario.

Colores y fondos

Puede aplicar color en primer plano y de fondo a la mayoría de elementos HTML con selectores CSS. Ajustar el esquema de color de la interfaz de usuario web implica la búsqueda de propiedades de color y de color de fondo en el archivo pageStyles.css, así como de sentencias de color implícitas para elementos tales como definiciones de bordes.

background: url(../images/menu_grade.png) top left repeat-x;

Selectores específicos del navegador

.ie6 .checkselection label {
  vertical-align: 50% !important;
}

CSS dinámicas

request.getParameter("<var_name>")

Páginas de inicio de sesión