Seminario de Programacin Web sPlantillas 2 Parte www.velneo.

com

Seminario de Programacin Web 2 Parte

Copyright Velneo 2007

Velneo 2007

Pg 1

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

1. 2. 3.
1. 2. 3.

Intro ............................................................................................................................................... 3 Objetos HTML .............................................................................................................................. 3 Demostracin Prctica 1 .......................................................................................................... 3

Pgina HTML.................................................................................................................................................... 4 Componente HTML ......................................................................................................................................... 4 Editor HTML ..................................................................................................................................................... 5

4. 5. 6. 7. 8. 9. 10. 11.

Pasarela CGI ................................................................................................................................ 7 vServer: Configurar Servidor Web ........................................................................................ 8 Configuracin del servidor ...................................................................................................... 8 Configuracin de los dominios web ...................................................................................... 8 Ejemplo de programacin web con vGestion..................................................................... 9 Demostracin prctica 2 .......................................................................................................... 9 vPost y vUpload .................................................................................................................... 12 Demostracin prctica 3 .................................................................................................... 12

Velneo 2007

Pg 2

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

1. Intro
vServer: Servicio http

vServer incluye un servicio de HTTP, adems de ser servidor de Aplicaciones, servidor de disco y servidor de mensajera. El servicio puede ser iniciado en el puerto 80 o en un puerto entre el 81 y el 89 que nosotros elijamos. vServer sirve al mismo tiempo aplicaciones y HTTP, siendo el acceso desde HTTP en tiempo real, por lo que las modificaciones realizadas desde la aplicacin sern accesibles al instante a travs de HTTP y viceversa. La generacin de pginas web es dinmica, por cuanto que usa la base de datos para generar esas pginas y son los objetos visuales relativos a la web los que usaremos para explotar los datos de nuestra base de datos, aunque tambin puede servir contenido esttico. Navegadores / Web Browsers

Las pginas HTML generadas por vServer son compatibles con cualquier navegador o web browser del mercado, adems del navegador propio que incluye iRunner. HTML / Javascript / AJAX / Cookies

Las pginas HTML que sirve vServer, adems de cdigo HTML, admiten el uso de pginas con scripts como Javascript, el uso de tecnologas como AJAX, adems de permitir usar cookies, etc.

2. Objetos HTML
Los objetos visuales que podemos usar en nuestra web son los siguientes: Pgina HTML Componente HTML Bsquedas Procesos

Los objetos Pgina HTML, Componente HTML y las Bsquedas pueden hacer uso de la estructura de datos de nuestra aplicacin y podrn mostrar los datos de sta. El objeto Proceso, adems, nos permite hacer uso de cualquier otro objeto visual y de la estructura de datos de nuestra base de datos para generar pginas HTML.

3. Demostracin Prctica 1
Crear Pgina HTML a partir de rejilla

Velneo 2007

Pg 3

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

Crear Componente HTML a partir de rejilla Crear Proceso que retorne HTML generado por el componente Editor HTML 1. Pgina HTML

Este objeto nos permite generar una pgina HTML. Propiedades del objeto o Tabla de datos: tabla de datos a la que vamos a asociar la pgina Html. o Ttulo: ttulo de la pgina. o Imagen de fondo: si queremos incluir alguna imagen de fondo en la pgina hemos de especificarlo en este parmetro. o Colores: permite especificar los colores de fondo y de texto de los enlaces, estado normal, cuando ya han sido ejecutados y cuando son pulsados. Todos los colores pueden ser marcados como por defecto o no en la pgina.

Una vez especificadas las propiedades del Generador Html, al entrar en el Editor de Pginas Html, ya estarn creadas las secciones de cabecera y de cuerpo de la pgina con los atributos especificados. Dnde se usa: o Bsqueda

Podemos llamar a la pgina directamente, en ese caso no estar asociada a una tabla, ya que no podr mostrar ningn dato. Tambin podemos asociar una pgina Html a una Bsqueda, lo que permitir presentar el resultado de sta en una pgina web, presentando la informacin de forma dinmica. o Nombre.pag: INDEX.PAG (Pgina de inicio por defecto).

