Directriz: Generación de interfaces de usuario web
Esta pauta describe cómo generar interfaces de usuario utilizando el entorno de modelado RAD6.0.
Relaciones
Elementos relacionados
Descripción principal

Introducción

El entorno de desarrollo web RAD 6.0 proporciona un conjunto global de herramientas para generar rápidamente interfaces de usuario web. Incluye el Diseñador de sitios web y el Diseñador de páginas y varios asistentes para simplificar la creación de páginas web complejas. Este documento ofrece pautas sobre cómo utilizar de manera efectiva estas herramientas para generar interfaces de usuario web, y describe un método de desarrollo, identifica los tipos de página soportados y resalta las características que facilitan la creación de una página web.

Método de desarrollo

Aunque puede utilizar inmediatamente el Diseñador de páginas para generar páginas web individuales en su interfaz de usuario, RAD 6.0 promociona un método de desarrollo que va de lo general a lo detallado (top-down) utilizando el Diseñador de sitios web como punto de partida. Su editor de Navegación le permite:

  • Definir la estructura de navegación de su sitio web:

    Empiece por generar un diagrama jerárquico que represente la estructura de su sitio web. Tiene a su disposición un cajón de Sitio en la vista de Paleta que le permite arrastrar y soltar páginas o proyectos nuevos o ya existentes en el diagrama y organizarlos en grupos. El editor le permite añadir páginas fácilmente, suprimirlas y reorganizarlas de manera visual. La creación de un diagrama de navegación permite al Diseñador de sitios web identificar automáticamente y seguir la pista de los enlaces de navegación entre las páginas web, así como generar un mapa del sitio. Posteriormente, al componer una página individual mediante el Diseñador de páginas, puede añadirle elementos de navegación, como una barra o menú de navegación, que puede personalizar para que muestre sólo los enlaces adecuados para la página, basándose en la estructura del sitio (por ejemplo, puede mostrar sólo enlaces a Arriba, Padre, Hermano y Primer hijo).

  • Aplicar una plantilla a las páginas:

    Una plantilla de página define los elementos visuales y el diseño común a todas las páginas y le permite aplicar un aspecto coherente a su sitio web. Puede crear una plantilla utilizando un asistente, durante la creación de su proyecto web o de forma independiente con posterioridad. El editor de Navegación le permite aplicar fácilmente un plantilla a las páginas seleccionadas o a todas las páginas del diagrama. Es recomendable incluir sus elementos de navegación en la plantilla y aplicarlos a todas las páginas para obtener controles de navegación coherentes en su sitio web.

  • Seleccionar el tipo de página a utilizar en cada página web:

    Efectúe una doble pulsación en una página para ejecutar el asistente Creación de una página. Le permitirá elegir uno de los diferentes tipos de página soportados (consulte el apartado Selección de tipo de página), especifique las propiedades de página iniciales y ábrala en el editor Diseñador de páginas. Ahora ya puede componer y editar el contenido de la página web. Tenga en cuenta que un cajón de Navegación de sitios web está disponible automáticamente en la vista Paleta para permitirle arrastrar y soltar elementos de navegación en la página.

Selección de tipo de página

RAD 6.0 da soporte a la construcción de interfaces de usuario web utilizando tecnología HTML, JSP y JSP Faces. Cada una de ellas representa una elección de implementación que cumple los requisitos de los diferentes tipos de aplicaciones web. Las distintas tecnologías también definen un tipo de página que da soporte a distintas características de la interfaz de usuario web. Al construir una interfaz de usuario web es importante, sin embargo, entender las características compatibles con cada página y saber si son adecuadas para el tipo de aplicación web que se está desarrollando. Las secciones siguientes identifican las características de interfaz de usuario web compatibles con los diferentes tipos de página en RAD 6.0 y especifica qué tipo de página se puede utilizar en aplicaciones web estáticas, dinámicas, basadas en Struts o en JavaServer Faces (JSF).

Características de interfaz de usuario soportadas

Los tipos de página diferentes ofrecidos por RAD 6.0 para implementar las interfaces de usuario web se pueden agrupar en tres categorías: El tipo de página JSP además distingue entre un archivo JSP simple y una página JSP Struts. Del mismo modo, una página JSP Faces puede crearse en JSP Faces básico o un JSP Faces con almacenamiento en caché de cliente. A continuación se describen los diferentes tipos de página.

HTML

