Marcas de interfaz de usuario en la infraestructura de interfaz de usuario web

La infraestructura de interfaz de usuario web permite cambiar las marcas de la interfaz de usuario por su nombre de marca, incluido el logotipo de la empresa. Puede utilizar los plugins de Ext JS para personalizar el aspecto.

También puede cambiar el tema y otros elementos. Una aplicación de ejemplo se puede dividir en las dos partes siguientes:
  • Temas
  • Diseño

Temas

Todos los temas que se utilizan en la infraestructura de interfaz de usuario web utilizan archivos CSS que se pueden sustituir de la siguiente manera:

  • Colocando las entradas sustituidas en un directorio. Un archivo CSS personalizado se puede colocar en cualquier sitio.

    Utilice el código IncludeCSS para sustituir el archivo CSS. El código IncludeCSS admite un entorno local. Utilice el archivo traducido del CSS para el entorno local correspondiente. A continuación, el archivo traducido se puede utilizar para sustituir el CSS.

    Ejemplo:
    <scuitag:includeCSS path="/sfs/resources/default/css/sfs-core.css" />
  • Utilizando la implementación de autenticación posterior (ISCUIPostAuthenticationProvider).

Diseño

Este es un diseño de ejemplo que puede utilizarse como punto de partida para una aplicación. Puede optar por diseñar su propio diseño personalizado, pero se recomienda utilizar este tipo de estructura de diseño.

El diseño de pantalla se puede dividir en cinco partes distintas, como se muestra a continuación.

Una pantalla de ejemplo para un sistema de gestión de líneas aéreas, con cinco partes
Tabla 1. Diseño de la pantalla
Diagrama de la sección de diseño de pantalla Parte de diseño de pantalla Descripción
A Cabecera Contiene el nombre de la aplicación, el logotipo de la empresa, enlaces estáticos, información del usuario que ha iniciado sesión y una imagen de fondo.
B Menú La infraestructura de interfaz de usuario web ofrece la posibilidad de incluir un menú en una pantalla. Los usuarios pueden llamar a una función JavaScript pasando el ID del elemento HTML donde se debe representar el menú. Las entradas del menú se obtienen de la API getUserHierarchy API para el usuario conectado.
C Cabecera de página Contiene el título de la página y uno o varios paneles.
D Página o pantalla Contiene uno o varios paneles.
E Pie de página Contiene enlaces estáticos y la información de copyright.