Crear una Pgina HTML a partir de una Rejilla:

Si seleccionamos una rejilla de nuestro mapa, pulsando en la opcin de men Objetos/Crear pgina html del objeto nos generar un objeto Pgina Html con una tabla de las mismas caractersticas que la que hemos seleccionado: mismos campos, justificacin de los mismos, colores de las columnas, etc. Este es un ejemplo que podemos usar para conocer cmo se hace a la hora de mostrar datos de nuestra base de datos en una pgina web. 2. Componente HTML Este objeto nos permite crear trozos de cdigo html o pginas completas que posteriormente podrn ser utilizados para generar pginas desde procesos a travs de la instruccin Html: Ejecutar componente. Propiedades del objeto o Nombre: nombre que tendr el componente.

Velneo 2007

Pg 4

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

o o

Tabla de datos: en la lista desplegable seleccionaremos la tabla de datos de origen del mismo; si no va a estar asociado a ninguna tabla seleccionaremos .Ninguna. Parmetros: este objeto permite definir parmetros que podremos usar dentro del cdigo Html que escribamos. Dichos parmetros sern resueltos en un proceso a travs de la instruccin Html: Ejecutar componente. Los parmetros han de ir separados por comas (,). Ejemplo: param1, param2, param3. El editor de cdigo html es el mismo que el de las pginas html.

Dnde se usa: o Proceso Crear un componente HTML a partir de una rejilla

Si seleccionamos una rejilla de nuestro mapa, pulsando en la opcin de men Objetos/Crear componente html del objeto nos generar un objeto Pgina Html con una tabla de las mismas caractersticas que la que hemos seleccionado: mismos campos, justificacin de los mismos, colores de las columnas, etc. 3. Editor HTML El Editor de Proyectos de Velneo incluye un Editor de Pginas Html. Para abrirlo basta con situarse sobre un objeto Pgina Html o Componente Html en el panel derecho del Editor de Proyectos y pulsar la tecla Intro o hacer doble clic con el botn derecho del ratn sobre l. En este editor podemos, por un lado, editar cdigo Html puro para la presentacin de pginas web estticas, pero, adems, podemos usar comandos de Velneo, denominados AVP en el editor, lo que nos permitir presentar pginas web dinmicas. Opciones del editor o Pegar desde: para importar un fichero Html. Se abrir la ventana de seleccin de fichero en la que tendremos que seleccionar el archivo Html a importar. Una vez seleccionado, aparecer el cdigo fuente de la pgina en el Editor Html. o Insertar color: aparecer la ventana para la seleccin de colores, bastar con que seleccionemos el que queremos usar y el cdigo hexadecimal del mismo ser insertado en el punto del texto donde estuviese situado el cursor. o Insertar archivo: al pulsar este botn se presentar el cuadro de dilogo de seleccin ficheros e insertar la senda del fichero. o Insertar fuente: al pulsar este botn se presentar el cuadro de dilogo de seleccin de fuentes e insertar el cdigo fuente del tipo de fuente y atributos seleccionados. o Insertar dibujo: incluye el cdigo Html para la insercin de una imagen en la pgina web. Cuando ejecutamos esta opcin se presenta un cuadro de dilogo en el que podemos seleccionar tanto una imagen Desde Archivo, almacenada en un archivo externo al proyecto, como Desde Campo Dibujo, una imagen contenida en un campo de tipo Objeto dibujo de la tabla de datos asociada a la pgina Html o de cualquiera de sus tablas maestras. En funcin del tipo, elegiremos un control u otro para rellenar, y pulsamos el botn Examinar. o Insertar tabla html: genera en la pgina Html el cdigo correspondiente a una tabla con el nmero de filas, columnas y tamao del borde que especifiquemos. o Inicio y fin de repeticin : insertan un comando especfico de Velneo (comandos AVP); lo que se encuentre entre esta marca y la marca de fin de trozo a repetir ser repetido por cada

Velneo 2007

Pg 5

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

