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
|
Sí
Sí
No
Sí
Sí
No
|
Sí
No
No
Sí
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
|
Sí
Sí
No
Sí
Sí
No
|
Sí
No
No
Sí
No
No
|
No
No
No
Sí
Sí
Sí
|
JavaScript
Scriptlet Java
Etiquetas personalizadas
|
Sí
|
JSP Struts
|
HTML 4.01
HTML 4.01 Frameset
XHTML 1.0 o 1.1
XHTML 1.0 Frameset
|
Sí
Sí
Sí
Sí
|
Sí
No
Sí
No
|
No
No
Sí
Sí
|
JavaScript
Scriptlet Java
Etiquetas personalizadas
|
Sí
|
JSP Faces
|
HTML 4.01
XHTML 1.0 o 1.1
|
Sí
Sí
|
Sí
Sí
|
No
Sí
|
JavaScript
Scriptlet Java
Etiquetas personalizadas
Fragmento Java
|
Sí
|
JSP Faces con almacenamiento en caché del cliente
|
HTML 4.01
XHTML 1.0 o 1.1
|
Sí
Sí
|
Sí
Sí
|
No
Sí
|
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
|
Sí
|
Sí
|
Sí
|
Sí
|
JSP
|
No
|
Sí
|
Sí
|
Sí
|
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:
-
Inicie Rational Application Developer v6.0.
-
En la barra de menús, seleccione Ayuda > Contenido de la ayuda.
-
Expanda Desarrollo de aplicaciones web.
-
Explore Diseño de sitio web o Diseño de página web.
|