Este tipo de página le permite construir una página en HTML básico y también da soporte a otros lenguajes de marcación (consulte la Tabla 1 - Características de los tipos de página). Las características típicas del HTML como por ejemplo el conjunto de marcos, la hoja de estilo en cascada y los scripts en JavaScript también están soportadas. Además, la herramienta permite definir y usar plantillas para páginas con el fin de dar soporte a la creación de un aspecto coherente en todas las páginas web.

JSP

El tipo de página JSP está concebido para dar soporte a interfaces de usuario implementadas mediante tecnología JSP (RAD 6.0 da soporte al estándar JSP 2.0). Todas las características de una página HTML básica están disponibles y se complementan con la tecnología de scripts JSP (Java Scriptlet) y acción (Etiqueta personalizada). La herramienta permite la definición de un Fragmento JSP para descomponer en factores las partes comunes de una página en un archivo independiente que se puede incluir como adecuado en otras páginas JSP. También se da soporte al acceso de datos de fondo utilizando la tecnología de objetos de datos de servicio (SDO). Consulte Concept: Web Application Frameworks para obtener una descripción de los SDO.

JSP Struts

Una página JSP Struts amplía un JSP simple incluyendo automáticamente soporte para elementos específicos de Struts (consulte Concepts: Web Application Frameworks para obtener una descripción de los Struts). Está concebido para su uso en el desarrollo de interfaces de usuario web para aplicaciones implementadas mediante la infraestructura de Struts. En concreto, la herramienta incluye automáticamente el acceso a las bibliotecas de código Struts HTML (struts-html.tld) y Bean (struts-bean.tld) y permite la inclusión de campos a partir de un bean ActionForm bean directamente en la página. También le dará la opción de añadir otras bibliotecas de Struts.

JSP Faces

El tipo de página JSP Faces es una página JSP diseñada específicamente para interfaces de usuario web implementadas mediante tecnología JSF (consulte Concept: Web Application Frameworks para obtener una descripción de JSF). Proporciona acceso a la biblioteca de etiquetas del núcleo JSF y componentes de la interfaz de usuario predefinidas (componentes de Faces) que pueden arrastrarse y soltarse en la página. Además, JSP Faces da soporte a la creación de scripts mediante fragmentos de Java, por ejemplo, para especificar el manejo de sucesos de componentes de la interfaz de usuario.

JSP Faces con almacenamiento en caché del cliente

Este tipo de página amplía el JSP Faces proporcionando componentes de interfaz de usuario cuyos datos pueden ser almacenados en caché del cliente. En concreto, el almacenamiento en caché del cliente le permite vincular un componente con variables JavaScript como oposición a los datos del servidor. Esto le permite construir páginas web con un mejor rendimiento porque el número de idas y vueltas entre el cliente y el servidor se reduce. Los componentes del cliente Faces proporcionados incluyen:

  • Cuadrícula de datos: muestra registros desde un origen de datos relacional o elementos desde una matriz JavaBean en una tabla.
  • Gráfico: presenta datos en un gráfico de barras, una gráfica circular o un gráfico de líneas. El conector Macromedia Flash ha de estar instalado en el navegador para poder utilizar los gráficos.
  • Vista en árbol: muestra datos jerárquicos en una estructura en árbol.
  • Servicio web: permite a la página Faces recuperar datos desde un servicio web existente sin tener que renovar la página.

La tabla siguiente resume las características soportadas por cada tipo de página y se puede utilizar como guía para determinar el tipo que cumple mejor con los requisitos de la interfaz de usuario de la aplicación web.

Tipo de página Marcación Soporte para la hoja de estilo en cascada Soporte para la plantilla de página Sintaxis de estilo XML Soporte para scripts SDO Data Access (*)
HTML

HTML 4.01

HTML 4.01 Frameset

Compact HTML 1.0

XHTML 1.0 o 1.1

XHTML 1.0 Frameset

WML 1.3

No

No

No

No

No

No

N/D JavaScript N/D
JSP

HTML 4.01

HTML 4.01 Frameset

Compact HTML 1.0

XHTML 1.0 o 1.1

XHTML 1.0 Frameset

WML 1.3

No

No

No

No

No

No

No

No

No

JavaScript

Scriptlet Java

Etiquetas personalizadas

JSP Struts

HTML 4.01

HTML 4.01 Frameset

XHTML 1.0 o 1.1

XHTML 1.0 Frameset

No

No

No

No

JavaScript

Scriptlet Java

Etiquetas personalizadas

JSP Faces

HTML 4.01

XHTML 1.0 o 1.1

No

JavaScript

Scriptlet Java

Etiquetas personalizadas

Fragmento Java

JSP Faces con almacenamiento en caché del cliente

HTML 4.01