registro resultante de la bsqueda a la que hayamos asociado la pgina web, por ejemplo, presentar campos, variables, etc. Paginador: es un comando especfico de Velneo (comandos AVP) que pegar en la pgina, en el caso de que el resultado de una bsqueda ocupe ms de una, un paginador para facilitar al usuario el moverse entre las pginas. Por defecto, el nmero de tem que se presentar por pgina es de 20, pero podremos cambiarlo. Campo: comando especfico de Velneo (comandos AVP). Nos permite insertar un campo en la pgina Html. Cuando insertamos un campo en una pgina html, ste es insertado de la forma siguiente: #AVP%NOMBRE%, donde la cadena inicial #AVP nos indica que se trata de un comando propio de Velneo. Variable global: comando especfico de Velneo (comandos AVP). Nos permite insertar una variable global en la pgina Html. Cuando insertamos una variable global en una pgina html, se hace de la forma siguiente: #AVP$PALABRAS$. la cadena inicial #AVP indica que se trata de un comando propio de Velneo. Variable local: solamente estar activo cuando el objeto editado sea un Componente Html en el que hayamos definido parmetros. Para insertar un parmetro concreto en las propiedades del componente, simplemente pulsaremos este botn y seleccionaremos el que corresponda, con lo que ste ser situado en el punto del editor donde est el cursor. En el editor ser presentado como #AVPa. Insertar especial: nos permite insertar en el cdigo HTML otros comandos especficos de Velneo (comandos AVP) que insertan las siguientes variables: Senda completa de la aplicacin: inserta una variable que en tiempo de ejecucin ser sustituida por la senda de la aplicacin que se est ejecutando. Al insertar esta variable, el cdigo que Velneo inserta es: #AVP!SERVER!/cgi-vel/#AVP!APP!/, a lo que deber preceder el texto Http://; es decir: HTTP://#AVP!SERVER!/cgivel/#AVP!APP!/ Aplicacin: inserta una variable que en tiempo de ejecucin devolver el nombre de la aplicacin que se est ejecutando. Al insertar esta variable, el cdigo que Velneo inserta es: #AVP!APP! (este comando AVP tambin debera ir precedido de la cadena HTTP://). Server: inserta una variable que en tiempo de ejecucin ser sustituida por la IP del servidor donde est ejecutndose la aplicacin. Al insertar esta variable, el cdigo que Velneo inserta es: #AVP!SERVER! (este comando AVP tambin debera ir precedido de la cadena HTTP://). Insertar bsqueda: inserta en el cdigo Html el identificador de una bsqueda. Para que podamos seleccionar una bsqueda, sta debe tener asociada en sus propiedades una Pgina Html que ser en la que se presenten los datos. sta puede ser la misma desde la que se llama. Al seleccionar la bsqueda, sta ser escrita en el editor de la forma siguiente: IDENTIFICADOR-BUSQUEDA.BUS. La extensin .BUS es la extensin identificativa de una bsqueda. Insertar proceso: inserta en el cdigo Html el identificador de un proceso. Para usar un proceso en una pgina web, debe tener como origen ninguno y activado el estilo accesible web. Al seleccionar el proceso ste aparecer escrito en las fuentes de la forma siguiente: ID_PROCESO.PRO. La extensin .PRO es la extensin identificativa de los procesos.

Buscar, sustituir, Buscar siguiente/anterior, Toggle bookmark, Clear Bookmark, Next Bookmark: Nos permiten buscar una cadena de texto en el cdigo Html de la pgina, y poner
marcas de referencia en nuestro cdigo.

Velneo 2007

Pg 6

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

Opciones: podemos personalizar el entorno de trabajo del Editor Html con ayuda de este

botn. Podremos configurar lo siguiente: Caracteres por tab: configuramos aqu el nmero de caracteres que ocupar cada tabulacin. Auto indentacin: cada nueva lnea comenzar con el mismo sangrado que la lnea anterior, facilitndonos la edicin del texto. Colorear sintaxis: con esta opcin activada podremos especificar un color diferente para presentar las distintas partes del cdigo. Podemos definir un color para la fuente por defecto, para los comandos propios de Velneo: AVP, las etiquetas (tags), el color de la fuente de los atributos, las cadenas de texto, los nmeros y las constantes, adems de especificar el color de los comentarios. Fuente: para cambiar la fuente del Editor Html.

