Você está na página 1de 106

Diseo y objetivo de la aplicacin

Esta nueva base de datos va ser un gestor de noticias, en el que van a existir dos formularios, uno para que el usuario pueda crear noticias que se podrn ver desde el cliente lotus notes o desde cualquier navegador. En otro formulario que llamaremos lista de distribucin se configurar a que personas se va a enviar la noticia por correo electrnico una vez creada. Adems personalizaremos la aplicacin con los elementos de diseo necesarios para que podamos visualizar la informacin de una forma rpida, ordenada y con un diseo siempre acorde con la imagen corporativa de la empresa para la que vaya destinada.

Creando una base de datos


Lo primero de todo es crear una Base de Datos nueva, con la que despus vamos a trabajar. Desde el cliente Lotus Notes pulsamos en Archivo Base de Datos Nueva o pulsamos la combinacin de teclas CTRL+N. (Ver Figura 1.0)

(Figura 1.0 Ventana de Dilogo Base de Datos Nueva) En el Title llamamos a la Base de datos Gestor de Noticias y en el filename vamos a llamar al fichero GestNoti.nsf. Aunque no aparezca, por defecto la base de datos, se crear en el directorio Domino \ Data, si queremos ubicar la base de datos en un subdirectorio por ejemplo: Domino\ Data\Aplicaciones, pulsamos en el icono, y lo especificamos.