XHTML 1.0 o 1.1

No

JavaScript

Scriptlet Java

Etiquetas personalizadas

Fragmento Java

Macromedia Flash

Sí (con almacenamiento en caché del cliente)

* SDO Data Access requiere WAS v5.1 como destino de despliegue

Tabla 1 - Características de tipo de página

Aplicabilidad de aplicaciones web


El tipo de página a utilizar en la implementación de una interfaz de usuario web está influenciada básicamente por el tipo de aplicación web que se desarrolla. Para las aplicaciones web estáticas, la elección es directa, ya que el tipo de página HTML es la única opción. para las aplicaciones web dinámicas, pueden utilizarse tanto páginas HTML como JSP. Además, si desarrolla una aplicación web dinámica utilizando la infraestructura Struts o JSF, sacará provecho del uso de los tipos de página de la interfaz de usuario específicos para estas tecnologías. Esto le permitirá sacar provecho de el soporte especializado proporcionado por la herramienta y construir fácilmente su interfaz de usuario. La Tabla 2 muestra la aplicabilidad de cada tipo de página para las aplicaciones web estáticas, dinámicas, y las que utilizan infraestructuras de Struts y JSF.

Tipo de página Aplicación web estática Aplicación web dinámica (No basada en infraestructuras) Aplicación web de Struts Aplicación web JSF
HTML
JSP No
JSP Struts No No Sí (recomendado) No
JSP Faces No No Sí (con biblioteca de integración) Sí (recomendado)
JSP Faces con almacenamiento en caché del cliente No No Sí (con biblioteca de integración) Sí (recomendado)

Tabla 2 - Aplicabilidad de tipos de página

Edición de páginas

El Diseñador de páginas es la herramienta que se utiliza en el entorno RAD 6.0 para editar una página web. Proporciona una vista de editor central que le permite crear una página basándose en WYSIWYG visual o o en código fuente textual. La herramienta funciona junto con otras vistas para dar soporte al desarrollo de diferentes tipos de página web. En concreto, las vistas siguientes facilitan en gran medida la edición de páginas:

Vista de paleta

La vista Paleta proporciona un conjunto rico de componentes de la interfaz de usuario listos para ser usados, que se pueden soltar en una página. Los organiza en cajones que agrupan a componentes relacionados según su funcionalidad. Por ejemplo, los elementos de un formulario HTML estándar como botones, campos de texto y recuadros desplegables se agrupan en el cajón Etiquetas de formulario. La lista de cajones que se muestran en la vista Paleta depende del tipo de página a editar. La Tabla 3 lista los cajones predeterminados que se muestran en cada tipo de página soportado. Puede personalizar la Paleta y la mayoría de los cajones al añadir, suprimir, esconder o mostrar cajones y componentes, respectivamente. Para obtener una descripción de cada cajón y su contenido predeterminado, consulte la documentación del producto.

Cajón de la Paleta HTML JSP JSP Struts JSP Faces JSP Faces con almacenamiento en caché del cliente
Etiquetas HTML X X X X X
Etiquetas de formulario X X X    
Plantilla de página X X X X X
Navegación de sitios web X X X X X
Portal X X X X X
Etiquetas JSP   X X X X
Datos   X X X X
Componentes de Faces       X X
Componentes del cliente Faces         X
Etiquetas HTML Struts     X    
Etiquetas de bean Struts     X    
Etiquetas lógicas de Struts     X    
Etiquetas anidadas de Struts     escondida    
Etiquetas de mosaico de Struts     escondida    

Tabla 3 - Cajones de paleta predeterminados según tipo de página

Vista de Edición rápida

Esta vista le permite añadir rápidamente fragmentos de código JavaScript a su página. Si selecciona un componente de la misma, aparece una lista de sucesos posibles adecuados para la página en el panel izquierdo de la vista de edición rápida. Entonces puede seleccionar un suceso y añadir un script para el mismo de una de las formas siguientes:

  • Entre el script directamente en el editor de scripts del panel situado a la derecha.
  • Pulse con el botón derecho del ratón sobre el editor de scripts, seleccione Insertar fragmento y elija un fragmento de la lista proporcionada, basada en contextos.

Recursos

Para obtener información detallada sobre el Diseñador de sitios web y el Diseñador de páginas, consulte la documentación del producto:

  1. Inicie Rational Application Developer v6.0.
  2. En la barra de menús, seleccione Ayuda > Contenido de la ayuda.
  3. Expanda Desarrollo de aplicaciones web.
  4. Explore Diseño de sitio web o Diseño de página web.