4. Pasarela CGI
Sintaxis de la pasarela CGI

Si queremos ejecutar una bsqueda, un proceso o una pgina Html de Velneo desde una pgina web, la sintaxis de la pasarela CGI debe ser: http://DOMINIO/CGI-VEL/ID_PROYECTO/ID_OBJETO.EXT Donde: o o DOMINIO: del servidor donde se encuentre instalado el vServer de Velneo. CGI-VEL: directorio virtual donde se buscarn las pginas, bsquedas y procesos ubicados en el proyecto de Velneo. No es necesario que exista, pues al indicarse el nombre del proyecto de Velneo, el vServer ya sabe dnde buscar los objetos. ID_PROYECTO: nombre del proyecto de Velneo (nombre del fichero .MAP) o alias que le hayamos asignado al mismo en el vServer. ID_OBJETO.EXT: identificador del objeto a ejecutar o del fichero a descargar.

o o

Adems de objetos propios de la aplicacin, podemos llamar a objetos externos: dibujos, pginas Html estticas externas, etc. Objetos servidos

La pasarela CGI est preparada para servir objetos de Velneo (Bsqueda, Proceso o Pgina Html), que hemos de ubicar en el proyecto de la aplicacin. En este caso, en funcin del objeto a disparar, hemos de especificar su identificador seguido de una extensin identificativa del tipo de objeto que se trate: o o o Bsqueda: ID_BUSQUEDA.BUS Proceso: ID_PROCESO.PRO Pgina Html: ID_PAGINA.PAG

Sintaxis de variables

Velneo 2007

Pg 7

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

Si debemos resolver ms variables globales, la sintaxis de la pasarela CGI sera: o http://dominio/cgivel/ID_Aplicacion/ID_Busqueda.bus?ID_Variable1=dato1&ID_Variable2=dato2...

5. vServer: Configurar Servidor Web

Configuracin del servidor (Editar/Configuracin, Pestaa HTTP) Configuracin de los dominios web (Editar/Dominios Web)

6. Configuracin del servidor

Configuracin del servidor (Editar/Configuracin, Pestaa HTTP) o Directorio de la Web: directorio donde se encuentran las pginas web externas a los proyectos de Velzquez Visual. o Archivo Html por defecto: pgina web que se presentar por defecto cuando se conecte desde un navegador de Internet con el Servidor. sta debe ser un archivo HTML, no puede ser una pgina web interna de una aplicacin Velzquez Visual. Si se especifica la pgina Html en este parmetro, para acceder a ella desde cualquier navegador de Internet simplemente bastar con escribir http:// seguido de la IP o el nombre de Servidor. o % Calidad de imgenes: Velzquez Visual guarda las imgenes al 100% de calidad, pero con esta opcin podemos indicar al Motor a qu calidad mostrar las imgenes cuando las tenga que servir. o Puerto de escucha: el puerto estndar para la escucha para HTTP es el 80, y ste es el que se aplica por defecto al servidor HTTP. Si queremos modificar el nmero de puerto debemos especificarlo en este parmetro. No es posible modificar el puerto de escucha si el Servidor HTTP est arrancado; debemos pararlo previamente. Si hemos cambiado el nmero de puerto del Servidor HTTP, para poder acceder desde un explorador web a las pginas del mismo, en la especificacin de la URL se deber incluir el nmero de puerto a travs del cual debe conectarse precedido de dos puntos (:). Por ejemplo, se ha cambiado el nmero de puerto HTTP por el 81; para que un usuario pueda conectarse con este Servidor a travs de un explorador web, en la barra de direcciones del explorador tendra que escribir: http://IP_SERVIDOR:81/ o Reservar puesto vatp para la web: los enganches va web no consumen puestos concurrentes, pero, si se ejecutan procesos va web, es necesario que exista un enganche libre; si es el caso, puede activar esta opcin para que el servidor siempre deje un enganche libre.

7. Configuracin de los dominios web