Nota: Utilizaremos para el nombre del fichero la nomenclatura 8.3. (8 Caracteres para el nombre GestNoti y 3 para la

extensin nsf. As nos aseguramos que si migramos de plataforma funcione y no de problemas por tener nombres demasiados largos. Dejamos las dems opciones como estn y pulsamos OK. Se nos agregar la nueva base de datos en el rea de trabajo.

Configurando la lista de control de acceso


Par poder ver nuestra aplicacin en entorno Web, vamos a dar acceso a un usuario especial llamado Anonymous en la lista de control de acceso de nuestra base de datos. Al aadir este usuario nos ahorramos autentificarnos en Web, cada vez que hagamos una prueba, una vez acabada esta aplicacin, habr que cambiarle el acceso a este usuario. Nos situamos en el rea de trabajo, encima de la base de datos nueva, pulsamos con el botn derecho del ratn y seleccionamos, Database / Access Control (Ver Figura 2.0)

(Figura 2.0 Configurando la lista de control de acceso) Aadimos el usuario Anonymous, pulsando en Add, (Ver figura 2.1), una vez escrita la palabra Anonymous en el cuadro de texto pulsamos en OK, este usuario se aadir a la lista.

(Figura 2.1 Aadiendo un usuario a la lista de control de acceso)

Ahora tenemos que indicar que tipo de acceso queremos darle, es decir, que va a poder hacer este usuario en nuestra aplicacin, para ello nos fijamos en la parte derecha de la pantalla, donde pone Attributes, (Ver figura 2.2). En User Type, seleccionamos Person y en Access elegimos Editor,

(Figura 2.2 Configurando el nivel de acceso del usuario Anonymous) Con esta configuracin, el usuario Anonymous, en nuestra aplicacin, podr crear y modificar documentos.

Formulario Noticia:
Dentro del Domino Designer, en la lista de elementos de diseo, pulsamos en Formularios, (Ver Figura 5.1.0).

(Figura 5.1.0 Seleccin del elemento de Diseo Formulario)

Para crear un nuevo formulario pulsamos en el botn, que aparece a la derecha de la lista de los elementos de diseo. Lotus Designer nos muestra un Formulario en Blanco, ahora vamos a darle un nombre y a definir sus propiedades.

Nos situamos en cualquier parte del formulario y pulsamos sobre el SmartIcon iconos, al pulsarlo nos muestra la siguiente pantalla, (Ver figura 5.1.1).

, situado a la izquierda de nuestra barra de

(Figura 5.1.1 Propiedades del Formulario)

Propiedades del formulario: En la casilla Name, le ponemos un nombre: 1.0.-Formulario Noticia | FNoticia. FNoticia es el alias, sirve para llamar al formulario de una forma interna. El Alias no es obligatorio, pero es muy aconsejable. Entre el nombre y el alias hay que poner el carcter | , que se consigue con la combinacin de teclas Alt. Gr. + 1. Nota: Muchas veces podemos llamar a los formularios con un nombre y con el tiempo querer cambiarlo, si hiciramos esto, en una aplicacin que ya tiene documentos creados, nos dara error y adems tendramos que cambiar la referencia del formulario en todos los sitios donde apareciese el nombre del formulario, vistas, agente, acciones, etc. Por eso, si creamos un alias y siempre hacemos referencia al formulario por el alias, podemos cambiar el Nombre sin tener que hacer ninguna modificacin en ningn sitio. Default database form, en toda base de datos debe haber un nico formulario predeterminado, el formulario de noticias va a ser el predeterminado de esta base de datos, con lo cual seleccionamos esta opcin. Cuando seleccionamos un formulario como predeterminado, nos aparece en la vista de diseo de formularios marcado con una flecha azul, (Ver Figura 5.1.2).

(Figura 5.1.2 Identificando el formulario predeterminado) Seleccionamos Automatically refresh fields (Actualizar Campos Automticamente). En ocasiones, los usuarios necesitan ver los resultados de los clculos realizados en los campos cuando trabajan con los documentos. Con esta opcin seleccionada la informacin facilitada est permanentemente actualizada. Eventos del formulario: El formulario tiene muchos eventos, (Ver figura 5.1.3), en los que se puede incluir cdigo, pero para nuestra aplicacin de momento slo vamos a ver el evento Windows Title. Este evento sirve para ponerle un ttulo a la ventana, que se mostrar al crear o visualizar un documento, una frmula posible para este evento sera: @If(@IsNewDoc;"Noticia Nueva";Ttitulo). Con esta frmula, si se creara un nuevo documento nos aparecera Noticia Nueva y si visualizramos un documento ya creado nos mostrara el contenido del campo Ttitulo.

(Figura 5.1.3 Eventos del formulario)

Guardamos el Formulario pulsando sobre el SmartIcon

Tablas
Una vez configuradas las propiedades del formulario, vamos a empezar a introducir elementos de diseo, empezando por crear una tabla, donde vamos a incluir los campos que contendr nuestro formulario. Para introducir una tabla nos situamos con el cursor en el principio del formulario y seleccionamos el men, Create / Table. La tabla la creamos de nueve filas y dos columnas con lo cual, en Number of rows ponemos un 9 y en Number of Columns ponemos un 2 y pulsamos en el Botn Aceptar (Ver Figura 5.2.0)

(Figura 5.2.0 Seleccionado las filas y las columnas) Ya tenemos la tabla creada, ahora vamos a cambiar sus propiedades, para ver las propiedades de las tablas y de cualquier objeto simplemente seleccionamos el objeto y pulsamos sobre el SmartIcon . Nos aparece la siguiente pantalla con las propiedades de la tabla, (Ver Figura 5.2.1).

(Figura 5.2.1 Propiedades de las tablas) En la primera pestaa, podemos cambiar el tamao y la alineacin de la tabla o de cada una de las celdas, en el resto de pestaas podemos cambiar el estilo de los bordes, el color de la tabla y de cada una de las celdas, incluir una imagen en el fondo de la tabla o celda y modificar los mrgenes, en la ltima pestaa podemos incluir etiquetas de HTML a una celda o a toda la tabla. Configuramos la tabla a nuestro gusto, dndole algn color de fondo a la primera columna, le ponemos un borde, etc. Insertar, agregar y eliminar filas y columnas de una tabla: Para insertar una fila en otras dos existentes, nos situaramos en la de abajo, en el caso de filas y en la derecha, en el caso de columnas y pulsaramos en Table / Insert Row o Insert Column. Para agregar una fila al final de la tabla. Nos situamos en cualquier fila y pulsaramos en el men, Table / Append Row o Append Column. Para eliminar una fila o columna, nos situaramos en ella y pulsaramos en el men, Table / Delete Row/Column.

Campos
En la columna de la derecha de nuestra tabla vamos a crear los siguientes campos, uno por cada fila. Nombre Campo tTitulo dlgcategoria Tipo Texto DialogList Enter Choices (one per line) Ver Figura (5.4.2) Valor por Defecto Deportes, Nacional, Internacional Ver Figura (5.4.2)

dlgLista tAutor fFecha fFechaPubli reenviado rdWeb cuerpo SendTo

DialogList Informtica, Contabilidad, Enter Choices (one per line) Financiero. Ver Figura (5.4.2) Ver Figura (5.4.2) Texto Calculado al Crear @name([cn];@username) Fecha Calculado al Crear @created Fecha Radio Button Valor Si o No No Radio Button Valor Si o No No Texto enriquecido Texto

Para crear estos campos nos situamos en la fila correspondiente y seleccionamos en el men, Create / Field. Al crear un campo nos muestra directamente sus propiedades, (Ver figura 5.4.0)

(Figura 5.4.0 Propiedades de un campo)

En el cuadro Name, introducimos el nombre que tendr el campo. En Type seleccionamos el tipo de campo, (Ver Figura 5.4.1)

(Figura 5.4.1 Seleccionando los tipos de campo) Para los tipos de campo DialogList (cuadro de lista), que hemos llamado, dlgLista y dlgcategoria, los valores por defecto los indicaremos de la siguiente forma, en la segunda pestaa de las propiedades del campo, elegiremos Escribir las opciones (una por lnea), Enter Choices (one per line)", y en el cuadro Choices escribiremos los diferentes valores, (Ver Figura 5.4.2), para separar un valor de otro pulsaremos la tecla , Enter.

(Figura 5.4.2 Configurando las opciones de los campos de tipo DialogList) Cuando tengamos creados todos los textos y campos, el formulario nos quedar ms o menos de la siguiente forma:

Guardamos el Formulario pulsando sobre el SmartIcon Tipos de campo existentes: Authors Checkbox Color Combobox Date/Time Dialog List Formula Listbox Names

Los campos de lectores y autores permiten controlar quin puede leer y crear los documentos que se generan a partir de un formulario. Cada opcin aparece junto a una casilla de verificacin. Muestra la paleta de colores donde se puede seleccionar uno. Las opciones aparecen dentro de un cuadro de lista desplegable. Para introducir fechas y las horas. Para ver todas las opciones a la vez sin tener que desplegar la lista de valores. Los campos de frmulas se utilizan para rellenar listas de suscripcin. Se muestra una lista de opciones para que los usuarios puedan seleccionar la que ms les interesa. Cree un campo de nombres para mostrar los nombres de usuarios.

Un campo de este tipo puede ser calculado o editable y se le suele asociar la frmula: @UserName, el nombre se mostrar tal y como aparece en los ID de Notes: por ejemplo, Juan Snchez/Brossoft. Para mostrar nicamente el "nombre comn", sin el /Brossoft se le asigna la siguiente frmula: @Name([CN];@UserName) Number Para introducir datos numricos o monetarios. Password Campos de texto que al escribir la contrasea cada carcter que introduce el usuario se muestra como un asterisco en la pantalla. Radio button Cada opcin aparece junto a un botn, el usuario slo puede seleccionar uno. Readers Los campos de lectores y autores le permiten controlar quin puede leer y crear los documentos que se generan a partir de un formulario Rich text Para introducir imgenes, anexos y objetos. Text Para introducir, almacenar y visualizar texto. Rich text lite Campo de texto enriquecido pero con una lista de elementos enumerados en un men desplegable que son los nicos elementos que se permite al usuario insertar en este tipo de campo. Time Zone Muestra una lista con todas las zonas horarias del mundo.

Formulario Lista de distribucin:


Creamos otro formulario, de nombre le ponemos: 2.0.- Lista de Distribucion | FLista. Marcamos Actualizar campos automticamente. Creamos una tabla con 2 filas y 2 columnas y con los siguientes textos y campos:

Tipos y valores de los campos: Nombre Campo tNombre tMiembros Tipo Texto-Editable Cuadro de Lista, (Ver figuras 5.4.3 y Valor por Defecto

5.4.4) Configuracin del campo tMiembros:

(Figura 5.4.3 Configuracin del campo tMiembros)

Allow multiple values (Permitir varios valores), en este campo vamos a introducir varios nombres, ya que ser la lista de personas a las que se enviar la noticia una vez creada.

(Figura 5.4.4 Configuracin del campo tMiembros)

Use Address dialog For choices, con esta opcin podemos seleccionar los nombres del listn corporativo. Allow values not in list, permite introducir valores que no estn en el listn corporativo. Ttulo de la ventana: En los eventos del formulario/ Window Title/Frmula escribimos:

@If(@IsNewDoc;"Nueva Lista de Distribucin";tNombre) Guardamos el formulario pulsando sobre el SmartIcon .

Campos compartidos
El elemento de diseo denominado Campo compartido, son muy tiles, ya que se pueden crear una sola vez y usarse en varios formularios. Un ejemplo que se utiliza mucho es un campo para indicar la persona que ha creado el documento, que suele incluirse en todos los formularios. Para crear un campo compartido, nos situamos en la lista de elementos de diseo y pulsamos en Shared Code Fields, (Ver Figura 5.5.0).

(Figura 5.5.0 Creando un campo compartido)

A la derecha pulsamos en el botn, . Las propiedades de estos campos son iguales que los no compartidos. Para nuestra aplicacin vamos a crear los siguientes dos campos compartidos:

Nombre Campo Tipo tModificador fModificacion Texto-Calculado Fecha/horaCalculado

Valor por Defecto/Frmula @Name([CN];@UserName) @Modified

Acciones
Las acciones se pueden incluir en formularios, vistas, subformularios y pginas y en todos estos elementos de diseo se crean de la misma manera. Abrimos nuestro formulario de Noticias, abrimos el panel de acciones, (Ver Figura 5.6.0), nos situamos en el y pulsamos en el Men Create /Action / Action, (Ver Figura 5.6.1).

(Figura 5.6.0 Abriendo el panel de acciones)

(Figura 5.6.1 Insertando una accin en el panel de acciones)

Al insertar una accin nos muestra directamente sus propiedades. En el cuadro de texto Name, le ponemos un nombre, identificativo con la accin que se vaya a ejecutar. Por ejemplo, vamos a crear una accin que edite el documento, para poder introducir valores en los campos de un documento, (Ver Figura 5.6.1). La frmula para esta accin sera @Command([Editdocument]).

(Figura 5.6.1 Propiedades de las acciones)

En la primera pestaa de las propiedades, se puede personalizar una etiqueta, un frame y un tipo, as como incluir las

acciones en el men y en la barra de acciones y aadir al texto una imagen. La segunda pestaa de las propiedades de las accin nos permite ocultarlas para notes, para Web y mobile y cuando el documento est en modo lectura, edicin o en base a una frmula, (Ver Figura 5.6.2).

(Figura 5.6.2 Propiedades de las acciones-Pestaa de ocultacin) Cerramos la accin para probarlo pero sin guardar estos cambios, ya que, las acciones que llevarn nuestros formularios sern acciones compartidas que incluiremos en un subformulario.

Acciones compartidas:
Las acciones compartidas al igual que los campos compartidos se crean una sola vez y pueden ser usadas en varios formularios, vistas o pginas. Casi todos los formularios tienen las acciones, Guardar, Modificar, Imprimir y Salir y casi todas las vistas incluyen una accin para crear nuevos documentos. Para crear una accin compartida, pulsamos en la lista de elementos de diseo en Shared Code / Actions, (Ver Figura 5.7.0):

(Figura 5.7.0 Creando una accin compartida)

En la parte derecha de nuestra pantalla pulsamos en el botn, . Las propiedades de estas acciones son iguales que las que no son compartidas. Para nuestra aplicacin vamos a crear estas cinco acciones compartidas cada una con un icono diferente y con las siguientes frmulas: Accin Guardar Modificar Imprimir Frmula @Command([filesave]) @Command([Editdocument]) @Command([fileprint]) Descripcin Guarda el documento. Pasa el documento a modo Edicin. Imprime el Ocultar En lectura En edicin No

documento. Salir @Command([fileclosewindow]) Sale del documento. No No Crear noticia @Command([Compose];FNoticia) Crea un nuevo documento de noticia.

Acciones compartidas:
Las acciones compartidas al igual que los campos compartidos se crean una sola vez y pueden ser usadas en varios formularios, vistas o pginas. Casi todos los formularios tienen las acciones, Guardar, Modificar, Imprimir y Salir y casi todas las vistas incluyen una accin para crear nuevos documentos. Para crear una accin compartida, pulsamos en la lista de elementos de diseo en Shared Code / Actions, (Ver Figura 5.7.0):

(Figura 5.7.0 Creando una accin compartida)

En la parte derecha de nuestra pantalla pulsamos en el botn, . Las propiedades de estas acciones son iguales que las que no son compartidas. Para nuestra aplicacin vamos a crear estas cinco acciones compartidas cada una con un icono diferente y con las siguientes frmulas: Accin Guardar Modificar Imprimir Salir Frmula @Command([filesave]) @Command([Editdocument]) @Command([fileprint]) @Command([fileclosewindow]) Descripcin Guarda el documento. Pasa el documento a modo Edicin. Imprime el documento. Sale del documento. Ocultar En lectura En edicin No No No

Crear noticia @Command([Compose];FNoticia) Crea un nuevo documento de noticia.

Subformularios
En los subformularios se pueden insertar los mismos elementos de diseo que en un formulario, aunque la diferencia es que por si solos no tienen ninguna funcionalidad, deben estar insertados en un formulario para que pueda verse su contenido. Para crear un nuevo Subformulario, pulsamos en la lista de elementos de diseo en Shared Code / Subforms, (Ver Figura 5.8.0):

(Figura 5.8.0 Creando un nuevo subformulario)

En la pantalla que nos aparece a la derecha pulsamos en el botn, . Ya tenemos creado el nuevo Subformulario, ahora vamos a darle un nombre y a definir sus propiedades, (Ver Figura 5.8.1) Nos situamos en cualquier parte del Subformulario y pulsamos sobre el SmartIcon , para ver sus propiedades.

(Figura 5.8.1 Propiedades de un subformulario)

En el cuadro de texto Name, le ponemos un nombre: 1.0.-Acciones Lotus Notes e incluimos un Alias: SFAcciones. Entre el nombre y el alias hay que poner el carcter | que se consigue con la combinacin de teclas Alt. Gr. + 1. Include in Insert Subformdialog, seleccionamos esta propiedad, para que podamos seleccionarlo desde cualquier formulario. Guardamos el Subformulario sin cerrarlo, pulsando sobre el SmartIcon . Este subformulario lo vamos a usar para insertar en el las acciones compartidas que hemos creado anteriormente. Para insertar estas acciones, nos situamos en el subformulario, abrimos el panel de acciones, (Ver Figura 5.8.2), y pulsamos en el men Create / Action /Insert Shared Action.

(Figura 5.8.2 Abriendo el panel de acciones)

En la pantalla que nos sale, seleccionamos todas las acciones que queremos insertar, en nuestro caso Editar, Guardar, Salir e imprimir y pulsamos en el botn Insert, (Ver Figura 5.8.3)

(Figura 5.8.2 Insertando acciones compartidas) Guardamos el Subformulario pulsando sobre el SmartIcon y lo cerramos. Subformulario con campos compartidos: Ahora vamos a crear otro Subformulario con los campos compartidos que tenemos. En la parte derecha de nuestra pantalla pulsamos en el botn, Nos situamos en cualquier parte del Subformulario y pulsamos sobre el SmartIcon 5.8.3). . , para ver sus propiedades, (Ver Figura

(Figura 5.8.3 Propiedades del subformulario) En el cuadro Name, le ponemos un nombre: 2.0.-Campos y un Alias: SFCampos. Entre el nombre y el alias hay que poner el carcter | que se consigue con la combinacin de teclas Alt. Gr. + 1. Seleccionamos Include in Insert Subformdialog, para que podamos seleccionarlo desde cualquier formulario. Antes de insertar los campos compartidos, creamos una tabla de 2 filas y 2 columnas, el la columna de la izquierda vamos a incluir los textos o literales que describen el contenido que va a tener el campo, (Ver Figura 5.8.4). En la columna de la derecha vamos a insertar los campos compartidos. Nos situamos en la columna derecha, primera fila y pulsamos en el men Create / Resource / Insert Shared Field, nos aparecer la siguiente pantalla:

Seleccionamos el campo tModificador y pulsamos en el botn OK, hacemos lo mismo con el campo fModificador.

(Figura 5.8.4 Tabla con campos compartidos) Guardamos el Subformulario pulsando sobre el SmartIcon

Insertar subformularios
Vamos a insertar los dos subformularios que hemos creado en todos nuestros formularios, ya que queremos, que todos tengan acciones y los campos compartidos de quin a modificado el documento y qu da. Para insertar estos subformularios nos vamos a la lista de elementos de diseo formularios, (Ver figura 5.9.0).

(Figura 5.9.0 Seleccin del elemento de Diseo Formulario) A la derecha nos queda el listado de los formularios que hemos creado, hacemos doble clic sobre el formulario 2.0.-Lista de Distribucin para abrirlo.

(Figura 5.9.1 Listado de formularios creados)

Nos situamos en la primera lnea del formulario que hemos abierto y pulsamos en el men Create / Resource /Insert Subform, (Ver Figura 5.9.2).

(Figura 5.9.2 Insertando un subformulario) En la siguiente pantalla, seleccionamos el subformulario 1.0.-Acciones Lotus Notes y pulsamos sobre el botn OK.

Ya tenemos insertado el formulario que contiene las acciones compartidas, ahora vamos a insertar el que contiene los campos compartidos, el que hemos llamado, 2.0.- Campos y lo vamos a situar al final del formulario, despus de todas las tablas que hemos creado. Una vez insertados estos subformularios, guardamos el Formulario pulsando sobre el SmartIcon y lo cerramos. Ahora abrimos el formulario 1.0.- Formulario Noticia y hacemos lo mismo, insertamos los dos subformularios, uno al principio y otro al final. Guardamos el Formulario pulsando sobre el SmartIcon Preview in Notes, (Ver Figura 5.9.3). y vamos a visualizar como queda pulsando en el men, Design /

(Figura 5.9.3 Previsualizar un formulario en Lotus Notes)

Nos debe salir un documento parecido a este:

En esta imagen vemos que slo nos salen las acciones de Guardar y Salir, esto es debido a que en las propiedades de la accin Modificar, hemos ocultado esta accin en modo edicin, por tanto slo aparecer cuando tengamos un documento abierto en modo lectura y al contrario la accin Guardar, ya que esta la hemos ocultado en modo Lectura. Tambin en la imagen podemos observar que la barra donde se muestran las acciones, sale en un tono gris que no concuerda muy bien con los colores que hemos puesto en nuestra aplicacin, para personalizar esta barra, volvemos a modo diseo pulsando en el icono , que nos aparece en la barra de la izquierda en Lotus notes.

Personalizacin de la barra de acciones:


Nos situamos en la vista de formulario y hacemos doble click sobre nuestro formulario principal, 1.0.- Formulario Noticia. Dentro del formulario abrimos el panel de acciones con el men, View / Action Pane, nos situamos en el y pulsamos sobre el con el botn derecho del ratn, nos saldr el siguiente men,

Pulsamos sobre Action Bar Properties y nos mostrar las propiedades de la barra de acciones:

El men de las barras de acciones tiene muchas posibilidades de personalizacin, nosotros vamos a ponerle un fondo diferente acorde con los colores de nuestra aplicacin en la tercera pestaaColor (Ver Figura 5.10.0)

(Figura 5.10.0 Cambiando el color de fondo de la barra de acciones) Vamos a cambiar tambin el estilo y el color de fondo de los botones, en la quinta pestaa Button OptionsDisplay borderElegimos Notes Style y en Button Background Color Elegimos el color Blanco, (Ver Figura 5.10.1).

(Figura 5.10.1 Cambiando el color de fondo y el estilo de los botones) El tipo, el tamao, el color y el estilo de la letra lo cambiamos en la quinta pestaa (Ver Figura 5.10.2)

(Figura 5.10.2 Cambiando el color, el tipo, el tamao y el estilo de letra) Guardamos el Formulario pulsando sobre el SmartIcon y vamos a probar como queda pulsando en el Men Design / Preview in Notes. Vemos que el resultado de la barra de acciones es bastante distinto al inicial:

Tendramos que hacer este proceso por cada formulario, vista, subformulario o pgina en la que quisiramos personalizar la barra de acciones.

Vistas
Una vista sirve para mostrar y organizar los datos de los formularios. Las vistas pueden mostrar datos de documentos creado con un formulario o de varios. Vamos a Crear las vistas Necesarias para nuestra aplicacin, unas nos mostrarn los documentos creados con el formulario de noticia y otras los de listas de distribucin. Pulsamos en el listado de elementos de diseoVistas, por defecto nos aparece una vista llamada (sin titulo), hacemos Doble Click sobre ella para abrirla.

Vamos a crear esta vista para que muestre los documentos de noticia categorizados (agrupados) por el campo Autor, es decir todos los documentos creados por el mismo autor formarn una categora y de esta, colgaran todos sus documentos. Al abrir la vista nos aparecen sus propiedades, en el caso de que no aparezcan, nos situaramos en la vista y pulsamos sobre el SmartIcon . Le ponemos un nombre y un alias, fijndonos en la peculiaridad de las vistas, tienen una casilla especial para el Alias, no es necesario utilizar el carcter | para separar el nombre del Alias como pasaba en los formularios y subformularios, (Ver Figura 5.11.0).

(Figura 5.11.0 Propiedades de las vistas) Hacemos doble click en la segunda pestaa y nos aparecen las siguientes opciones:

Default when databases in first oponed, poner esta vista como predeterminada. Una vista predeterminada es la vista que ven los usuarios cuando abren la base de datos por primera vez. Cada base de datos debe tener una vista predeterminada, que aparece marcada con un * (asterisco) en la lista de vistas. Default design for new folders and views, seleccionando esta opcin, todas las vistas que se creen nuevas cogen el diseo de esta, aunque al crear una vista nueva se puede indicar otra vista para heredar su diseo. En el resto de pestaas, podemos cambiar los colores de la vista y otras propiedades relacionadas con el diseo, adems de restringir el acceso de usuarios a la misma en la sexta pestaa. Ahora lo que nos interesa es como indicarle a esta vista que slo nos muestre los documentos creados con el formulario noticia, para ello nos situamos en la frmula de seleccin de la vista (Ver Figura 5.11.1), en Ejecuta seleccionamos: Frmula y en el panel de frmula ponemos la siguiente: Select Form=FNoticia.

(Figura 5.11.1 Cambiando la seleccin de documentos en una vista) La frmula nos debe quedar as:

Guardamos la vista pulsando sobre el SmartIcon

Crear y personalizar columnas de la vista: Pinchamos sobre el triangulo blanco que aparece al lado de la palabra View, (Ver Figura 5.11.2) y nos sale una lista de elementos de los cuales podemos modificar sus propiedades, este triangulo es igual en todos los elementos de diseo, pero no las opciones que se despliegan. Seleccionamos de la lista Column.

(Figura 5.11.1 Cambiando de elemento de diseo) Nos tiene que mostrar las propiedades de la columna, (Ver Figura 5.11.2).

(Figura 5.11.2 Propiedades de la columna) A esta columna le ponemos un ttulo, en este caso Autor, y marcamos la opcin Show twistie when row is expandable (Mostrar imagen si la fila puede desplegarse), al ser una columna categorizada, nos tiene que mostrar el triangulito para poder desplegar o plegar esta categora. Si pusiramos Display values as icons, y en la frmula un nmero, dependiendo del nmero nos mostrara un icono de los siguientes:

En la siguiente pestaa seleccionamos Sort: Ascending (Ordena Ascendente) y Type: Categorized (Por Categoras), (Ver Figura 5.11.3).

(Figura 5.11.3 Configurando la ordenacin de los datos)

Totals: Como su nombre indica esta opcin sirve para configurar totales en las vistas. Si desplegamos esta opcin podemos elegir entre: Total: calcula el total global para todos los documentos principales y muestra ese total en la parte inferior. Media por documento: calcula la media global hallando el total de los documentos principales y dividiendo ese valor por el nmero de documentos principales. Por ejemplo, si hay cuatro documentos y su total es 10, la media por documento ser 2,5. Media por subcategora: calcula la media para cada categora. Dentro de cada subcategora se suman los documentos y el valor resultante se divide por el nmero de documentos. % de la categora superior: calcula el total para todos los documentos principales. Para cada categora, Notes muestra el porcentaje de sta en relacin con el total global de la vista. % de todos los documentos: calcula el total para todos los documentos principales. Para cada categora, Notes muestra el porcentaje de sta en relacin con el total global de la vista. Hide detail rows: se eliminan los subtotales de cada categora y subcategora y se muestran los totales sin sobrecargar la vista con un exceso de nmeros. En el resto de pestaas de las propiedades de las columnas podemos configurar el formato y el color del texto, del ttulo y el formato numrico en el caso de que el campo que asignamos a esta columna sea de este tipo. Ahora vamos a asignarle a esta columna el valor del campo Autor que es el que queremos que nos muestre, en la frmula de la columna, seleccionamos Field y elegimos el campo tAutor. (Ver Figura 5.11.4)

(Figura 5.11.4 Poniendo frmula a una columna) Por tanto la primera columna de esta vista nos mostrar el contenido del campo Autor de los documentos creados con el formulario de noticias. Agregar Columnas: Vamos a Agregar ms columnas a esta vista, hacemos Doble Click a la derecha de la primera columna que hemos creado. (Ver Figura 5.11.5).

(Figura 5.11.5 Agregando una columna nueva) En las propiedades de la columna no marcamos Mostrar tringulo si la fila puede desplegarse, la ordenacin sera Order: ascendente y en Typemarcamos Standard. Le ponemos como Title de la columna: Noticia y en la frmula de columna seleccionamos el campo tTitulo. Ahora vamos a insertar la accin compartida Crear noticia, nos situamos en el panel de acciones de la vista, y pulsamos en el men Create / Action / Insert Shared Action (Ver Figura 5.11.6)

(Figura 5.11.6 Insertando una accin compartida en la vista) Guardamos la vista pulsando sobre el SmartIcon, y la cerramos. Nos situamos en el listado de elementos de diseo, vistas:

Pulsamos en nueva vista, . Para nuestra aplicacin vamos a crear 3 vistas ms: Vista por Fecha: Con nombre: 1.1.-Noticias por Fecha

Alias: VNoticiasxFecha Frmula de seleccin: Select Form=FNoticia Esta vista tendr 3 columnas: En Frmula de columna, seleccionamos Field y elegimos el campo fFecha. En la ordenacin seleccionamos: Order: descendente y en Type marcamos Categorized. En Frmula de columna, seleccionamos Field y elegimos el campo tTitulo. En la ordenacin seleccionamos: Order: ascendente y en Type marcamos Standard. Frmula de columna, seleccionamos Field y elegimos el campo, tAutor. En la ordenacin seleccionamos: Order: ascendente y en Type marcamos Standard. Guardamos la vista pulsando sobre el SmartIcon, y la cerramos. Vista por Categora de la noticia: Con nombre: 1.2.-Noticias por Categora Alias: VNoticiasxcategoria Frmula de seleccin: Select Form=FNoticia Esta vista tendr 3 columnas: En Frmula de columna, seleccionamos Field y elegimos el campo, dlgCategoria. En la ordenacin seleccionamos: Order: ascendente y en Typemarcamos Categorized. En Frmula de columna, seleccionamos Field y elegimos el campo, tTitulo. En la ordenacin seleccionamos: Order: ascendente y en Type marcamos Standard. Frmula de columna, seleccionamos Field y elegimos el campo, tAutor. En la ordenacin seleccionamos: Order: ascendente y en Type marcamos Standard. Guardamos la vista pulsando sobre el SmartIcon, y la cerramos. Vista para ver todos los documentos: Con nombre: Todos Alias: VTodos Frmula de seleccin: Select @All Esta vista tendr 1 columna, ordenada Ascendente-Standard y con la frmula: @Text(@DocumentUniqueId). Guardamos la vista pulsando sobre el SmartIcon, y la cerramos. Vista para la lista de distribucin: Esta vista va a ser diferente a las anteriores, ya que los documentos que nos va a mostrar sern los creados con el formulario 2.0.-Lista de distribucin. Con nombre: VListaDistribucion Alias: VListaDistribucion Frmula de seleccin: SELECT form="FLista"

Esta vista tendr 2 columnas: En Frmula de columna, seleccionamos Field y elegimos el campo, tNombre. En la ordenacin seleccionamos Order: ascendente y en Type marcamos Standard. Frmula de columna, seleccionamos Frmula y ponemos: @name([CN];tMiembros), esta funcin elimina la jerarqua del nombre de usuario, dando como resultado el nombre comn (Nombre y apellidos). En la ordenacin seleccionamos Order: ascendente y en Type marcamos Standard. La segunda columna va a tener una particularidad, (Ver Figura 5.11.7), en la primera pestaa de sus propiedades, vamos a elegir en el separador de mltiples valores; New Line, ya que el campo tMiembros del formulario FLista, tena la propiedad de poder incluir valores mltiples, queremos que cada uno de estos valores se muestre en una lnea de la columna.

(Figura 5.11.7 Cambiando el separador de mltiples valores) En esta vista vamos a crear una accin que se llame Crear Lista, nos situamos en el panel de acciones y pulsamos sobre ella con el botn derecha del ratn, en el men que se despliega seleccionamos, Create Action, (Ver Figura 5.11.8).

(Figura 5.11.8 Creando una accin en una vista) Nombre de la accin: Crear lista de distribucin. Elegimos un icono para esta accin. En el panel de frmulas escribimos: @Command([Compose];FLista]). Esta accin nos debe quedar de la siguiente forma:

Guardamos la vista pulsando sobre el SmartIcon

y la cerramos. , que nos aparece en la barra izquierda de Lotus

Creando documentos
Vamos a volver al cliente Lotus notes, pulsamos sobre el icono, Designer y entramos en la Base de datos de noticias. Podis ver las nuevas vistas que hemos creado:

Nos situamos en una de las vistas de noticias y pulsamos sobre la accin que hemos llamado Crear Noticia, vamos a crear algunos documentos nuevos, rellenando todos los datos posibles, para visualizarlos en las vistas y luego poder trabajar con ellos. Hacemos lo mismo en la vista Lista de distribucin, creamos algunos documentos nuevos pulsando en la accin que hemos llamado Crear Lista.

Vistas ocultas
Las vistas que se definan como ocultas slo se podrn ver en modo diseo, de tal manera que el usuario desde el cliente lotus notes no podr verlas, se suelen utilizar para recuperar valores en campos, para los agentes y tambin para que los programadores lleven un control de todos los documentos creados en la base de datos. Para nuestra aplicacin vamos a crear dos vistas ocultas que nos servirn para recuperar los valores de los campos Categora de la noticia, Lista de distribucin y SendTo de los formularios. Volvemos a modo diseo pulsando en el icono Pulsamos en la lista de elementos de diseo Views: , que nos aparece en la barra de la izquierda en Lotus notes.

