Mejora del aspecto de las vistas de Lotus Notes en la web.
Como todos sabéis, las vistas de Lotus Notes, una vez publicadas en web, tienen un aspecto algo pobre. Lotus Domino convierte la primera columna de la vista en un enlace al documento correspondiente, y si la vista está categorizada entonces se muestra el triángulo para plegar y desplegar las diversas categorías. Se puede observar una vista estándar publicada en la web en la siguiente imagen:
Lo que se va a realizar en este recurso es una mejora del aspecto y el funcionamiento de una vista en la web utilizando un poco ayuda de las hojas de estilo en cascada (CSS) y un poquito de JavaScript. El aspecto conseguido es el siguiente:
Además, al pasar el cursor por encima de los registros de documentos éstos se iluminan, y efectuando un solo clic encima del mismo el documento se visualiza, siendo esto último mucho mejor que pulsar sobre el enlace de la primera columna en una vista estándar.
Veamos, a continuación, como conseguir esta mejora de aspecto y funcionalidad:
1. Paso: Crear una vista (o modificar una existente) que muestre los documentos que queramos. Para este ejemplo yo he utilizado la vista de libros que ya se mostró en el recurso 20/12/2001 y que se puede ver a continuación (la vista se llama LibrosWeb):
2. Paso: Accederemos al cuadro de dialogo de propiedades de la vista y activaremos la casilla Tratar contenido de la vista como HTML. Esto sirve para que el servidor envíe los datos en formato HTML tal cual se hayan tecleado en lugar de crear la página web de forma directa. Puede verse este parámetro en la siguiente imagen:
3. Paso: Como texto de título para cada una de las columnas pondremos lo siguiente:
|
Columna 1 (Título del libro): <tr><td class=COLHEADER WIDTH=225>Título</td> Columna 2 (Autor del libro): <td class=COLHEADER WIDTH=225>Autor</td> Columna 3 (Fecha de compra): <td class=COLHEADER WIDTH=100>Fecha compra</td></tr> |
4. Paso: Como valor para cada una de las columnas pondremos lo siguiente (TituloLibro, AutorLibro y FechaLibro son los nombres de los campos):
|
Columna 1 (Título del libro): tmp:=@Name([CN];@DbName); Path:=@Implode(@Explode(@Subset(tmp;-1);"\\\\");"/"); "<tr onmouseover=\"bgColor='#FFDF7F'\" onClick=\"window.location='/"+Path+"/LibrosWeb/"+ @Text(@DocumentUniqueID)+"?OpenDocument'\" style=\"cursor:hand\" onmouseout=\"bgColor='#EFEFEF'\"><td>" + TituloLibro + "</td>" Columna 2 (Autor del libro): "<td>" + AutorLibro + "</td>" Columna 3 (Fecha de compra): "<td>" + FechaLibro + "</td></tr>" |
5. Paso: Guardar la vista y crear una página llamada PaginaVista. En esta página insertaremos la vista LibrosWeb. Una vez insertada la vista y justo antes de la misma teclearemos el siguiente código:
| <table border=1 width= 100% cellspacing=0 cellpadding=2> |
A continuación deberemos seleccionar este texto y utilizar la opción del menú Texto -> Texto en HTML. Después de realizar esta acción y justo después de la vista incrustada teclearemos:
| </table> |
También deberemos seleccionar este texto y utilizar la opción del menú Texto -> Texto en HTML. Debería quedar algo parecido a la siguiente imagen:
6. Paso: En el apartado Contenido del encabezado de HTML situado en los eventos de la página teclearemos el siguiente código:
|
thisdb:=@ReplaceSubstring(@ReplaceSubstring(@Subset(@DbName; -1);" ";"+");"\\";"/"); "<link href=\"/" + thisdb + "/estilo.css\" rel=\"stylesheet\" type=\"text/css\">" |
7. Paso: Visualizaremos el cuadro de dialogo de las propiedades de la vista incrustada y en el parámetro Mostrar del Acceso desde Web seleccionaremos la opción Usando HTML tal como se muestra a continuación:
8. Paso: Guardaremos la página anterior y crearemos otra llamada estilo.css. Como contenido de esta página teclearemos el siguiente texto:
|
TABLE { background-color: #EFEFEF; border-style: solid; border-color: #000000; border-width: 0; } TD { font-family: verdana,arial,helvetica; font-size: 8pt; font-weight: solid; border-style: solid; border-width: 1; border-left: 0; border-right: 0; border-top: 0; } .COLHEADER { background-color: #0060A0; border-style: solid; border-width: 1; border-left: 0; border-right: 0; border-top: 0; font-family: verdana,arial,helvetica; color: #FFFFFF; font-size: 8pt; font-weight: bold; } |
9. Paso: Visualizaremos el cuadro de diálogo de propiedades de la página y seleccionaremos el parámetro Tratar contenido de la página como HTML tal y como puede observarse en la siguiente imagen:
10. Paso: Guardar la página anterior y ya está listo. Para probar el resultado tenéis que teclear el siguiente URL: http://mi_servidor_web/base_datos.nsf/PaginaVista?OpenPage. Podéis ver un ejemplo pulsando aquí.
Explicación:
Para conseguir el aspecto se ha utilizado una hoja de estilos (estilo.css) que se define en el Paso 8. Esta hoja de estilos define los atributos para toda la tabla (TABLE), para cada una de las celdas (TD) y para las celdas que formarán parte de la cabecera de la tabla (.COLHEADER).
En los pasos 1, 2, 3 y 4 se crea una vista en la que se definen tanto las cabeceras como las columnas como si fueran una tabla web. Para ello se empieza en el titulo de la primera columna mediante <tr> que inicia una fila de la tabla continuando con <td> que define el inicio de una celda que ocupará el título de la primera columna, finalmente se cierra esta primera celda mediante </td>. Se continua con la siguientes celdas del mismo modo (<td> ... </td>), para finalizar la fila de la tabla en la última columna mediante </tr>. A esta primera fila correspondiente a la cabecera de la tabla se le asigna a cada celda la clase .COLHEADER que se ha definido en la hoja de estilo.
Para el contenido de la tabla se utiliza el mismo sistema (iniciar fila mediante <tr>, iniciar celda mediante <td>, campo que debe contener la celda y finalmente cerrar celda mediante </td> para finalizar la fila mediante </tr> en el último campo de la vista.
La única excepción al procedimiento anterior es que en la primera columna se definen los eventos onmouseover y onmouseout que efectuarán el cambio de los atributos de la fila cuando el cursor pase por encima (visualizándose un efecto de iluminación de toda la fila). Además se define el evento onclick que visualizará el documento asociado a la fila seleccionada cuando se efectúe un clic del ratón sobre la misma.
Esta vista se debe enviar al servidor en formato HTML exclusivamente (Paso 2 y Paso 7) para que éste no genere código HTML por defecto para la página web resultante.
Finalmente se incrusta esta vista en una página que se iniciará con <table> y finalizará con </table>, de este modo ya tendremos la definición de una tabla web correctamente formada.
Por último, en el Paso 6 se indica a la página que obtenga la hoja de estilo (estilo.css) de la propia base de datos.
En el ejemplo que se puede ver en este recurso se han añadido imágenes y texto adicional a la página que tiene incrustada la vista, además la propia vista se ha incrustado dentro de una tabla para así poder especificar una tamaño concreto.
Nota: Para la realización de este recurso se han investigado algunos de los mejores ejemplos de programación en HTML dinámico incluidos en el SandBox de IBM DeveloperWorks: Lotus, además se ha obtenido toda la referencia necesaria del libro DHTML y CSS escrito por Jason Crandford Teague y publicado por la editorial Prentice Hall.