Si un Servidor dispone del Servidor HTTP puede servir las Pginas HTML que se encuentren dentro del directorio definido en la pestaa HTTP del cuadro de dilogo Configuracin que aparece al seleccionar la opcin de men Editar/Configuracin (o bien pulsando el botn Configuracin de la barra de herramientas).

Velneo 2007

Pg 8

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

Adicionalmente, dicho servidor HTTP puede gestionar ms de un dominio web. Para definir los dominios seleccionamos la opcin de men Editar/Dominios Web. Configuracin de los dominios web (Editar/Dominios Web) o Dominio: nombre del dominio. o Directorio de la Web: directorio de la web por defecto para ese dominio. Podemos seleccionar el que queramos pulsando el botn Examinar. o Archivo Html por defecto: nombre del archivo html que presentaremos por defecto para ese dominio.

8. Ejemplo de programacin web con vGestion

Pgina HTML formulario de bsqueda Pgina HTML Listado de facturas con paginador Componente HTML Ficha de factura

9. Demostracin prctica 2
Pgina HTML formulario de bsqueda: Bsqueda de facturas entre fechas Pgina HTML resultado de la bsqueda: Listado de facturas con paginador Componente HTML generado con un proceso: Ficha de factura 9.1 Crear pgina INDEX.PAG En la pgina inicial tenemos los enlaces a las distintas pginas que vamos a crear. En primer lugar construiremos la bsqueda de facturas que es el primer enlace. Vemos que usaremos el objeto Bsqueda para generar una Pgina HTML que estar asociada al objeto bsqueda. Esta pgina permitir seleccionar los clientes para realizar la bsqueda. El resto de enlaces, se vern luego en la segunda demostracin prctica referida al uso de vUpload y vPost. 9.2 Crear bsqueda W-ENTID-BA-CLTE.bus Es una bsqueda en la tabla ENTIDADES de todas aquellas que son clientes, usando para ello el ndice NOM FIS-CLTE. Debemos asociarle una pgina HTML que ser la que presente el resultado de la bsqueda de cliente y contenga el formulario de bsqueda de facturas. 9.3 Crear Pgina HTML ENTIDAD-BA.pag El resultado de la bsqueda de Entidades de tipo Cliente se presenta con la ayuda de las etiquetas <AVPR> </AVPR>, dentro de una etiqueta SELECT para permitir seleccionar el cliente de cara a la bsqueda. La propiedad Value ser el cdigo de la entidad que usaremos en la bsqueda y los datos que presentaremos sern los campos Nombre fiscal y CIF.

Velneo 2007

Pg 9

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

Las etiquetas <NOAVPR></NOAVPR> se usan para mostrar un contenido en el caso de que la bsqueda no devuelva ningn registro. En este caso lo usaremos para mostrar el texto No hay clientes. Vamos a construir un formulario de bsqueda de facturas entre fechas de un cliente. El ACTION del formulario ser la bsqueda de facturas (W-VTFAC-GE.bus) que tenemos que hacer. Para realizar la bsqueda necesitaremos las variables: - W_CODIGO: Esta variable la usaremos para todas las bsquedas por cdigo. La creamos de tipo alfabtico y longitud un byte, porque todas las variables que vienen va web deben tratarse como alfabticas. Adems, no es necesario definir la longitud ya que Velneo se encarga de darle la longitud necesaria segn sea el tamao del dato que venga. Debemos marcar la opcin Accesible web para que los usuarios puedan modificarlas desde una pgina HTML. - W_BUS_FCH_DESDE y W_BUS_FCH_HASTA: Usaremos estas variables para guardar las fechas de inicio y fin de la bsqueda. Las crearemos iguales a la variable cdigo. La razn de usar en el nombre de las variables el guin bajo en vez del guin se debe a que Javascript a veces tiene problemas para distinguir los guiones en las etiquetas y los confunde con el signo menos, realizando restas con los elementos. Podemos ver cmo usamos scripts de Javascript para seleccionar el foco por defecto posicionado en control de edicin del cliente y para controlar que se haya introducido un cliente para realizar la bsqueda. Hemos de crear ahora la bsqueda W-VTFAC-GE.bus. 9.4 Crear la bsqueda W-VTFAC-GE.bus Creamos la bsqueda a partir de la bsqueda VTFAC-GE.bus que encontramos entre los objetos de la tabla Facturas de venta. nicamente la modificaremos para usar las variables con acceso web que hemos creado. El ndice FCH se usar para buscar entre lmites y deberemos modificar tambin las condiciones de activo para usarlo. Tambin modificaremos el contenido inicial del componente ENTID-BA-CLTE para usar la variable W_CODIGO y la condicin de activo usando fValor( $W_CODIGO$ ), para conseguir el valor numrico de la variable que ha venido como alfabtica de la pasarela cgi. 9.5 Crear la pgina FAC-VTFAC-GE que mostrar el listado de facturas del cliente La pgina la crearemos a partir de de la rejilla de Facturas de un cliente (VTFAC-GE-CLTE). Hemos modificado el ttulo para que aparezca el nombre del cliente, y usamos de nuevo las etiquetas <NOAVPR></NOAVPR> para mostrar el texto No se han encontrado facturas en el caso de que la bsqueda no devuelva ningn registro. Adems, hemos introducido la etiqueta <AVPG> que genera de forma automtica un paginador. Hemos parametrizado la llamada a esta bsqueda con el uso del parmetro _e, que permite definir el nmero de elementos por pgina. Esto lo hemos hecho en el formulario por medio de un Input hidden.