Creamos una nueva vista pulsando en el botn, . Vista para la categora de la noticia: Con nombre: Entre parntesis (VCategorias), los parntesis indican que se trata de una vista oculta y no se ver desde el

cliente notes. Al crear la vista vemos que por defecto tiene el mismo diseo que la vista Por Autor que es la que hemos sealado como predeterminada en la base de datos. Para eliminar estas columnas, nos situamos encima y pulsamos la tecla Supr. Frmula de seleccin: SELECT form="FNoticia", ya que lo que queremos es que nos muestre todas las categoras de los documentos creados con el formulario FNoticia. Esta vista va a tener 1 columna: En la ordenacin de la columna, seleccionamos Order: ascendente y en Type marcamos Standard. En Frmula de columna, seleccionamos Field y elegimos el campo dlgCategoria. Como frmula de columna le ponemos el campo. Guardamos la vista pulsando sobre el SmartIcon Vista para la lista de distribucin: Con nombre: Entre parntesis (VLista). Alias: VLista. Frmula de seleccin: SELECT form="FLista". Esta vista va a tener 2 columnas: Nos quedamos con dos columnas, de tipo Standard y ordenadas de forma ascendente. En Frmula de columna, seleccionamos Field y elegimos el campo, tNombre. En la ordenacin seleccionamos Order: ascendente y en Type marcamosStandard. En Frmula de columna, seleccionamos Field y elegimos el campo, tMiembros. En la ordenacin seleccionamos Order: ascendente y en Typemarcamos Standard. De esta vista vamos a recuperar los valores de los campos Lista de distribucin y Enviar a: en los documentos creados con el formulario FNoticia. Guardamos la vista pulsando sobre el SmartIcon y la cerramos. y la cerramos.

