Mejora del aspecto de las vistas de Lotus Notes en la web, ahora con categorías.
Gracias a Danisoft que ha realizado la adaptación completa del recurso 26/6/2002 de mejora de vistas para web, por fin he podido publicar la forma en como modificar dicho recurso para que admita vistas categorizadas. Podéis ver el resultado final en la siguiente imagen y ver un ejemplo pulsando en la opción correspondiente del menú de enlaces:
Veamos, a continuación, como conseguir esta mejora de aspecto y funcionalidad:
1. Paso: Añadir dos nuevos campos al formulario de libros. Al primero lo llamaremos Categoria y al segundo lo llamaremos SubCategoria. Estos dos nuevos campos serán los utilizados para categorizar la vista de libros.
2. Paso: Copiamos la vista LibrosWeb a una nueva vista llamada LibrosWebCategoria. Esto es para no modificar la vista que ya tenemos y crear una nueva con la categorización activada. En esta vista (y al contrario que en la vista LibrosWeb) hay que desactivar la casilla Tratar contenido de la vista como HTML. Podemos ver esto en la siguiente imagen:
3. Paso: Al desactivar la casilla anterior surgirán problemas. Uno de ellos es que Domino añade automáticamente un enlace al documento en una de las columnas de la vista. Como ya se había insertado código JavaScript para hacer esto el sistema tendría problemas de interpretación. Para solucionarlo insertaremos una columna al principio de la vista que marcaremos para que Domino utilice dicha columna para incluir los enlaces al documento y después la ocultaremos de forma que no se muestre en la web. Para hacer esto hay que marcar la casilla Mostrar valores de la columna como vínculos de las propiedades de la nueva columna y después activar la casilla Ocultar columna también de las propiedades de la columna. Podéis ver esto en las dos imágenes siguientes:
4. Paso: Ahora hemos de modificar la barra de títulos. Cuando Domino tiene que traducir la vista a HTML, lo que hace es crear una tabla impidiendo que se le puedan especificar parámetros. Para poder saltarnos esta peculiaridad hemos de "cerrar" la tabla que genera Domino automáticamente y crear la nuestra propia. Para poder hacer esto añadiremos dos nuevas columnas después de la columna anterior. Estas dos columnas contendrán los dos campos de categorías que hemos creado en el formulario. En la primera columna abrimos el cuadro de propiedades de la columna y tecleamos el siguiente código en el título:
| [</th></table><table border=1 width= 100% cellspacing=0 cellpadding=2> |
A continuación nos desplazaremos a la última columna de la vista y modificaremos su título de la siguiente forma:
| Fecha compra</th>] |
Si os fijáis todo el código se inserta entre corchetes. Esto es para que el servidor Domino interprete el código HTML tal cual.
Al hacer estas modificaciones se pierde la clase COLHEADER que se creó en el recurso orginal para dar formato a la cabecera de la tabla. Para solucionarlo se creará un nuevo estilo para la etiqueta <TH> que es la que usa el servidor para las cabeceras de las tablas (ver Paso 6).
A continuación podéis ver una imagen de como queda la vista hasta este punto:
5. Paso: En el recurso original teníamos que escribir todos los elementos de la tabla en cada uno de los valores de las columnas. Ahora esta función la realizará el propio servidor. Al generar la vista, el servidor pondrá tantas etiquetas <TR> y <TD> como sea necesario y añadirá el enlace al documento en la primera columna que hemos ocultado. Lo único que nos queda por hacer es añadir el código necesario para que cambie el color de la fila al pasar el cursor y se enlace el documento al hacer un clic con el ratón.
Vamos ha ver como debe quedar el código de cada una de las columnas:
Columna 1: Oculta y mostrar valores como vínculos. Como valor podéis poner cualquiera de los campos de la base de datos, por ejemplo el número de documento en la vista:
Columna 2: Categorizada. Como valor pondremos el campo Categoria.
Columna 3: Categorizada. Como valor pondremos el campo SubCategoria.
A continuación se muestra una imagen del cuadro de propiedades de la columna con las opciones de categorización que debéis utilizar tanto en la columna 2 como en la columna 3:
Columna 4: Aquí es donde está lo importante. Primero los corchetes para el HTML marcados en color ROJO, y luego marcado en AZUL la celda que el servidor Domino no genera y que tendremos que generar nosotros. Sin esta celda los valores de las columnas se descuadran cuando plegamos y desplegamos las categorías.
Tendremos que añadir tantos <TD NOWRAP></TD> como (número de categorías - 1) tengamos en la vista.
Como el servidor ya ha generado código HTML para la fila o <TR>, tendremos que cerrar la fila que ha generado para crear una nueva y poder poner el código JavaScript necesario para enlazar el documento y generar el efecto de cambio de color, esta es la parte en color MORADO:
| tmp:=@Name([CN];@DbName);Path:=@Implode(@Explode(@Subset(tmp;-1) ; "\\\\");"/");"[</td></tr><tr onmouseover=\"bgColor=\'#FFDF7F\'\" onClick = \"window.location=\'/"+Path+"/iWeb/Home.nsf/LibrosWeb/"+ @Text(@DocumentUniqueID) +"?OpenDocument\'\" style=\"cursor:hand\" onmouseout=\"bgColor= \'#EFEFEF\'\"><TD NOWRAP></td><td NOWRAP>]" + TituloLibro |
Columna 5: Como valor pondremos el campo AutorLibro.
Columna 6: Como valor pondremos el campo FechaLibro.
6. Paso: Tendremos que modificar la página estilo.css añadiéndole el estilo para generar una cabecera similar a la del recurso original (etiqueta <TH>). La página quedará como sigue:
|
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; } TH { 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; } |
7. Paso: Crearemos una nueva página llamada PaginaVistaCategorizada donde insertaremos la vista LibrosWebCategoria. En esta ocasión no hay que añadir código HTML antes o después de la vista insertada ya que esto lo hace el servidor Domino. Una vez insertada la vista 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: En el evento Contenido del encabezado de HTML 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\">" |
9. Paso: En el evento Encabezado de JS teclearemos la siguiente función:
function blankos(){
if (texto.search("icons/ecblank.gif")!=-1) {
imagen.style.display="none"; |
10. Paso: Se llamará a la función anterior tecleando el siguiente código en el evento OnLoad de la página:
| blankos() |
La función anterior sirve para quitar todos las imágenes GIFs en blanco que el servidor Domino pone en el momento de generar las vistas y que pueden descuadrar todo el trabajo. Probad a llamar a la página sin la función blankos() en el evento OnLoad y veréis lo que pasa. De todos modos, más que una solución parece un ataque de contrariedad contra el servidor, pero es una manera rápida de dar solución estándar a una vista normal.
Podéis ver un ejemplo práctico pulsando aquí.
Agradecimientos:
Tal como ya he comentado al principio del recurso, tota esta modificación ha sido realizada por Danisoft al que no tengo palabras para agradecerle el favor que me ha hecho adaptando este recurso. Este gran profesional me comenta que otra solución para realizar esto sería generando capas <DIV> de forma automática, aunque esta solución incorpora mucho más JavaScript y su desarrollo es prácticamente a medida por lo que no se podría realizar de forma estándar. De todas formas si alguien quiere intentarlo...
Gracias a Danisoft y espero que este recurso sea de vuestro agrado.