Velneo 2007

Pg 10

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

Por ltimo, hemos aadido un enlace en la columna de la serie de la factura: <A href="W-FAC-VTFA-GE.pro?W_CODIGO=#AVP%CODIGO%"> Este enlace es el que nos permitir ver la ficha de una factura. Vemos que se trata de un proceso al que le pasamos a travs de la pasarela CGI la variable W_CODIGO con el valor del cdigo de la factura que queremos ver. Esta variable se alimenta de forma dinmica ya que su valor se asigna en la generacin de la pgina. 9.6 Creacin del proceso W-FAC-VTFA-GE El proceso no tendr origen. No tienen sentido los procesos llamados por pasarela CGI con origen. Tendremos que marcar la opcin Accesible Web, adems de Privado. Comienza el proceso inicializando las variables locales que usaremos para componer el cdigo HTML que retornaremos al final de proceso. Cargamos lista para leer el registro que queremos mostrar, convirtiendo a su valor numrico el contenido de la variable W_CODIGO. Comenzamos ejecutando un componente, la cabecera del cdigo que vamos a mostrar. Para ello usamos un Componente HTML, denominado FAC-VTFAC-GE-CAB, con el que generaremos la cabecera de la factura, y al que le hemos asignado la tabla VTFAC-GE, ya que mostrar datos de esta tabla. El contenido generado por los componentes lo iremos guardando en la variable local 'chtml' y que iremos acumulando en la variable local 'html' que ser la que retornemos al final del proceso. 9.7 Cabecera de la factura FAC-VTFAC-GE-CAB Para mostrar la cabecera de la factura usamos el cdigo HTML que tenamos para mostar el listado de facturas. Para crear el cdigo HTML que mostrar la primera fila de las lineas de la factura usaremos la rejilla MOVALGE-VTFAC-GE. Nos quedaremos con la cabecera de la tabla. El cdigo de las lineas lo usaremos ms adelante. Le hemos aadido la columna % Total, que nos permitir ver cmo se usan los parmetros en los componentes HTML. 9.8 Lneas de la factura: Componentes HTML FAC-MOVAL-GE-IMPAR, FAC-MOVAL-GE-PAR Continuando con el proceso, cargamos histrico por el ndice VTFAC-GE que nos devuelve las lneas de la factura que estamos mostrando. Vemos que al recorrer las lneas calculamos el porcentaje del importe de la lnea sobre el total. Este valor calculado en el momento lo pasaremos al componente HTML como parmetro, para que lo pueda incluir en el cdigo.

Velneo 2007

Pg 11

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