Recuperar valores de una vista en un campo de un formulario.


Para recuperar los valores de las vistas ocultas que hemos creado en los campos de los formularios, hacemos doble click sobre el formulario, 1.0.- Formulario Noticia, para abrirlo.

Campo dlgCategoria: Nos situamos en el campo dlgCategoria, hacemos doble click sobre l para que nos aparezcan sus propiedades, nos aseguramos que es un campo de tipo Dialog List y Editable, (Ver Figura 5.14.0)

(Figura 5.14.0 Seleccionando el tipo de campo)

Abrimos la segunda pestaa de propiedades del campo, vamos a cambiar las opciones, en vez de escribir uno a uno los valores de este campo, como se ve en la Figura 5.14.1, los vamos a calcular en base a una frmula, como se ve en la Figura 5.14.2.

(Figura 5.14.1 Calcular los valores en base a una frmula) Desplegamos la lista de opciones, (Ver Figura 5.14.2), y seleccionamos, Use formula for choices, y en el cuadro de texto Choices escribimos la siguiente frmula: @Unique(@DbColumn("";"";"(VCategorias)";1)). Con esta frmula recogemos los valores que haya en la primera columna de la vista privada (VCategorias). La funcin @Unique nos sirve para que no se repitan valores, en el caso de que haya ms de un documento con la misma

categora. Allow values not in list (Permitir valores que no estn en la lista), nos permitir seleccionar un valor de los ya existentes en la lista o incluir uno nuevo.

(Figura 5.14.2 Seleccionando el tipo de campo) Guardamos el Formulario pulsando sobre el SmartIcon y vamos a comprobar como en este campo se muestran los valores que tengamos en el campo categora del resto de documentos. Pulsamos en el Men Design / Preview in Notes.

Abrimos de nuevo Lotus Designer y el formulario 1.0.- Formulario Noticia. El Campo dlgLista: Ahora vamos a cambiar la frmula del campo dlgLista, nos situamos en el y hacemos doble Click para ver sus propiedades, nos aseguramos de que es un campo de tipo Dialog List y Editable. Hacemos Click en la segunda pestaa de propiedades del campo, vamos a cambiar las opciones, igual que en el campo categora de la noticia, vamos a calcular los valores en base a una frmula. Desplegamos la lista de opciones, y seleccionamos, Use formula for choices, y en el cuadro de texto Choices escribimos la siguiente frmula:@Unique(@DbColumn("";"";"(VLista)";1)). El Campo SendTo: En este campo se va a calcular la lista de personas que se hayan incluido en la opcin seleccionada en el campo, dlgLista. Hacemos doble click en el campo, cambiamos en la primera pestaa el tipo de campo y lo ponemos de Texto Computed (calculado) y sealamos la opcin, Allow multiple values(Permitir varios valores), en el panel de frmula ponemos la siguiente:@Unique(@DbLookup("";"";"(vListaDistribucion)";dlglista;2)), nos quedar de la siguiente forma:

Guardamos el Formulario pulsando sobre el SmartIcon y vamos a probar como en el campo Lista de distribucin nos sale la lista de valores que tengamos en los documentos creados con el formulario 2.0.- Lista de Distribucin y que al seleccionar uno de estos valores nos calcula automticamente el campo SendTo, con las personas que hayamos incluido en esa lista de distribucin. Pulsamos en el Men Design / Preview in Notes.

Funcin @Prompt
Esta funcin sirve para mostrar un cuadro de dilogo al usuario y da como resultado un valor de texto basndose en las acciones que el usuario realiza en dicho cuadro de dilogo. @Prompt, resulta til cuando se necesita pedir informacin al usuario y determinar las acciones a tomar basndose en los datos recogidos. Para probar todas las opciones de esta funcin, vamos a crear un formulario nuevo con el nombre y el Alias Prompt y que tenga los siguientes campos: Nombre Campo Titulo Mensaje Lista tResultado Tipo Texto-Editable Texto-Editable Texto-Editable- Allow multiple values Texto-Editable Valor por Defecto @Name([CN];@UserName) Mensaje "rojo;azul;blanco" de dilogo existentes:

Vamos a crear unos botones para mostrar los diferentes cuadros Para crear un botn, pulsamos en el men Create / Hotspot / Button, (Ver Figura 5.15.0)

(Figura 5.15.0 Creando un botn)

Creamos 9 botones con los siguientes nombres y las siguientes frmulas: Nombre del botn YesNo YesNoCancel OkCancelEdit OkCancelList Frmula FIELD tResultado:=@Prompt([YesNo];Ttitulo;Mensaje);@True FIELD tResultado:=@Prompt([YesNoCancel];ttitulo; Mensaje);@True FIELD tResultado:=@Prompt([OkCancelEdit];ttitulo; Mensaje;"");@True FIELD tResultado:=@Prompt([OkCancelList];ttitulo;Mensaje;"color";tlista);@True

OkCancelCombo FIELD tResultado:=@Prompt([OkCancelCombo];ttitulo;Mensaje;"color";tlista);@True

OkCancelListMult FIELD tResultado:=@Prompt([OkCancelListMult];ttitulo;Mensaje;"color";tlista);@True Password Localbrowse FIELD tResultado:=@Prompt([Password];ttitulo;Mensaje);@True FIELD tResultado:=@Prompt([LocalBrowse];ttitulo;"1");@True y vamos a probar como funciona cada uno de los botones, Choosedatabase FIELD tResultado:=@Prompt([ChooseDatabase];"";"");@True

Guardamos el Formulario pulsando sobre el SmartIcon Pulsamos en el Men Design / Preview in Notes.

Recursos compartidos / Imgenes


La creacin de recursos de imgenes resulta especialmente til para almacenar las imgenes que se usan en la base de datos. Aunque existen otros mtodos para utilizar imgenes, de esta forma se mantiene la imagen en una nica ubicacin. De forma que si se realiza cualquier tipo de modificacin en una imagen, los cambios se aplican en todos los sitios donde se encuentre. Para crear un recurso de imagen, nos situamos en la lista de elementos de diseo, Shared Resources /Images y pulsamos en el botn, . Se abre el cuadro de dilogo con el explorador de Windows, seleccionamos una o varias imgenes gif, bmp o jpeg de la lista y pulsamos en Abrir. Se crear una entrada para cada uno de los archivos que se hayan seleccionado y ya podremos insertarlos en formularios, pginas, etc. Para insertar una imagen en el resto de elementos de diseo seleccionamos en el men Create / Image Resource.

Navegadores
Vamos a crear un navegador para que al abrir la base de datos nos aparezca en la parte izquierda y no se vea el panel de vistas. Nos situamos en la lista de elementos de diseo, Other / Navigators y pulsamos en el botn, Le ponemos el Nombre: 1.0.-Principal

Indicamos una vista predeterminada, en la opcin Inicial view or flder, seleccionamos la vista llamada 1.0.-Noticias Por Autor. Vamos a personalizar el navegador ponindole una imagen de fondo, antes tenemos que abrir con cualquier programa de tratamiento de imgenes como el Paint una imagen, seleccionarla y copiarla en el portapapeles, despus volveremos a nuestro nuevo navegador y pulsamos en el men Create / Graphic Background, (Ver Figura 5.17.0)

(Figura 5.17.0 Insertando una imagen de fondo) Creamos una tabla con 1 columna y 5 filas, en cada fila insertaremos un enlace de texto. Creamos 5 textos (Ver Figura 5.17.1) Por Autor Por Fecha Por Categora Lista de distribucin SALIR, accin que al pulsar nos cierre la base de datos

(Figura 5.17.1 Crear texto en un navegador)

Al crear cada uno de los textos nos muestra las propiedades del mismo (Ver Figura 5.17.2)

(Figura 5.17.1 Propiedades del texto en un navegador)

En el cuadro de texto Caption, escribimos el ttulo del enlace de texto. En las propiedades, personalizamos el tipo de letra, el color por defecto, el color al pasar con el ratn por encima y el color al quedar seleccionado el enlace de texto.

En el panel de programacin le indicaremos a cada uno de los enlaces, la vista que tiene que abrirnos de la siguiente forma: Para los 4 primeros enlaces, seleccionamos Simple action(s)Open a View or FlderSeleccionamos la vista que queremos abrir de las que tenemos creadas, (Ver Figura 5.17.2)

(Figura 5.17.2 Asignando acciones a los enlaces de texto)

En el caso del enlace SALIR, seleccionamos en RunFrmula y en el panel de programacin escribimos, @command([fileCloseWindow]), (Ver Figura 5.17.3)

(Figura 5.17.2 Asignando una frmula a los enlaces de texto) Guardamos el navegador pulsando sobre el SmartIcon .

Frameset para el Cliente Notes


El Frameset estar compuesto por 2 marcos: El Izquierdo contendr el nuevo navegador que hemos creado y en el derecho se visualizar la vista que seleccionemos desde los enlaces de texto del navegador. Para crear un Frameset nuevo, nos situamos en la vista de elementos de diseo, Frameset, y pulsamos sobre el botn, . La pantalla que nos aparece es la siguiente:

En esta pantalla podemos seleccionar el nmero y el orden de los marcos que tendr el Frameset, aunque lo que se elija aqu no ser definitivo, ya que, dentro del Frameset tambin podremos configurar estas opciones. Para nuestra aplicacin seleccionaremos la primera opcin en Arrangement y el Number of frames ser 2. Al pulsar en el Botn OK, nos aparecer la siguiente pantalla:

En Name pondremos: 1.0.-Principal En Alias: Principal En Title:Gestor de Noticias, este es el ttulo que mostrar en la ventana al abrir el FrameSet en Lotus Notes. Ya hemos configurado las propiedades del FrameSet, ahora vamos a configurar las propiedades de cada uno de los marcos. Nos situamos en uno de los marcos y pulsamos sobre el con el botn derecho del ratn, (Ver Figura 5.18.0)

(Figura 5.18.0 Seleccionando las propiedades de un marco) Las propiedades del marco Izquierdo son, (Ver Figura 5.17.3) Name: Izquierdo Type: Name Element-Navigator

Value: 1.0.-Principal, lo seleccionamos pulsando sobre la imagen, . Default target for links in frame: Derecho, queremos que el contenido de los enlaces de texto de nuestro navegador nos los muestre en el marco derecho.

(Figura 5.18.1 Propiedades del marco Izquierdo)

Las propiedades del marco Derecho son, (Ver Figura 5.17.4) Name: Izquierdo Type: Name Element-View Value: 1.0.-Noticias por Autor, seleccionamos esta vista pulsando en la imagen, .

(Figura 5.18.2 Propiedades del marco Derecho) Guardamos el FrameSet pulsando sobre el SmartIcon , pero sin cerrarlo.

Cambiar la opcin Al abrir la base de datos para el cliente Notes


Ya hemos creado el FrameSet, ahora vamos a configurar la base de datos para que al abrirla nos lo muestre. Nos situamos en cualquier parte del conjunto de marcos que tenemos abierto y pulsamos sobre el SmartIcon , nos muestra las propiedades del FrameSet, elegimos que nos muestre las propiedades de la Database, en el desplegable que muestra el triangulo blanco (Ver Figura 5.19.0)

(Figura 5.19.0 Cambiar a las propiedades de la base de datos)

En las propiedades de la base de datos, en la quinta pestaa, cambiamos las siguientes opciones, (Ver Figura 5.19.1). When Opened in the Notes Client, seleccionamos, Open designated FrameSet Name: Seleccionamos nuestro Frameset: 1.0.-Principal

(Figura 5.19.1 Cambiando las Propiedades de la base de datos) Abrimos la base de datos en Lotus Notes para probar como nos muestra el FrameSet seleccionado. Nos debe aparecer el conjunto de marcos:

Probamos cada uno de los enlaces del navegador izquierdo, abrimos algn documento de las vistas y finalmente pinchamos en Salir para comprobar que cierra la base de datos.

Esquemas
Vamos a preparar nuestra aplicacin para que se pueda ver en cualquier navegador Web, para ello crearemos algunos elementos de diseo entre los que se encuentran los OutLines. Para crear un OutLine, nos situamos en la lista de elementos de diseo y seleccionamos Asare Code / Out linees y pulsamos en el botn, .

Los Out linees estn compuestos por entradas, las cuales actan como los enlaces de texto de los navegadores.

Podemos incluir las entradas del OutLine una a una o pulsar en este botn , para generar un Outline con todas las vistas que tenemos en la base de datos. El resultado lo podemos ver en la siguiente Figura:

Eliminamos las entradas que no nos interese Mostar, situndonos encima y pulsando la tecla Supr. y nos quedamos nicamente con las de las vistas depor autor, por fecha, por categora y lista de distribucin. El ttulo de cada una de las entradas por defecto es el nombre de la vista, vamos a cambiarle el ttulo para mejorar el aspecto, hacemos doble click sobre cada una de ellas y nos aparecern sus propiedades, (Ver Figura 5.20.0).

(Figura 5.20.0 Cambiando las Propiedades de una entrada de Outline) En todas cambiaremos en el cuadro de texto Label el nombre, ponindole uno identificativo, por ejemplo, en la primera entrada le pondremos, Por Autor. En ContentType, elegimos Named ElementView, y pulsando sobre el icono, , seleccionamos la vista que queremos abrir. Y as con todas las entradas de este nuevo OutLine. Una vez que tengamos personalizadas todas las entradas del OutLine, vamos a configurar el propio OutLine, para ver las propiedades del mismo, nos situamos en cualquier parte del OutLine y pulsamos en el SmartIcon siguiente pantalla: , que nos mostrar la

En Name le ponemos: 1.0.-Principal. En Alias: Principal. Guardamos el Outline pulsando sobre el SmartIcon .

Pginas
Un OutLine no se puede incluir en un conjunto de marcos por si slo, para poder visualizarlos es necesario incluirlo en una pgina o en un formulario, nosotros lo incluiremos en una pgina. Para crear una nueva pgina, nos situamos en la lista de elementos de diseo, seleccionamos Pages y pulsamos en el botn, . , para ver sus propiedades (Ver Figura 5.21.0)

Pulsamos en el SmartIcon

(Figura 5.21.0 Accediendo a las Propiedades de una Pgina) En Name ponemos: 1.0.-Principal | Principal Separando el nombre y el alias por el carcter |. Si nuestra pgina tuvieses cdigo HTML seleccionaramos Web accessContent typeHTML, esta pgina va a contener un OutLine con lo cul no es necesario seleccionar esta propiedad. Nos situamos en cualquier parte de la pgina donde queramos situar el OutLine y pulsamos sobre el Men Create / Embedded Element / Outline, (Ver Figura 5.21.1)

(Figura 5.21.1 Insertando un OutLine)

Nos aparece la siguiente pantalla, en ella elegimos el Outline que hemos creado y pulsamos en el botn OK:

Nos situamos encima del Outline que hemos insertado y pulsamos sobre el SmartIcon , Figura 5.21.2)