Adems, en funcin de si la lnea es par o impar, usaremos un componente HTML u otro, para que la configuracin de color de la lnea sea distinta y crear el rayado de una rejilla. Los componentes HTML FAC-MOVAL-GE-IMPAR y FAC-MOVAL-GE-IMPAR incluyen el cdigo HTML de las lneas de la rejilla MOVAL-GE-VTFAC-GE anterior. nicamente cambia de una a otra la configuracin de color de las lneas. Les aadimos a ambos la columna que muestr el porcentaje sobre el total calculado en el proceso y que tenemos accesible en forma de variable local en el editor HTML. 9.9 Pie de la factura FAC-VTFAC-GE-PIE nicamente nos queda por cerrar la pgina HTML que nos mostar la factura. En este componente cerramos la tabla y la pgina HTML que abrimos en la cabecera. El proceso, finalmente, usa la instruccin de proceso Aadir retorno texto que ser la que devuelva el contenido HTML al navegador. 9.10 Conclusin

Hemos creado entonces un sitio web en el que podemos realizar una bsqueda de facturas entre fechas de un cliente y mostrar el listado de facturas, usando para ello un objeto Bsqueda y una Pgina HTML. Para mostrar la ficha de una factura, hemos usado un proceso y varios Componentes HTML, para formar la cabecera, las lneas y el pie de una factura. Para la configuracin de colores, tamaos, fuentes, etc., es ms conveniente el uso de hojas de estilo, ya que permite modificar esta configuracin sin necesidad de tocar el proyecto.

10. vPost y vUpload

Programacin e integracin en aplicaciones

Veremos cmo integrar en nuestra aplicacin vPost y vUpload de forma sencilla, usndolo para un formulario de alta de artculos muy simple con la ayuda de vPost, y para permitir subir imgenes que asignar a los artculos con ayuda de vUpload. Vpost nos permitir aadir comentarios al artculo en el alta de ste. vUpload nos permitir asignarle una imagen al artculo que hemos creado. Integracin en vWeb

Veremos cmo estn integrados vPost y vUpload de tal forma que su uso es dinmico y es posible configurar cmo se tratarn los elementos remitidos a travs de ambos vPlugins.

11. Demostracin prctica 3

Velneo 2007

Pg 12

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

11.1

Alta de artculos con vPost

Para realizar el alta de artculos, usaremos el vPlugin vPost. Para ello, hemos de ir al Almacn de Objetos y seleccionar el vPlugin vPost. La tabla REGIS-PO la asignaremos a la tabla ARTIC-GE que es sobre la que realizaremos el alta de artculos. Entraremos a configurar los campos, importando o asignando aquellos que queramos usar. En principio no es necesario ningn campo, pero si asignaremos TEXTAREA al campo Comentarios, que ser el que modifiquemos con ayuda de vPost. Una vez configurado, finalizaremos. Eliminamos los elementos trados que sobran, como la carpeta de objetos visuales de la tabla ARTIC-GE, y revisaremos los objetos repetidos como la funcin EXTRAE-DATO(). 11.2 Adaptacin de objetos de vPost

El siguiente paso es la adaptacin de los objetos de vPost, debemos modificar dos objetos: VPOST-ALTA.pag: Este objeto Pgina HTML es el formulario de alta. Vamos a quedarnos con los campos Nombre y Textarea, que usaremos crear un artculo asignndole un nombre y componiendo un comentario. >>PROCESAR-VPOST: Debemos modificar la funcin remota para que trate nicamente los dos campos que vamos a modificar (Nombre y Textarea que ser Comentario). El uso de vPost es dinmico, es decir, podemos crear en el formulario tantos campos como queramos, ya que en la funcin remota obtendremos todos estos campos en una cadena XML que podemos tratar y usar para dar de alta o modificar registros, tal y como vemos que est programado. Nos queda por ltimo incluir el proceso ONINIT-MAP-SERVER-VPOST en el proceso inicial ONINIT-MAPSERVER de nuestra aplicacin. Aprovechando para configurar desde el proceso la variable VPOST-SERIVDORIP-EXT con el dominio de nuestro servidor. Con esto, ya tenemos preparado vPost para dar de alta artculos. La llamada la hemos incluido en la pgina INDEX.PAG. Para comprobar cmo damos de alta los artculos, vamos probarlo y ver a travs de VATP cmo se generan los registros. 11.3 Alta de imgenes para artculos con vUpload

Para realizar el alta imgenes de artculos, usaremos el vPlugin vUpload. Para ello, hemos de ir al Almacn de Objetos y seleccionar vUpload de la carpeta Templates/vPlugins. La tabla FICHER-UP la asignaremos a la tabla ARTIC-GE que es sobre la que realizaremos el alta de imgenes de artculos.

Velneo 2007

Pg 13

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

Entraremos a configurar los campos, importando o asignando aquellos que queramos usar. En principio no es necesario ningn campo, pero si queremos guardar la senda del fichero podemos usar el campo SENDA que viene en el vPlugin. Por defecto, el vPlugin est preparado para dar de alta un registro con la SENDA del fichero subido. Vamos a modificarlo para que lo que haga sea importar el dibujo en el registro correspondiente. Una vez configurado, finalizaremos. Eliminamos los elementos trados que sobran, como la carpeta de objetos visuales de la tabla ARTIC-GE, y revisaremos los objetos repetidos como la funcin EXTRAE-DATO() y EXTRAE-CADENA(). 11.2 Adaptacin de objetos de vUpload

El siguiente paso es la adaptacin de los objetos de vUpload, debemos modificar nicamente un objeto, la funcin remota: >>VUPLOAD-FICHER-UP-ALTA: Debemos modificar la funcin remota para que cargue el registro correspondiente usando el cdigo obtenido de la variable local 'Referencia' e importando el dibujo subido y cuya senda podemos configurar con ayuda del parmetro 'Senda' obtenido desde la funcin. Estos valores los obtenemos del formulario de la pgina VUPLOAD.pag El uso de vPost es vUpload, es decir, podemos crear un formulario para subir ficheros en el que podamos indicarle adems el tratamiento que debemos dar al fichero, modificando para ello la funcin remota que procesa el fichero recibido. Para ello, podemos usar la variable 'Referencia' en la que podemos incluir toda la informacin que queramos usando un separador. En este caso, nicamente pasaremos el cdigo del artculo que hemos de modificar. 11.3 Listado de artculos

Pero para ello debemos partir de un listado de artculos o una ficha de un artculo. Vamos a construir entonces una pgina para mostrar todos los artculos y llamaremos al formulario de alta de imagnes desde ste. Usaremos la bsqueda ARTIC-GE-AVANZADA que copiaremos para crear ARTIC-GE-AVANZADA, y crearemos una Pgina HTML a partir de la rejilla ARTIC-GE-CON-FOTO que asignaremos a la bsqueda. Modificamos la Pgina HTML introduciendo el enlace siguiente: <A href="VUPLOAD.PAG?VUPLOAD-REF-FIC=#AVP$VUPLOAD-REF-FIC$">#AVP%NOMBRE%</A> De esta forma llamamos a la pgina VUPLOAD.pag que es el formulario para subir imgenes, pasndole el valor de referencia en la variable VUPLOAD-REF-FIC y que contendr el cdigo del artculo cuya imagen vamos a subir. Este valor lo recibir la funcin remota para dar de alta la imagen en el artculo. 11.4 ltimas configuraciones

Velneo 2007

Pg 14

Seminario de Programacin Web sPlantillas 2 Parte www.velneo.com

Nos queda por ltimo incluir el proceso ONINIT-MAP-SERVER-VUPLOAD en el proceso inicial ONINIT-MAPSERVER de nuestra aplicacin. Aprovechando para configurar desde el proceso la variable VPOST-SERIVDORIP-EXT con el dominio de nuestro servidor. Con esto, ya tenemos preparado vUpload para dar de alta imgenes artculos. Para comprobar cmo damos de alta imgenes para los artculos, vamos probarlo y ver a travs de VATP cmo se generan los registros, y se pueden visualizar a travs de la web tambin.

Velneo 2007

Pg 15