, para ver sus propiedades, (Ver

(Figura 5.21.2 Propiedades del OutLine insertado)

Ajustamos en OutLine size, Width (anchura) y Height (altura). En Web Access seleccionamos Using HTML, otra opcin es elegir Using Java applet, podis probarlo con esta opcin, pero la pgina tardar mucho ms en cargarse. En el resto de pestaas se puede configurar el tipo de letra, ponerle una imagen de fondo a cada entrada, establecer los mrgenes, el estilo de los bordes y establecer frmulas de ocultacin como en el resto de elementos de diseo, una cosa a tener en cuenta, es que existen diferentes niveles en el esquema, cada uno de los cuales se puede personalizar, (Ver Figura 5.21.3)

(Figura 5.21.3 Propiedades del OutLine-Niveles) Una vez se acabemos la personalizacin del Outline y de la pgina, guardamos la pgina pulsando sobre el SmartIcon .

Hojas de estilo
Las hojas de estilo para las aplicaciones Web en Lotus se suelen crear en una pgina y as lo vamos a hacer, Creamos una pgina nueva, que tenga el Nombre y el Alias: estilos.css | estilos.css. Vamos a copiar este cdigo HTML y a pegarlo en nuestra nueva pgina: <style type="text/css"> <! .TEXTAREA{ color: #000066; font :normal 8pt Verdana, Helvetica, Arial; background : #F7F7F7; border-style : solid; border-top-width : 1px; border-right-width : 1px; border-bottom-width : 1px; border-left-width : 1px; border-color : #CDCDCD;} .INPUT{ color: #014D87; font :normal 8pt Verdana, Helvetica, Arial; background : white; border-style : solid;

border-top-width : 1px; border-right-width : 1px; border-bottom-width : 1px; border-left-width : 1px; border-color : aaaa99;} .SELECT{ color: #000066; font :normal 7pt Verdana, Helvetica, Arial; background : #EDEDED; border-style : solid; border-top-width : 1px; border-right-width : 1px; border-bottom-width : 1px; border-left-width : 1px; border-color : #CDCDCD; } a:link {font-size: 8pt; font-family: Verdana; color: #003EA5; text-decoration: none} a:visited {font-size: 8pt; font-family: Verdana; color: #003EA5; text-decoration: none} a:hover {font-size: 8pt; font-family: Verdana; color: #870020; text-decoration: underline} .TABLA {border-right: 1px #B8B8B8 solid;border-left: 1px #B8B8B8 solid;border-bottom: 1px #B8B8B8 solid;border-top: 1px #B8B8B8 solid;text-align: center;} a.boton{ text-decoration: none; text-align: center; height:28; width: 75px; background-color:#ffffff; letter-spacing: 0.0em; border-top: 3px solid #014D87;border-bottom: 1px solid #0D004C; border-left: 1px solid #014D87;border-right: 1px solid #0D004C; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; color: #014D87; } a.boton:hover { background-color:#EEEEE6; border-top: 2px solid #0D004C;border-bottom: 1px solid #0D004C; border-left: 1px solid #0D004C;border-right: 1px solid #0D004C; font-size:10px; color: black; } -->

</style> Una vez tengamos el cdigo pegado en la pgina, lo seleccionamos todo, pulsando en el men, Edit /Select All o en la combinacin de teclas ctrl.+A y lo convertimos en cdigo HTML pulsando en el men, Text / Pass-Thru HTML.

Por supuesto, este cdigo HTML, es un ejemplo, se pueden crear todas las etiquetas nuevas que queramos. Guardamos la pgina pulsando sobre el SmartIcon . En los siguientes captulos veremos como incluir esta pgina de estilos y sus etiquetas en los restantes elementos de diseo.

Agentes
Necesitamos dos agentes, que se ejecutarn desde dos acciones de las vistas, con los cuales cambiaremos el valor del campo rdWeb del formulario noticias. Los nombres de estos agentes sern: Subir a Web y Dar de baja en Web Para crear un Agente nuevo, nos situamos en la vista de elementos de diseo, Shared / Agent, y pulsamos en el botn, . Nos aparecen automticamente las propiedades del agente, vamos a configurarlo como en la siguiente pantalla:

Abajo del panel de programacin, nos aparece el botn, del agente. Seleccionamos Modify Field como aparece en esta pantalla:

, lo pulsamos y accedemos a la programacin

En Modify by, seleccionamos Replacing, en The value in field, seleccionamos el campo rdWeb y como nuevo valor le ponemos Si, como aparece en la siguiente pantalla:

Pulsamos el botn Replace y ya tenemos creado nuestro agente de Subir a Web. Creamos el agente Dar de baja en Web de la misma manera, pero en vez de poner el valor Si en el campo rdWeb, ponemos el valor No. Los siguientes puntos nos indican la forma de acceder y ejecutar estos agentes. Cmo ejecutar los agentes: Creamos dos acciones compartidas, con los nombres, Subir a Web y Dar de baja en Web.

En Run, seleccionamos Simple action(s), pulsamos en el botn, , que aparece en la parte inferior de la pantalla y en las opciones que se muestran, elegimos Run Agent y el agente que corresponda ejecutar a cada accin, (Ver Figura 5.23.0)

(Figura 5.23.0 Creando una accin que ejecuta un agente) Guardamos las acciones compartidas pulsando sobre el SmartIcon .

Insertamos las acciones compartidas en las vistas de noticias que tenemos creadas. Abrimos la base de datos en Lotus notes y probamos que realmente, seleccionando varios documentos, se cambia el campo rdWeb en todos ellos a Si o No, dependiendo de la accin que hayamos seleccionado, (Ver Figura 5.23.1).

(Figura 5.23.1 Probando acciones compartidas que ejecutan agentes)

Formulario para visualizar las noticias en Web


Creamos un nuevo formulario con un nombre diferente, por ejemplo: 1.1.-FormularioNoticiasWeb, pero con el mismo Alias que el formulario noticias: FNoticias. Incluimos los mismos campos que en el formulario principal de noticias y le vamos a aadir algunas frmulas para los navegadores como la validacin de campos. $$Return: Creamos un campo de tipo texto y calculado al visualizar con la siguiente frmula:"[/"+@WebDbName+"/todos/"+@Text(@DocumentUniqueID)+"?opendocument]", cuando guardemos un documento en Web, nos mostrar el mismo documento en modo lectura, lo normal es ocultar este campo en todos los navegadores. Evento JS Header: En este evento del formulario, vamos a aadir un cdigo JavaScript que nos compruebe que en el campo Ttulo de la noticia se ha incluido algn valor antes de guardar el documento.

En el panel de frmulas del JS Header le ponemos el siguiente cdigo: function validar(){ var f = document.forms[0] if (f.Titulo.value == "") { alert ("Por favor, introduzca el ttulo"); f.Titulo.focus(); return false; } ;f.submit()} Cmo hacer una llamada a la funcin validar del evento JS Header: Vamos a llamar a la funcin Validar desde una accin Guardar nueva, pero antes tenemos que ocultar slo para Web la que ya tenamos. Nos situamos en la lista de elementos de diseo, Shared Code / Actions Hacemos doble click sobre la accin Guardar y la ocultamos para Web (Ver Figura 5.24.0)

(Figura 5.24.0 Ocultando una accin compartida para Web Browsers) Volvemos al formulario de noticias para Web que estbamos personalizando, navegando a travs de las pestaas superiores, (Ver Figura 5.24.1)

(Figura 5.24.1 Navegando por las pestaas superiores)

Al haber ocultado la accin Guardar para Web browser, necesitamos una nueva para el formulario de noticias que se va a visualizar en Web. Creamos una accin nueva en el panel de acciones de este formulario que se va a llamar Guardar, le ponemos un icono identificativo y en el panel de frmulas vamos a elegir Run JavaScript y como cdigo: validar().

De esta forma cuando creemos un nuevo documento noticia en Web y pulsemos en la accin Guardar, antes de guardar el documento comprobar que el campo se cumplen todas las condiciones que se indican el la funcin validar que hemos incluido en el evento JS Header. Evento HTML Body Attributes: Con el siguiente Cdigo HTML: "bgcolor=#FFFFFF text=#000000 leftmargin=3 topmargin=3 marginwidth=3 marginheight=3", establecemos un color de fondo y de texto predeterminado para los documentos creados con este formulario. Los mrgenes a los que queremos ajustar los documentos en la ventana del navegador, se definen en Internet Explorer con leftmargin y topmargin y con marginwidth y marginHeight en Netscape navigator.

Guardamos el formulario pulsando sobre el SmartIcon

y nos situamos en la vista de elementos de diseo Forms.

Situndonos sobre el formulario 1.1.-Formulario NoticiasW y pulsando con el botn derecho del ratn podemos acceder a las propiedades de este elemento de diseo, pulsando en el men que aparece Design Properties, (Ver Figura 5.24.2)

(Figura 5.24.2 Accediendo a las propiedades de los elementos de diseo Formularios) La pantalla que nos aparece es como la siguiente:

Lo ocultamos para Notes y Mobile clients. Hacemos los mismo con el formulario 1.0.-Formulario Noticia, pero este lo ocultamos para Web browsers y para Mobile clients.

Con estas ocultaciones conseguimos que cuando se abra un documento en el cliente Lotus notes utilice el formulario 1.0.Formulario Noticia y que cuando se abra un documento en el cliente Web utilice el formulario 1.1.-Formulario NoticiaW. De esta forma podemos tener un diseo diferente, dependiendo del entorno en el que utilice la aplicacin.

Formulario para visualizar las vistas


Creamos un nuevo formulario cuyo Nombre y Alias sea 3.0.- Formulario Vista | $$ViewTemplateDefault. Este formulario ser el formulario por defecto en el que se muestren todas las vistas en Web. Si quisiramos que alguna vista en particular se mostrara con otro diseo, crearamos otro formulario y lo llamaramos $$ViewTemplate for NombreDeLaVista. Elementos de diseo del formulario de vistas: Creamos una tabla con 3 filas y 6 columnas. Seleccionamos toda la tercera fila y vamos a dejarla en una sola columna, con toda la fila seleccionada, pulsamos en el men, Table / Merge Cells. En esta fila creamos un campo nuevo de tipo Texto-Editable con el nombre $$ViewBody, en este campo se mostrarn cada una de las vistas que seleccionemos en el navegador izquierdo. En la segunda fila / primera columna de la tabla, vamos a escribir el literal <br>, y lo convertimos en cdigo HTML, para ello, seleccionamos el literal y pulsamos en el men, Text / Pass-Thru HTML. Este <br> nos crear un espacio en blanco entre la primera y la segunda columna. En la primera fila vamos a crear 3 zonas activas, un texto calculado y 2 campos: Zonas Activas: Nombre Plegar Imprimir Tipo Action Hotspot con @ Action Hotspot con Javascript Frmula @Command([ViewCollapseAll]) @Command([ViewExpandAll]) window.print()

Desplegar Action Hotspot con @

Cmo crear una Zona activa: En la primera columna escribimos Plegar, seleccionamos todo el texto y pulsamos en el men, Create / Hotspot /Action Hotspot, (Ver Figura 5.25.0)

(Figura 5.25.0 Creando una zona activa) En el panel de frmula escribiremos: @Command([ViewCollapseAll]). Hacemos lo mismo con Desplegar, en la segunda columna, pero la frmula sera: @Command([ViewExpandAll]), (Ver Figura 5.25.1).

(Figura 5.25.1 Escribiendo una frmula en la zona activa)

En la tercera columna escribimos el texto: Imprimir , lo seleccionamos y pulsamos en el men Create / Hotspot /Action Hotspot,

En el panel de frmula seleccionamos en Run: Web y en frmula, JavaScript y cmo frmula ponemos window.print(), (Ver Figura 5.25.2).

(Figura 5.25.2 Escribiendo una frmula JavaScript en la zona activa)

Cmo crear un Texto Calculado: Nombre Volver Tipo Texto Calculado conHTML Frmula "Volver"

Nos situamos en la Cuarta columna, vamos a crear un texto calculado con una frmula JavaScript dentro de un cdigo HTML, para ello pulsamos en el men, Create / Computed Text, (Ver Figura 5.25.3).

(Figura 5.25.3 Creando un texto calculado)

En el panel de frmulas ponemos: "Volver", (Ver Figura 5.25.4).

(Figura 5.25.4 Poniendo una frmula al texto calculado) Campos: En la quinta y sexta columna creamos dos campos de los siguientes tipos y con las siguientes frmulas: Nombre Inicio PWeb Tipo Texto- Computed for display con HTML Texto-Computed for display con HTML Frmula "Inicio" "Brossoft.com"

Una vez hayamos creado todos estos enlaces, nos la primera fila de la tabla ms o menos de la siguiente forma: Por ltimo vamos a crear en este formulario los siguientes campos: Nombre SaveOptions Tipo Texto- Editable Valor por defecto "0"

Este campo es un campo reservado de Lotus Notes, si le ponemos valor 0 nunca se podrn guardar los documentos creados con este formulario. Nuestro formulario es solo para la visualizacin de las vistas, con lo cual para asegurarnos que nunca se puedan crear documentos con este formulario le aadimos este campo con valor 0. Server_Name Texto-Editable Server_Name

Campo de nombre reservado de Lotus Notes, nos devuelve el nombre del servidor en el que est ubicada la base de datos. Path Texto- Computed for display Texto- Computed for display "/"+@WebDbName+"/"

Nos devuelve la ruta de directorios donde se encuentre ubicada la base de datos. NombreVista @ViewTitle

Nos devuelve el nombre de la vista que se muestra en el campo $$ViewBody Estos campos permanecern ocultos tanto para Web como en notes y mobile, ya que los utilizaremos para las frmulas de otros campos o simplemente como configuracin del formulario. Con todos los elementos de diseo que hemos creado, el formulario debera quedarnos ms o menos de la siguiente forma:

Guardamos el formulario pulsando sobre el SmartIcon,

Insertar Hojas de estilo:


Sin nos fijamos en la imagen anterior, vemos al principio del formulario la siguiente lnea: . Este es el cdigo necesario para insertar una hoja de estilos en un formulario, la hoja de estilos que hemos creado se encuentra en la pgina que hemos llamado estilos.css. En el medio de la frmula hay un Computed Value, que se ha creado para calcular la ruta donde se encuentra nuestra

hoja de estilos, en nuestro caso, donde se encuentra la pgina estilos.css, escribimos toda la frmula y situndonos despus del texto, <link ref.=, pulsamos en el men Create / Compute Text, (Ver Figura 5.26.0)

(Figura 5.26.0 Creando un texto calculado)

Como valor, a este texto calculado, le podemos poner: "/"+@WebDbName+"/" o el campo Path que tenemos creado en nuestro formulario. Una vez escrita toda la lnea y creado el Computed Text, seleccionamos toda la lnea y lo convertimos en texto HTML, pulsando en el Men, Text / Pass-Thru HTML, (Ver Figura 5.26.1)

(Figura 5.26.1 Convirtiendo un texto en Cdigo HTML)

Incluir clases de la hoja de estilo a los elementos de diseo:

Ya tenemos la llamada a la hoja de estilos en nuestro formulario, ahora vamos a aplicar sus clases a los diferentes elementos de diseo de los formularios. En el formulario de vistas, vamos a darle estilo a las zonas activas y a la tabla que tenemos: A las zonas activas vamos a ponerle la clase botn. Nos situamos encima del texto Plegar y pulsamos sobre el SmartIcon , para ver las propiedades del Action HotSpot. En la ltima pestaa llamada <HTML>, en la casilla Class escribimos boton, (Ver Imagen 5.27.0)

(Figura 5.27.0 Incluir una clase en una zona activa)

Haremos lo mismo con la zona activa Desplegar y con la zona activa Imprimir. En el resto de acciones que hemos creado en campos, y en el texto calculado, si nos fijamos, en las frmulas, ya hemos incluido la clase boton. Esta es la frmula del texto calculado Volver, que hemos incluido antes en nuestro formulario: "class=boton href=\"#\" onClick=\"history.go(-1)\">Volver". A toda la tabla, vamos a ponerle la clase TABLA, nos cambiar el color y el estilo del borde. Nos situamos dentro de la tabla, en cualquier celda y pulsamos sobre el SmartIcon , para ver sus propiedades. En la ltima pestaa llamada <@>, en la casilla Table HTML Tags / Class, ponemos TABLA, que es como se llama la clase que tenemos en nuestra hoja de estilos.(Ver Figura 5.27.1)

(Figura 5.27.1 Incluir una clase en una tabla)

Si quisiramos darle una clase a una nica celda, la incluiramos en la casilla Cell HTML Tags / Class. Guardamos el formulario pulsando sobre el SmartIcon , y lo cerramos.

Frameset para el cliente Web


Vamos a crear un nuevo Frameset con el nombre 1.00.-NoticiasWeb, con dos marcos, al marco izquierdo que llamaremos Izq, y colocaremos en el, la pgina que contiene el OutLine, 1.0.-Principal y al marco derecho lo llamamos Der, colocaremos en el una vista, por ejemplo la vista 1.1.-Noticias Por Fecha. Incluyendo el marco Der en el target for links in frame en los dos marcos. Nos debe quedar en diseo de la siguiente forma:

Guardamos el frameset pulsando sobre el SmartIcon

, sin cerrarlo.

Ahora vamos a configurar la base de datos para que al abrirla en el cliente Web nos lo muestre. Nos situamos en cualquier parte del conjunto de marcos que tenemos abierto y pulsamos sobre el SmartIcon , nos muestra las propiedades del FrameSet, elegimos que nos muestre las propiedades de la Database, en el desplegable que muestra el triangulito blanco (Ver Figura 5.28.0)

(Figura 5.28.0 Cambiar a las propiedades de la base de datos)

En las propiedades de la base de datos, en la quinta pestaa, cambiamos las siguientes opciones, (Ver Figura 5.28.1). When Opened in a Browser, seleccionamos, Open designated FrameSet. Name: Seleccionamos el Frameset que acabamos de crear: 1.00.-NoticiasWeb.

(Figura 5.28.1 Cambiando las Propiedades de la base de datos) Guardamos el Frameset pulsando sobre el SmartIcon y vamos a visualizamos en Web, pulsamos en el men, Frame /Preview in Web Browser /Internet Explorer, (Ver Figura 5.28.2)

(Figura 5.28.2 Visualizando un conjunto de marcos en un navegador) La pantalla que nos debe salir ser como la siguiente:

En el explorador, probamos a navegar por el OutLine, las acciones de las vistas, abrimos los documentos para comprobar que se visualizan con el formulario noticias para Web, probamos a guardar los documentos y comprobar las frmulas de validacin, creamos una noticia nueva, etc.

Icono de la base de datos Se puede crear un icono de base de datos copindolo y pegndolo desde otra base de datos, pegando un mapa de bits copiado desde una aplicacin de grficos o crendolo en Designer. Si se copia un mapa de bits, el tamao ideal sera de 32 x 32 pxeles. Para cambiar el icono nos situamos en la lista de elementos de diseo, Other /Database Resources. Te puede Selecciona el icono > Botn Derecho > Copiar ir a http://iconos.notesring.com

Ahora abre tu base de datos en Lotus Designer:

1. Otros>Recursos de b. datos 2. Icono

3. Pegar 4. Aceptar.

Documento Acerca de y Documento Uso de


Estos Documentos se encuentran en el listado de elementos de diseo, en la vista, Other / Database Resources. Conviene que todas las bases de datos dispongan de un documento "Acerca de" y otro documento "Uso de" en los que se describan la finalidad y uso de la base de datos.

El

documento

"Acerca

de":

En este documento se describe el objetivo de la base de datos. Se puede configurar la base de datos para que al abrirla nos muestre automticamente el documento "Acerca de, para configurarlo, visualizaramos las propiedades de la base de datos y en la Quinta pestaa When Opened in Notes

Clientseleccionaramos, Open About Database Document. Para acceder a este documento, los usuarios deben seleccionar en el men, Help / About this Database.

El

documento

"Uso

de":

Este documento sirve para dar instrucciones a los usuarios del funcionamiento y uso de los formularios, vistas y navegadores de la base de datos. Para acceder a este documento, los usuarios deben seleccionar , en el men, Help /Using this database.

Você também pode gostar