Auto-Formación WEBDEV - 21

WEBDEV 21 |1
WEBDEV 21
Documentación Versión 21 (2) -1215
Visite regularmente la página web www.pcsoft.fr, espacio actualizado para ver si hay actualizaciones disponibles.
Dirección de Soporte técnico gratuito: supportgratuit@pcsoft.fr
Consejo: Para recibir directamente las actualizaciones provisionales y consejos de uso, abónese a LST (revista
trimestral + DVD), en francés.
Esta documentación no es contractual. PC SOFT se reserva el derecho de modificar o borrar cualquier tema tratado en
este documento.
Todos los nombres de productos y otras marcas mencionadas aquí son marcas comerciales registradas por sus
respectivos propietarios.© PC SOFT 2015: Queda prohibida la reproducción total o parcial de este material en
cualquier formato que pueda llevarse a cabo sin el permiso expreso del PC SOFT.
WEBDEV 21 |2
WEBDEV 21 |3
Contenido
Introducción ....................................................................................................................................................... 14
Preliminares .................................................................................................................................................... 14
Presentación del curso de autoformación. ......................................................................................................... 14
¿Cómo acceder a la ayuda en línea? ................................................................................................................. 14
Para lanzar directamente la ayuda en línea desde el producto: ........................................................................ 16
Leyenda de los símbolos .................................................................................................................................. 16
Si ya conoce WEBDEV 20 … ............................................................................................................................. 16
¿Qué puedo hacer con WEBDEV?...................................................................................................................... 16
Lección 1.1. Descubra WEBDEV ........................................................................................................................... 19
Lo que va a aprender en esta lección… ............................................................................................................. 19
Presentación ................................................................................................................................................... 20
Lanzamiento de WEBDEV ................................................................................................................................. 20
Entorno de desarrollo ....................................................................................................................................... 20
El editor ....................................................................................................................................................... 20
La barra de menú (cinta) en detalle ............................................................................................................... 21
WLangage ....................................................................................................................................................... 22
Lección 1.2. El desarrollo WEB y WEBDEV ............................................................................................................ 23
Principio Navegador/Servidor............................................................................................................................ 24
¿Cómo funciona? .......................................................................................................................................... 24
¿Y en WEBDEV? ........................................................................................................................................... 24
Intranet/Extranet/Internet................................................................................................................................ 27
Principios ..................................................................................................................................................... 27
¿Y en WEBDEV? (Clásico/AWP, PHP, Estático) ................................................................................................ 27
El método para crear un sitio............................................................................................................................ 28
Lección 1.3. Mis primeras páginas ........................................................................................................................ 30
Presentación ................................................................................................................................................... 31
Apertura del proyecto ................................................................................................................................... 31
Creación de una página “formulario” ................................................................................................................. 31
Creación de la página ................................................................................................................................... 31
Creación de campos ..................................................................................................................................... 32
Mejoras de la página .................................................................................................................................... 36
Prueba de la página...................................................................................................................................... 38
Guardar los datos en un fichero de datos. ......................................................................................................... 38
Creación del fichero de datos ........................................................................................................................ 38
Guardar los datos. ........................................................................................................................................ 40
Visualizar los datos introducidos .................................................................................................................... 41
Añadir controles de entrada ............................................................................................................................. 42
WEBDEV 21 |4
Introducción obligatoria ................................................................................................................................ 42
Verificación de la contraseña. ........................................................................................................................ 42
Búsqueda simple en una base de datos ............................................................................................................. 43
Creación de los campos ................................................................................................................................ 44
Conclusión ...................................................................................................................................................... 46
Presentación del proyecto realizado en este capítulo .......................................................................................... 49
Lección 2.2. WebDev y las bases de datos ............................................................................................................ 50
Presentación ................................................................................................................................................... 51
HFSQL ............................................................................................................................................................ 51
Los distintos modos de acceso a las bases de datos ........................................................................................... 51
Acceso Nativo .............................................................................................................................................. 51
Acceso ODBC directo .................................................................................................................................... 52
Acceso OLE DB............................................................................................................................................. 52
Acceso ODBC vía OLE DB .............................................................................................................................. 52
Lección 2.3. Proyecto y análisis ............................................................................................................................ 53
Presentación ................................................................................................................................................... 54
Creación del proyecto ...................................................................................................................................... 54
Creación del análisis ........................................................................................................................................ 55
Creación de la descripción del fichero de datos .................................................................................................. 56
Creación de un fichero de datos: Uso de un fichero predefinido. ..................................................................... 57
Creación de un fichero de datos: creación del fichero y los campos ................................................................. 58
Importación de un fichero CSV ...................................................................................................................... 61
Importación directa de ficheros de datos existentes ....................................................................................... 64
Creación de las relaciones ................................................................................................................................ 65
Generación del análisis ..................................................................................................................................... 70
Lección 3.1. Presentación .................................................................................................................................... 73
Presentación del sitio realizado en este capítulo ................................................................................................. 74
Lección 3.2. Principio de visualización de un sitio WEBDEV dinámico ...................................................................... 76
Principio de visualización de un sitio WEBDEV dinámico ..................................................................................... 77
La sesión WEBDEV ....................................................................................................................................... 77
Los contextos de la página ............................................................................................................................ 77
Programación ............................................................................................................................................... 77
Lección 3.3. Páginas de adición y modificación...................................................................................................... 79
WEBDEV 21 |5
Presentación ................................................................................................................................................... 80
Creación de una página dinámica para listar los productos ................................................................................. 80
Creación de una página utilizando un modelo................................................................................................. 80
Creación de los campos ................................................................................................................................ 82
Modificar productos mediante una página dinámica “Ficha de producto” ............................................................. 86
¿Qué deberá hacer la página? ....................................................................................................................... 87
Creación de los campos de entrada ............................................................................................................... 87
Mostrar los datos en la página....................................................................................................................... 89
Creación de los botones ................................................................................................................................ 90
Añadir un nuevo producto mediante la página “Ficha del producto” .................................................................... 96
Lección 4.1. Presentación .................................................................................................................................. 101
Lo que va a aprender en esta lección… ........................................................................................................... 101
Presentación del sitio realizado en este capítulo ............................................................................................... 102
Lección 4.2. Principio de visualización de un sitio AWP ........................................................................................ 103
Principio de visualización de un sitio WEBDEV AWP .......................................................................................... 104
¿Qué es una página AWP? .......................................................................................................................... 104
Funcionamiento de los sitios AWP ............................................................................................................... 104
¿Cómo compartir las informaciones (valores) entre dos páginas AWP?........................................................... 106
Lección 4.3. Creación de páginas AWP ............................................................................................................... 107
Presentación ................................................................................................................................................. 108
Creación de una página AWP que liste los nuevos productos ............................................................................ 108
Creación de la página ................................................................................................................................. 108
Creación de la lista de los nuevos productos ................................................................................................ 109
Visualización del detalle de una novedad ......................................................................................................... 114
¿Qué deberá hacer la página? ..................................................................................................................... 115
Creación de los campos .............................................................................................................................. 115
Mostrar los datos en la página..................................................................................................................... 118
Mostrar la ficha desde la lista de productos. ................................................................................................ 119
Gestión de los estilos. .................................................................................................................................... 120
Importar una hoja de estilos CSS ................................................................................................................ 120
Aplicar los estilos CSS ................................................................................................................................. 121
Enlace del sitio Internet y del sitio Intranet ..................................................................................................... 122
Creación de una página mostrando las condiciones generales de venta ............................................................. 125
Creación del campo .................................................................................................................................... 125
Conclusión .................................................................................................................................................... 126
WEBDEV 21 |6
Lección 5.1. Búsqueda Multi-criterio ................................................................................................................... 128
Presentación ................................................................................................................................................. 129
Creación de la consulta para buscar los pedidos .............................................................................................. 130
Creación de la consulta ............................................................................................................................... 130
Prueba de la consulta ................................................................................................................................. 132
Uso de parámetros en la consulta................................................................................................................ 133
Prueba de la consulta parametrizada ........................................................................................................... 136
Creación de la página proponiendo la búsqueda multicriterio ............................................................................ 137
Creación de una página .............................................................................................................................. 137
Creación de los campos de parametrización de criterios y visualización del resultado ...................................... 137
Optimización de la visualización de la página ................................................................................................... 148
Lección 5.2. Imprimir una factura ...................................................................................................................... 150
Presentación ................................................................................................................................................. 151
Principio de impresión en Internet .................................................................................................................. 151
Impresión directa ....................................................................................................................................... 151
Generación de documentos HTML, PDF, XML, … .......................................................................................... 151
¿De qué está constituido un informe? ............................................................................................................. 151
Creación del informe “Factura” ....................................................................................................................... 152
Creación de la consulta ............................................................................................................................... 152
Creación de un informe basado en una consulta........................................................................................... 154
Modificaciones del informe “Factura” ........................................................................................................... 160
Visualizar el informe impreso desde un botón .................................................................................................. 162
Colocación de la impresión .......................................................................................................................... 163
Prueba de la impresión ............................................................................................................................... 163
Lección 5.3. Enviar un email .............................................................................................................................. 166
Presentación ................................................................................................................................................. 167
Una página PopUp para enviar los emails ........................................................................................................ 168
Creación de la página PopUp....................................................................................................................... 168
Creación de los campos que permitan introducir las características del email ................................................. 168
Envío del email ........................................................................................................................................... 169
Mejoras en la página ...................................................................................................................................... 170
Cierre de la página PopUp........................................................................................................................... 170
Apertura de la página PopUp....................................................................................................................... 171
Lección 5.4. Identificador del usuario: El Groupware Usuario ............................................................................... 173
Presentación ................................................................................................................................................. 174
Integrar el groupware usuario ........................................................................................................................ 174
Configurar el groupware usuario ..................................................................................................................... 175
WEBDEV 21 |7
Integración del espacio cliente en el sitio ..................................................................................................... 175
Prueba del sitio .......................................................................................................................................... 176
Creación de usuarios y grupos .................................................................................................................... 177
Definición de los derechos .......................................................................................................................... 178
Prueba del sitio .......................................................................................................................................... 180
Desmarcar la gestión del groupware usuario ................................................................................................... 181
Lección 5.5. Gestionar el Multi-Lenguaje ............................................................................................................. 182
¿Qué es un sitio multi-lenguaje? ..................................................................................................................... 183
Seleccione los idiomas del proyecto ................................................................................................................ 183
Internalización de los elementos del proyecto .................................................................................................. 184
Internalización de una imagen .................................................................................................................... 185
Internalización del menú ............................................................................................................................. 186
Internalización de los campos ..................................................................................................................... 187
Internalización de un mensaje de programación ........................................................................................... 187
Las herramientas de traducción ...................................................................................................................... 188
Entrada directa de las traducciones ............................................................................................................. 188
Traducción con WDMSG y WDTRAD ............................................................................................................ 188
Otros elementos para traducir: los mensajes de framework .......................................................................... 189
Programación del cambio de lenguaje ............................................................................................................. 189
Añadir una opción de menú ........................................................................................................................ 190
Programación ............................................................................................................................................. 190
Prueba del proyecto ................................................................................................................................... 190
Lección 5.6. La referenciación ............................................................................................................................ 192
Presentación ................................................................................................................................................. 193
Recuerde: Modo AWP ................................................................................................................................. 193
Los métodos a su disposición ...................................................................................................................... 193
Asistente de referenciación............................................................................................................................. 193
Propiedades de las páginas ............................................................................................................................ 195
Frecuencia de la actualización ..................................................................................................................... 195
Importancia en el sitio ................................................................................................................................ 195
Plan de navegación ........................................................................................................................................ 195
Nombre físico de las páginas .......................................................................................................................... 196
Lección 6.1. Desplegar un sitio .......................................................................................................................... 198
Presentación ................................................................................................................................................. 199
Configuración necesaria ................................................................................................................................. 199
Instalación y configuración del “Servidor de Aplicaciones WEBDEV – 10 Conexiones” ......................................... 199
Instalación del “Servidor de Aplicaciones WEBDEV – 10 conexiones” ............................................................. 199
Configuración a través del Centro de Control de Hospedaje .......................................................................... 201
WEBDEV 21 |8
Creación de una cuenta de despliegue ......................................................................................................... 202
Los distintos modos de despliegue .................................................................................................................. 204
Un ejemplo detallado: Despliegue por FTP ................................................................................................... 204
Correspondencia entre los directorios del puesto de desarrollo y el despliegue .................................................. 209
Lección 6.2. Administrar un sitio ........................................................................................................................ 210
Presentación ................................................................................................................................................. 211
Administrador WEBDEV local .......................................................................................................................... 211
Administrador WEBDEV remoto ...................................................................................................................... 213
Lección 7.1. Los estilos ...................................................................................................................................... 216
Presentación ................................................................................................................................................. 217
Descubrir los estilos ....................................................................................................................................... 217
Un campo: varios elementos ....................................................................................................................... 217
Descubrir los estilos mediante un ejemplo ................................................................................................... 217
Seleccionar el estilo CSS de un campo ......................................................................................................... 218
Editar el estilo CSS de un campo ................................................................................................................. 218
Estilos WEBDEV.......................................................................................................................................... 220
Actualizar los estilos: un ejemplo práctico ....................................................................................................... 221
Sobrecargar un estilo CSS para un campo .................................................................................................... 222
Modificar un estilo CSS para todos los campos ............................................................................................. 222
Estilos y texto enriquecido .............................................................................................................................. 222
Lección 7.2. Los cookies .................................................................................................................................... 224
¿Qué es un cookie? ........................................................................................................................................ 225
¿Qué contiene un cookie? ........................................................................................................................... 225
Ejemplo práctico ........................................................................................................................................ 225
¿Cómo utilizar los cookies?.......................................................................................................................... 225
Lección 7.3. Transacciones y pagos securizados .................................................................................................. 227
Asegurar las informaciones y las páginas mediante TLS/SSL ............................................................................. 228
Presentación .............................................................................................................................................. 228
Actualización de las transacciones aseguradas por el protocolo TLS/SSL ........................................................ 228
Transacciones aseguradas por TLS/SSL en un sitio WEBDEV ......................................................................... 228
Pago seguro .................................................................................................................................................. 228
Presentación .............................................................................................................................................. 228
Sistema de pago seguro en un sitio WEBDEV ............................................................................................... 229
Lección 7.4. Anclajes y Zoning ........................................................................................................................... 231
Presentación ................................................................................................................................................. 232
Creación de una página en modo zoning ......................................................................................................... 232
WEBDEV 21 |9
Configurar el anclaje ...................................................................................................................................... 234
Lección 8.1. Los componentes internos .............................................................................................................. 238
Presentación ................................................................................................................................................. 239
Paso a paso................................................................................................................................................... 239
Paso 1: Creación de un componente interno ................................................................................................ 239
Paso 2: Uso del componente interno ........................................................................................................... 243
Lección 8.2. Gestión automática de los errores ................................................................................................... 246
Presentación ................................................................................................................................................. 247
Funcionamiento.......................................................................................................................................... 247
Colocación ................................................................................................................................................. 247
Tipos de errores a los que concierne ........................................................................................................... 247
Gestión automática de los errores: un ejemplo didáctico .................................................................................. 247
Lección 8.3. Importar/Exportar .......................................................................................................................... 250
Importar elementos ....................................................................................................................................... 251
Exportar elementos ........................................................................................................................................ 251
Importaciones específicas .............................................................................................................................. 252
Importación de un proyecto WINDEV .......................................................................................................... 252
Importación de una página HTML ................................................................................................................ 253
Lección 9.1. Presentación .................................................................................................................................. 255
Presentación ................................................................................................................................................. 256
Apertura del proyecto ................................................................................................................................. 256
Lección 9.2. Auditorías del proyecto ................................................................................................................... 257
¿Qué es una auditoría? .................................................................................................................................. 258
Auditoría estática. .......................................................................................................................................... 258
Procedimiento no ejecutado ........................................................................................................................ 259
Elemento huérfano ..................................................................................................................................... 260
Consulta a optimizar ................................................................................................................................... 261
Limpieza del proyecto ................................................................................................................................. 262
Auditoría dinámica. ........................................................................................................................................ 262
Lección 9.3. Analizador de actuaciones ............................................................................................................... 265
Presentación ................................................................................................................................................. 266
Lanzar el analizador de actuaciones ................................................................................................................ 266
Análisis del resultado ..................................................................................................................................... 266
Lección 9.4. Depuración de un proyecto ............................................................................................................. 271
WEBDEV 21 |10
Presentación ................................................................................................................................................. 272
Utilizar el depurador ...................................................................................................................................... 272
Lección 10.1. Introducción ................................................................................................................................. 276
Presentación ................................................................................................................................................. 277
¿Para qué pasar un sitio a modo HFSQL Cliente/Servidor? ................................................................................ 277
Lección 10.2. Establecimiento de una base de datos Cliente/Servidor ................................................................... 278
Presentación ................................................................................................................................................. 279
Instalación de un servidor HFSQL local............................................................................................................ 279
Creación de un sitio utilizando una base de datos HFSQL Cliente/Servidor ......................................................... 279
Adaptación de un sitio para utilizar una base de datos HFSQL Cliente/Servidor .................................................. 280
Presentación .............................................................................................................................................. 280
Adaptación del ejemplo .............................................................................................................................. 280
Funcionalidades disponibles en modo HFSQL Cliente/Servidor .......................................................................... 283
Lección 10.3. Administrar una base de datos Cliente/Servidor .............................................................................. 284
Presentación ................................................................................................................................................. 285
Configuración de los puestos .......................................................................................................................... 285
El Centro de Control HFSQL ............................................................................................................................ 285
Crear una cuenta usuario en el Centro de Control HFSQL ................................................................................. 286
Copia de seguridad de la base de datos .......................................................................................................... 290
Conclusión .................................................................................................................................................... 291
Lección 11.1. Gestor de fuentes(GDS) ................................................................................................................ 293
Introducción .................................................................................................................................................. 294
GDS (Gestor de fuentes) ................................................................................................................................ 294
Principio del GDS ........................................................................................................................................ 294
Creación de la base de datos ...................................................................................................................... 295
Lección 11.2. Integración de un proyecto en el GDS............................................................................................ 296
Integración de un proyecto en el GDS ............................................................................................................. 297
Añadir el proyecto en el GDS....................................................................................................................... 297
Apertura del proyecto desde el GDS ............................................................................................................ 300
Configuración del GDS ................................................................................................................................ 301
Lección 11.3. Manipular un proyecto en el GDS................................................................................................... 302
Presentación ................................................................................................................................................. 303
Modificación de un parámetro del proyecto ..................................................................................................... 303
Modificar una página del proyecto. ................................................................................................................. 304
Modificación del elemento extraído .............................................................................................................. 305
WEBDEV 21 |11
Reintegración del elemento extraído ............................................................................................................ 306
Sincronización del proyecto ............................................................................................................................ 307
Modo desconectado (o nómada) ..................................................................................................................... 307
Administrador del GDS ................................................................................................................................... 307
Desconexión del GDS ..................................................................................................................................... 308
Anexo 1. Vocabulario ........................................................................................................................................ 310
Principales términos utilizados ........................................................................................................................ 311
Anexo 2. Bases de programación ....................................................................................................................... 317
Introducción. ................................................................................................................................................. 318
Declaración de los distintos tipos de variables. ................................................................................................ 318
Los distintos tipos de variables .................................................................................................................... 318
Declaración de las variables y su alcance. .................................................................................................... 318
Instrucciones de WLangage............................................................................................................................ 319
Instrucciones condicionales (código servidor y navegador)............................................................................ 319
Instrucciones de bucle ................................................................................................................................ 320
Comentarios .............................................................................................................................................. 321
Operadores básicos de WLangage .................................................................................................................. 321
Operadores lógicos ..................................................................................................................................... 322
Operadores de comparación........................................................................................................................ 322
Operadores de indirección .......................................................................................................................... 322
Procedimientos y funciones ............................................................................................................................ 323
Definición .................................................................................................................................................. 323
Procedimiento local .................................................................................................................................... 323
Procedimiento global y colección de procedimientos. .................................................................................... 323
¿Cómo elegir si un procedimiento es global o local?...................................................................................... 324
A propósito del paso de parámetros ............................................................................................................ 324
Llamada de un procedimiento ..................................................................................................................... 324
Creación de un procedimiento ..................................................................................................................... 324
¿Un ejercicio de aplicación? Su turno! .......................................................................................................... 325
Tratamientos de las cadenas (código servidor y navegador) ............................................................................. 325
Principales manipulaciones sobre una cadena de caracteres. ......................................................................... 326
Tratamientos de los numéricos (código servidor y navegador) .......................................................................... 327
Principales manipulaciones sobre los numéricos ........................................................................................... 328
Tratamiento de los monetarios (código servidor solamente) ............................................................................. 329
WEBDEV 21 |12
Detalles ..................................................................................................................................................... 329
Mezcla de cadenas y numéricos................................................................................................................... 329
Tratamiento de las fechas y de las horas (código servidor y navegador) ........................................................... 330
Las fechas (código servidor y navegador) ........................................................................................................ 330
Máscara de introducción y valor devuelto ..................................................................................................... 330
¿En qué día estamos? ................................................................................................................................. 332
¿En qué día estamos, pero el día y el mes en letras? .................................................................................... 332
¿Cuál es el número de días entre dos fechas? .............................................................................................. 332
¿Qué día de la semana es una fecha concreta? ............................................................................................ 333
Pequeño ejercicio práctico .......................................................................................................................... 333
Manipulación de las variables de tipo Fecha ................................................................................................. 333
Las horas (código servidor y navegador) ......................................................................................................... 334
¿Qué hora es? ............................................................................................................................................ 335
¿Cuánto tiempo ha transcurrido entre dos horas? ......................................................................................... 335
Cálculos con las fechas y las horas.................................................................................................................. 336
Anexo 3. El editor de código: Preguntas y Respuestas ......................................................................................... 337
Preguntas/Respuestas .................................................................................................................................... 338
Conclusión ........................................................................................................................................................ 341
WEBDEV 21 |13
Introducción
Preliminares
Atencion: Este manual es un curso de auto-formación. Es aconsejable que utilice la ayuda en línea cuando utilice
WEBDEV.
El manual del curso de auto-formación tiene por objeto hacerle descubrir WEBDEV, familiarizarle con los editores y
que aprenda los conceptos de WEBDEV.
Dedique algunas horas para seguir este curso y para aprender WEBDEV. Lo rentabilizará rápidamente!.
Si intenta iniciar el desarrollo de un sitio sin haber seguido este curso, perderá mucho más tiempo que las horas
dedicadas a seguir este curso de auto-formación.
El curso se ha diseñado para poder seguirse de dos formas:
 Siguiendo todos los ejercicios detallados en las lecciones del curso (método aconsejado).
 Si tiene prisa y tiene también una experiencia significativa, puede leer sin ejecutar los ejercicios (todas las
manipulaciones están ilustradas). Sin embargo, para que los conceptos se asimilen más rápidamente, es
preferible ejecutar las manipulaciones.
WEBDEV está en permanente evolución; las imágenes de las ventanas y de las páginas que ilustran el curso pueden
ser distintas de las ventanas mostradas por el producto durante las distintas manipulaciones.
Presentación del curso de autoformación.

El curso de auto-formación está diseñado para permitirle aprender progresivamente a utilizar WEBDEV. Siguiendo este
curso:
 Por un lado, descubrirá los conceptos más importantes explicados de manera informal; en efecto en este
caso, se trata de conceptos a adquirir y comprender.
 Por otro lado, será ameno realizar las manipulaciones para ilustrar los conceptos que acaban de serle
explicados.
Siguiendo el hilo de la lectura, si desea profundizar un concepto o si quiere saber más detalles sobre una función de
programación, consulte la ayuda en línea (accesible directamente desde los editores).
El tamaño de una lección, no es necesariamente proporcional a su interés …
No olvide estudiar los ejemplos proporcionados con WEBDEV: Son muy didácticos!
Desde la edición de este documento, el curso de auto-formación puede haber evolucionado. No

dude en consultar la versión electrónica del curso de auto-formación, fichero PDF accesible
directamente desde el menú de WEBDEV: En el panel “Inicio”, dentro del grupo “Ayuda en
Notas
línea”, despliegue “Guía de Auto-formación” y seleccione la opción “Guía de Auto-formación

(PDF)”.
¿Cómo acceder a la ayuda en línea?

La ayuda en línea de WEBDEV permite consultar las informaciones detalladas referidas a las 2500 funciones de
WLangage. Contiene también ayuda sobre editores, campos, astucias, …
La ayuda en línea está siempre disponible en WEBDEV:
 En el editor de código, se puede acceder a una ayuda específica para cada función pulsando la tecla [F1].
 Cada ventana de diálogo mostrada por WEBDEV propone un botón que permite acceder a la página de
ayuda correspondiente.
 El menú de ayuda de los editores (opción “Ayuda” disponible en el panel “Inicio”, dentro del grupo “Ayuda en
línea” del menú de WEBDEV) le permitirá lanzar la ayuda en línea.
 La ayuda en línea puede mostrarse:
o En un “navegador de ayuda” específico:
WEBDEV 21 |14
o En un navegador de internet, si dispone de acceso a internet:
La ayuda en línea de WINDEV, WEBDEV y WINDEV Mobile en internet está accesible desde
cualquier puesto que disponga de acceso a internet, sin que el producto tenga que estar
forzosamente instalado. Esta ayuda se actualiza regularmente.
Notas
Cada internauta puede añadir comentarios en las páginas de documentación: explicaciones

personales, ejemplos, enlaces, …
WEBDEV 21 |15
Para lanzar directamente la ayuda en línea desde el producto:
1. En el panel “Inicio”, dentro del grupo “Entorno”, despliegue “Opciones” y selecciones la opción “Opciones
generales de WEBDEV”.
2. En la pestaña “Ayuda”, seleccione:
 El modo de acceso a la base de ayuda
 El contenido de la ayuda: ayuda común a WINDEV, WEBDEV y WINDEV Mobile o ayuda del producto en curso
de utilización.
Leyenda de los símbolos
Este símbolo indica la duración de la lección y sus ejercicios. Atención: el tiempo puede variar según su
experiencia.
Hay disponible un ejemplo para completar el curso. Los ejemplos están disponibles a través de la ventana
de inicio de WEBDEV.
Este símbolo presenta una “Astucia”: la lectura del texto asociado está vivamente aconsejada.
Este símbolo presenta una “Advertencia”: la lectura del texto es primordial.
Este símbolo presenta una “Nota”: la lectura del texto es aconsejable.
Este símbolo presenta una particularidad relacionada con Internet: la lectura del textos está vivamente
aconsejada.
Si ya conoce WEBDEV 20 …
Si conoce ya WEBDEV 20, el seguir este curso solo le reportará beneficios: será una buena ocasión de “revisar” las
posibilidades de WEBDEV!
¿Qué puedo hacer con WEBDEV?

WEBDEV es un AGL (Atelier de Génie Logiciel -> Taller de ingeniería de Software). Le permitirá desarrollar sitios de
internet sofisticados en todos los dominios:
 Comercio en línea (ventas, alquileres, reservas, …)
WEBDEV 21 |16
 Multimedia (Presentación de sociedad, sitios “escaparate”, …)
 Intranet (logins, accesos securizados, …)
 …
WEBDEV es un entorno de desarrollo completo que integra todas las herramientas necesarias para el ciclo de
realización de un sitio Internet o Intranet.
Contrariamente a otros lenguajes de desarrollo tradicionales, no es necesario buscar y reunir los módulos para poder
concebir, probar y subir (o “desplegar”) un sitio.
El L5G (lenguaje de quinta generación) de WEBDEV, el WLangage, le sorprenderá por su simplicidad. Unas pocas
horas son suficientes para aprender el lenguaje, una semana basta generalmente para mostrarle toda su potencia!
Al estar en francés, WLangage (también disponible en inglés), le hará ganar mucho tiempo!
WEBDEV 21 |17
CAPÍTULO 1
Descubriendo
WEBDEV
Capítulo 1 – Descubriendo WebDev |18

Lección 1.1. Descubra WEBDEV
Lo que va a aprender en esta lección…
 Lanzamiento de WEBDEV
Tiempo estimado: 5 min

Presentación
WEBDEV es un AGL (Atelier de Génie Logiciel -> Taller de ingeniería de Software) completo que permite desarrollar
sitios Internet e Intranet sofisticados en numerosos campos: comercio en línea, multimedia, …
Los sitios desarrollados pueden incluir acceso a las informaciones almacenadas en las bases de datos.
WEBDEV permite crear:
 Sitios de Internet/Intranet estáticos. Estos sitios gestionan datos que no cambian (Sitio escaparate de una
sociedad, sitio disponible en un CD-ROM, …).
 Sitios de Internet/Intranet dinámicos, que gestionan datos. Los sitios WEBDEV acceden a todas las bases de
datos relacionales o no, del mercado.
A lo largo de todo este curso de autoformación, aprenderá a crear sus sitios (con o sin bases de datos) y a
enriquecerlos utilizando las numerosas funcionalidades propuestas por WEBDEV.
Lanzamiento de WEBDEV
Lance WEBDEV 21 (si no lo había hecho)
Si nunca había lanzado WEBDEV 21, se lanza un asistente de bienvenida:
 Si tenía una versión antigua de WEBDEV, este asistente permite recuperar las configuraciones
existentes.
 Si es un nuevo usuario, el asistente permite parametrizar su entorno.
Podrá de este modo elegir la configuración de pantalla utilizada y parametrizar los Centros de Control.
Para más detalles, consulte la ayuda en línea.
Si ya había lanzado WEBDEV 21, identifíquese si fuera necesario. Se abrirá el entorno de desarrollador.
Aparecerá la ventana de bienvenida. Esta ventana de bienvenida permite:
 Crear un proyecto.
 Abrir un proyecto existente.
 Abrir un ejemplo.
 Abrir un proyecto del curso de auto-formación.
Detengámonos un instante en el entorno de desarrollo de WEBDEV.
Entorno de desarrollo
El editor
El entorno de desarrollo de WEBDEV está constituido de un interface específico y de varios editores que permiten
crear los distintos elementos de sus aplicaciones.
Así, el editor de páginas permite crear las páginas, el editor de informes permite crear los informes, …
Todos los editores tienen el mismo entorno:

1. Menu del editor, mostrado en forma de cinta; veremos su manejo en el párrafo siguiente.
2. Editor en curso (aquí, el editor de páginas). Este espacio permite visualizar de manera WYSIWYG (What You
See Is What You Get -> Lo que ves es lo que obtienes) el elementoque se está creando o modificando.
3. Paneles. El interface de WEBDEV dispone de varios paneles (horizontales y verticales) que permiten acceder
rápidamente a distintos tipos de información.
Algunos ejemplos:
 El panel “Explorador del proyecto” (aquí mostrado a la derecha) permite listar todos los elementos del
proyecto por categoría.
 El panel “Buscar – Reemplazar” (aquí mostrado en la parte inferior) permite efectuar rápidamente las
búsquedas en su proyecto.
Si fuera necesario, estos paneles pueden ocultarse rápidamente utilizando la combinación de teclas [CTRL] + [W].
4. Barra de documentos abiertos. Esta barra permite visualizar rápidamente todos los elementos abiertos. Un
simple clic sobre el botón correspondiente al elemento, lo muestra en su propio editor.
La barra de menú (cinta) en detalle
La barra de menú de WEBDEV se presenta en forma de cinta. Esta cinta está compuesta de paneles en los que se
agrupan las distintas opciones de los editores.
Vamos a detallar aquí los distintos elementos importantes de la cinta, así como la manera en la que los manejaremos
en este curso.
Los distintos elementos de la cinta:

La cinta está constituida por tres zonas:
 La zona de los botones, a la izquierda (1).
 La zona de los paneles arriba (2).

 La zona de las opciones (3).
Veamos las distintas zonas en detalle.
La zona de los botones.
La zona de los botones agrupa principalmente los botones de acceso rápido.
Estos botones permiten efectuar las operaciones más corrientes y que son comunes a todos
los editores: guardar, abrir, crear, …
Los tres logos arriba de esta zona también son específicos:
 El logo del producto, permite mostrar la ventana “A propósito”, los perso-menús (menús
personalizados) y los menús desplegables del antiguo interface de los editores (versión 17
y anteriores).
 Los 2 logos siguientes, permiten reencontrar las barras de utilidades y los menús
desplegables de los antiguos interfaces de los editores (versión 17 y anteriores
La zona de los paneles.
Los distintos paneles de la cinta permiten acceder a las opciones de los distintos editores para el proyecto en curso.
Varios tipos de paneles están disponibles:
 El panel en curso: La pestaña del panel aparece en gris claro y un trazo naranja se muestra arriba de la pestaña.
 Los paneles contextuales, específicos del elemento en curso: el nombre del panel se muestra en azul.
 Los paneles disponibles: El nombre del panel aparece en blanco.
La zona de las opciones:
En función del panel seleccionado, las opciones que se muestran en la cinta cambian. Hay disponibles varios tipos de
opciones:
 Opciones a marcar
 Botones a clicar
 Botones flecha que permiten desplegar las opciones. Hay disponibles dos tipos de botones de flecha:
o Los botones de flecha que permiten solamente desplegar un menú.
o Los botones de flecha que permiten desplegar un menú (clic sobre la flecha), o efectuar una acción por
defecto (clic sobre el icono del botón).
Las opciones están reunidas por grupo. Cada grupo de opciones tiene un nombre y puede tener un botón de
agrupación . Este botón permite efectuar una acción específica según el grupo en curso: mostrar la descripción
del elemento en curso, mostrar la ayuda, …
En este curso, para designar una opción de menú, hablaremos de paneles y grupos.
Por ejemplo:
Para mostrar la ayuda, en el panel “Inicio”, en el grupo “Ayuda en línea”, clique sobre “Ayuda”.
WLangage
El WLangage es el lenguaje de programación común de WINDEV, WEBDEV y WINDEV Mobile.
Si no conoce este lenguaje, le aconsejamos que siga la lección “Bases de programación”. Esta lección presenta
rápidamente los distintos tipos de variables, las instrucciones básicas de WLangage, los tratamientos de las cadenas,
numéricos, fechas, horas, …

Lección 1.2. El desarrollo WEB y WEBDEV
 Principio Navegador/Servidor
 Intranet/Extranet/Internet

Principio Navegador/Servidor
¿Cómo funciona?
Un sitio internet o intranet funciona de la siguiente forma:
 El cliente (internauta) utiliza un navegador para acceder al sitio.
 El navegador efectúa una solicitud al servidor que alberga el sitio pedido. En esta solicitud, se indica la página que
se desea mostrar y los distintos parámetros que permitirán al servidor construir la página correspondiente.
 El servidor recibe esta solicitud, la trata y reenvía la página “HTML” correspondiente. El HTML
(HiperTextMarkupLanguage) es el lenguaje utilizado por todos los navegadores para mostrar las páginas WEB.
A nivel de tratamientos, hay dos tipos de tratamientos:
 Tratamientos efectuados a nivel del navegador en el puesto del internauta.
 Tratamientos efectuados a nivel del servidor.
El código ejecutado a nivel de navegador se llama código JavaScript. Los navegadores solo saben ejecutar el código
JavaScript.
¿Y en WEBDEV?
Con WEBDEV todo está desarrollado:
 En WYSIWYG (What You See Is What You Get -> Lo que ves es lo que obtienes) en el editor: sus páginas se
visualizan idénticas en creación y en ejecución.
 En WLangage por parte de la programación.
WEBDEV convierte su página creada en el editor en una página HTML, legible por los navegadores.
El código servidor está ejecutado en WLangage.
El código navegador se convierte en JavaScript.
Para crear un sitio con WEBDEV, solo se conoce un lenguaje: el WLangage.
No obstante, hay dos tipos de código disponibles: código servidor y código navegador.
¿Por qué esta distinción entre servidor/navegador? Por razones de actuaciones.
En efecto, entre el navegador y el servidor está Internet, con sus retrasos de respuestas, su latencia, …
Algunas operaciones simples podrán ser realizadas directamente en el navegador, sin volver al servidor.
Ejemplo práctico:
Para comprender mejor la distinción entre los tratamientos de servidor y los tratamientos de navegador, hemos
preparado un ejemplo sencillo:
1. Lance WEBDEV 1 (si no lo había hecho previamente). Si es necesario, muestre la ventana de inicio del
WEBDEV: utilice la combinación de teclas [CTRL]+[>].
2. Abra el proyecto “Conceptos WebDev”. Para ello, en la ventana de inicio, clique en “Curso de auto-formación”
y seleccione el primer proyecto “Conceptos WebDev (Ejercicio)”.

Si la ventana de inicio no está mostrada, en el panel “Inicio”, en el grupo “Ayuda en línea”,
despliegue “Guía de Auto-formación” y luego selecciones la opción “Conceptos de WebDev
Astucia
(Ejercicio)”.
Todos los proyectos del curso de auto-formación son accesibles en este menú.
Si el mecanismo de UAC está activo en Windows, una ventana específica podría aparecer. Esta
ventana indica que el programa WD210Admin.exe se va a ejecutar en el puesto en curso. Dé el
permiso de ejecución. Este programa corresponde al administrador local WEBDEV que permite la
Notas
prueba de los sitios desarrollados con WEBDEV. Veremos sus funcionales más adelante en este
curso.
Abra la página “PAGE_Inscripcion” en el editor: doble clic sobre su nombre en el explorador del proyecto
El explorador del proyecto permite mostrar en el entorno la lista de todos los elementos
presentes en el proyecto. Estos elementos se reagrupan por tema: Páginas, Procedimientos, …
Para mostrar el explorador del proyecto:
Notas
1. En el panel “Inicio”, en el grupo “Entorno”, despliegue “Pestañas”.

2. En la lista de paneles que se muestra, seleccione “Explorador del proyecto”.
Esta página contiene campos de introducción y un botón “Inscribirse”. El botón “Inscribirse” deberá realizar dos
cosas:
1. Verificar que todos los campos están rellenos.
2. Guardar los valores de los campos en la base de datos.
Visualicemos el código asociado al botón:
1. Seleccione el botón “Inscribirse”.
2. Muestre el menú contextual del botón (clic derecho) y seleccione la opción “Código”.
3. Se muestra el editor de código con los distintos elementos relacionados con el campo Botón.

El editor de código le permite escribir el código de sus tratamientos.
Sobre cada campo, el editor de código le presenta los eventos asociados, es decir, los eventos
sobre los cuales un tratamiento específico puede ser desencadenado.
Observación: Los tratamientos se muestran en el orden en el que serán ejecutados.
Notas
Por ejemplo, para el campo botón, los tratamientos asociados son:

 Inicialización.
 Clic navegador.
 Clic Servidor.
Observemos el código mostrado: La distinción entre el código servidor y el código navegador se efectúa gracias a un
código de colores:
 En verde, es el código navegador, es decir, el código que va a ejecutarse en el puesto del internauta.
 En amarillo, es el código servidor, es decir el código que se va a ejecutar en el servidor.
En nuestro ejemplo, en el código en verde (código navegador), se efectuarán todas las verificaciones de entradas. Por
ejemplo, el campo “EDT_Nombre” no puede estar vacío. El código correspondiente es el siguiente:
// Se verifica que el campo “EDT_Nombre” es igual a una cadena vacía

// (con espacios / puntuación)
IF EDT_Nombre ~= “” THEN
// El campo está vacío; se mostrará un mensaje de error en el usuario
ERROR (“Deberá introducir su nombre”)
// Se vuelve a la introducción del campo “EDT_Nombre” (sin efectuar el resto del código)
RETURNTPCAPTURE (EDT_Nombre)
END
Esta verificación se efectúa en código navegador porque es inútil devolver al servidor para verificar que los campos
están bien rellenos.
Las idas y vueltas inservibles se evitan de esta forma y la espera del internauta es limitada; el sitio es más fluido.
Después de ejecutar el código navegador, la página envía los valores introducidos al servidor. El servidor ejecuta
entonces el código servidor. En el código servidor, se puede ejecutar, por ejemplo, el tratamiento de las
informaciones recibidas.
En nuestro ejemplo, las informaciones añadidas se añaden a la base de datos mediante el siguiente código:
// RESET de la estructura cliente

HRESET (Cliente)
// Se recuperan los valores de los campos directamente en la estructura cliente
ScreenToFile ()
// Se añade el cliente a la base de datos
HAdd (Cliente)
Esta operación no puede realizarse en código navegador, porque la base de datos es común a todos los usuarios del
sitio y está situada en el servidor.
Cierre la ventana de código (utilice el aspa arriba a la derecha).
Cierre la página mostrada en el editor (utilice el aspa arriba a la derecha).
Intranet/Extranet/Internet
Principios
Un sitio intranet o extranet es comúnmente considerado como una aplicación de gestión en modo Web, es decir,
una aplicación ejecutada en un navegador.
Esta aplicación Web puede presentar:
 Funcionalidades de negocio destinadas a un usuario determinado.
 Tratamientos que deberán ser securizados: cualquier persona no puede tener acceso a la aplicación.
La aplicación Web puede ser accesible:
 Solo desde una red empresarial; en este caso se habla de un sitio Intranet.
 Desde internet; en este caso se habla de un sitio Extranet.
En ambos casos, la aplicación Web está securizada por una gestión de logins, contraseñas, derechos, …
Un sitio Internet es un sitio con una destinación “pública” (pública de particulares o de profesionales).
Un sitio Internet deberá encontrarse fácilmente en la Web. Algunos ejemplos: sitio de presentación, sitio de venta on-
line, …
Para llevar el mayor número de internautas al sitio, es preciso que éste sea referenciable por los motores de
búsqueda. Para que los motores de búsqueda puedan referenciar correctamente cada página, aparece una restricción
complementaria: las páginas del sitio deberán ser accesibles directamente sin importar el momento. Pero esta
restricción es también una promesa de simplicidad para el internauta: puede copiar/pegar un enlace sobre una página
y así, reutilizar el enlace a su conveniencia.
¿Y en WEBDEV? (Clásico/AWP, PHP, Estático)
En WEBDEV, para hacer un sitio Intranet o Extranet, el modo “clásico” es el más apropiado debido notoriamente
a las siguientes funcionalidades: seguridad integrada, contextos automáticos.
Efectivamente, el modo clásico tiene la particularidad de tener sesiones automáticas. El identificador de la sesión
forma parte integrante de la URL. La dirección de las páginas depende entonces de este identificador que cambia a
cada conexión.
Inconveniente: los motores de búsqueda no pueden indexar este sitio.
En WEBDEV, para hacer un sitio Internet, puede elegir entre los siguientes modos:
 El modo AWP (Active WebDev Page).
 El modo de generación PHP.
 El modo estático si su sitio lleva páginas definidas de antemano (no hay base de datos).
Ejemplo práctico.
A continuación, vamos a observar el funcionamiento de una página de Internet:
1. En el proyecto “Conceptos_WebDev” (que hemos abierto al principio de esta lección), abra la página
“PAGE_Internet” en el editor: doble clic sobre su nombre en el explorador del proyecto.
Para buscar rápidamente una página en el proyecto en curso, utilice la combinación de teclas
[CTRL]+[E]. Una ventana se muestra permitiendo realizar una búsqueda de todas las páginas
Astucia
que contengan las cadena de letras introducidas en la zona de búsqueda. Bastará con
seleccionar la página deseada y validar para que cada página que se abre en el editor.
2. Verificamos el tipo de la página:

 En el panel “Página”, dentro del grupo “Descripción”, clique sobre “Descripción” (también puede utilizar la
opción “Descripción” del menú contextual de la página).
 En la pestaña “General”, la página está definida como una página dinámica con una generación en modo
AWP.
 Valide la ventana de descripción de la página.

3. Lance la prueba de la página: clique sobre el icono en los botones de acceso rápido.
4. La página aparecerá en su navegador por defecto.
5. Observe la dirección mostrada en el navegador: esta página tiene una dirección fija. Si copia esta dirección y
la pega en un nuevo navegador, se mostrará la misma página.
6. Cierre el navegador.
El método para crear un sitio

Ahora que ya hemos visto los principales conceptos de Web, veamos como concebir un sitio WEBDEV.
Para crear un sitio con WEBDEV, el método a aplicar es el siguiente:
 Creación de la maqueta del sitio
o Maqueta de las páginas (ergonomía)
o Definición de los estilos CSS (si es necesario)
o Concepción de la estructura de la base de datos.
 Desarrollo en WEBDEV
o Creación de un proyecto que agrupe todos los elementos del sitio.
o Creación de los modelos de página que van a definir el “look” del sitio. Estos modelos están basados
en la maqueta de las páginas, los estilos CSS y WEBDEV.
o Definición de la base de datos (Análisis), que puede retomar una estructura existente.

CONCEPCIÓN
DESARROLLO WEBDEV

Lección 1.3. Mis primeras páginas
 Creación de una página formulario
 Guardar los datos
 Controles de introducción
 Búsqueda simple en una base de datos

Presentación
Para empezar a desarrollar con WEBDEV, vamos simplemente a crear algunas páginas.
Las páginas permiten mostrar o introducir en la pantalla las informaciones. El internauta puede
Notas
actuar directamente sobre las páginas por medio de campos, botones, …
Estos ejemplos le permitirán comprender el funcionamiento de los sitios Internet/Intranet y le permitirán manipular su
primera base de datos.
Apertura del proyecto
Lance WEBDEV 21 (si no lo había hecho ya). Si es necesario, cierre el proyecto en curso para hacer aparecer la
ventana de inicio.
Abra el proyecto “Mis_Primeras_Páginas”.
En este capítulo, nos vamos a concentrar en la creación de páginas sencillas. El proyecto

Importante!
“Mis_Primeras_Páginas” es un proyecto vacío, ya creado. La creación del proyecto será abordado

en la próxima lección.
Un proyecto corregido está disponible. Este proyecto contiene las distintas páginas creadas en
esta lección. Para abrir el proyecto corregido, en el panel "Inicio”, dentro del grupo “Ayuda en
Notas
línea”, despliegue “Guía de Auto-formación” y luego selecciones “Mis primeras páginas

(corregido)”.
Creación de una página “formulario”

Vamos a crear un formulario de inscripción. Este formulario contendrá varios campos que permitirán identificar a la
persona.
Creación de la página
Para crear la página:
1. Clique sobre en los botones de acceso rápido:
2. La ventana de creación de un nuevo elemento se mostrará. Esta ventana permite crear todos los elementos
que pueden estar asociados a un proyecto.
3. Clique sobre “Pagina” y luego sobre “Página”. Se mostrará el asistente de creación de una página.
4. Seleccione “En blanco – Disposición simple” y valide (botón verde bajo de la ventana). La página se crea
automáticamente en el editor.
Para guardar la página que acabamos de crear:
1. Clique sobre en los botones de acceso rápido (puede utilizar también el atajo [CTRL]+[S]).
2. Aparecerá la ventana para guardar-
3. Introduzca el título de la página: “Formulario”.

4. El nombre de la página (que se utilizará por ejemplo en programación) se deduce automáticamente del título
de la página. Si este nombre no conviene, puede modificarlo y especificar un título distinto del nombre de la
página.
5. Valide (botón verde).
Para cada página creada en el editor, WEBDEV genera varios tipos de ficheros:
 Un fichero “WWH” que contiene la página para el editor de páginas. Este fichero se guarda
en el directorio del proyecto.
 Un fichero “AWL” que corresponde a la descripción de la página para el motor WEBDEV en el
directorio EXE del proyecto.
Notas
 Un fichero “HTM” que contiene el código HTML y el código JavaScript de la página destinada
a ser enviada al navegador. Este fichero está guardado en el subdirectorio
“\<NombreDelProyecto>_WEB\XX” del directorio del proyecto (un subdirectorio por idioma,
por ejemplo “FR” para el idioma francés, “UK” para el idioma inglés, …)
Creación de campos
Vamos a crear los distintos campos del formulario. Estos campos permitirán al usuario de rellenar los datos necesarios
para la inscripción.
El formulario está constituido por los siguientes campos:
 Apellidos
 Nombre
 Domicilio
 Email
 Login
 Contraseña
Todos estos campos son campos de entrada, en los que el usuario va a introducir los datos.
Para crear un campo de introducción:
1. En el panel “Creación”, en el grupo “Campos habituales, clique sobre (bajo de “Introducción”).
2. El campo en creación seguirá el movimiento del ratón.

3. Clique en la página en blanco para crear el campo. El campo está creado y los contornos se muestran para
indicar que el campo está seleccionado.

¿Tiene que crear un campo? Muestre el panel “Creación” de WEBDEV: todos los campos
Astucia
disponibles son accesibles en este panel.
Para modificar el texto de un campo:
1. Clique sobre el campo (simple clic): El texto pasa a edición. Si prefiere utilizar el teclado, basta con pulsar la
tecla [ESPACE] o la tecla [ENTER] para pasar el texto a modo edición.
2. Introduzca “Apellidos” y valide con la tecla [ENTER]. El texto se modifica automáticamente. El nombre del
campo es igualmente modificado: aparecerá en el texto de ayuda que aparece al pasar el ratón sobre el
campo: EDT_Nombre.
Observe bien el nombre del campo que WEBDEV propone por defecto: este nombre comienza
por las letras “EDT_”. Este prefijo se añade automáticamente porque el proyecto utiliza una carta
de programación.
La carta de programación permite definir un prefijo para cada tipo de objeto y así identificar
rápidamente el elemento manipulado:
Notas
 Una página empieza por “PAGE_” (ya lo habíamos visto al guardar una página).
 Un campo de edición empieza por “EDT_”-
 Un botón comienza por “BTN_”, etc.
Si no quiere utilizar esta carta, basta con desmarcar: en la cinta, en el panel “Proyecto”, dentro
del grupo “Otras acciones”, despliegue “Carta” y desmarque la opción “Utilizar la carta”.
Acabamos de hacer una modificación simple sobre el campo de entrada: cambiar su texto.
Para modificar más en detalle las características del campo, basta con hacer doble clic sobre el campo.
Aparecerá una ventana de descripción del campo:

Vamos por ejemplo a modificar el tamaño máximo de introducción: hay que introducir el nuevo tamaño (30 en
nuestro caso) en el campo “Tamaño máximo de la entrada”. Pueden modificarse otras numerosas
características. Para guardar las modificaciones, clique sobre el botón verde de validación.
Ahora, juegue: Cree del mismo modo los campos de introducción siguientes a continuación del campo
“Apellidos”:
Texto Tipo Tamaño

Nombre Texto 30
Dirección Texto multilínea
Email Texto 255
Login Texto 10
Contraseña Password 10
Como habrá observado, estos campos no son todos del mismo tipo. Para modificar el tipo del campo de entrada,
simplemente muestre la ventana de descripción del campo.

La base del formulario ya está creada. Ahora vamos a mejorarla.
Esta será la página que queremos conseguir:
 El campo de entrada “Dirección” permite introducir varias líneas.

 Los distintos campos de introducción están alineados.
 Los campos “Login” y “Contraseña” tienen una etiqueta roja.
Mejoras de la página
Vamos a realizar algunas modificaciones en el interface de esta página.
Primero veamos el campo “Dirección”. Este campo deberá mostrar varias líneas en la pantalla.
Vamos pues a hacerlo más grande.
A continuación alinearemos los campos en la página.
Finalmente, modificaremos el estilo de los campos “Login” y “Contraseña”.
Para hacer más grande el campo “Dirección”:
1. Clique sobre el campo “Dirección”.
2. Aparecerán los bordes.
3. Arrastre hacia abajo con el ratón el borde inferior de la zona de entrada y haga más grande la zona.
De este modo podrá hacer más largos los distintos campos de la página.
Para alinear los campos de la página:

1. Seleccione el campo “Apellidos”, y luego los restantes campos de introducción de la página (manteniendo
pulsada la tecla [CTRL] y clicando sobre los distintos campos).
Atención: El primer campo que selecciona es importante, porque las opciones de alineamiento se
basan en:
 El tamaño del primer campo seleccionado: Servirá de referencia para el tamaño de los
Notas
campos restantes.
 La posición del primer campo seleccionado: Todos los campos seleccionados serán
alineados con respecto al primer campo seleccionado.
2. Muestre el panel “Alineación” del menú de WEBDEV. Este panel contiene todas las opciones de alineación
disponibles para los campos.
3. Deseamos que los bordes izquierdos y derechos de los campos estén alineados. Clique sobre la opción
“Justificado (Interno y Externo)”.
Si desconoce que alineación elegir, pase sobre las distintas opciones propuestas por el panel
“Alineación” de WEBDEV. Cuando pasa sobre la opción con el ratón, los campos seleccionados
en la página se posicionan automáticamente en función de la opción sobre la que se encuentra.
Notas
Si le convence el posicionamiento, clique sobre la opción.

Si el posicionamiento no le convence, clique en la página: los campos son devueltos a la posición
original.
4. Guarde la página: Clique sobre en los botones de acceso rápido (o utilice el atajo de las teclas
[CTRL]+[S]).
Modificación del estilo de los campos “Login” y “Contraseña”.

Para mostrar en rojo el texto de los campos “Login” y “Contraseña”, vamos a modificar el estilo asociado por defecto
a estos campos.
Para modificar el estilo por defecto:
1. Seleccione el campo “Login”.
2. Muestre la ventana de descripción del campo (doble clic sobre el campo, por ejemplo).
3. En la pestaña “Estilo”, seleccione el elemento “Texto (CSS)”.
4. Despliegue el combo “Color” y seleccione el color rojo.

Para poder reutilizar este estilo, se puede añadir a la hoja de estilos del proyecto; hay que:
1. Clicar sobre el botón “Añadir este estilo al proyecto” en el panel “Estilo WEBDEV” mostrado a
la derecha de la ventana de descripción.
2. Dele un nombre al estilo.
3. Clique sobre el botón “Añadir”.
Notas
Para reutilizar el estilo creado y asociarlo a otro campo:

 Seleccione el campo en el que se desea modificar el estilo.
 Muestre el menú contextual del campo (clic derecho) y seleccione la opción “Elegir el estilo
WEBDEV”.
 En la ventana que se muestra, seleccione el estilo deseado y valide.
Nota: La elección de un estilo existente, se realizará en la lección 5.
5. Valide la ventana de descripción del campo “Login”.

Para aplicar este mismo estilo al campo “Contraseña”:

1. Seleccione el campo “Contraseña”.
2. Pulse la tecla [F4]-
La tecla de atajo [F4] permite repetir sobre los campos seleccionados la última modificación
efectuada. En nuestro caso, el cambio de color se repite automáticamente sobre el campo
Notas
“Contraseña”.
3. Se obtendrá el siguiente interface:
Prueba de la página
Lance la prueba de esta página (clique sobre el icono en los botones de acceso rápido). Podrá introducir
datos, pero estos datos no serán tratados ni guardados.
Cierre el navegador.
Guardar los datos en un fichero de datos.

Cuando se crea un formulario, la primera cosa que se desea, se sobreentiende que es guardar los datos introducidos.
Estos datos pueden ser guardados, por ejemplo, en un fichero de texto, en un fichero XML, o en una base de datos.
Es la última opción que hemos elegido.
En WEBDEV, la descripción de la base de datos se realiza sobre un editor específico, el editor de análisis. Veremos
con detalle este editor en el siguiente capítulo.
En este ejemplo, vamos a definir rápidamente la base de datos enlazada con los campos que hemos creado, mediante
una funcionalidad muy simple: el retro-análisis.
Creación del fichero de datos
Para crear automáticamente el fichero de datos:
1. En la cinta, sobre el panel “Página”, en el grupo “Edición”, despliegue “Otras acciones” y seleccione “Generar
una descripción de fichero”.
2. Aparece un nuevo editor: el editor de análisis. El editor de análisis contiene la descripción de todos los
ficheros de datos que serán manipulados por el proyecto.
3. El asistente de generación de un fichero de datos se lanza.
4. El nombre del fichero se rellena automáticamente con el nombre de la página. Vamos a modificar algunos
elementos:
 Introduzca “Inscripción” en el nombre.
 Introduzca “Inscripción” en el texto.
 Introduzca “una inscripción” en el último campo.
5. Avance al paso siguiente (flecha amarilla bajo del asistente).
6. Seleccione los campos a recuperar. En nuestro caso, todos los campos de la página corresponden a un
registro.
7. Avance al paso siguiente.

8. Este paso permite definir las claves (también llamadas índice).
Una clave permite un acceso más rápido para las búsquedas (clave con duplicados) y/o
Notas
asegurarse de que el valor de un registro solo puede guardarse una vez (clave única).

9. En este ejemplo, el campo “Apellidos” será una clave duplicada y el campo “Login” será una clave única. El
fichero podrá contener dos personas inscritas con los mismos apellidos, pero nunca con el mismo login.

11. Confirme el resumen. El fichero aparecerá en el editor de análisis.
12. Guarde el análisis. Clique sobre en los botones de acceso rápido ( o utilice el atajo [CTRL]+[S]).
13. Cierre el editor de análisis.
14. Aparecerá una ventana proponiendo sincronizar el proyecto. Esta es una verificación de las diferencias entre
las páginas creadas y los datos definidos en el análisis. Este paso se efectúa a cada modificación del análisis,
cuando se vuelve a las páginas del proyecto.
15. Clique sobre “Si”-
Ahora no vamos a detenernos demasiado en el editor de análisis. Lo veremos en detalle en una próxima lección.
Guardar los datos.

Volvamos al formulario de inscripción para establecer la adición de los datos introducidos por el internauta en el
fichero de datos. En la parte inferior del editor, se encuentra la barra de los documentos. En esta barra, se
muestra un botón por cada elemento abierto en el editor.
 “P” representa el proyecto.

 “PAGE_Formulaire” representa la página “Formulario”.
Para guardar los datos desde nuestro formulario, necesitaremos un botón. Este botón permitirá validar las
informaciones introducidas en la página y guardar los datos en el fichero de inscripción.
Para crear el campo Botón:
1. En el panel “Creación”, clique sobre debajo de “Botón”.

2. El campo a crear, seguirá el movimiento del ratón.
3. Clique en la página para crear el botón (por ejemplo debajo de los campos de entrada).
El campo está creado.
4. Pulse sobre la barra espaciadora: el texto pasa a edición.
5. Introduzca “Guardar”.
6. Pulse sobre la tecla [ENTER] para validar.
Para introducir el código asociado al botón:

1. Muestre el menú contextual del campo y seleccione la opción “Código” (o pulse la tecla [F2]).
2. Se muestran los tratamientos asociados al botón. Se verán los de color amarillo el códigos para los
tratamientos efectuados en el servidor y de color verde el código para los tratamientos efectuados en el
navegador.
3. Queremos guardar los datos en la base de datos. El acceso a la base de datos solo se puede efectuar en el
código servidor: deberemos introducir el código en el código de clic Servidor (amarillo).
4. Introduzca el siguiente código:
PageToFile ()
HAdd (Inscripcion)
Info (“Registro añadido”)
5. Examinemos este código:

 La función PageToFile permite recuperar el contenido de los campos de introducción para transferirlos hacia
el fichero de datos.
 La función HAdd permite escribir en el fichero de datos los datos transferidos.
 La función Info permite mostrar un mensaje.
6. Guarde ([CTRL]+[S]) y cierre el editor de código (aspa arriba a la derecha).
Lance la prueba de esta página:
1. Clique sobre el icono en los botones de acceso rápido.

2. Introduzca los siguientes datos:
 Apellidos: Dupont
 Nombre: Paul
 Dirección: Rue des fleurs, 75000 París
 Email: paul.dupont@hautrange.fr
 Login: polo
 Contraseña: polo
3. Clique sobre el botón “Guardar”. El navegador mostrará un mensaje indicando que se ha añadido el registro.
Visualizar los datos introducidos
WEBDEV propone una sencilla utilidad que permite ver el contenido de los ficheros de datos durante el desarrollo del
sitio (por ejemplo, cuando las páginas de visualización aún no están creadas).
Esta utilidad se llama WDMAP. Vamos a utilizarla para verificar si las informaciones introducidas lo has sido
correctamente.
Para lanzar WDMAP:
1. En la cinta, dentro del panel “Utilidades”, en el grupo “Base de datos”, clique en “WDMap”.
2. Seleccione el fichero “Inscripcion”. Se muestra el contenido del fichero de datos.
3. Veremos que los datos están bien introducidos.

4. Cierre WDMAP (botón “Cerrar”).

Añadir controles de entrada
Vamos ahora a mejorar nuestro formulario añadiendo controles de entrada. Vamos a:
 Hacer obligatoria la introducción del apellido, del email y el login.
 Hacer introducir la contraseña dos veces para verificar.
Introducción obligatoria
Vuelva si es necesario a la página “PAGE_Formulario” clicando sobre su nombre en la barra de documentos
abiertos.
Para hacer obligatoria la introducción del campo “Apellidos”:
1. Doble clic sobre el campo “Apellidos”: Se muestra la ventana de descripción del campo.
2. Muestre el panel “Detalles”.
3. Marque la opción “Entrada obligatoria”: Si esta opción está marcada, WEBDEV controlará automáticamente
que este campo de entrada esté relleno.
4. Valide la ventana de descripción.
Para aplicar esta modificación al campo “Email:”
1. Seleccione el campo “Email” (clic con el ratón).
2. Pulse la tecla [F4]: la última acción efectuada en algún campo, se reejecutará en el campo seleccionado.
Aplique esta modificación al campo “Login”.
Lance la prueba de la página:

2. Clique sobre el botón “Guardar”.
3. Una caja de información se mostrará automáticamente indicando que no están rellenos los campos
obligatorios.
4. Valide la caja de información.
Verificación de la contraseña.
Para verificar la contraseña, vamos primero a crear el campo de introducción que permitirá al usuario introducir
nuevamente su contraseña. A continuación, introduciremos el código necesario para la verificación.
Cree un nuevo campo de entrada: puede por ejemplo hacer un “Copiar/Pegar” del campo “Contraseña”
existente en la página. Este campo tendrá de texto “Verificación” y será de tipo “Password”.
El código de verificación de la contraseña deberá introducirse en los tratamientos asociados al botón “Guardar”.
1. Clique sobre el botón “Guardar” y pulse la tecla [F2].
2. Esta verificación consistirá en comparar el valor introducido en el campo “Contraseña” y el introducido en el
campo “Verificación”. Para hacer esta verificación, el servidor no vale: esta verificación puede efectuarse
localmente en el navegador.
3. Vamos ahora a introducir el siguiente código en el tratamiento de navegador “Clic”:
IF EDT_Contraseña <> EDT_Verificación THEN

Info (“Error, las contraseñas son distintas.”)
EDT_Contraseña = “”
EDT_Verificación = “”
ReturnToCapture (EDT_Contraseña)
END

 La instrucción IF permite realizar una acción sobre una condición. En nuestro caso, la acción se realizará si
los campos “Contraseña” y “Verificación” son distintos (operador <>)-
 En caso de diferencia, se “vacían” los campos: se afectarán con una cadena vacía.
 La función ReturnToCapture permite reenviar el cursor al campo indicado (en este caso, el campo
“Contraseña”= sin efectuar el código que viene a continuación. En nuestro caso, si las contraseñas
introducidas son distintas, el campo “Contraseña” es el que recibe el foco y el tratamiento termina. No se
efectuará el código servidor que guardará las informaciones en la base de datos.
Lance la prueba de la página:

2. Introduzca las informaciones siguientes:
 Apellidos: “Dupont”
 Nombre: “Pierre”
 Email: Pierre.Dupont@gmail.com
 Login: “Pierre”
 Contraseña: “Pierre”
 Verificación: “Louis”
3. Clique sobre el botón “Guardar”.
4. Un mensaje de error se mostrará automáticamente para indicar que las contraseñas son distintas.
5. Valide este mensaje
Búsqueda simple en una base de datos

Hemos visto como crear un formulario de entrada y guardar los valores en una base de datos. Continuamos nuestro
primer descubrimiento de WEBDEV realizando una búsqueda en una base de datos.
Vamos a crear una página de login en la que introduciremos el login y la contraseña. Controlaremos a continuación
que estas informaciones son correctas.
Para crear la página:
1. Clique sobre en los botones de acceso rápido.

2. Se muestra la ventana de creación de un nuevo elemento: clique en “Página” y luego en “Página”. Se muestra
el asistente de creación de una página.
3. Seleccione “En blanco” y valide.
Para guardar la página que acabamos de crear:
1. Clique sobre en los botones de acceso rápido (también puede utilizar el atajo [CTRL]+[S]).
2. Se muestra la ventana para guardar el elemento.
3. Introduzca el título de la página: “Login”.
4. Valide.
Creación de los campos
La página de login contendrá los siguientes campos:
 Dos campos de introducción:
o “Login” para introducir el login
o “Contraseña” para introducir la contraseña.
 Dos botones:
o “Conectarse” para verificar el login y la contraseña.
o “Inscribirse” para abrir la página de inscripción (que ya hemos creado).
Ya hemos creado estos tipos de campo; he aquí un recuerdo de las manipulaciones a realizar:
Para crear un campo de introducción:
1. En el panel “Creación”, en el grupo “Campos usuales”, clique sobre (bajo de “Entrada”).

2. Clique en la página en blanco para crear el campo.
3. Clique sobre el campo (simple clic): el texto pasa a modo edición.
4. Introduzca el texto (“Login” y “Contraseña”) y valide con la tecla [ENTER]. El texto se modifica
automáticamente.
El campo “Contraseña” deberá ser de tipo “Password”. Para cambiar el tipo de campo de
Notas
introducción, simplemente muestre la ventana de descripción del campo.
Para crear un campo Botón:
1. En el panel “Creación”, dentro del grupo “Campos habituales”, clique sobre debajo de “Botón”.
2. Clique en la página para crear el botón (por ejemplo debajo de los campos de entrada). El campo está
creado.
3. Pulse sobre la barra espaciadora: el texto pasa a modo edición.
4. Introduzca el texto (“Conectarse” e “Inscribirse”) y valide con la tecla [ENTER]. El texto se modifica
automáticamente.
Obtendrá la página siguiente:

Vamos ahora a ver en detalle el funcionamiento de los botones. Primero, vamos a ocuparnos del botón
“Inscribirse”:
1. Seleccione el botón “Inscribirse”.
2. Muestre la ventana de descripción del botón (doble clic en el campo).
3. En la pestaña “General”, en la lista “Acción”, vamos a indicarle la acción a realizar. En nuestro caso, vamos a
abrir la página de inscripción: seleccione “Mostrar la página PAGE_formulario”.
Aquí no se necesita ningún código: asociamos directamente en el editor del botón la acción a
Notas
realizar, aquí, abrir una página.
Para el botón “Conectarse”, será necesario introducir el código WLangage permitiendo realizar la búsqueda:
1. Seleccione el botón “Conectarse” y muestre los tratamientos asociados (tecla [F2]).
2. Introduzca el siguiente código en el trtratamiento “Clic (Servidor)”:
HReadSeekFirst (Inscripcion, Login, EDT_Login)

IF NOT HFound (Inscripcion) THEN
Error (“Login desconocido.”)
ELSE
IF EDT_Contraseña = Inscripcion.Contraseña THEN
Info (“OK, se ha conectado correctamente.”)
ELSE
Error (“Contraseña incorrecta”)
END
END

 Este código se ejecuta en código servidor porque realizamos una búsqueda en la base de datos que está en el
servidor.
 La función HReadSeekFirst permite buscar un valor en un fichero de datos. Por defecto, la búsqueda se
realiza sobre el nombre entero. Para efectuar una búsqueda del tipo “Comienza por”, hay que añadir un
parámetro: la constante hCommencePar.
 La función HFound permite saber si la búsqueda en el fichero de inscripción, ha tenido o no éxito. El código
“IF NOT HFound” permite definir la acción a realizar si no se encuentra el login (mostrar el mensaje “Login
desconocido.”), así como la acción a realizar si se encuentra el login.
 Si se encuentra el login, la contraseña introducida en el campo EDT_Contraseña se compara con la
encontrada dentro del fichero de datos (para el login especificado). Si las dos contraseñas son iguales,
entonces el internauta estará conectado, y si no, se mostrará un mensaje de error.
El código aquí presente es puramente didáctico. En un proyecto real:

 La contraseña no deberá estar almacenada visible. Es aconsejable encriptar la contraseña.
Notas
 Es aconsejable mostrar el mismo mensaje de error en caso de login o de contraseña (para

evitar un intento de pirateo de los logines).
4. Guarde ([CTRL]+[S]) y cierre el editor de código (aspa en la parte superior derecha).

Lanzar la prueba de esta página:

2. Introduzca los datos siguientes:
 Login polo
 Contraseña: polo1
3. Clique en el botón “Conectarse”. Se mostrará un mensaje de error.
4. Valide el mensaje y modifique la contraseña: “polo”.
5. Clique sobre el botón “Conectarse”. Ya estará conectado.
Conclusión
Solamente realizando dos páginas, hemos visto numerosas posibilidades de WEBDEV:
 Creación de campos: campos de entrada y botones.
 Posibilidades de alineamientos y de organización de los campos en la página.
 Añadir registros en los ficheros de datos.
 Encadenamiento de páginas.
 Búsqueda de registros en los ficheros de datos.
 Uso de códigos servidor y navegador.
 …
Tras esta visión general, en el próximo capítulo vamos a profundizar en el análisis y la definición de las características
de la base de datos antes de abordar el desarrollo de un sitio completo.

CAPÍTULO2
Mi primera
base de datos
Capítulo 2 – Mi primera base de datos |47

Lección 2.1. Presentación

 Presentación del proyecto realizado en este capítulo
Mi primera
base de datos

Presentación del proyecto realizado en este capítulo
En este capítulo, vamos a crear un proyecto asociado a una base de datos HFSQL.
Vamos a descubrir los elementos clave de la concepción de un sitio, manipulando los ficheros de datos:
 Creación de un proyecto WEBDEV.
 Descripción de los ficheros de datos manipulados por el sitio.
En un capítulo posterior, nos concentraremos en el desarrollo de los elementos (páginas, informes, …) de un sitio con
datos, que vamos a desarrollar desde la A a la Z, de la creación del interface (IHM) a la distribución final. Verá de
esta forma todos los puntos importantes del desarrollo de un sitio.
En este capítulo, la base de datos que vamos a crear juntos es una gestión de pedidos.
El mismo tipo de base de datos será el que se utilizará en el capítulo 3 de este curso para desarrollar un sitio
completo. La base de datos utilizada es HFSQL Clásico, la base de datos gratuita proporcionada con WEBDEV. Más
adelante en este curso, estudiaremos la base de datos HFSQL Cliente/Servidor.

Lección 2.2. WebDev y las bases de datos
 Vocabulario utilizado.
 Los distintos modos de acceso a las bases de datos.

Presentación
Cuando se concibe una aplicación, puede que tenga que manipular los datos. Para almacenarlos, deberá constituir lo
que se denomina una “base de datos”.
En WEBDEV, cuando se crea un proyecto que manipule los datos, deberá primero que nada crear un “análisis”.
Un “análisis” contiene la descripción de los ficheros de datos (o tablas). Los datos de la aplicación será guardadas en
los ficheros de datos.
Es solo durante la ejecución de la aplicación, cuando se utilizarán estas descripciones para crear la base de datos /o
los ficheros de datos. Es en esta base de datos donde estarán los ficheros de datos que guardarán las informaciones.
Varias herramientas de mantenimiento de base de datos HFSQL se proporcionan de manera

Notas
estándar con WEBDEV. Son accesibles desde el Centro de Control HFSQL.
WEBDEV sabe gestionar perfectamente distintos formatos de base de datos (por no decir todos). Los formatos más
habituales son:
 HFSQL, sistema de base de datos integrado con WEBDEV y proporcionado en estándar. La base de datos HFSQL
está disponible en modo clásico o cliente/servidor.
 AS/400, Access, Sybase, Informix, …
 Oracle, SQL Server, MySQL, xBase, ….
 Todas las bases accesibles en lenguaje SQL bajo Windows.
 Texto (ficheros ASCII).
Para acceder a los datos, hay distintas técnicas (llamadas “Modos de acceso”):
 Acceso Nativo.
 Acceso OLE DB.
 Acceso ODBC directo.
 Acceso EDBC vía OLE DB.
HFSQL
HFSQL es una base de datos a la vez muy potente, muy rápida y muy robusta.
HFSQL funciona bajo Windows y Linux, en móviles (iOS, Android, Windows), en las redes de cualquier tamaño y
cualquier tipo, y gestiona automáticamente centenares de accesos simultáneos.
HFSQL está disponible en versión clásica y versión cliente/servidor.
La difusión de HFSQL es libre y gratuita con los sitios WEBDEV.
HFSQL propone todas las funcionalidades de una base de datos, especialmente:
 La explotación
 Las transacciones
 La replicación
 Los triggers
 Los procedimientos almacenados,
 Los clusters, …
Para más detalles sobre el establecimiento de las funcionalidades, consulte la ayuda en línea.
En los distintos capítulos de este curso de auto-formación, vamos a manipular una base de datos HFSQL Clásica y
luego una base de datos HFSQL Cliente/Servidor.
Los distintos modos de acceso a las bases de datos

Acceso Nativo
Un acceso nativo manipula directa y exclusivamente un formato de base de datos. Este tipo de acceso optimizado
está desarrollado especialmente para cada formato de base de datos.
En WEBDEV, existe un acceso nativo para las bases de tipo:
 HFSQL Clásico o Cliente/Servidor (en estándar).
 xBase (en estándar)
 Access (en estándar)
 XML (en estándar)
 SQLite (en estándar)
 Oracle (opcional)
 AS/400 (opcional)
 SQLServer (opcional)
 Sybase (opcional)
 Informix (opcional)
 DB2 (opcional)
 Progress (opcional)
 MySQL (opcional y gratuito)
 PostgreSQL (opcional y gratuito)
 MariaDB (opcional y gratuito)
Hay otros accesos también disponibles; para ello contacte con nuestro servicio comercial.
Las funciones WLangage SQL* y HLit* son utilizables con este tipo de acceso. El código, es de esta forma, portable
e independiente de la base de datos.
Acceso ODBC directo
Un acceso ODBC directo utiliza un estándar de acceso multi-bases. Deberá instalar la capa ODBC 32 bits en su
máquina. Esta capa ya viene generalmente instalada en las últimas versiones de Windows. Para poder verificarlo, en
el panel de configuración de Windows eligiendo la opción “Administrador ODBC”.
Atención: Todas las bases de datos no son obligatoriamente accesibles a través de este método. Si desea utilizar este
tipo de acceso, verifica que existe un piloto ODBC e instala este piloto si hiciera falta.
Solo las funciones SQL* pueden ser utilizadas en este tipo de acceso.
Acceso OLE DB
Un acceso OLD DB es un acceso que utiliza un estándar de acceso multi-bases. Este tipo de acceso está basado en el
MDAC (Microsoft Data Access Component) de Microsoft.
Si utiliza un acceso OLE DB, deberá obligatoriamente instalar el MDAC en los puestos de usuario
Atención!
(como mínimo la versión 2.6).
Todas las bases de datos no son accesibles a través de este método. Si desea utilizar este tipo de acceso, verifique
que existe un piloto OLE DB.
Las funciones WLangage SQL* y HLit* pueden utilizarse con este tipo de acceso.
Acceso ODBC vía OLE DB
Resumiendo se trata de una mezcla de OLE DB y de ODBC. Esta técnica es la más “pesada” y la menos eficaz en
término de realizaciones. Es totalmente desaconsejable para bases de pequeño tamaño.
Las funciones WLangage SQL* y HLit* pueden utilizarse con este tipo de acceso.

Lección 2.3. Proyecto y análisis
 Creación de un proyecto.
 Creación de un análisis.

Presentación
Para crear un sitio con una base de datos, hay que:
 Crear el proyecto enlazado al sitio. Este proyecto agrupará todos los elementos del sitio (páginas, códigos,
consultas, informes, …).
 Crear el análisis enlazado al proyecto. El análisis permite describir todos los ficheros de datos manipulables por el
sitio.
Creación del proyecto

Para crear el proyecto:
1. Lance WEBDEV si no lo había hecho antes. Si es necesario, cierre el proyecto en curso.
2. En la ventana de inicio, clique en el botón “Crear un proyecto”, y luego sobre la opción “Sitio Web”. Se abrirá
el asistente para la creación de un proyecto. Las distintas etapas del asistente le ayudarán a crear su
proyecto. Todas las informaciones indicadas en este asistente, podrán modificarse posteriormente.
Astucia: Para crear un proyecto, también puede:

Notas
1. Clicar sobre en los botones de acceso rápido.

2. Se abre la ventana de creación de un nuevo elemento: clique en “Proyecto”.
3. Primero, el asistente permite introducir el nombre del proyecto, su emplazamiento y su descripción. En

nuestro caso, el proyecto se va a llamar simplemente “Mi_Sitio_WebDev”.
4. Por defecto, WEBDEV propone crear este proyecto en el directorio “\Mis sitios\Mi_Sitio_WebDev”. Puede
conservar este emplazamiento o modificarlo mediante el botón […].
Cuando desarrolla para la Web, es preferible evitar los caracteres acentuados en el nombre de
Notas
los elementos (proyectos, páginas, …).
Para el resumen del proyecto, introduzca “El proyecto tiene por objetivo gestionar los productos”.
5. Los distintos apartados del asistente se muestran en el margen derecho. Puede pasar rápidamente desde un
punto a otro clicando sobre él. Los otros apartados de la parte “Descripción” no son fundamentales, clique
directamente en “Cartas”.

6. Este apartado permite definir las distintas cartas asociadas al proyecto. Para la carta de programación, no
modifique las opciones propuestas. Pase al apartado siguiente con la ayuda de la flecha “siguiente” situada
bajo.
7. Este paso permite definir la carta gráfica (también llamada “Ambiente”). La carta gráfica permite definir el
“look” del sitio.
Los ambientes permiten armonizar el aspecto visual de un sitio y permitir que los cambios de
aspecto más sencillos y más rápidos.
Notas
El ambiente proporciona las imágenes, las fuentes, la textura, la forma de los botones y los
estilos disponibles para el proyecto.
Seleccione “Evolution”.
8. Vamos ahora a dar las informaciones concernientes a la base de datos. Clique directamente en “Base de
datos”.
9. Seleccione la opción “Si, Crear una nueva base de datos” y valide. El asistente de creación de análisis se
lanza.
Para seguir las distintas lecciones de este capítulo y optimizar su aprendizaje de WEBDEV, es
aconsejable crear el proyecto “Mi_Sitio_WebDev”.
Un ejemplo corregido está disponible en cualquier momento para validar las operaciones
Notas
efectuadas.
Para abrir el proyecto corregido, en el panel “Inicio”, en el grupo “Ayuda en línea”, despliegue
“Guia de auto-formación” y luego seleccione “Mi sitio WebDev (Corrregido)”.
Creación del análisis

Las etapas del asistente de creación del análisis son los siguientes:
1. Indique el nombre y el directorio del análisis. Por defecto, el nombre del análisis corresponde al nombre del
proyecto y el directorio del análisis es un directorio “.ana” en el directorio del proyecto.
Vamos a conservar estos parámetros por defecto. Pase a la etapa siguiente del asistente.

2. A continuación podrá elegir el o los tipos de bases de datos manipuladas por el proyecto. Seleccione HFSQL
clásico (la base de datos propuesta por defecto con WEBDEV).
Pase a la siguiente etapa del asistente.

3. Valide. El asistente de creación de un fichero de datos se lanzará automáticamente.
Creación de la descripción del fichero de datos

Nuestra aplicación de gestión de clientes y pedidos estará asociada al siguiente análisis. Este análisis tiene cinco
ficheros de datos (tablas) distintos:
 Cliente
 Pedido
 ModoLiquidacion
 LineaPedido
 Producto
Para crear los distintos ficheros de este análisis, vamos a utilizar distintos métodos disponibles en WEBDEV.

Creación de un fichero de datos: Uso de un fichero predefinido.
Las etapas del asistente de creación de un fichero de datos son las siguientes:
1. En el asistente, seleccione la opción “Seleccionar una descripción entre los ficheros de datos predefinidos”.
Avance al paso siguiente del asistente (flecha bajo del asistente).
2. Se muestra la lista de ficheros de datos predefinidos. Vamos a crear el fichero “Cliente”. En la lista de ficheros
de datos, seleccione “Cliente”. Pase a la etapa siguiente.
3. El asistente propone una lista de los campos a integrar en el fichero Cliente. Esta lista es impresionante por lo
que permite gestionar numerosos tipos de ficheros Cliente.
4. Clique sobre “Ninguno” para des-seleccionar todos los campos. Luego, marque solamente los siguientes
campos: IDCliente, Sociedad, Nombre, Apellidos, Direccion, CodigoPostal, Poblacion, EstadoDepartamento,
Pais, Telefono, Movil, Email.
5. Pase a la siguiente etapa del asistente.
6. Valide el asistente. El fichero “Cliente” se crea automáticamente en el editor de análisis.

7. Se muestra la ventana de creación de un nuevo elemento. Vamos ahora a crear el fichero de datos que
contendrá los pedidos.
Creación de un fichero de datos: creación del fichero y los campos
Para crear un fichero de datos desde la creación de un nuevo elemento:
1. Clique sobre “Datos” y luego sobre “Fichero de datos”.
También puede crear un fichero de datos directamente desde el editor de análisis: en el panel
Notas
“Análisis”, dentro del grupo “Creación”, clique sobre “Nuevo fichero”.
2. Se lanzará el asistente de creación de un nuevo fichero.

3. En el asistente, seleccione la opción “Crear una nueva descripción de un fichero de datos”. Pase a la siguiente
etapa del asistente.
4. Vamos a crear el fichero “Pedido”. Introduzca su nombre, ”Pedido”, en el asistente. Este nombre se utilizará:
 Para manipular el fichero de datos en programación. La variable asociada al fichero será “Pedido”.
 Para construir el nombre del fichero de datos físico asociado (fichero “Pedido.fic”).
Automáticamente, aparecerán el texto y la descripción de los elementos representados por los registros del
fichero de datos.
En el asistente, el campo “Un registro representa” permite tener un texto claro de la descripción
de los enlaces entre los ficheros de datos. Automáticamente, un texto se propone a partir del
Notas
nombre del fichero.

En nuestro caso, introduzca “Un pedido”.

5. En la zona “Identificador automático”, conserve la opción “identificador automático de 8 octetos”. Si se define
un identificador automático en el fichero de datos, esto significará que el fichero de datos tendrá una clave
única, gestionada automáticamente por WEBDEV.
Para crear el identificador (un identificador es una clave única), puede crear un campo numérico
de tipo “Identificador automático”.
Este identificador es gestionado automáticamente por WEBDEV. Cada vez que se añade un
Notas
registro al fichero de datos, WEBDEV afecta automáticamente un valor al identificador del

fichero. Este valor es único.
6. Pase a la etapa siguiente y seleccione el tipo de la base asociada al fichero de datos. Vamos a trabajar sobre
ficheros de datos HFSQL Clásico. Pase a la etapa siguiente.
7. Clique sobre el botón verde para validar. El fichero de datos se crea automáticamente en el análisis. Se abre a
continuación la ventana de descripción de los campos.
Vamos a introducir los campos del fichero “Pedido”. En la ventana de descripción del fichero de datos, puede observar
que ya se ha creado un campo automáticamente: “IDPedido”. Este campo corresponde al identificador automático del
fichero de datos. Este campo se compone con las letras “ID” y el nombre del fichero.
Vamos a crear los restantes campos del fichero de datos.
En primer lugar, vamos a crear el campo “Fecha”. Este campo contendrá la fecha del pedido.
1. En la ventana de descripción de los campos, doble clic sobre la columna “Nombre” de la primera línea vacía.
Esta columna pasa automáticamente a modo introducción. Introduzca “Fecha”.
2. Clique en la columna “Texto”. Automáticamente aparece el nombre del campo. Vamos a modificar el texto del
campo clicando debajo: introduzca “Fecha del pedido”. En la columna “Tipo”, aparecerá seleccionado de
modo automático el tipo “Texto”. Despliegue la lista y seleccione el tipo “Fecha”.
3. Este campo será una clave (índice) de nuestro fichero de datos. Las claves permite acelerar el acceso y las
clasificaciones.
 En el caso de una base de datos con formato SQL, el motor utiliza mejor los índices.
 En el caso de un recorrido secuencial en un fichero de datos, hay que indicar el índice para el recorrido (es
decir, la clave).
La noción de clave es una de las características de un campo. En efecto, cuando se crea un

campo, puede indicar si se trata de:
 No es clave
 Clave única: El valor de esta clave será único en el conjunto del fichero de datos (es
Notas
decir, en todos los registros del fichero de datos).

 Clave con duplicados: El valor de esta clave, podrá estar presente varias veces en el
fichero de datos.
4. La definición de clave se realiza de la siguiente manera: Re-seleccione la línea del campo “Fecha” para activar
los campos de descripción presentes a la derecha de la pantalla. Hay que especificar entonces el tipo de clave
utilizado. En nuestro caso, la fecha es una clave con duplicados.
5. También es igualmente necesario definir el sentido del recorrido de la clave. El sentido del recorrido permite
definir la clasificación por defecto de este campo. En nuestro caso, para efectuar el recorrido sobre esta clave,
la clasificación por defecto será “ascendiente”.
Ahora vamos a crear el campo “Situacion” que permite conocer la situación del pedido.
1. Posiciónese sobre una nueva línea de la tabla e introduzca:
 El nombre: Situacion
 El texto: Situación del pedido
 El tipo: Selector, Lista, Combo. En la ventana que se abre, puede seleccionar el tipo de campo creado por
defecto para este campo. Aquí, será un selector. Valide la ventana.
2. En la parte inferior de la pantalla, clique sobre la doble flecha para mostrar los parámetros del campo
enlazados con el campo seleccionado.
Las informaciones que se introduzcan aquí se utilizarán automáticamente cuando se creen las páginas
enlazadas al fichero de datos. Aquí encontrará el tipo de campo y el texto.
Vamos a introducir las distintas opciones correspondientes a la situación del pedido en la pestaña
“Contenido”:
 Clique en la pestaña “Contenido”.
 La opción 1 corresponderá a “En espera”. Introduzca “En Espera” en el campo de entrada a derecha del
número 1.
 Introduzca “Validado” en el campo de introducción a la derecha del número 2.
 Clique sobre el botón “+” para añadir una nueva opción en el selector.
 Introduzca “Anulado” en lugar de “opción 3”.

3. Clique nuevamente sobre la doble flecha.
4. De la misma manera:
 Posiciónese sobre una nueva línea de la tabla y cree el campo “TotalHT”. Este campo es de tipo “Monetario”.
 Posiciónese sobre una nueva línea de la tabla y cree el campo “TotalTTC”: Este campo es de tipo “Monetario”.
5. Listo, la descripción del fichero “Pedido” ha finalizado. Valide la ventana de descripción de los campos.
6. El fichero “Pedido” aparecerá sobre el editor de análisis.
Importación de un fichero CSV

Para crear el fichero “ModoLiquidacion”, conteniendo las características de la liquidación, vamos a utilizar otro
método: Importación de un fichero CSV.
Un fichero CSV es un fichero de texto que utiliza un formato específico. Este fichero contiene
datos para cada línea. Estos datos están separados por un carácter de separación (generalmente
Notas
una coma, un punto y coma o una tabulación).
A partir del fichero CSV que contiene los datos, WEBDEB creará:
 La descripción del fichero de datos en el análisis.
 El fichero de datos HFSQL con los datos existentes en el fichero CSV.

Para importar un fichero CSV en el análisis:
1. En el panel “Análisis”, en el grupo “Creación”, despliegue “Importar” y seleccione “Importar descripciones de
ficheros/tablas”.
Para importar un fichero (CSV u otro) en el análisis, también se puede realizar directamente un
“Drag and Drop” del fichero CSV (existente en el explorador de ficheros de Windows) hacia el
Astucia
editor de análisis. Esto lo veremos en el párrafo siguiente.
2. Se abre el asistente de importación de un fichero.

3. Pase a la etapa siguiente.
4. Seleccione el formato del fichero a importar. Aquí, seleccione “Fichero Texto”. Pase a la etapa siguiente del
asistente.
5. Indique la ruta del fichero a importar: “\Autoformacion\Ejercicios\Mi_Sitio_\WebDev\ModoLiquidacion.csv”

que está en el directorio de instalación de WEBDEV.
Nota: Por defecto, el selector de fichero no propone los ficheros CSV: indique la extensión “*.csv” para ver
este tipo de ficheros.
6. Pase a la etapa siguiente del asistente.
7. Indique los siguientes parámetros de importación:
 Registros delimitados por “<Retorno de carro/Salto de línea>”
 Columnas delimitadas por “<Punto y coma>”
 Cadenas delimitadas por “<Ninguno>”
 Separador decimal: “<Automático: punto o coma>”

8. No olvide marcar la opción “La primera línea contiene los nombres de las columnas”.
10. Aparecerá la estructura del fichero de datos que se va a crear. Conserve las opciones por defecto y pase a la
etapa siguiente.
11. El contenido del fichero CSV se convertirá automáticamente al formato HFSQL. El asistente propondrá crear el
fichero HFSQL en el directorio del proyecto. Conserve las opciones propuestas y pase a la etapa siguiente.

12. Valide el asistente. WEBDEV creará el fichero de datos.
Examinemos la descripción del fichero de datos importado:
1. Seleccione el fichero “ModoLiquidacion” y en el menú contextual, seleccione la opción “Descripción del fichero
de datos”.
2. En la ventana que se muestra, modifique la etiqueta del fichero: suprima “(Importado)”.
3. Clique sobre el icono para mostrar la descripción de los campos del fichero de datos.
4. Este fichero de datos no contiene identificador automático ni clave única. Vamos a poner el campo “Codigo”
como clave única:
 Posicione la cinta de selección si es necesario en el campo “Código”.
 En la parte derecha de la pantalla, clique sobre “Clave única”.
5. Obtendremos los datos siguientes:
6. Valide la ventana de descripción de los campos y luego la ventana de descripción del fichero.
Importación directa de ficheros de datos existentes
El último método que vamos a ver para crear ficheros de datos es la simple importación de ficheros de datos HFSQL
que ya existen. Vamos a utilizar este método para crear el fichero “Producto”.
Para importar los ficheros de datos HFSQL:
1. En el explorador de ficheros de Windows, abra el subdirectorio siguiente de WEBDEV:
“\Autoformacion\Ejercicios\Mi_Sitio_WebDev”.
2. Seleccione el fichero “Producto.fic”.
3. Efectúe un “Drag and Drop” del fichero “Producto” hacia el editor de análisis WEBDEV.
4. Se lanza el asistente de importación. Valide las distintas pantallas. El fichero de datos aparecerá en el editor
de análisis.
Todos los ficheros de datos necesarios, ya están presentes en el editor de análisis.
Hemos importado solamente la descripción del fichero “Producto” en el análisis de nuestro

proyecto. Los datos contenidos en el fichero “Producto” no se han importado a nuestro proyecto.
Para manipular los datos del fichero que acabamos de importar, copie en el explorador de
ficheros, los ficheros “Producto.fic”, “Producto.mmo” y “Producto.ndx” (que están en el directorio
Atención!
“\Autoformacion\Ejercicios\Mi_Sitio_WebDev”) hacia el subdirectorio EXE del directorio de su

proyecto.
Observación: Para abrir directamente el explorador de ficheros en el directorio de su proyecto,
en el panel “Inicio”, en el grupo “General, clique sobre
Creación de las relaciones

Hemos creado todas las descripciones de ficheros necesarios para la aplicación de la gestión de los productos.
Ahora vamos a crear las relaciones entre los ficheros de datos. Una relación permite definir las constantes de
integridad (cardinalidades) entre dos ficheros de datos.
Crearemos a continuación la relación entre el fichero “Cliente” y el fichero “Pedido”: un cliente puede tener uno
o varios pedidos, y cada pedido está relacionado con un cliente.
1. En el panel “Análisis” (existente en la cinta), en el grupo “Creación”, clique sobre “Nueva relación”. El cursor
del ratón se transforma en lápiz.
2. Clique sobre el fichero “Cliente” y luego sobre el fichero “Pedido”.
3. Se lanza el asistente de creación de relación.
4. Responda a las cuestiones planteadas por el asistente:

 Cada cliente tiene al menos un pedido: No
 Cada cliente puede tener varios pedidos: Si
 Cada pedido tiene al menos un cliente: Si
 Cada pedido puede tener varios clientes: No
Igualmente, puede introducir directamente las cardinalidades de la relación en el asistente.

Notas
5. Pase a la etapa siguiente. El asistente propone automáticamente la clave utilizada para la relación (IDCliente).
6. Muestre la pantalla siguiente del asistente. El asistente propone crear la clave “IDCliente” en el fichero Pedido
para almacenar el cliente correspondiente al pedido.

7. Acepte esta opción pasando a la pantalla siguiente.
8. Esta pantalla permite definir las reglas de integridad que se aplicarán automáticamente.
En nuestro caso, podrá elegir el comportamiento que desee cuando se elimina un cliente, así como el
comportamiento cuando se modifica el identificador del cliente.
9. Valide las reglas de integridad pasando a la pantalla siguiente.
10. Clique sobre la flecha verde. La relación se crea automáticamente en el editor de análisis.
De la misma manera, cree una relación entre los fichero “ModoLiquidacion” y “Pedido”.
Estos dos ficheros se relacionan de la forma siguiente:
 Un pedido deberá tener un modo de liquidación
 Un modo de liquidación puede utilizarse por varios pedidos.
En el asistente:
 Las cardinalidades son las siguientes: ModoLiquidacion(0,n), Pedido (1,1)
 La clave de la relación corresponde al campo “Codigo”.
Vamos ahora a crear una relación entre los ficheros “Pedido” y “Producto”. Esta relación nos permitirá crear un
fichero de líneas de pedido.
1. Cree de la misma forma la relación entre los ficheros.
2. Responde a las cuestiones planteadas por el asistente:
 Cada pedido tiene al menos un producto: No
 Cada pedido puede tener varios productos: Si
 Cada producto tiene al menos un pedido: No
 Cada producto puede tener varios pedidos: Si

3. Pase a la etapa siguiente. El asistente propone crear un fichero de relación. Conserve la opción “Crear
automáticamente el fichero de relación” y avance a la etapa siguiente.
4. El asistente propone la clave única del fichero Pedido a utilizar “IDPedido”. Pase a la siguiente etapa.
5. Valide la creación de la clave pasando a la etapa siguiente.
6. Conserve las opciones por defecto concernientes a las reglas de integridad y pase a la siguiente etapa.
7. El asistente propone la clave única del fichero Producto a utilizar. Seleccione “Referencia”. Pase a la etapa
siguiente.
8. Valide la creación de la clave pasando a la etapa siguiente.
9. Conserve las opciones por defecto, concernientes a las reglas de integridad y pase a la siguiente etapa.
10. Clique sobre la flecha verde. El fichero de relación se crea automáticamente en el editor de análisis.
Ahora vamos a modificar el fichero de relación que ha creado WEBDEV. En efecto este fichero contendrá las líneas del
pedido.
Vamos a:
 Modificar el nombre del fichero.
 Modificar el nombre de sus campos.
 Añadir campos para conocer las cantidad de productos pedidos y el total de la línea de pedido.
Primero vamos a renombrar el fichero. Ya hemos hecho una manipulación semejante cuando hemos cambiado
el texto del fichero importado. Pero aquí, no solo vamos a modificar el texto: vamos también a renombrar el
fichero físico enlazado con la descripción del fichero.
1. Seleccione el fichero “Pedido_Producto”. En el menú contextual, seleccione la opción “Descripción del fichero
de datos”.
2. En la ventana que se muestra, modifique:

 El nombre del fichero: “LineaPedido”.
 El nombre en el disco: “LineaPedido”.
Vamos ahora a modificar los campos del fichero de relación.
1. Clique sobre el icono para mostrar la descripción de los campos del fichero de datos.
2. Este fichero tiene 3 campos. Posicione la cinta de selección en el campo “IDPedido_Referencia”. Este campo
es una clave compuesta.
Una clave compuesta es un conjunto de campos que forman un índice.

Este tipo de clave permite recorrer el fichero de datos con criterios complejos o hacer búsquedas
Notas
sobre varios campos simultáneamente.
3. Para renombrar este campo:

 Clique sobre la columna “Nombre”.
 Sustituya “IDPedido_Referencia” por “IDLineaPedido”.
 Clique en la columna “Etiqueta”.
 Sustituya la etiqueta actual por “Identificador de LineaPedido”.
A continuación, añadiremos 3 nuevos campos en este fichero de relación: Cantidad, TotalTTC y TotalHT.
1. Posiciónese sobre una nueva línea y cree el campo “Cantidad”. Este campo es de tipo “Numérico”.
2. Posiciónese sobre una nueve línea y cree el campo “TotalTTC”. Este campo es de tipo “Monetario”.
3. Se muestra una ventana que indica que el campo ya existe en el análisis y propone recoger sus
características:

4. Conserve las opciones seleccionadas por defecto y valide (botón verde).
5. Posiciónese sobre una nueva línea de la tabla y cree el campo “TotalHT”. Este campo es de tipo “Monetario”.
Una vez más, acepte la descripción existente.
6. La descripción de los campos “LineaPedido” es la siguiente:
7. Valide la descripción de los campo (botón verde bajo de la pantalla) y la del fichero.
El análisis es ahora el siguiente:
Generación del análisis

La generación del análisis consiste en validar las modificaciones del análisis (creación de ficheros de datos, adición o
supresión de campos, …) y propagarlos en todo el proyecto (páginas, campos relacionados, informes, …).
La generación se propone automáticamente cada vez que se cierra el editor de análisis y se han efectuado las
modificaciones.
También es posible generar el análisis manualmente. Es lo que vamos a hacer ahora:
Para generar el análisis:

1. En el editor de análisis, en el panel “Análisis”, dentro del grupo “Análisis”, clique en “Generación”.
2. La generación del análisis se lanzará automáticamente.
Hemos modificado las descripciones de ficheros de datos existentes en el análisis.
Para actualizar los ficheros de datos de la aplicación, WEBDEV propone lanzar la sincronización de la estructura
de datos desplegados (también llamada “procedimiento de modificación de los ficheros de datos”). Esta
operación permite actualizar los ficheros de datos (ficheros “.fic” en función de su descripción en el análisis.
Clique en el botón “Lanzar”.
El asistente de modificación automática se lanza. Valide las distintas pantallas hasta que la aparezca la pantalla
que lista los ficheros a tener en cuenta:
 El fichero ModoLiquidacion necesita una actualización. Conserve este fichero seleccionado.
 El fichero Producto se ha copiado en el directorio del proyecto. WEBDEV propone asociarlo a este análisis.
Marque el fichero. Pase a la etapa siguiente.
 El asistente propone realizar una copia de seguridad de los ficheros de datos existentes. No cambie nada y
pase a la etapa siguiente.
 El asistente propone introducir las contraseñas de protección de los ficheros de datos modificados por la
modificación automática. Conserve las opciones por defecto y pase la etapa siguiente.
 La lista de ficheros de datos a modificar aparecerá. Valide el asistente.
 Se ha realizado la actualización de los ficheros de datos.
Cierre el editor de análisis.
Acaba de descubrir los principales pasos para la creación de un análisis.
Cuando su análisis esté descrito y generado, ya podrá:
 Crear un sitio completo mediante el RAD (Rapid Application Developpement). Para más detalles, consulte la
ayuda en línea.
 Crear un sitio completo totalmente personalizado. Este método se utilizará para desarrollar un sitio completo
basado en una base de datos en el capítulo 3 de este curso de autoformación. Este sitio se basará en un
análisis correspondiente al que acabamos de crear en este capítulo.

CAPÍTULO 3
Sitio Intranet
con datos
Capítulo 3 – Sitio Intranet con datos |72

 Presentación del sitio realizado en este capítulo

Presentación del sitio realizado en este capítulo
Los capítulos 3, 4 y 5 de este curso nos van a permitir realizar un sitio de gestión de pedidos manipulando los ficheros
de datos con formato HFSQL Clásico.
En el capítulo 3, vamos primero a realizar la parte Intranet del sitio. Este sitio Intranet permitirá visualizar, introducir y
modificar los productos. Este es un sitio WEBDEV dinámico.
Referenciación:
En un sitio dinámico WEBDEV, solo la página de inicio el sitio puede estar referenciada.
Notas
La referenciación de un sitio WEBDEV está presente en la “Lección 5.6. La Referenciación”.
El capítulo 4 nos permitirá realizar la parte internet del sitio. Será posible listar los nuevos productos y visualizar su
detalle.
El capítulo 5 nos permitirá continuar el desarrollo del sitio, proponiendo las siguientes funcionalidades:
 Impresión de informes
 Gestión de niveles de uso.
 Envío de emails
 Gestión multi-lenguaje
 …
El desarrollo de este sitio nos permitirá también abordar el despliegue del sitio en el capítulo 6. Veremos entonces los
puntos más importantes del desarrollo de un proyecto WEBDEV.
Hemos visto ya en el capítulo anterior como crear un proyecto y un análisis. No volveremos sobre ello. Ahora
trabajaremos en un proyecto que ya contiene un análisis y ficheros de datos rellenos. El análisis del sitio es una
versión mejorada del análisis que hemos creado en el capítulo anterior.
Este es el análisis utilizado.
Este análisis contiene la descripción de cinco ficheros de datos:

 Cliente
 Pedido
 LineaPedido
 Producto
 ModoLiquidacion
Este análisis es muy sencillo a propósito y permite generar un caso clásico de gestión de pedidos.
El sitio que vamos a realizar conjuntamente es relativamente largo (es un sitio completo que nos permitirá descubrir
las principales funcionalidades de WEBDEV), por lo que proponemos varios proyectos intermedios:
 Un proyecto que permite efectuar las manipulaciones del capítulo 3.
 Un proyecto que permite iniciar las manipulaciones del capítulo 5 (este proyecto integra todas las
manipulaciones efectuadas en los capítulos 3 y 4).
 Un proyecto final que permite efectuar las manipulaciones del capítulo 6 (este proyecto integra todas las
manipulaciones efectuadas en los capítulos 3, 4 y 5).
Al principio de cada lección, se especifican los distintos proyectos que pueden abrirse así como los pasos
necesarios para poderlos abrir.

Lección 3.2. Principio de visualización de un
sitio WEBDEV dinámico
 Contextos de las páginas
 Sesión WEBDEV

Principio de visualización de un sitio WEBDEV dinámico
La sesión WEBDEV
Cuando el internauta se conecta a un sitio WEBDEV dinámico, se crea automáticamente una sesión en el servidor.
Esta sesión contiene los contextos de las páginas correspondientes a cada página abierta por el internauta.
Las sesión finalizará cuando el internauta cierre el navegador y cuando el tiempo de espera de la sesión haya
expirado. Este tiempo de espera está definido en el administrador WEBDEV (Panel “Configuración”, opción
“Desconectar los usuarios inactivos después de).
Los contextos de la página
Para cada página mostrada en el navegador, un contexto de página se crea automáticamente en el servidor. Este
contexto de página contiene todos los elementos que serán necesarios para la construcción de la página visualizada
por el internauta:
 Variables globales
 Variables locales
 Tratamientos en el servidor
 Conexiones a las bases de datos
 Contextos de ficheros, …
Los contextos de página residen en la memoria del servidor hasta que finaliza la sesión de WEBDEV.
Si la misma página es llamada varias veces:
 Si se ha utilizado la función PageDisplay para mostrar la página, el contexto de la página se destruye y se
vuelve a crear
 Si se utiliza la función PageRefresh para mostrar la página, se reutiliza el mismo contexto de página.
Programación
Por defecto, la gestión de la sesión WEBDEV y los contextos de página es totalmente automática. No hay que
programar nada.

]

Lección 3.3. Páginas de adición y modificación
 Creación de una página dinámica que listará los productos.
 Creación de una página dinámica de tipo ficha de producto.
 Gestión de adición y modificación de un producto.

Presentación
Vamos a crear las distintas páginas de un sitio dinámico WEBDEV que permitirán listar, añadir y modificar los
productos. Estas manipulaciones nos harán descubrir:
 Como utilizar WEBDEV para crear páginas dinámicas
 Como acceder a la base de datos.
Estas manipulaciones, le harán también utilizar algunas funcionalidades muy útiles de WEBDEV.
Abra el ejercicio “Sitio WevDev Completo”:
1. Si fuera necesario, cierre el proyecto en curso para hacer aparecer la ventana de inicio.
2. En la ventana de inicio, clique en “Curso de auto-formación” y seleccione “Sitio WebDev completo (ejercicio)”.
Referenciación:
Corregido
En un sitio dinámico WEBDEV, solo la página de inicio el sitio puede estar referenciada.
La referenciación de un sitio WEBDEV está presente en la “Lección 5.6. La Referenciación”.
Creación de una página dinámica para listar los productos

Para crear la página que liste los productos, vamos primero que nada a crear una página en blanco, y luego
añadiremos los campos: De esta forma veremos todos los pasos necesarios para la creación de esta página.
Creación de una página utilizando un modelo
Para crear una página en blanco:
1. Clique sobre en los botones de acceso rápido (o utilice el atajo [CTRL]+[N]).

2. La ventana de creación de un nuevo elemento se muestra: clique sobre “Página” y luego sobre “Página”.
3. Se muestra el asistente de creación de una nueva página.
4. En los modelos predefinidos, seleccione “Simple” y luego, en la lista a la derecha, seleccione el modelo
“Menu”: Se trata de un modelo con un una cabecera arriba, un menú y el cuerpo de la página debajo.

Un modelo predefinido permite agrupar una parte del interface y de los tratamientos en un único
sitio.
Notas
Es aconsejable utilizar los modelos por reutilizar y armonizar el interface de sus sitios.
5. Verifique que la opción “Generar un modelo y una página” está bien marcado.
6. Valide el asistente (botón verde).
7. Aparece la nueva página en el editor.
Cuando se valida el asistente de creación de una página, WEBDEV crea automáticamente:

 La página que se mostrará en el navegador. Esta página se muestra directamente en el
editor y puede modificarse.
Notas
 El modelo de páginas asociado, correspondiente al modelo predefinido que hemos elegido.

Para modificar el modelo de páginas, es necesario editarlo. Veremos esta manipulación mas
adelante en esta misma lección.
Esta página contiene por defecto distintos campos que permiten visualizar las posibilidades de presentación. En
nuestro caso, vamos a eliminar los campos:
1. Seleccione los campos presentes en la página (con la combinación de teclas [CTRL]+[A]).
En el editor, por defecto, solo los campos de la página son accesibles. No se pueden editar los
campos y los tratamientos del modelo. Utilizando el atajo [CTRL]+[A], solo se seleccionan los
Notas
campos de la página. Los campos del modelo de las páginas no se modifican.
2. Elimine los campos (tecla [SUPR]).

3. Solo los campos correspondientes al modelo de la página permanecerán en la misma.
4. Guarde la página: Clique sobre en los botones de acceso rápido (o utilice el atajo [CTRL]+[S]).
5. En la ventana que se muestra, indique el título de la página “Lista de productos”.
6. Valide
Para crear la lista de productos, vamos a utilizar un campo Zona de repetición. Este campo estará relacionado con el
fichero de datos “Producto”.
¿Qué es un campo Zona de repetición?

La mejor manera de presentar los elementos en forma de lista en una página Web es un campo
Zona de repetición. Un campo Zona de repetición está formado, como su nombre indica, por una
Notas
zona (que puede contener varios campos) repetida un cierto número de veces.
Los datos contenidos en cada zona así repetidos, se entiende que son distintos.
Para crear el campo “Zona de repetición”:

1. En el panel “Creación”, dentro del grupo “Datos”, despliegue “Zona de repetición” y seleccione “Zona de
repetición”.
2. Clique en la página arriba a la derecha, justo debajo del menú: el asistente de creación del campo Zona de
repetición aparece.
3. El asistente solicita la forma de rellenar el campo Zona de repetición:
 Por programación (esta funcionalidad la veremos en una próxima lección).
 Desde la base de datos, a partir de un fichero de datos o de una consulta.
 A partir de una variable WLangage.
Aquí, el campo Zona de repetición deberá mostrar todos los productos: Seleccione la opción “Mostrar los datos
provenientes de un fichero o de una consulta”.
4. Avance a la etapa siguiente clicando en la flecha de la parte inferior de la pantalla.

5. La siguiente pantalla del asistente propone los distintos ficheros de datos y las consultas existentes en el
proyecto actual. Despliegue “Análisis” si fuera necesario y seleccione el fichero “Producto”.

7. El asistente propone la lista de los campos existentes en el fichero de datos. Por defecto, todos los campos
están marcados para ser mostrados en el campo Zona de repetición. En nuestro caso, vamos a mostrar todos
los campos EXCEPTO la descripción del producto.
Desmarque “Descripción” y pase a la etapa siguiente.

8. El asistente propone a continuación seleccionar la clave para el recorrido, es decir, la clasificación por defecto
de los datos mostrados en el campo Zona de repetición. Los campos propuestos en el asistente, corresponden
a los campos definidos como claves en el análisis. Vamos a clasificar los productos según su etiqueta.
Seleccione “Etiqueta” y pase a la etapa siguiente.

9. Vamos ahora a seleccionar los parámetros suplementarios para la creación del campo Zona de repetición
 El campo Zona de repetición está en modo Clásico: todos los datos se mostrarán cuando se cargue la página.
Seleccione el modo de funcionamiento “Clásico”.
 El campo Zona de repetición utiliza un número infinito de líneas. En efecto, todos los productos deberán ser
accesibles directamente en la página. La página deberá hacerse grande para poder mostrar todos los
productos.
Introduzca 0 en el campo “Número máximo de líneas por página”.
 El campo Zona de repetición mostrará los productos en 3 columnas.
En la zona “Número de columnas”, sustituya 1 por 3.
 Conserve el sentido de visualización propuesto.

10. Valide el asistente. El campo Zona de repetición se creará automáticamente en la página.
Vamos a ubicar el campo en la página:
1. Seleccione el campo.
2. Desplace el campo con la ayuda del ratón para posicionarlo arriba a la izquierda de la página.
Cuando el campo llega al límite de la zona de visualización del modelo de la página, verá que aparecen unos
trazos verdes: estos trazos permiten posicionar el campo al interior de la zona de visualización.
Detengámonos un instante en el campo que acabamos de crear: los datos ya se pueden ver en el campo, ahora
mismo en el editor.
Este es el concepto del “Live Data”: El contenido de los ficheros existentes en el puesto de desarrollo se utiliza en
las páginas o los informes manejados por el editor. Esta funcionalidad es muy interesante, por ejemplo, para poder
determinar el tamaño de los campos existentes en una página.
Ahora ocultaremos el campo que contiene el identificador del producto. ¿Por qué ocultarlo y no simplemente
eliminarlo? Simplemente porque este identificador nos será útil en la continuación de nuestro desarrollo.
1. Seleccione el campo “LIB_IDProducto”. Este campo corresponde al identificador (campo con un número
arriba en la zona de repetición).
2. Muestre la ventana de descripción del campo (opción “Descripción” del menú contextual).
3. En la pestaña “IHM”, desmarque la opción “Visible”.
4. Valide la ventana de descripción del campo.
Modificaremos ahora el menú de nuestra página, para poder mostrar la opción que permita listar los productos.
El menú se encuentra en el modelo de la página. Vamos a modificar el modelo de páginas.
1. Muestre el menú contextual del menú (clic derecho) y seleccione la opción “Abrir el modelo”.

2. Seleccione el menú.
3. Clique sobre la opción “Opción 1”. Un cuadro amarillo aparecerá alrededor del menú. Este cuadro amariñño
indica que el menú está en modo ”Edición” y puede modificarse.
4. Muestre la ventana de descripción de la opción (en el menú contextual, selección “Descripción de la opción”).
5. En la pestaña “General”:
 Introduzca el texto de la opción: Sustituya “Opción 1” por “Lista de los productos”.
 En el combo “Acción”, seleccione la acción “Mostrar la página PAGE_Lista_de_Productos”-
 Valide la ventana de descripción de la opción.
6. Utilice la tecla [ESC] para salir del modo de edición.
Acabamos de modificar el menú mostrado en el modelo. También es posible modificar otros

Notas
elementos del modelo, como el logo mostrado o el texto “Nombre de la Compañía”.
Para actualizar las páginas utilizando el modelo:
1. En la cinta original del modelo, clique sobre : este botón permite propagar las modificaciones del modelo
a todas las páginas que lo utilizan.
Si no propaga las modificaciones del modelo en sus páginas, se le propondrá automáticamente

una sincronización de los modelos cuando vaya a probar su página (y lo mismo antes de un
Notas
despliegue).
2. En nuestro caso, solo se propondrá una página.

3. Valide la ventana de actualización del modelo.
4. Cierre el modelo de las páginas.
Nuestra página está lista para ser probada.
A continuación, vamos a probar la página que acabamos de crear.

2. La página aparecerá automáticamente en el navegador.
3. Podrá hacer desfilar los productos utilizando el ascensor de la página.

Cierre el navegador. Reaparecerá el editor de WEBDEV.
Modificar productos mediante una página dinámica “Ficha de producto”

Tener la lista de productos, está bien, pero poder modificar un producto, es mejor. Ahora vamos a crear un página
que muestre el detalle del producto para poder modificarlo.
Para crear una página que muestre el detalle de un producto:
1. Cree una nueva página en blanco.
 Clique sobre en los botones de acceso rápido.

 Se abre la ventana de creación de un nuevo elemento: clique en “Página” y luego en “Página”.
 Se lanza el asistente de creación de una página.
 En la zona “Basada sobre un modelo del proyecto”, elija “PAGEMOD_Menu” y valide el asistente.
2. Guarde la página ( o [CTRL]+[S]). Esta página tiene como título: “Ficha del producto”, su nombre
“PAGE_Ficha_del_Producto” se propone automáticamente. Valide la ventana de guardar.
¿Qué deberá hacer la página?
La página que estamos creando está destinada a modificar las características del producto seleccionado actualmente
en el campo Zona de repetición. Este tipo de página se llama una “Ficha” simplemente porque corresponde a una
ficha descriptiva del elemento deseado.
En nuestro caso, esta página mostrará el contenido de los distintos campos existentes en el fichero de datos
“Producto”.
Vamos ahora a indicar a la página cual es el producto que deberá mostrar. Para ello, hay que declarar un parámetro
en la página.
Para declarar un parámetro en la página:
1. Utilice la tecla [F2]. El editor de código mostrará los distintos tratamientos de la página.
2. En el tratamiento “Declaraciones Globales”, introduzca el siguiente código:
PROCEDURE MyPage (gnIDProducto is 8-byte int)
3. Examinemosestecódigo:
 La palabra clave PROCEDURE en el tratamiento “Declaraciones Globales” permite asociar un procedimiento
cuando se abre la página.
 El procedimiento tiene como nombre “MyPage”. Cuando se ejecute, este palabra clave se sustituirá
automáticamente por el nombre de la página en curso.
 El procedimiento espera como parámetro la variable gnIDProducto que será un entero de 8 octetos.
Esta variable corresponde al identificador del producto que se tiene que mostrar en la página. Esta variable es
del mismo tipo que el campo “IDProducto” correspondiente, descrito en el fichero Producto.
 Cierre el editor de código. Vamos ahora a crear los distintos campos de la página.
Creación de los campos de entrada
Ahora vamos a creare los distintos campos de entrada que nos permitirán visualizar en la página las distintas
informaciones referidas al producto seleccionado.
Para crear los campos en la página:
1. Muestre si hiciera falta el panel “Análisis”: en la cinta, en el panel “Inicio”, en el grupo “Entorno”, despliegue
“Paneles” y seleccione “Análisis”. Los distintos ficheros de datos descritos en el análisis
“Sitio_WebDev_Completo” aparecerán en el panel.
2. Clique en la flecha a la derecha del fichero “Producto”: los campos del fichero de datos se listarán:
3. Seleccione con la ayuda del ratón la totalidad de los campos mostrados en el panel (excepto el campo
IDProducto). Puede por ejemplo utilizar el lazo del ratón o la multi-selección manteniendo pulsada la tecla
[CTRL].
4. Realice un “Drag and Drop” (Arrastrar/desplazar) de estos campos hacia la página que acaba de crear.

5. Los distintos campos se crean automáticamente en la página. Estos campos son automáticamente enlazados
al campo correspondiente en el fichero de datos. Para verificarlo:
 Seleccione por ejemplo el campo “Referencia”.
 Muestre el menú contextual (clic derecho) y seleccione la opción “Descripción”.
 Muestre la pestaña “Enlace” de la ventana de descripción:
Esta pestaña permite ver que el campo de entrada actual está enlazado con el campo “Referencia” del fichero
de datos “Producto”.
6. Cierre la ventana de descripción.
7. Guarde la página ([CTRL]+[S]).
Ubique los campos en la página para poder obtener el siguiente Interface:

Haga más grande el campo Imagen para poder visualizar correctamente la imagen asociada al producto.
Ahora vamos a aprovechar para alinear los campos de entrada de la página y darles a todos el mismo tamaño:
1. Seleccione el campo “Descripción”, y a continuación todos los restantes campos de entrada de la página
(manteniendo pulsada la tecla [CTRL] y clicando sobre los distintos campos). El primer campo seleccionado es
el que servirá de referencia para el tamaño de los otros campos.
2. Muestre el panel “Alineación” del menú de WEBDEV. Este panel contiene todas las opciones de alineación
disponibles para los campos.
3. Nosotros queremos que los bordes externos e internos de los campos estén alineados. Clique sobre la opción
“Justificar (Int y Ext)”.
4. Guarde la página.
Mostrar los datos en la página
La página “Ficha” deberá mostrar el producto seleccionado en el campo Zona de repetición. En el código de la página,
vamos ahora a introducir el código que permita:
 Buscar el producto a mostrar.
 Mostrar los datos en la página.
Para mostrar los datos en la página:

1. Utilice la tecla [F2]. El editor de código muestra los distintos tratamientos de la página.
2. En el tratamiento “Declaraciones Globales”, a continuación del código que ya habíamos escrito antes,
introduzca el siguiente código:
HReadSeekFirst (Producto, IDProducto, gnIDProducto)
IF HFound (Producto) = False THEN
// Se muestra la lista de los productos
PageDisplay (Page_Lista_de_Productos)
END
FileToPage()
 La función HReadSeekFirst permite buscar el primer registro del fichero Producto para el que el campo
IDProducto sea igual al valor gnIDProducto. gnIDProducto corresponde al parámetro pasado a la página.
 La función HFound permite verificar si un registro se ha encontrado efectivamente. Esta función es
notoriamente necesaria en los sitios multi-usuarios. Permite así evitar las eliminaciones efectuadas por otros
usuarios. En nuestro caso, si el registro no ha sido encontrado (la función HFound devuelve Falso), se
mostrará la lista de productos.
 La función FileToPage permite mostrar en los campos, los datos existentes en el fichero de datos para el
registro actual. En nuestro caso, el registro actual corresponderá al encontrado con la función
HReadSeekFirst.
4. Cierre el editor de código.
Creación de los botones
La página “PAGE_Ficha_del_Producto” permitirá en primer lugar cambiar un producto existente en la lista de
productos.
Vamos a continuación a añadir un botón de anulación y otro de validación.
 El botón de anulación simplemente volverá a mostrar la página anterior.
 El botón de validación verificará los datos introducidos y guardará los datos modificados.
Botón Anular
Para crear el botón “Anular”
1. En el panel “Creación”, en el grupo “Campos habituales”, clique sobre “Botón”.
2. Clique bajo de los campos de entrada para crear el botón.
3. Modifique el texto del botón (utilice la tecla [ESPACIO] para editar el texto): el nuevo texto es “Anular”.
Introduzca el código asociado al botón “Anular”.
1. Seleccione el botón y pulse la tecla [F2]. Los distintos tratamientos asociados al botón aparecerán.
2. En el código clic del servidor, introduzca el siguiente código:
PageDisplay (PreviousPage())
 La función PageDisplay permite mostrar una página específica.
 La función PreviousPage permite conocer el nombre de la página anterior.
 Este código permitirá entonces mostrar la página anterior.
4. Guarde las modificaciones ( o [CTRL]+[S]).
Por defecto, todo botón creado en una página es de tipo SUBMIT: este botón envía el valor de
los campos de la página al servidor. Este es el caso más habitual.
Otros dos modelos están disponibles:
Notas
 Reinicializar los campos de la página.

 Ninguna acción. Este modo se utilizará solo cuando el botón tenga que realizar una acción
“Navegador”.
Botón Validar
Para crear el botón “Validar”:
1. En el panel “Creación”, dentro del grupo “Campos habituales”, clique en “Botón”.

2. Clique a continuación a la izquierda del botón “Anular” para crear el botón.
3. Modifique el texto del botón: el nuevo texto es “Validar”.
El botón de validación permitirá:

 Verificar los datos introducidos. Esta verificación consiste en verificar que el usuario ha rellenado correctamente
los distintos campos de la página. Esta verificación no necesita el acceso al servidor y puede realizarse en código
navegador.
 Registrar los datos introducidos en el fichero de datos Producto. Este registro se efectúa en código servidor. Los
datos son enviados al servidor y luego guardados en el fichero de daos.
Introduzca el código asociado al botón “Validar”:
1. Seleccione el botón “Validar” y pulse la tecla [F2]. Los distintos tratamientos asociados al botón se mostrarán.
2. En el código clic del navegador del botón introduzca siguiente código de verificación:
IF EDT_Referencia ~= “” THEN
Error (“Debe introducir una referencia.”)
ReturnToCapture (EDT_Referencia)
END
IF EDT_Etiqueta ~= “” THEN
Error (“Debe introducir una etiqueta.”)
ReturnToCapture (EDT_Etiqueta)
END
IF EDT_Descripcion ~= “” THEN
Error (“Debe introducir una descripción.”)
ReturnToCapture (EDT_Descripcion)
END
IF EDT_PrecioHT ~= “” THEN
Error (“Debe introducir un precio.”)
ReturnToCapture (EDT_PrecioHT)
END
 Para campo de entrada existente en nuestra página, verificaremos si se ha introducido algún valor.
 El operador “~=” la igualdad entre la caja de entrada y el texto introducido.
 Si no se ha introducido ningún valor, aparecerá un mensaje de error pidiendo al internauta que introduzca los
datos (función Error). La ejecución del código se inicia y se fuerza la introducción del campo de entrada
erróneo, mediante la función ReturnToCapture.
4. En el código clic del servidor del botón, introduzca el código para guardar los datos:
PageToFile ()
HModify (Producto)
PageDisplay (PAGE_Lista_de_Productos)
 La función PageToFile permite inicializar los campos con los valores de los campos enlazados, para el
registro actual. Esta función es equivalente a las siguientes líneas:
Producto.Referencia = EDT_Referencia
Producto.Etiqueta = EDT_Etiqueta
Producto.Descripcion = EDT_Descripcion
…
Nuestra página utiliza menos de 10 campos y ya se notan las ventajas; piense simplemente en las páginas
que contengan varias decenas de campos: una sola línea de código realiza todas las afectaciones!.
 La función HModify permite actualizar los datos del fichero de datos para el registro actual.
 La función PageDisplay permite mostrar otra página. En nuestro caso, volveremos a mostrar la página
“PAGE_Lista_de_Productos”.
7. Cierre la ventana de código.
Gestión de la imagen del producto
Dentro del fichero producto hay un campo que permite almacenar la imagen asociada al producto.
Actualmente tenemos el campo Imagen en nuestra página, que permite ver la imagen, pero vamos a dar al internauta
la posibilidad de cambiar la imagen asociada al producto.
Para ello, vamos a permitir al usuario cargar un fichero imagen existente en su puesto para, a continuación, asociarla
al campo existente en el fichero de datos. Vamos a utilizar un campo Upload.
El Upload consiste en copiar un fichero del puesto de cliente hacia el servidor

Notas
El Download consiste en lo contrario: copiar un fichero del servidor hacia el puesto cliente.
WEBDEV propone gestionar el upload de los ficheros mediante dos campos específicos:
 Un campo Upload que permite la carga de un único fichero.
 Un campo Upload que permite la carga de varios ficheros.
Notas
En este ejemplo, el usuario cargará un solo fichero a la vez, por lo que usaremos el campo
Upload mono-fichero.
Para crear un campo Upload

1. En el panel “Creación”, dentro del grupo “Campos habituales”, despliegue “Botón”. La lista de los distintos
botones predefinidos se mostrará.
2. Selecciones “Envío de un solo fichero”.
3. Clique en la página en la posición donde deberá crearse el campo (Por ejemplo debajo del campo imagen).
Un campo Upload se compone de:

 Un campo Etiqueta.
 Un campo evolución, que permite seguir la progresión de la carga.
 Un botón que permite al usuario seleccionar el fichero a cargar.
Vamos ahora a adaptar el código del campo para gestionar la carga del fichero en nuestro sitio.
Para configurar el campo Upload:
1. Muestre el código del botón “Enviar”: Seleccione el campo utilizando la tecla [F2].
2. Existen varios tratamientos asociados al campo Upload. Vamos a modificar el tratamiento “Recepción de los
ficheros cargados” para copiar la imagen en el directorio de los datos del sitio.
3. En el tratamiento “Recepción de los ficheros cargados”, introduzca el siguiente código:
UploadCopyFile (MySelf, fDataDir(), …
UploadFileName (MySelf, False))
gsCaminoImagen = fDataDir() + [fsep ()] + …
UploadFileName (MySelf, False)
IMG_Visual = gsCaminoImagen
Este código utiliza “…”. Estos tres puntos permiten efectuar un return a la línea en una línea de
código. Aquí se utilizan como ejemplo.
Notas
En el editor de código puede suprimirlas y utilizar una sola línea de código.
4. Examinemos el código:
 La función UploadCopyFile permite guardar en el servidor el fichero cargado por el usuario. En nuestro caso
el fichero se copia en el directorio de datos (conocido por medio de la función fDataDir). El nombre del
fichero se conserva.
 El camino de la imagen cargada se memoriza en una variable global gsCaminoImagen.
¿Por qué utilizar una variable global?

Aquí se utiliza una variable global porque el camino de la imagen va a utilizarse posteriormente
por el código del botón “Validar” para guardar la nueva imagen en el fichero de datos.
Notas
Para más detalles sobre las condiciones de uso de las variables locales y globales, consulte los
anexos.
 La función fSep permite recuperar el separador que utiliza el sistema operativo del servidor (“\” para
Windows, “/” para Linux). Así, su sitio es totalmente independiente del servidor sobre el que se instale.
 La imagen cargada se muestra inmediatamente en el campo imagen IMG_Visual.
5. Durante la introducción y el registro del código, la variable gsCaminoImagen aparecerá en rojo y un error
de compilación aparecerá en el panel de errores: “Identificador ‘gsCaminoImagen’ desconocido o inaccesible”.
Efectivamente, no habíamos declarado esta variable global.
6. Para declarar la variable global:
 Muestre el código de declaración de globales para la página (por ejemplo, en el editor de código, en el panel
“Código”, en el combo que lista todos los tratamientos, seleccione el tratamiento “Declaraciones globales”).

 Introduzca el código siguiente después de la declaración del procedimiento:
gsCaminoImagen es un string
7. Guarde las modificaciones clicando sobre en los botones de acceso rápido. Los errores de compilación
desaparecen.
De aquí en adelante, nuestra imagen puede cargarse en el servidor. No hay más que gestionar el registro de la
imagen en la base de datos.
Para registrar la imagen en el fichero producto:
1. Muestre el código del botón “Validar”:
 Seleccione el botón “Validar”.
 Pulse la tecla [F2]
2. En el código clic servidor del botón, introduzca el siguiente código DESPUÉS de la llamada a la función
PageToFile:
IF gsCaminoImagen <> “” THEN
Producto.visual = fLoadBuffer (gsCaminoImagen)
END
3. Examinemos el código:
 Este código verifica el contenido de la variable global gsCaminoImagen. Si este variable no corresponde a
una cadena vacía, esto significa que la imagen ya ha sido cargada por el usuario. En este caso, el campo
“visual” del fichero Producto se rellena con el contenido vinario de la imagen. Este contenido se recupera
mediante la función fLoadBuffer.
 La función Hmodify (ya escrita en el código) permite guardar los cambios en el fichero de datos.
4. Guarde las modificaciones ( o [CTRL]+[S])
Mostrar la ficha desde la lista de productos
Ahora vamos a ver como mostrar la ficha del producto seleccionado en la lista de productos. El principio es simple: el
usuario seleccionará un producto en la zona de repetición y mostrará el detalle gracias a un enlace.
Primero vamos a modificar la página “PAGE_Lista_de_productos” para crear un enlace de la modificación
1. Sitúese sobre la página “Lista de productos”: clique sobre el botón “PAGE_Lista_de_Productos” en la
barra de botones:
2. Bajo el panel “Creación”, en el grupo “Campos habituales”, clique sobre “Enlace”.

3. Clique a continuación en el campo Zona de repetición para crear el enlace (por ejemplo, bajo a la
derecha).
4. Modifique el texto del enlace (utilice la tecla [ESPACIO] para editar el texto): El nuevo texto es
“Modificar”.
El enlace “Modificar” deberá abrir la página “PAGE_Ficha_del_Producto”. Vamos a abrir esta página por
programación:
1. Seleccione el enlace “Modificar” y muestre los tratamientos asociados (tecla [F2]).
2. En la ventana de código que se muestra, introduzca el siguiente código en el tratamiento servidor “Clic de”:
PageDisplay (PAGE_Ficha_del_Producto, ATT_IDProducto [ZR_Producto])
Déjese guiar por el asistente de la introducción de código: desde que abre el paréntesis “(“, se
abre una lista desplegable proponiendo el nombre de todas las páginas existentes en el
proyecto. Bastará con seleccionar la página con el teclado o con el ratón.
Notas
Si no encuentra el nombre de la página que busca en la lista, es porque no se ha guardado

previamente.

 La función PageDisplay permite abrir la página “PAGE_Ficha_del_Producto”.
 La página abierta espera como parámetro el identificador del artículo a mostrar. Este identificador
corresponde al identificador del producto seleccionado en el campo Zona de repetición. Para obtener el
identificar, hay que precisar el atributo que contiene el identificador (ATT_IDProducto) para la línea en curso.
Los corchetes permiten indicar la línea y ZR_Producto permite obtener la línea en curso de la zona de
repetición.
Por defecto, ATT_IDProducto devuelve el valor del atributo para la línea clicada. El código podría
entonces escribirse simplemente:
Notas
PageDisplay (PAGE_Ficha_del_Producto, ATT_IDProducto)

5. Cierre la ventana del código.
Hemos implementado los distintos elementos que permiten gestionar la modificación de un producto; ahora vamos a
realizar una prueba para verificar que todo funciona.
Pruebe el proyecto ( en los botones de acceso rápido).

1. El editor pide la primera página del proyecto. En nuestro caso, seleccione la página
“PAGE_Lista_de_Productos” y valide.

La primera página del proyecto corresponde a la primera página que se abre cuando se lanza el
sitio.
La primera página del proyecto puede definirse:
 Cuando se prueba el proyecto.
Notas
 En el explorador del proyecto: hay que seleccionar la página deseada, mostrar el menú
contextual y seleccionar la opción “Primera página dinámica del proyecto”.
Cuando se ha definido una primera página del proyecto, un pequeño 1 rojo aparece delante del
nombre de la página en el explorador del proyecto.
2. Se lanza el sitio.
3. En la lista de productos:
 Clique sobre el enlace “Modificar”.
 La página de detalle del producto se muestra:
 Modifique el precio de un producto y valide.

 El nuevo precio del producto se muestra en la lista de productos.
Cierre las páginas para detener la prueba.
Añadir un nuevo producto mediante la página “Ficha del producto”

Hemos visto como modificar un producto. Ahora, queremos también poder añadir un producto nuevo. Para ello, no
tendremos que crear una nueva página; simplemente vamos a reutilizar la página “PAGE_Ficha_del_Producto” que
hemos creado y la adaptaremos para la gestión de la adición.
Vamos primero a modificar el modo de apertura de la página “PAGE_Ficha_del_Producto”.
1. Sitúese sobre la página “Ficha del Producto”. Clique sobre el botón “PAGE_Ficha_del_Producto” en la barra de
botones.
2. Pulse la tecla [F2] para mostrar el código de la página.
3. En el código “Declaraciones globales”, en primer lugar, vamos a dar un valor por defecto al parámetro pasado
a la página. En efecto, en el caso de una modificación del registro, el parámetro pasado corresponde siempre
al identificador del producto a modificar. Pero en el caso de adición de un registro, el identificador del
elemento no existe. Para gestionar este caso, vamos a utilizar el valor por defecto “-1”.
4. En el tratamiento “Declaraciones globales, sustituya el siguiente código:
Por el código:
PROCEDURE MyPage (gnIDProducto is 8-byte int = -1)
5. Ya solo queda gestionar el valor “-1” (caso de adición de un nuevo registro). Sustituya el código:

END
FileToPage()

Por el código:
IF gnIDProducto = -1 THEN
HReset (Producto)
ELSE
END
END
FileToPage()
Examinemos este código:
 Si el identificador del producto vale -1, estamos en el caso de la adición de un producto. En este caso, se
ejecutará la función HReset. La función HReset inicializa las variables de los campos del fichero “Producto”
con los valores por defecto para generar un nuevo registro.
 Si el identificador del producto es distinto de -1, nos encontramos el código que permite abrir una ficha en
modificación.
La gestión de la adición de un registro deberá igualmente realizarse a nivel del botón de validación
1. En la página “PAGE_Ficha_del_Producto”, seleccione el botón “Validar”.
2. Muestre los tratamientos asociados al botón (tecla [F2]).
3. El código presente en el tratamiento de clic del navegador no deberá cambiarse: las verificaciones a efectuar
son siempre las mismas. Solo deberá modificarse el código servidor.
4. En el tratamiento “Clic de”, sustituya el código por el siguiente:
PageToFile()
IF gsCaminoImagen <> “” THEN
Producto.visual = fLoadBuffer (gsCaminoImagen)
END
IF Producto..NewRecord THEN
HAdd (Producto)
ELSE
HModify (Producto)
END
PageDisplay (PAGE_Lista_de_Productos)
 La propiedad ..NewRecord permite conocer si el registro en curso deberá crearse.
 Si la función HReset se ha llamado anteriormente, la propiedad devuelve True (caso de un nuevo
producto) y el registro deberá crearse por la función HAdd.
 En caso contrario, el registro en curso existe ya y deberá modificarse con la función HModify.
 La función HAdd añade el registro en el fichero de datos. Esta función toma los valores en memoria y
escribe el contenido de los campos del fichero en el mismo fichero de datos. Los índices se actualizan
inmediata y automáticamente. Aquí, el fichero de datos se sobreentiende que es el fichero “Producto”.
6. Cierre la ventana del código.
Ahora vamos a modificar el menú de la página para permitir al usuario añadir un nuevo producto.
1. Sitúese en la página “Lista de productos”: clique en el botón “PAGE_Lista_de_Productos” en la barra de
botones.
2. Muestre el menú contextual de un botón y seleccione “Abrir el modelo”.
3. Seleccione el menú
4. Clique sobre la opción “Opción 2”. Un cuadro amarillo aparecerá alrededor del menú. Este cuadro amarillo
indica que el menú está en modo “Edición”: puede modificarse.
5. Muestre la ventana de descripción de la opción (opción “Descripción de la opción” en el menú contextual).
 Introduzca el texto de la opción: sustituya “Opción 2” por “Añadir un producto”.
 En la zona Acción, seleccione la acción “Mostrar la página PAGE_Ficha_del_Producto”.
7. Valide. La opción del menú aparece:
8. En la cinta naranja del modelo, clique sobre para propagar las modificaciones del modelo a todas las
páginas que utilizan el modelo.
9. En nuestro caso, se proponen las dos páginas del proyecto. Valide la ventana de actualizar el modelo.
10. Cierre el modelo de páginas.
Podremos ahora probar a añadir un producto.
Prueba de adición de un producto
Para realizar la pruebaa de adición de un producto
1. Lance la prueba del proyecto ( en los botones de acceso rápido).

2. Clique sobre “Añadir un producto”.
3. Introduzca un nuevo producto con la siguientes características:
 Referencia: REF-337
 Etiqueta: Surf20
 Descripción: Surf con los colores de WebDev
 Precio: 150
4. Valide. El nuevo producto aparecerá en la lista de productos.

5. Clique nuevamente en la opción del menú “Añadir un producto”.
6. Introduzca un nuevo producto con las siguientes características:
 Referencia: REF-337
 Etiqueta: Surf20
 Descripción: Surf con los colores de WebDev
 Precio: 150
7. Valide: Aparecerá una página específica:

Esta página indica al usuario que existe un duplicado: La referencia, que es clave única, es idéntica para los
dos productos. Esta página permite modificar el valor de la referencia (mostrada en una zona roja):
introduzca por ejemplo “REF-338”.
Esta página es una de las páginas de gestión automática de los errores HFSQL, disponible en estándar.

CAPÍTULO 4
Sitio Internet
con datos
Capítulo 4 – Sitio Internet con datos |100

 Presentación del sitio realizado en este capítulo

Presentación del sitio realizado en este capítulo
Dentro de este capítulo, vamos a continuar con el proyecto que hemos realizado en el capítulo 3: vamos a crear una
parte Internet en el sitio Intranet. La parte Internet permitirá lisar los nuevos productos y visualizar el detalle.
Esta parte del sitio se creará en modo AWP (Active WEBDEV Page).
Referenciación
En un sitio AWP WEBDEV, todas las páginas del sitio pueden ser referenciadas.
Notas
El capítulo 5 nos permitirá continuar el desarrollo del sitio, proponiendo las siguientes funcionalidades:
 Impresión de informes.
 Gestión de niveles de uso.
 Envío de emails.
 Gestión multi-lenguaje.
 …
El desarrollo de este sitio nos permitirá también abordar el despliegue del sitio en el capítulo 6.
Recuerde: Vamos a trabajar sobre un proyecto asociado a un análisis y que ya tiene rellenos los ficheros de datos.
Este es el análisis que se utiliza:
Este análisis contiene la descripción de 5 ficheros de datos:

 Cliente
 Pedido
 LineaPedido
 Producto
 ModoLiquidacion
Este análisis es voluntariamente simple y permite gestionar un caso clásico de gestión de pedidos.
Si ya ha seguido el capítulo 3 de este curso, las manipulaciones del capítulo 4 se realizarán en el mismo ejemplo.
Si no ha seguido el capítulo 3 de este curso, no podrá realizar la manipulación que permitirá

Atención!
enlazar la parte Internet e Intranet del sitio (párrafo “Enlace del sitio Internet y del sitio
Intranet”).

Lección 4.2. Principio de visualización de un
sitio AWP
 ¿Qué es una página AWP?
 Funcionamiento de los sitios AWP.
 Compartir las informaciones entre las páginas AWP.

Principio de visualización de un sitio WEBDEV AWP
La parte Internet de nuestro sitio se desarrollará en modo AWP. Al contrario que en los sitios dinámicos, el modo AWP
permite una referenciación fácil de las páginas del sitio.
Detengámonos un instante en el funcionamiento del modo AWP.
¿Qué es una página AWP?
Una página AWP (Active WEVBDEV Page) es una página dinámica WEBDEV sin contenido persistente en el
servidor. El contexto de la página AWP es temporal. Se crea en una sesión temporal
Recuerde: En un sitio dinámico WEBDEV, cada página mostrada posee un contexto de página persistente en toda la
duración de la vida de la sesión en el servidor.
Funcionamiento de los sitios AWP
Para cada página AWP mostrada en el navegador, se crean automáticamente en el servidor:
 Una sesión temporal.
 Un contexto de página AWP temporal.
La sesión temporal contiene el contexto de página AWP temporal. Cuando la página AWP se envía al internauta, el
contexto de página temporal y la sesión temporal se destruyen. No queda nada en la memoria del servidor.
El contexto de página AWP temporal contiene todos los elementos que se necesitan para la construcción de la
página visualizada por el internauta.
 Tratamientos servidor
 Conexiones con las bases de datos
 Contextos de fichero, …
Cuando la página AWP se ha enviado al internauta, estos elementos se destruyen.

¿Cómo compartir las informaciones (valores) entre dos páginas AWP?
Dos métodos permiten compartir las informaciones (valores) entre dos páginas AWP:
 Traspaso de información en la URL. Este método permite una mejor referenciación.
 Guardar las informaciones en los contextos AWP (por programación).
Traspaso de informaciones (valores) entre dos páginas en la URL
Se pueden pasar informaciones de una página a otra a través de la URL. La URL es de la forma:
http://Servidor Web/.../mipagina.awp?NombreParametro1=Valor1& NombreParametro2=Valor2
Este método permite una mejor referenciación de la página porque las informaciones pasadas en la URL son visibles y
analizadas por los robots de referenciación.
Guardar las informaciones (valores) en los contextos AWP (por programación)
Se pueden almacenar en el servidor los valores comunes a varias páginas AWP, mediante los contextos AWP. Un
contexto AWP se crea en disco en el servidor. Este contexto está disponible mientras las páginas AWP se visualizan y
el tiempo de espera de los contextos AWP no se ha agotado. El tiempo de espera de los contextos AWP está definido
en el administrador WEBDEV (Pestaña “Configuración”, opción “Duración de los contextos AWP”).
Para gestionar los contextos AWP, hay que utilizar las funciones WLangage DeclareAWPContext,
FreeAWPContext, …
Para más detalles consulte la ayuda en línea.

Lección 4.3. Creación de páginas AWP
 Creación de una página AWP que lista los nuevos productos.
 Creación de una ficha producto AWP.
 Importación de estilos CSS.
 Enlace entre la parte Internet y la parte Intranet del sitio.
 Creación de una página de condiciones generales de ventas.

Presentación
Vamos a crear las distintas páginas AWP que permiten listar, añadir y modificar los nuevos productos. Estas
manipulaciones le harán descubrir muchos aspectos de la gestión de los ficheros de datos y le harán también
manipular algunas funcionalidades del modo AWP.
Si no ha abierto el ejercicio “Sitio WebDev Completo” en la lección anterior:
1. Si es necesario, cierre el proyecto en curso para hacer aparecer la ventana de inicio.
2. En la ventana de inicio, clique sobre “Curso de Auto-formación” y seleccione “Sitio WebDev Completo
(Ejercicio).
Hay disponible un proyecto corregido. Este proyecto contiene las distintas páginas creadas en
Corregido
esta lección. Para abrir el proyecto corregido, en el panel “Inicio”; en el grupo “Ayuda en línea”,
despliegue “Guía de auto-formación” y luego seleccione “Sitio WebDev Completo (Corregido)”.
Creación de una página AWP que liste los nuevos productos

Vamos ahora a crear en el proyecto “Sitio_WebDev_Completo” una página que lista los nuevos productos. Esta página
será una página “Vitrina” y será accesible por Internet. Esta página deberá ser referenciada en Internet, y deberá
entonces utilizar el modo de generación AWP.
Para crear una página que liste los nuevos productos
1. Cree una nueva página:

 Se muestra la ventana de creación de un nuevo elemento: clique sobre “Página” y luego sobre “Página”.
 En el asistente de creación de una nueva página, clique en el modelo predefinido “Sencillo” y luego seleccione
“Sencillo”.
 Verifique que la opción “Generar un modelo y una página” esté bien marcado.
 Valide el asistente.
2. La nueva página aparece en el editor, con los campos propuestos por defecto. Elimine estos campos:
 Seleccione los campos presentes en la página (con la combinación de teclas [CTRL]+[A]).
 Elimine los campos (Tecla [SUPR]).
3. Guarde la página: Clique sobre en los botones de acceso rápido.
4. En la ventana que se muestra, indique el título de la página: “Lista de novedades”.
5. Valide para guardar la página “PAGE_Lista_de_novedades”.
Esta página deberá poder referenciarse. Para ello, deberá generarse en modo AWP:
1. Muestre la ventana de descripción de la página: muestre el menú contextual y seleccione “Descripción”.
2. Marque la opción “Generación en modo AWP (sin contexto automático)”.

3. Valide.
4. Guarde las modificaciones clicando sobre en los botones de acceso rápido.
Creación de la lista de los nuevos productos
Vamos a mostrar la lista de los nuevos productos. Para ello, vamos a utilizar un campo Zona de repetición. Ya hemos
visto en el capítulo anterior como crear este tipo de campo sin programación, mediante el asistente. Para esta página,
vamos a programar el relleno del campo Zona de repetición.
Creación del campo Zona de repetición
Para crear el campo Zona de repetición
1. En el panel “Creación”, dentro del grupo “Datos”, despliegue “Zona de repetición” y selecciones “Zona de
repetición”. El campo en creación seguirá entonces el movimiento del ratón.
2. Clique en la página arriba a la derecha: Se lanza el asistente de creación del campo Zona de repetición.
3. En el asistente, seleccione la opción “Quiero rellenar yo mismo la zona de repetición por programación”.
Avance a la etapa siguiente clicando en la flecha bajo de la pantalla.

4. En la etapa siguiente, vamos a seleccionar los parámetros suplementarios para la creación del campo zona de
repetición:
 El campo Zona de repetición está en modo clásico: Todos los datos serán mostrados cuando se cargue la
página.
Seleccione el modo de funcionamiento “Clásico”.
 El campo Zona de repetición utiliza un número de líneas infinito. En efecto, todos los productos deberán ser
accesibles directamente en la página. La página deberá hacerse más grande para poder mostrar todos los
productos.
Introduzca 0 en el campo “Número máximo de líneas en una página”.
 El campo Zona de repetición va a mostrar las novedades en 5 columnas.
Dentro de la zona “Número de columnas”, cambie 1 por 5.
 Guarde el sentido de visualización propuesto.
5. Avance a la etapa siguiente.

6. La última etapa permite indicar el nombre del campo (por ejemplo ZR_Novedades). Valide el asistente. El
campo Zona de repetición se crea automáticamente en la página.
El campo Zona de repetición creado está vacío. WEBDEV materializa la celda principal (la que se va a editar) con un
trazo completo, y las siguientes en trazo punteado.
Reduzca el tamaño de la celda principal para que las 5 celdas entren en la anchura de la página

Ahora vamos a crear los distintos campos que se mostrarán en el campo Zona de repetición.
Cada repetición va a mostrar:
 Un campo Imagen mostrando la imagen del producto.
 Un campo Enlace mostrando el nombre del producto y permitiendo abrir la ficha de detalle.
 Un campo Etiqueta que permitirá almacenar el identificador del producto.
Vamos a crear estos distintos campos y luego programaremos el relleno del campo zona de repetición.
Creación de los campos presentes en la zona de repetición
Para crear el campo Imagen:
1. En el panel “Creación”, dentro del grupo “Campos usuales”, clique sobre “Imagen”. El campo a crear
aparecerá bajo el ratón.
2. Pase por la primera repetición. Un cuadro verde aparecerá permitiendo visualizar la zona disponible.
3. Clique arriba a la izquierda de la primera repetición del campo Zona de repetición. Se ha creado el campo
Imagen.
4. Muestre la descripción del campo Imagen para modificar las características del campo (doble clic sobre el
campo).
5. Modifique:
 El nombre del campo: IMG_Visual
 El tipo de la imagen: “Desde una base de datos: memo (velocidad media)”. En efecto, la imagen del producto
está almacenada en forma de memo en un campo del fichero de datos Producto.
 El modo de mostrar la imagen: “Homotético centrado” con la opción “Visualización de alta calidad” marcada.
6. Valide.
Para crear el campo Enlace:
1. En el panel “Creación”, dentro del grupo “Campos habituales”, clique sobre “Enlace”.
2. Clique en el campo Zona de repetición, bajo de la imagen para crear el enlace.
3. Muestre la descripción del campo Enlace para modificar las características del campo (doble clic sobre el
campo).

4. El campo tendrá por nombre “LNK_Visu_Producto”.
6. Seleccione el campo Enlace y aumente su anchura (con la ayuda del ratón) para que ocupe la anchura de la
repetición.
Para crear el campo Etiqueta que contendrá el identificador del producto:
1. En el panel “Creación”, dentro del grupo “Campos habituales”, despliegue “Texto” y seleccione “Etiqueta
simple”.
2. Clique en el campo Zona de repetición, a la derecha de la imagen para crear la etiqueta.
3. Muestre la descripción del campo Etiqueta para modificar las características del campo (doble clic sobre el
campo).
4. Este campo tiene por nombre “LIB_Producto”.
Para rellenar los campos existentes en la zona de repetición y modificar sus características en cada repetición, vamos
a crear los atributos.
Un campo Zona de repetición se compone de:

 Campos, repetidos en cada repetición.
 Atributos. Un atributo permite definir la característica del campo que será modificado a cada
Notas
repetición. Por ejemplo, si en cada repetición el campo PRECIO debe cambiar de valor y de
color, será necesario definir dos atributos distintos sobre el mismo campo.
Para crear los atributos:

1. Muestre la ventana de descripción del campo Zona de repetición (doble clic sobre el campo).
2. En la parte superior de la ventana, un único atributo se ha creado por defecto Vamos a definir 3 atributos
(uno para cada campo de la zona de repetición).
3. Modifique el atributo creado por defecto:
 Renombre el atributo como “ATT_Imagen”.
 Seleccione el campo “IMG_Visual”.
 Seleccione la propiedad “Valor”. De este modo, el valor de la imagen se modificará a cada repetición.
4. Cree un nuevo atributo clicando en el botón “Nuevo”.

 Renombre el atributo como “ATT_Enlace”.
 Seleccione el campo “LNK_Visu_Producto”.
 Seleccione la propiedad “Texto”. De este modo, el texto del campo se modificará a cada repetición.
5. Cree un nuevo atributo clicando en el botón “Nuevo”.
 Renombre el atributo como “ATT_ID”.
 Seleccione el campo “LIB_Producto”.

 Seleccione la propiedad “Texto”. De este modo, el texto del campo se modificará a cada repetición.
6. Valide la ventana de descripción del campo Zona de repetición.

El campo Zona de repetición ya está finalizado. Ahora ya podremos programar el relleno del campo zona de
repetición.
Relleno de la zona repetida
El relleno del campo Zona de repetición se realizará cuando se inicialice la página.
Para rellenar el campo Zona de repetición:
1. Muestre los tratamientos asociados a la página (clique en la página y seleccione la opción “Código” del menú
contextual o utilice la tecla [F2]).
2. En el código de inicialización de la página, introduzca el siguiente código:
FOR ALL producto WHERE Novedad = TRUE
LooperAddLine(ZR_Novedades, Producto.Visual, …
Producto.Etiqueta, Producto.IDProducto)
END
 Este código efectúa un recorrido del fichero producto mediante la instrucción FOR ALL.
 Solo se seleccionan los registros en los que el campo “Novedad” es verdadero.
 La función LooperAddLine permite añadir una nueva repetición en el campo Zona de repetición. Los
distintos atributos de la repetición son actualizados con los datos del registro en curso:
o El valor del atributo “ATT_Imagen” corresponde a la imagen contenida en el campo “Visual” del
fichero “Producto”.
o El texto del atributo “ATT_Enlace” tiene por valor el contenido del campo “Etiqueta” del fichero
“Producto”.
o El texto del atributo “ATT_ID” tiene por valor el contenido del campo “IDProducto” del fichero
“Producto”.
Vamos a continuación a probar la página que acabamos de crear:


Cierre el navegador. Reaparecerá el editor de WEBDEV
Visualización del detalle de una novedad

Tener la lista de los nuevos productos, está muy bien. Ahora vamos a crear una página “ficha” que permita ver el
detalle del producto. Esta página se mostrará cada vez que el internauta clique sobre el enlace sobre el nombre del
producto en el campo Zona de repetición.
Para crear una pàgina mostrando el detalle de un producto:
1. Crear una nueva página:

 Se muestra la ventana de creación de un nuevo elemento: clique sobre “Página” y luego sobre “Página”.
 Se muestra el asistente de creación de una página.
 En la zona “Basada en un modelo del proyecto”; elija “PAGEMOD_Simple” y valide el asistente.
2. Guarde la página ( o [CTRL]+[S]). Esta página tiene por título “Detalle del producto, y su nombre
“PAGE_Detalles_del_producto” se propone automáticamente. Valide la ventana de guardar.
Al igual que para la página de la lista de las novedades, esta página deberá generarse en modo AWP:
1. Muestre la ventana de descripción de la página (en el menú contextual, seleccione la opción “Descripción”).
2. Marque la opción “Generación en modo AWP (sin contexto automático)”-
3. Valide
¿Qué deberá hacer la página?
La página que estamos a punto de crear, está destinada a mostrar las características del producto actualmente
seleccionado en el campo Zona de repetición.
En nuestro caso, esta página mostrará el contenido de los distintos campos existentes en el fichero de datos
“Producto”.
Vamos primero a indicarle a la página cual es el producto que deberá mostrar. Para ello, hay que declarar un
parámetro en la página. Este parámetro se traspasará por la URL.
Para declarar un parámetro en la página:
2. En el tratamiento “Declaraciones globales”, introduzca el siguiente código:
 La palabra clave PROCEDURE en el tratamiento “Declaraciones globales” permite asociar un procedimiento a
la apertura de la página.
 El procedimiento tiene por nombre “MyPage”. En la ejecución, esta palabra clave se sustituirá por el nombre
de la página en curso.
 El procedimiento espera por parámetro la variable gnIDProducto que es un entero de 8 bytes. Esta variable
corresponde al identificador del producto a mostrar en la página. Esta variable es del mismo tipo que el
campo IDProducto correspondiente, descrito en el fichero Producto. Este parámetro contiene el valor que
estará presente en el URL.
4. Cierre el editor de código. Vamos ahora a crear los distintos campos de la página.
Vamos ahora a crear los distintos campos de entrada que permitirán visualizar en la página las distintas informaciones
correspondientes al producto seleccionado.
En el capítulo anterior, vimos como crear los campos mediante un “Drag and Drop” desde el panel del análisis. En
este capítulo, vamos a crear los campos primero, y luego los asociaremos a los campos correspondientes en el fichero
de datos.
Vamos a crear los siguientes campos:
 Un campo imagen.
 Etiquetas simples para la etiqueta del producto, su precio y su referencia.
 Un texto enriquecido para la descripción del producto.
Para crear el campo Imagen:
1. En el panel “Creación”, en el grupo “Campos habituales”, clique sobre “Imagen”.
2. Clique en la página (por ejemplo arriba a la izquierda).
3. Muestre la descripción del campo Imagen para modificar las características del campo (doble clic sobre el
campo).
 Este campo tiene por nombre “IMG_Imagen_Producto”.
 Su tipo es “Desde una base de datos: memo (velocidad media)”.
 El modo de visualización: “Homotético centrado sin agrandar”.

Con el modo de visualización “Homotético centrado sin agrandar”, el tamaño de la imagen se
adaptará homotéticamente a la zona definida por la imagen. Las proporciones se mantendrán y
Notas
la imagen no se hará más grande.

Para crear el campo Etiqueta simple para mostrar la etiqueta del producto:
1. En el panel “Creación”, en el grupo “Campos habituales”, despliegue “Texto” y seleccione “Etiqueta simple”.
2. Clique en la página (por ejemplo, a la derecha de la imagen).
Para simplificar el posicionamiento de los campos, pulse la tecla[F7]. Al pulsar esta tecla se
puede ver la zona ocupada por el campo, una segunda pulsación en esta tecla permite mostrar
un marco alrededor del campo (solo en edición).
Notas
Así es posible ver el cuadro del campo y así posicionar sencillamente los campos unos con
respecto a otros.
Esta funcionalidad es muy útil sobre todo para los campos que no tienen borde.
3. Renombre el campo Etiqueta: “LIB_Titulo”.

4. Agrande el campo (con la ayuda del contorno de redimensionamiento).
Vamos a mostrar la descripción del campo en un campo Texto enriquecido (llamado Zona de Texto
Enriquecido). Para crear el campo:
1. En el panel “Creación”, en el grupo “Campos habituales”, despliegue “texto” y seleccione “Zona de Texto
Enriquecido”. También es posible clicar directamente en el icono “Texto”.
2. Clique en la página, por ejemplo a la derecha de la imagen, bajo del campo “LIB_Titulo”.
3. Renombre el campo: “ZTR_Descripcion”.

Vamos a mostrar el precio del producto en un campo de visualización formateado. Este tipo de campo permite por
ejemplo mostrar fechas, horas, valores monetarios, respetando el formato de visualización correspondiente.
Para crear un campo de visualización formateado:

1. En el panel “Creación”, en el grupo “Campos habituales”, despliegue “Texto” y seleccione “Campo de
visualización formateado”.

2. Clique en la página, bajo de la descripción del producto: el campo se crea automáticamente.
Vamos ahora a modificar las características de este campo:

1. Muestre la ventana de descripción del campo que acaba de crear: doble clic sobre el campo por ejemplo.
 Modifique el nombre del campo “LIBF_Precio”.
 Elimine el texto.
 Modifique el tipo del campo: Seleccione “Monetario”.

3. Valide.
Cree un campo Texto simple para mostrar la referencia del producto. Este campo tiene como nombre
“LIB_Referencia” y como etiqueta “Referencia”. Este campo está posicionado bajo el precio.
Todos los campos que necesitamos ya se han creado. Ahora vamos a asociar cada campo con el registro
correspondiente. Esta asociación se realiza en la pestaña “Enlace” de la ventana de descripción del campo.
Para enlazar el campo “IMG_Imagen_Producto” al dato correspondiente:
1. Seleccione el campo “IMG_Imagen_Producto”.
2. Muestre el menú contextual (clic derecho) y seleccione la opción “Descripción”.
3. Muestre la pestaña “Enlace” de la ventana de descripción. Esta pestaña permite ver que el campo actual no
está enlazado con ningún dato. Vamos a enlazarlo al campo “Visual” del fichero de datos Producto.
4. En la zona “Campo enlazado”, despliegue “Análisis” y luego despliegue “Producto”. La lista de campos del
fichero de datos Producto se visualizará.
5. Seleccione el campo “Visual” del fichero de datos “Producto”.

Realice la misma manipulación para efectuar los enlaces siguientes:
 Campo LIB_Titulo enlazado al campo “Etiqueta” del fichero “Producto”.
 Campo ZTR_Descripcion enlazado al campo “Descripcion” del fichero “Producto”.
 Campo LIBF_Precio enlazado al campo “PrecioHT” del fichero “Producto”.
 Campo LIB_Referencia enlazado al campo “Referencia” del fichero “Producto”.
Guarde la página.
Mostrar los datos en la página

La página “Ficha” deberá mostrar el producto que se ha seleccionado en el campo Zona de repetición. En el código de
la página, vamos a introducir el código que permita:
 Buscar el producto a mostrar.
 Mostrar los datos en la página.
Para mostrar los datos en la página:

2. En el tratamiento “Declaraciones globales”, a continuación del código que ya habíamos escrito, introduzca el
siguiente código:
IF HFound (Producto) THEN
FileToScreen()
END

 La función HReadSeekFirst permite buscar el primer registro del fichero Producto para el cual el campo
IDPRoducto sea igual al valor de gnIDProducto, correspondiente al parámetro pasado a la página.
 La función HFound permite verificar si un registro realmente se ha encontrado. Esta función es muy
necesaria en los sitios multi-usuario. Permite evitar los errores debidos a las supresiones efectuadas por otros
usuarios.
 La función FileToScreen permite mostrar en los campos los datos existentes en el fichero de datos, para el
registro en curso. En nuestro caso, el registro en curso corresponde al registro encontrado con la función
HReadSeekFirst.
Mostrar la ficha desde la lista de productos.

Vamos ahora a ver como mostrar la ficha del producto seleccionado en la lista de productos. El principio es simple: el
usuario seleccionará el producto en el campo Zona de repetición y mostrará el detalle mediante un enlace. Este
enlace, ya existe en la zona de repetición.
Primero, vamos a modificar la página “PAGE_Lista_de_Novedades” para que el enlace abra la página de
descripción del producto:
1. Sitúese en la página “Lista de Productos”: Clique en el botón “PAGE_Lista_de_Novedades” en la barra de
botones.
2. Muestre la ventana de descripción del campo Enlace: doble clic sobre el campo.
3. En la pestaña “General” de la ventana de descripción, en la zona “Acción” seleccione “Mostrar la página
PAGE_Detalle_del_producto”.
4. Clique sobre el botón “Parametros”. Vamos a definir el parámetro a pasar a la página para mostrar el detalle
del producto seleccionado.
5. En la ventana que se muestra, buscaremos el nombre del parámetro que hemos declarado en el tratamiento
“Declaración de globales” de la página (gnIDProducto). Hay que seleccionar el campo que contiene el valor
del parámetro. En nuestro caso, el identificador del producto está contenido en el atributo “ATT_ID”.
6. Seleccione “ATT_ID” y valide.
Atención: En una zona de repetición, el valor no puede estar contenido en el campo, pero es en
Notas
el atributo que tiene asociado donde está la característica del valor.

7. Valide la ventana de descripción del campo Enlace.
Vamos a realizar una prueba para verificar que todo funciona.

1. Sitúese si es necesario en la página “PAGE_Lista_de_novedades”.
3. La página aparece automáticamente en el navegador.
4. Clique sobre el enlace para mostrar el detalle de un producto.
Gestión de los estilos.

Para mejorar nuestra página, vamos a modificar los estilos de los campos. Si tiene un infografista o una carta gráfica
definida para su sitio (carta gráfica de la empresa, por ejemplo), los estilos se han definido previamente en una hoja
de estilos CSS. Vamos a importar esta hoja de estilos en nuestro proyecto WEBDEV para utilizar estos estilos.
WEBDEV propone dos tipos de estilos:

 Los estilos WEBDEV.
 Los estilos CSS.
Un estilo WEBDEV es un conjunto de estilos CSS que permite definir un estilo global en los
Notas
objetos de alto nivel.

Por ejemplo, un estilo WEBDEV para un campo de entrada contendrá dos estilos CSS:
 Un estilo para el texto.
 Un estilo para el texto de la zona de entrada.
Recuerde: Cuando se crea un sitio, es posible elegir un ambiente. Los ambientes permiten
armonizar el aspecto visual de un sitio y realizan los cambios de aspecto más sencillamente y
más rápidos.
El ambiente proporciona las imágenes, las fuentes, la textura, la forma de los botones y los
Notas
estilos disponibles para el proyecto.

De este modo podrá crear fácilmente sitios con un aspecto profesional, a partir de los estilos
proporcionados de modo estándar. La importación de estilos CSS permite en este caso por
ejemplo, añadir un nuevo estilo encontrado en Internet.
Importar una hoja de estilos CSS
Para importar la hoja de estilos CSS en el proyecto:
1. En la cinta, en el panel “Proyecto”, en el grupo “Proyecto”, despliegue “Importar” y seleccione “Una hoja de
estilos CSS”.
2. Se lanza el asistente de importación y propone dos opciones:

 Importar los estilos CSS: Esta opción importa directamente los estilos CSS en el proyecto WEBDEV. Los estilos
se modificarán bajo WEBDEV.
 Utilizar una hoja de estilos CSS externa: esta opción permite utilizar una hoja de estilos existente. Esta opción
deberá utilizarse cuando una hoja de estilo por ejemplo, está definida por una empresa y deberá estar
compartida en diversos sitios (carta gráfica de empresa).
3. Elija la opción “Importar los estilos CSS en WEBDEV” y clique sobre la flecha amarilla.
4. Seleccione el fichero “stylesperso.css”. Este fichero está disponible en el directorio
“\Autoformacion\ejercicios\Sitio_WebDev_Completo”. Los distintos estilos contenidos en la hoja de estilo se
mostrarán.
 Una vista previa del estilo seleccionado se muestra a la derecha.
Los rectángulos de colores en la vista previa permiten cambiar el color de fondo. Así se puede
Astucia
obtener una vista previa de sobre un color distinto del blanco.
 El prefijo “class-“ indica que es una clase CSS. Este atributo significa que este estilo será aplicado sobre todos
los elementos que tengan el atributo HTML “class”.
5. Conserve todos los estilos propuestos y valide. Los estilos se importarán y están disponibles en WEBDEV.
Aplicar los estilos CSS
Vamos ahora a aplicar los distintos estilos a los campos de la página “PAGE_Detalles_del_producto”.
1. Sitúese sobre la página “PAGE_Detalles_del_producto”.
2. Muestre la ventana de descripción del campo “LIBF_Precio” que muestra el precio del producto (doble clic
sobre el campo).
3. En la pestaña “Estilo”:
 Seleccione el elemento “Zona de visualización (CSS)”.
 Seleccione el estilo “class-styleprix” en la lista “Style CSS”.

4. Valide. El estilo se aplica automáticamente al campo.
5. Haga más grande el campo si fuera necesario (con la ayuda del contorno de redimensionamiento) para
adaptar su tamaño al contenido.
6. Guarde las modificaciones (( o [CTRL]+[S]).
Vamos a realizar una prueba para verificar que todo funciona.
1. Sitúese si fuera necesario sobre la página “PAGE_Lista_de_novedades”.
3. La página se muestra automáticamente en el navegador.
4. Clique sobre el enlace para mostrar el detalle de un producto. El precio se mostrará de aquí en adelante en
color rojo.
Enlace del sitio Internet y del sitio Intranet

Hasta aquí, hemos creado páginas Intranet que permitían generar los productos y páginas Internet que permitían a
los internautas consultar las novedades.
Vamos a enlazar estas páginas proporcionando desde las páginas Internet un enlace “Administración” que permita
acceder a las páginas Intranet.
Para ello, modificaremos el modelo de las páginas Internet.

Las siguientes manipulaciones pueden realizarse solamente si ha seguido el capítulo 3 de este
Atención!
curso de auto-formación, referido a la creación de páginas de Intranet.
Para crear un enlace “Administración”_

1. Sitúese en la página “Lista de novedades”.
2. Muestre el menú contextual de uno de los enlaces que hay en la parte superior de la página y seleccione la
opción “Abrir el modelo”.
3. Muestre la descripción del campo Enlace (doble clic sobre el campo).
4. Modifique el texto del campo: “Administración”.
En sus desarrollos, le aconsejamos nombrar siempre correctamente sus elemento (por ejemplo
Astucia
aquí, nombre el enlace “LNK_Administracion”). El código se hace más legible.
5. Seleccione la operación sobre los campos: “Ninguna”.

6. Valide.
Vamos ahora a introducir el código asociado a este enlace:

1. Muestre los tratamientos asociados a este enlace ([F2] sobre el campo).
2. En el código clic del navegador, introduzca el siguiente código:
DynamicSiteDisplay (“Sitio_WebDev_Completo”
3. En este código, la función DynamicSiteDisplay permite mostrar la primera página dinámica del proyecto
(en nuestro caso, será la página “PAGE_Lista_de_productos”).
4. Cierre el editor del código.
5. En la cinta naranja del modelo, clique sobre para propagar las modificaciones del modelo a todas las
páginas que utilizan este modelo.
6. En nuestro caso, las dos páginas AWP del proyecto se propondrán. Valide la ventana de actualizar el
proyecto.
7. Cierre el modelo de páginas.
Vamos ahora a modificar la página “PAGE_Lista_de_productos” para que pueda ser abierta por la función
DynamicSiteDisplay:
1. Muestre la página “PAGE_Lista_de_productos” en el editor.
2. Muestre la ventana de descripción (en el menú contextual, seleccione “Descripción”).
3. En la pestaña “Avanzado”, marque la opción “Autorizar el acceso para la función DynamicSiteDisplay()”.

4. Valide.
Vamos ahora a lanzar la prueba del proyecto mediante las páginas AWP.
1. Sitúese sobre la página “Lista de novedades”.
2. Clique sobre en la lista de botones de acceso rápido.
4. Clique en el enlace “Administración”. La página de gestión de productos aparece.

Creación de una página mostrando las condiciones generales de venta

Ahora vamos a crear un tipo de página muy utilizado en los sitios de venta: una página que muestre las condiciones
generales de venta. Para ello, vamos a utilizar el campo Zona de texto enriquecido, que permite introducir
rápidamente un texto.
Para crear una página mostrando las condiciones generales de venta:
1. Crear una nueva página.

 Se muestra la ventana de creación de un nuevo elemento: clique en “Página” y luego en “Página”.
 En la zona “Basado en un modelo del proyecto”, elija “PAGEMOD_Simple” y valide el asistente.
2. Guarde la página ( o [CTRL]+[S]). Esta página tiene como título “Condiciones generales de venta” , su
nombre “PAGE_Condiciones_generales_de_venta” se propone automáticamente. Valide la ventana de
guardar.
Creación del campo
Para crear el campo de Texto enriquecido:
1. En la cinta, bajo el panel “Creación”, en el grupo “Campos habituales”, despliegue “Texto” y seleccione “Zona
de texto enriquecido”.
2. Clique en la página (por ejemplo arriba a la izquierda). El campo se crea automáticamente.
Este tipo de campo se adapta automáticamente en altura a su contenido. Vamos a definir solamente una
anchura específica:
1. Seleccione el campo que acaba de crear.
2. Agrande el campo en anchura (con la ayuda de los bordes) hasta que ocupe la anchura de la página.
Ahora vamos a a mostrar las condiciones generales de ventas en el campo. Previamente, hemos preparado el
fichero que contiene el texto.
1. Copie el texto existente en el fichero Cgv.txt. Este fichero está disponible en el directorio
“\Autoformacion\Ejercicios\Sitio_WebDev_Completo” del directorio de instalación de WEBDEV.
2. Seleccione el campo “Zona de texto enriquecido” en la página.
3. Pulse la tecla [ESPACIO] del teclado: El campo pasa a edición. Un cuadro amarillo se muestra alrededor del
campo.
4. Sustituya el texto que existe por el texto contenido en el portapapeles ([CTRL]+[V]). El texto aparece.
5. Realice algunas modificaciones en el texto:
 Añada los retornos de carro antes y después de los títulos.
 Ponga en negrilla los títulos de los distintos puntos.
6. Pruebe las distintas opciones: Todas las opciones disponibles para el texto están dispuestas en la cinta.
8. La página aparece automáticamente en el navegador.
Conclusión
Los dos últimos capítulos nos han permitido ver las especificaciones de un sitio Intranet y las de un sitio Internet.
En el próximo capítulo, abordaremos los elementos que pueden estar integrados tanto en un sitio Internet como en
un sitio Intranet:
 Búsqueda multicriterio
 Impresión
 Gestión de multilenguaje, …
CAPÍTULO
55
Continuamos el
desarrollo
Capítulo 5 – Continuamos el desarrollo |127

Lección 5.1. Búsqueda Multi-criterio
 Creación de una consulta parametrizada.
 Creación del interface de selección de los criterios de búsqueda.
 Pasar parámetros a una consulta.
 Mostrar el resultado de una consulta en un campo Tabla.
 Optimización del refresco de la página activando Ajax.
Tiempo estimado: 1 h. 30 min.

Presentación
En los capítulos anteriores, hemos creado un proyecto WEBDEV que permite crear un sitio conteniendo a la vez una
parte Internet y otra Intranet.
Vamos a retomar el proyecto “Sitio_WebDev_Completo” que hemos manipulado en los capítulos 3 y 4.
Si no ha abierto el proyecto “Sitio_WebDev_Completo” en la lección anterior:
1. Si fuera necesario, cierre el proyecto en curso para hacer aparecer la ventana de inicio.
2. En la ventana de inicio, clique en “Curso de auto-formación” y seleccione “Sitio WebDev completo (Con
páginas)”.
Un proyecto corregido está disponible. Este proyecto contiene las distintas páginas creadas en
Corregido
esta lección. Para abrir el proyecto corregido, en el panel “Inicio”, en el grupo “Ayuda en línea”,
despliegue “Guía de auto-formación” y luego seleccione “Sitio Web Completo”.
En esta lección, vamos a permitir al usuario realizar una búsqueda multi-criterio.

En nuestro ejemplo, esta búsqueda se realizará sobre el fichero “Pedido”. El usuario podrá seleccionar:
 El nombre del cliente
 La situación del pedido
 Su modo de liquidación
 El precio del pedido.
El interface de la página “PAGE_Busqueda_multicriterio” será el siguiente:
Este interface se compone de:

 Campos que permiten seleccionar los criterios de búsqueda.
 Botones que permiten lanzar la búsqueda o imprimir el resultado.
 Un campo Tabla que permite mostrar el resultado de la búsqueda. Este campo Tabla está basado en una
consulta. Esta consulta permitirá seleccionar los registros a mostrar. El campo tabla listará los resultados de la
búsqueda.
La primera etapa consiste en crear la consulta de selección de los registros.

¿Qué es una consulta de selección?
Una consulta de selección es una consulta que va a “devolver” solamente los registros
correspondientes a los criterios especificados.
Notas
Este tipo de consultas se llaman consultas de selección porque en el lenguaje SQL se utiliza la
orden SELECT.
Creación de la consulta para buscar los pedidos

Creación de la consulta
Para crear una consulta, vamos a utilizar el editor de consultas .
1. Clique sobre en los botones de acceso rápido. Se abre la ventana de creación de un nuevo elemento:
clique sobre “Consulta”. Se abre el asistente de creación de una consulta.
2. Seleccione la opción “Selección (SELECT)”.
En efecto, la consulta que vamos a crear nos permitirá seleccionar los registros. Avance al paso siguiente.
3. Aparecerá la ventana de descripción de la consulta.
Detengámonos un instante en el interface del editor de consultas:
Este interface se compone de:

1. Un recordatorio del análisis (la descripción de la base de datos del proyecto).
2. Los campos que la consulta deberá tener.
3. Las opciones de selección de los registros.
4. La consulta en código SQL o en lenguaje natural.
Vamos a construir la consulta seleccionando los elementos que deseamos tener en el resultado.
1. Doble clic sobre los campos presentes en el análisis a la izquierda de la ventana de descripción. Los campos
que se toman en cuenta aparecerán entonces en el centro de la pantalla. Quermos mostrar:
 Las informaciones concernientes al pedido. En el fichero “Pedido”, doble clic sobre los campos: IDPedido,
Fecha, Situación y TotalTTC.
 Las informaciones concernientes al cliente que ha pasado el pedido. En el fichero “Cliente”, doble clic
sobre el campo “NombreCompleto”.

 Las informaciones concernientes al modo de liquidación del pedido. En el fichero “ModoLiquidacion”,
doble clic sobre los campos “IDModoLiquidacion” y “Texto”.
La ventana de descripción de la consulta es la siguiente:
2. Vamos a clasificar los datos por fecha.

 Seleccione el campo “Pedido.Fecha”, luego clique sobre el botón “Clasificar” y seleccione la opción
“Clasificar por el campo seleccionado”.
 En la ventana que se muestra, indique una clasificación creciente sobre el campo y valide.
3. Una flecha roja con el número 01 aparecerá a la derecha del campo “Pedido.Fecha”.
Esta flecha indica que una clasificación creciente sobre este campo. La cifra “01” indica que este clasificación
se realizará en primer lugar.

4. De un nombre para la consulta: introduzca “REQ_BusquedaPedidos” en vez de “REQ_SinNombre1” en la zona
“Nombre de la consulta:
5. Valide la ventana de descripción de la consulta (botón verde bajo de la pantalla).

6. Se muestra la representación gráfica de la consulta:
7. Guarde la consulta clicando sobre en los botones de acceso rápido.

8. Valide si es necesario la ventana para guardar la consulta.
Prueba de la consulta
Como todos los elementos de un proyecto WEBDEV, se puede probar inmediatamente la consulta que acabamos de
crear:
1. Clique sobre .
2. El resultado se muestra en una ventana:

Si hace un clic derecho sobre el resultado de la consulta, aparecerá un menú contextual.
Entonces podrá exportar el resultado hacia:
 Un fichero XLS (Excel)
Notas
 Un fichero XML (eXtensible Markup Language)

 Un fichero texto
3. El resultado mostrado lista TODOS los pedidos. En nuestro caso, deseamos mostrar solamente los pedidos
correspondientes a los criterios de búsqueda. Para ello, será necesario utilizar una consulta parametrizada.
4. Cierre la ventana.
Uso de parámetros en la consulta.
En nuestro ejemplo, el usuario podrá seleccionar un valor para los criterios de búsqueda siguientes:
 Nombre del cliente.
 Situación del pedido.
 Modo de liquidación del pedido.
 Valor del pedido.
Deberemos modificar la consulta para que estos criterios de búsqueda se correspondan con parámetros de la
consulta.
Para definir los parámetros de la consulta, muestre la ventana de descripción de la consulta: doble clic sobre el
fondo de la representación gráfica de la consulta (o utilice en el menú contextual, la opción “Descripción”).
Para generar el parámetro “Nombre del cliente”:
1. Seleccionar en el centro de la pantalla el campo ClienteNombreCompleto.
2. Despliegue el botón “Condición de selección” y seleccione “Nueva condición”.
3. En la ventana que se muestra, vamos a indicar que la condición de selección corresponde a un parámetro:

 Seleccione “Contiene”.
 Marque “Al parámetro”.
 Indique el nombre del parámetro “pNombreCliente”.
Le aconsejamos prefijar los parámetros de las consultas por “p”. Así será más sencillo localizarlos
en el editor de código.
Notas
Cuando busque un parámetro de la consulta, introduzca simplemente ‘p’ y el editor de código le

propondrá todos los parámetros completando su nombre.
4. Valide la ventana de descripción de la condición. El número “1” aparecerá a la derecha del campo
“Cliente.NombreCompleto”, identificando que se ha definido una condición de selección.
La descripción de la consulta en lenguaje natural (debajo del editor de consultas), se actualiza

automáticamente en función de la condición añadida:
Notas
Pasemos al segundo parámetro: la situación del pedido:

1. Seleccione en el centro de la pantalla el campo Pedido.Situacion.
2. Despliegue el botón “Condición de selección” y seleccione “Nueva condición”.
3. En la ventana que aparece, vamos a indicar que la condición de selección es igual a un parámetro:

 Seleccione “Es igual a”.
 Seleccione “al parámetro”.
 Indique el nombre del parámetro “pSituacion”.
4. Valide la ventana de descripción de situación. El número “1” aparecerá a la derecha del campo
“Pedido.Situación”, indicando que se ha definido una condición de selección.
Vamos ahora a definir una condición sobre el modo de liquidación. El campo

“ModoLiquidacion.IDModoLiquidacion”, no deberá mostrarse en el resultado de la consulta, pero deseamos
aplicar una condición sobre él. Para ello, lo tendremos que hacer invisible.
1. Para no mostrar el campo “ModoLiquidacion.IDModoLiquidacion” en el resultado:
 Clique sobre el ojo ( ) correspondiente al campo “ModoLiquidacion.IDModoLiquidacion” en la lista de los

elementos de la consulta (en el centro de la pantalla).
 En el menú que se muestra, seleccione “No mostrar”.
2. Para definir una condición de selección sobre el campo “ModoLiquidacion.IDModoLiquidacion”:
 Seleccione en el centro de la pantalla el campo “ModoLiquidacion.IDModoLiquidacion”.
 Despliegue el botón “Condición de selección” y seleccione “Nueva condición”.
 En la ventana que se muestra, indique que la condición de selección corresponde a un parámetro:
o Seleccione “Es igual a”.
o Seleccione “al parámetro”.
o Indique el nombre del parámetro “pIDModoLiquidacion”.
3. Valide la definición de la condición de selección.
La últina condición de selección a definir concierne al importe del pedido. De hecho, vamos a definir dos
condiciones para poder especificar un importe mínimo y un importe máximo.
1. Seleccione el campo “Pedido.TotalTTC” en la lista de elementos de la consulta.
2. Muestre el menú contextual del campo (clic derecho) y selecciones “Condición de selección .. Nueva
condición”.
3. En la ventana que se muestra:
 Seleccione la condición “Es superior o igual a”.
 Clique sobre “al parámetro”.
 Indique el nombre del parámetro “pImporteMinimo”.
5. Defina de nuevo una condición sobre el mismo campo “Pedido.TotalTTC”: muestre el menú contextual del
campo (clic derecho) y seleccione “Condición de selección .. Nueva condición”.
6. En la ventana que se muestra:
 Seleccione la condición “Es inferior o igual a”.
 Clique en “al parámetro”.
 Indique el nombre del parámetro “pImporteMaximo”.
Es posible sustituir la definición de las dos condiciones de selección sobre el campo (“es superior
o igual a” y “es inferior o igual a”) por una única condición de selección “Está comprendido
entre”.
Notas
No obstante, el uso de una condición de selección de tipo “Está comprendido entre” obliga a
introducir los dos valores (que no es el caso si se definen dos condiciones distintas).
8. Valide la ventana de descripción de la consulta. El gráfico de la consulta se modifica para tener en cuenta las
condiciones de selección que hemos definido.
9. Guarde la consulta clicando sobre en los botones de acceso rápido.

Prueba de la consulta parametrizada
Para probar la consulta parametrizada:
1. Clique sobre .
2. Aparece una ventana para poder introducir los distintos parámetros de la consulta.
Los parámetros pueden ignorarse desmarcando la caja delante de su nombre. En este caso, la
condición de selección asociada al parámetro se ignorará. Por ejemplo, si se ignora el parámetro
pNombreCliente, se tendrán en cuenta en la consulta, los pedidos de todos los clientes.
Notas
Observación: Si se desmarcan todos los parámetros, la consulta devuelve la totalidad del

resultado.

3. Introduzca los siguientes datos:
 Desmarque los parámetros pNombreCliente y pSituacion.
 Seleccione el parámetro pIDModoLiquidacion. En la parte inferior de la pantalla, introduzca “1”.
 Seleccione el parámetro pPrecioMinimo. En la parte inferior de la pantalla, introduzca “1500”.
 Seleccione el parámetro pPrecioMaximo. En la parte inferior de la pantalla, introduzca “3000”.
4. Valide la ventana. Aparecerá el resultado de la consulta correspondiente a los parámetros especificados.
5. Cierre la ventana.
A continuación vamos a crear la página que permita:
 Indicar los parámetros de la consulta.
 Ejecutar esta consulta.
 Mostrar el resultado de la consulta.
Creación de la página proponiendo la búsqueda multicriterio

Creación de una página
Para crear una página mostrando el resultado de la búsqueda multicriterio:
1. Cree una nueva página en blanco:

 Se abre la ventana de creación de un nuevo elemento: clique sobre “Página” y luego sobre “Página”.
 En la zona “Basada sobre un modelo del proyecto”, elija “PAGEMOD_Simple” y valide el asistente.
2. Guarde la página ( o [CTRL]+[S]). Esta página tiene como título “Búsqueda Multicriterio”, su nombre
“PAGE_Busqueda_Multicriterio” se propone automáticamente. Valide la ventana de guardar.
Creación de los campos de parametrización de criterios y visualización del resultado
En primer lugar vamos a crear un campo Tabla basado en la consulta y a continuación crearemos los distintos campos
que permitirán al usuario seleccionar los criterios de búsqueda.
Creación del campo Tabla
Para crear el campo tabla que mostrará el resultado de la consulta:
1. Cree un campo Tabla: En el panel “Creación”, dentro del grupo “Datos”, despliegue “Tabla” y seleccione
“Tabla”.
2. Clique dentro de la página “PAGE_Busqueda_Multicriterio”: se lanzará el asistente de creación del campo
Tabla.
3. El campo Tabla estará basado en la consulta “REQ_BusquedaPedidos” (que habíamos creado previamente).
Seleccione la opción “Mostrar los datos de un fichero o de una consulta existente”. Avance al paso siguiente
del asistente.
4. Seleccione la consulta que será la fuente de datos del campo Tabla:
 Despliegue el grupo “Consultas”.
 Seleccione la consulta “REQ_BusquedaPedidos”.
 Avance al paso siguiente del asistente.

5. Seleccione todos los campos propuestos: Se mostrarán todos en el campo tabla. Avance al paso siguiente del
asistente.
6. Conserve las opciones por defecto en las distintas pantallas del asistente y valide la creación del campo Tabla.
7. El campo Tabla se crea automáticamente en la página.
8. Si hiciera falta, modifique la posición del campo Tabla para que aparezca totalmente en la página.
9. Redimensione las columnas para obtener la página siguiente:
Para una mejor legibilidad, vamos a modificar la descripción del campo Tabla.
1. Muestre la descripción del campo Tabla (doble clic sobre el campo).

2. Clique sobre el nombre del campo Tabla. En la parte inferior, aparece el texto del campo Tabla. Vamos a
modificar este texto. Sustituya el texto que aparece por “Resultados de la búsqueda”.
3. Clique sobre la columna “COL_IDPedido”. El título de la columna aparecerá en la parte inferior de la pantalla.
Sustituya el texto “Identificador del pedido” por “ID”.
4. Clique sobre la columna “COL_NombreCompleto”. Sustituya el texto “Nombre” por “Cliente”.

5. Clique sobre la columa “COL_Etiqueta”. Sustituya el texto “Etiqueta” por “Modo de liquidación”.
6. Valide la ventana de descripción del campo Tabla. El campo se actualizará automáticamente con los cambios
realizados.

7. Seleccione el campo Tabla y agrándelo hacia la derecha con ayuda de los bordes de redimensionamiento
(cuadros azules situados en el rectángulo de selección).
8. Reduzca el tamaño de la columna “ID” para que todas las columnas aparezcan en el campo Tabla.
9. Agrande el tamaño de las columnas Cliente y Modo de liquidación del campo Tabla.
10. Registre la página clicando sobre en los botones de acceso rápido. Vamos a verificar los tamaños de las
columnas ejecutando la página.
Live Data y campos basados en las consultas

El Live Data no se muestra en los campos al utilizar una consulta como fuente de datos por el
Notas
siguiente motivo: Los datos mostrados dependen del resultado de la consulta y solo pueden
conocerse en ejecución.
Vamos a hacer una primera prueba de la página:

2. Solo los pedidos liquidados en especias y que además su valor esté comprendido entre 1500 y 3000 euros se
mostraran, como los de la primera prueba de la consulta realizada en el editor, porque habíamos especificado
los parámetros en la prueba de la ventana.
3. Cierre el navegador para regresar al editor.

Observemos los tratamientos asociados al campo Tabla:
1. Seleccione el campo Tabla y pulse la tecla [F2].

2. El tratamiento “Inicialización de TABLE_REQ_BusquedaPedidos” contiene el siguiente código:
//MySource.pNombreCliente = <Valor del parámetro pNombreCliente>
//MySource.pSituacion = <Valor del parámetro pSituacion>
MySource.pIDModoLiquidacion = “1”
MySource.pPrecioMinimo = “1500”
MySource.pPrecioMaximo = “3000”
Los parámetros de prueba se han recuperado como parámetros por defecto para la ejecución. Vamos a
modificar la página para que los parámetros sean introducidos por el usuario, con la ayuda de campos.
3. Para construir nuestra página vamos a poner todas las líneas de código correspondientes a los parámetros
como comentario:
 Seleccione las líneas de código “MySource …”.
 Utilice la combinación de teclas [CTRL]+[/ del panel numérico].
4. Cierre el editor de código (utilice el aspa de la parte superior derecha del editor).
Ahora vamos a crear en nuestra página los distintos campos que permitirán al usuario seleccionar los distintos
parámetros de la consulta. Estos campos se situarán debajo del campo Tabla.
Si hiciera falta, desplace el campo Tabla por la página y disminuya su altura para poder dejar espacio suficiente
para crear los distintos campos de selección de los criterios.
Primer parámetro: Nombre del cliente
Para que el usuario pueda introducir un nombre de cliente a buscar, vamos a crear un campo de entrada.
Para crear un campo de entrada:
1. Muestre si hiciera falta el panel “Análisis”: en el panel “Inicio”, dentro del grupo “Entorno”, despliegue
“Paneles” y seleccione “Análisis”. Los distintos ficheros de datos descritos en el análisis
“Sitio_WebDev_Completo” aparecerán en el panel.
2. Clique sobre el icono “+” a la izquierda del fichero “Cliente”: Los campos del fichero de datos se listarán.
3. Seleccione el campo “NombreCompleto” que hay en el fichero Cliente y haga un “Drag and Drop” desde este
campo hacia la ventana “PAGE_Busqueda_multicriterio”.
4. El campo de entrada se crea automáticamente. Posicione este campo debajo del campo Tabla.
Vamos ahora a pasar el valor introducido en el campo de entrada como parámetro de la consulta:
1. Seleccione el campo Tabla y pulse la tecla [F2].
2. En el tratamiento de inicialización del campo Tabla, sustituya la línea:
// MySource.pNombreCliente = <Valor del parámetro pNombreCliente>
Por
MySource.pNombreCliente = EDT_NombreCompleto
En este código, EDT_NombreCompleto es el nombre del campo de entrada que acabamos de crear. El valor
de este campo se asocia al parámetro pNombreCliente esperado por la consulta.
Antes de probar, vamos a crear un botón para mostrar el contenido del campo Tabla en función del valor
seleccionado en el campo Selector:
1. Cree un campo Botón:
 En el panel “Creación”, en el grupo “Campos habituales” clique sobre .
 Clique sobre la página, arriba a la derecha.
2. Modifique el texto del campo (utilice la tecla [ENTER] del teclado). El nuevo texto será “Buscar”.
3. Modifique el estilo del campo:
 En el menú contextual del campo (clic derecho), seleccione la opción “Elegir un estilo WEBDEV”.

 En la ventana que se muestra, seleccione “BTNDetalles (con fondo)” y valide.
4. Redimensione el campo si hiciera falta:

 Seleccione el campo.
 En el menú contextual, seleccione la opción “Adaptar el tamaño”.
5. Muestre el código asociado a este campo: pulse la tecla [F2].
6. En el tratamiento “Clic (Servidor)”, introduzca el siguiente código:
// Actualice la entrada del campo Tabla
TableDisplay (TABLE_REQ_BuscarPedidos, taInit)
En este código, la constante tainit permite reejecutar el tratamiento de inicialización del campo Tabla (el
tratamiento donde se pasa los parámetros a la consulta).
Vamos a probar el paso del primer parámetro:
1. Guarde la página clicando sobre en los botones de acceso rápido.

3. En la página que se muestra, introduzca el nombre del cliente “GUENOT” y luego clique sobre el botón
“Buscar”. Se modifica el contenido del campo tabla: aparecen todos los pedidos del cliente “GUENOT”.
4. Cierre la página de prueba.

Segundo parámetro: Situación del pedido
Un pedido puede tener 3 situaciones:
 En espera.
 Pagado.
 Anulado.
En nuestro análisis, la situación del pedido queda registrada en el campo “Situación” dentro del fichero de datos
“Pedido”. Este campo es de tipo selector.
Para permitir al usuario seleccionar uno de estos tres estados, vamos a utilizar el campo Selector asociado al campo
“Situación” del fichero de datos “Pedido”.
Los selectores de opción también se llaman “cajas de opciones”. Permiten seleccionar una opción
y solo una, de entre las propuestas.
¿Cómo distinguir un selector de un interruptor?
Notas
El selector permite seleccionar solo una opción

El interruptor permite seleccionar varias opciones.
Para crear el campo selector:

1. En el panel “Análisis”, clique sobre el icono “+” a la izquierda del fichero “Pedido”: se listarán los campos del
fichero de datos.
2. Seleccione el campo “Situación” que tiene el fichero pedido y haga un “Drag and Drop” de este campo hacia
la ventana “PAGE_Busqueda_muliticriterio”.
3. El campo Selector se ha creado automáticamente. Posicione este campo debajo del campo Tabla.
Ahora vamos a utilizar el valor seleccionado en el campo Selector como parámetro de la consulta:
1. Muestre los tratamientos asociados al campo Tabla:
 Seleccione el campo Tabla.
 Muestre el menú contextual (clic derecho) y seleccione la opción “Código”.
// MySource .pSituacion = <Valor del parámetro pSituacion>
Por
MySource.pSituacion = SEL_Situacion
En este código, SEL_Situacion es el nombre del campo Selector que acabamos de crear. El valor de este
campo se asocia al parámetro pSituacion esperado por la consulta.
Vamos a probar el paso de los dos primeros parámetros:

2. Introduzca el nombre “GUENOT” y seleccione “En espera”.
3. Clique sobre el botón “Buscar”: Solo los pedidos de GUENOT en espera de pago se listarán.

En este ejemplo, solo los pedidos de un cliente y en una situación específica se podrán listar. Puede ser
interesante listar todos los pedidos de un cliente sin importar su situacion. Vamos a modificar nuestra página
para realizar este tratamiento.
Cierre el navegador
Para añadir una opción en el campo Selector:
1. Seleccione el campo Selector creado previamente.

2. Muestre la ventana de descripción del campo (doble clic sobre el campo, por ejemplo).
3. En la pestaña “Contenido”, en la lista de opciones, inserte la opción “Todos los pedidos” arriba de la lista:
 Pulse sobre el botón “+”.
 Introduzca “Todos los pedidos”.
 Utilice la flecha hacia arriba (a la derecha) para subir la opción.

5. Agrande el campo en el editor para que todas las opciones puedan mostrarse (desplace el campo Tabla si
hiciera falta).
La nueva opción “Todos los pedidos” todavía no debe tenerse en cuenta para el parámetro “pSituacion” de la
consulta. Para ello, hay que afectar el valor NULL a este parámetro. Vamos a gestionar este caso para el
parámetro pSituacion.
1. Seleccione el campo Tabla en el editor y muestre sus tratamiento (tecla [F2]) u opción “Código” del menú
contextual del campo).

MySource.pSituacion = SEL_Situacion
Por
SWITCH SEL_Situacion
// Todos los pedidos
CASE 1
MySource.pSituacion = Null
OTHER CASE
MySource.pSituacion = SEL_Situacion – 1
END
En este código, si el campo SEL_Situacion corresponde a 1 (Caso de la opción “Todos los pedidos”), el
parámetro de la consulta asociada, tendrá “NULL” como valor. En el caso contrario, el parámetro tendrá como
valor el número de la opción seleccionada menos 1 (que corresponde a la opción que acabamos de añadir).
Vamos a probar inmediatamente nuestra página:
1. Guarde la página clicando sobre en los botones de acceso rápido.

3. Introduzca el nombre “GUENOT” y seleccione “Todos los pedidos”.
4. Clique sobre el botón “Buscar”. Todos los pedidos de GUENOT que aparezcan en el informe se listarán.
5. Cierre el navegador
Tercer parámetro: Modo de liquidación
Un pedido puede tener varios modos de liquidación: especias, cheques, … Los distintos modos de liquidación posibles
están almacenados en el fichero de datos “ModosLiquidacion”.
Vamos a utilizar un campo Combo basado en este fichero de datos para permitir al usuario seleccionar el modo de
liquidación deseado.
El campo “Combo” permite mostrar una lista de elementos y seleccionar un elemento en esta
lista.
A diferencia de una lista, un combo solo muestra un elemento a la vez. Con un clic sobre el
campo, el combo se despliega y propone seleccionar otro elemento. Solo se puede seleccionar
un elemento.
Notas
Los elementos que aparecen en el combo pueden ser determinados cuando se crea el campo en
el editor. Estos elementos:
 Pueden definirse por programación
 Pueden provenir de un fichero de datos o de una consulta.
Para crear un campo Combo:

1. En el panel “Creación”, dentro del grupo “Campos habituales”, clique sobre “Combo”.
2. Clique en la ventana la ubicación donde va a crearse el campo (por ejemplo, junto al selector acabado de
crear).
3. Se lanza el asistente de creación del campo Combo.
4. Seleccione la opción “Mostrar los datos de un fichero o una consulta existente”, y avance al paso siguiente.
5. Seleccione el fichero de datos “ModoLiquidacion” y avance al paso siguiente.
6. El campo a mostrar en el campo Combo es “Etiqueta”. Seleccione “Etiqueta” y avance al paso siguiente.
7. Seleccione el campo de clasificación “Etiqueta”. Avance al paso siguiente.
8. Selección el valor de retorno “IDModoLiquidacion”. Este valor de retorno es muy importante, porque será el
valor que se pasará como parámetro a la consulta. Avance al paso siguiente.
9. Conserve las opciones por defecto en las distintas pantallas del asistente y valide la creación del campo
Combo.
10. El campo Combo se habrá creado automáticamente en la página.
Modifique el texto del campo Combo (utilice la tecla [ENTER] del teclado). El nuevo texto es “Modo de
liquidación”.
Vamos ahora a utilizar el valor seleccionado en el campo Combo como parámetro de la consulta:
1. Muestre los tratamientos asociados al campo Tabla: Seleccione el campo Tabla y utilice la tecla [F2]-
//MySource.pIDModoLiquidacion = 1
Por
MySource.pIDModoLiquidacion = Combo_ModoLiquidacion
En este código, COMBO_ModoLiquidacion es el nombre del campo Combo que acabamos de crear. El valor de
retorno de este campo se asocia al parámetro pIDModoLiquidacione esperado por la consulta.
4. Guarde la página ( o [CTRL]+[S]).
Vamos a probar de nuevo el paso de los parámetros:

2. Introduzca el nombre “GUENOT”.
3. Cambie la situación de los pedidos con el Selector y modifique el modo de liquidación con el campo Combo,
luego clique sobre el botón “Buscar”. Se modificará el contenido del campo Tabla:
Último parámetro: Importe del pedido
El último parámetro de la consulta corresponde al total del pedido tomado en cuenta. Tenemos un parámetro que
corresponde al importe mínimo y otro que corresponde al importe máximo. A nivel de interface, el usuario deberá
poder introducir un intervalo de importes. Vamos a utilizar para ello un campo Potenciómetro de intervalo.
Un campo Potenciómetro de intervalo es un campo gráfico, fácilmente integrable en un sitio

WEBDEV que permite seleccionar de manera sencilla los límites de un intervalo (valor inicial y
Notas
valor final).
Para gestionar el importe del pedido:

1. En el panel “Creación”, dentro del grupo “Campos gráficos”, despliegue “Potenciómetro” y selección el
potenciómetro de intervalo con los precios.
2. Clique en la página, entre el campo “Modo de liquidación” y el botón “Buscar”. El potenciómetro de intervalo
se crea automáticamente.
El campo que acabamos de crear es un campo avanzado, constituido por el potenciómetro y dos campos que
muestran los límites. Toda la programación para mostrar los límites ya está realizada en el campo. Vamos ahora
a inicializar el campo Potenciómetro para ue proponga los límites correspondientes a los datos existentes en el
fichero de datos Pedido.
1. Seleccione el campo Potenciómetro y muestre sus tratamientos (tecla [F2]).
2. En el tratamiento de inicialización del campo, inserte el código siguiente (antes de las líneas de código
existentes):
// El valor inferior es el importe de menos valor
HReadFirst (Pedido,TotalTTC)
MySelf..MinValue=Pedido.TotalTTC
MySelf..LowerValue = MySelf..MinValue
// El valor superior es el importe de mayor valor

HReadLast (Pedido.TotalTTC)
MySelf..MaxValue = Pedido.TotalTTC
MySelf..UpperValue = MySelf..MaxValue
 La función HReadFirst permite leer el primer registro del fichero “Pedido” según la clave de recorrido
definida, aquí TotalTTC. Esta función permite leer el registro correspondiente al importe más bajo.

El importe leído en el registro se asocia enseguida al límite mínimo del campo Potenciómetro, así como al
valor inferior.
o El límite mínimo será el valor mínimo que el usuario podrá seleccionar.
o El valor inferior permite indicar el valor mínimo actualmente seleccionado.
 Para encontrar el importe más alto, el principio es el mismo. La única diferencia es el nombre de la
función utilizada: HReadLast, que permitirá leer el último registro del fichero pedido según el importe,
es decir, el correspondiente al importe más elevado.
Vamos ahora a pasar los importes seleccionados como parámetros a la consulta:
1. Muestre los tratamientos asociados al campo Tabla: Seleccione el campo Tabla y pulse la tecla [F2].
2. En el tratamiento de inicialización del campo Tabla, sustituya las líneas:
//MySource.pPrecioMinimo = “1500”
//MySource.pPrecioMaximo = “3000”
Por:
MySource.pPrecioMinimo = POTI_SinNombre2..LowerValue
MySource.pPrecioMaximo = POTI_SinNombre2..UpperValue
En este código, los parámetros correspondientes a los precios son iguales al valor inferior y superior del
potenciómetro.
Vamos a probar el paso de los parámetros:

2. Defina los distintos parámetros de la búsqueda:
 Nombre del cliente
 Situación
 Modo de liquidación
 Importe
3. Clique sobre el botón “Buscar”. Se modificará el contenido del campo Tabla.
Optimización de la visualización de la página

Por defecto, cuando se clica sobre el botón “Buscar”, todo el contenido de la página es reenviado por el servidor.
Para optimizar la visualización de la página, se puede activar el modo Ajax en este botón. En nuestro ejemplo, solo el
contenido del campo Tabla se reenviará por el servidor.

Para utilizar la tecnología Ajax en un sitio, WEBDEV ofrece varias posibilidades:
 Ajax en un clic: Basta con clicar en el editor de código para transformar un tratamiento en
tratamiento Ajax.
 Campos Ajax (Campo Tabla, Campo Zona de repetición). Los campos Ajax permiten
Notas
mostrar los datos cargados dinámicamente desde el servidor. No hay necesidad de cargarlo
todo!
 Ajax por programación con la ayuda de funciones WLangage específicas: AJAXExecute,
AJAXExecuteAsynchronous.
Para poner en modo Ajax el botón “Buscar”:

1. Seleccione el botón “Buscar” y muestre sus tratamientos (tecla [F2]).
2. En el tratamiento de clic servidor del botón, el enlace AJAX aparece barrado en la cinta de código.
3. Clique sobre el enlace “AJAX”: el enlace “AJAX Activado” aparece indicando que el tratamiento se ha
transformado automáticamente en un tratamiento Ajax.

Pruebe la página:

2. Defina los distintos parámetros de la búsqueda:
 Nombre del cliente
 Situación
 Modo de liquidación
 Importe
3. Clique sobre el botón “Buscar”. Solo se volverá a mostrar el contenido del campo Tabla.

Lección 5.2. Imprimir una factura
 Crear un informe basado en una consulta.
 Lanzar la impresión de un informe basado en una consulta parametrizada
Tiempo estimado: 45 min.

Presentación
Vamos a ofrecer al usuario la posibilidad de imprimir directamente la factura correspondiente al pedido buscado.
Si no ha creado las páginas de las lecciones anteriores, puede seguir esta lección abriendo un
proyecto corregido: En el panel “Inicio”, dentro del grupo “Ayuda en línea”, despliegue “Guía de
auto-formación” y luego seleccione “Sitio WebDev Completo (Con páginas)”.
Corregido
También hay disponible un proyecto corregido: En el panel “Inicio”, dentro del grupo “Ayuda en
línea”, despliegue “Guía de auto-formación” y luego seleccione “Sitio WebDev Completo
(Corregido)”.
Principio de impresión en Internet

Hablando apropiadamente, no se debería hablar de “impresión” en Internet. En efecto, si un documento debe
“imprimirse”, primero se genera un fichero (en HTML, en PDF o incluso en XML) y luego se envía al navegador.
Cuando finaliza la transferencia del fichero, es cuando el internauta decide si el documento que acaba de recibir se
imprime o no.
Sin embargo, una “impresión” en el servidor sigue siendo posible. Pero el documento impreso (en la misma impresora
del servidor o en una impresora compartida de red) no podrá ser accesible ni podrá consultarla el internauta.
El documento impreso o generado se diseña y se prepara con el editor de informes. Las informaciones contenidas en
el documento pueden provenir de una base de datos.
Distinguiremos entre dos tipos de impresión:
 Impresión directa (en la impresora del servidor).
 Generación de diversos documentos (HTML, PDF, …)
Impresión directa
La impresión directa consiste en imprimir directamente sobre una impresora. Esta impresora está conectada al puesto
servidor o es accesible desde la red.
La impresión directa con WEBDEV solo se recomienda en el contexto de una Intranet o una Extranet. Este tipo de
impresión permite por ejemplo imprimir el registro de conexiones de los clientes, de imprimir los pedidos
directamente en la impresora del servicio comercial.
Generación de documentos HTML, PDF, XML, …
La impresión a partir de documentos HTML, PDF, XML consiste en crear un documento y luego mostrarlo en el
navegador del usuario. Para crear este documento, hay que utilizar el editor de informes de WEBDEV. Así, desde una
fuente de datos, su sitio WEBDEV puede “generar” un fichero con formato. Este fichero puede estar en formato
HTML, PDF, RTF o XML.
El principal interés de este método de impresión es que el fichero generado de esta forma puede transmitirse al
navegador. El internauta puede entonces imprimir o guardar el documento en su puesto.
La impresión en un fichero puede utilizarse tanto en un sitio Internet, como en un sitio Intranet/Extranet (por
ejemplo: transmitir un bono de pedido PDF al internauta, …).
¿De qué está constituido un informe?

En nuestro ejemplo, la factura que vamos a imprimir corresponderá a un informe. Un informe es un elemento de un
proyecto permitiendo reagrupar los datos a imprimir y darles formato.
Para crear y manipular los informes, WEBDEV propone un editor específico: el editor de informes.
Un informe está constituido por:
 Distintos bloques. Los bloques permiten definir las zonas en las que se mostrarán los datos. Los distintos bloques
disponibles son:
o Inicio de documento: bloque que se muestra únicamente en la primera página.
o Cabecera de página: bloque que se muestra arriba de cada página.
o Cuerpo: bloque que contiene los datos. Este bloque se repite mientras hayan datos para imprimir.
o Pie de página: bloque que se muestra bajo de cada página.
o Fin de documento: bloque que se muestra solamente en la última página.
 Campos que permiten mostrar los datos.
Este será, por ejemplo, el informe que vamos a crear:

Creación del informe “Factura”
Vamos a continuación a listar las informaciones que deberán aparecer en el informe:
 Las características del pedido: fecha y número de pedido.
 Los datos del cliente: nombre, dirección, código postal, población y país.
 Características de las líneas de pedido:
o Cantidad pedida
o Referencia del producto
o Texto del pedido
o Total HT
o Total TTC
Para crear fácilmente este informe, vamos a ensamblar todos los datos a imprimir en una consulta. Esta consulta
podrá utilizarse tanto por el informe como por cualquier otro elemento del proyecto WEBDEV (campo Tabla, campo
Zona de repetición, …).
WEBDEV propone crear los informes a partir de numerosas fuentes de datos: ficheros de datos,
consultas, campos, ficheros de texto, …
En la mayoría de casos, es aconsejable ensamblar todos los datos a imprimir dentro de una
consulta, y luego crear un informe sobre esta consulta. Si una información ha de aparecer en el
Notas
informe, hay que añadir el campo correspondiente a la consulta.

Los informes realizados directamente sobre los ficheros de datos deberán reservarse a los
informes simples, es decir, mostrar solo los datos que provengan de un único fichero de datos.
Creación de la consulta
Para crear la consulta base del informe, vamos a utilizar el editor de consultas.
1. Clique sobre en los botones de acceso rápido. Se abre la ventana de creación de un nuevo elemento:
clique sobre “Consulta”. Se lanzará el asistente para la creación de la consulta.
2. Seleccione la opción “Selección (SELECT)”.
Efectivamente, la consulta que vamos a crear nos permitirá seleccionar los datos que se imprimirán en el
informe. Avance al paso siguiente.
3. Aparecerá la ventana de descripción de la consulta
Primero, hay que dar un nombre a la consulta: introduzca “REQ_Factura” en vez de “REQ_SinNombre1” en la
zona “Nombre de la consulta”.

Ahora vamos a construir la consulta seleccionando los elementos que queremos en el resultado. La consulta
tendrá el contenido del fichero Pedido, el contenido del fichero LineaPedido el contenido del fichero Cliente.
1. En la zona de la izquierda de la pantalla, seleccione el fichero Pedido y clique sobre la flecha azul ( ): Los
campos del fichero Pedido aparecerán en el centro de la pantalla.
2. Repita esta operación para los ficheros LineaPedido y Cliente.
La ventana de descripción de la consulta es la siguiente:
En este punto, esta consulta permite seleccionar todos los pedidos y las líneas de pedido correspondientes.
Queremos seleccionar los datos correspondientes a un solo pedido cuyo identificador se conoce. Vamos pues a definir
como parámetro el número de pedido.
Para generar el parámetro “Identificador del pedido”:

1. Seleccione en el centro de la pantalla el campo Pedido.IDPedido.
2. Clique en la cuarta columna. Seleccione la opción “Nueva condición”.
Cuando se crea una consulta, la zona que lista los elementos está formada por cuatro columnas:
 Nombre del campo
 Si se visualiza o no el campo en el resultado de la consulta
Notas
 La gestión de clasificación para el campo

 El número de condiciones asociadas al campo
Para acceder a una de las características, hay que clicar en la columna correspondiente.
3. En la ventana que se muestra, vamos a indicar que la condición de selección corresponde a un parámetro.

Efectúe las siguientes operaciones:
 Seleccione “Es igual a”.
 Marque “al parámetro”.
 Indique el nombre del parámetro “pIDPedido”.
4. Valide la ventana de descripción de la condición. El número “1” aparecerá a la derecha del campo
Pedido.IDPedido, indicando que se ha definido una condición de selección.
5. El identificador del pedido no ha de ser visible, hágalo invisible: clique sobre el ojo que aparece en la línea del
campo y seleccione la opción “No mostrar”.
6. Igualmente, haga invisibles los campos siguientes:
 Pedido.Situacion
 Pedido.IDCliente
 Pedido.IDModoLiquidacion
 LineaPedido.IDPedido
 Cliente.IDCliente
7. Valide la ventana de descripción de la consulta (botón verde bajo de la pantalla).
8. Se muestra la representación gráfica de la consulta:
9. Guarde la consulta clicando sobre en los botones de acceso rápido. Valide si hiciera falta las
informaciones para guardarla.
Creación de un informe basado en una consulta
Para crear un informe:

2. Se abre la ventana de creación de un nuevo elemento: clique en “Informe” y luego en “Informe”. Se abre el
asistente de creación de un informe.
3. El asistente de creación de informes propone varios tipos de informes:

4. Seleccione “Tabla” y avance al paso siguiente.
5. Seleccione la fuente de datos del informe. El informe estará basado en la consulta que acaba de crear.
Seleccione “De un fichero de datos o de una consulta existente”. Avance al paso siguiente.
6. En la lista de ficheros de datos y de consultas, seleccione la consulta “REQ_Factura”. Avance al paso

siguiente.
7. El asistente pide que se indique si hay una rotura. En este informe no vamos a utilizar ninguna rotura. Este
concepto lo veremos algo más adelante en este curso. Responda “No”. Avance al paso siguiente.
8. A continuación deberá indicar el orden en que serán impresos los campos y su reparto en los distintos
bloques:
 Los campos concernientes al cliente deberán mostrarse en el bloque “Inicio del documento”. Estas
informaciones no tienen que repetirse para cada línea del pedido.
 Los campos concernientes al pedido deberán mostrarse en el bloque “Cabecera de página”. Estas
informaciones tampoco deberán repetirse para cada línea del pedido.
 Los campos concernientes a las líneas de pedido, deberán quedarse en el cuerpo del informe. Estos campos
se mostrarán para todas las líneas de cada pedido.
 Los campos concernientes a los totales del pedido se mostrarán en el bloque “Fin del documento”. Estas
informaciones tampoco deberán repetirse para cada línea de pedido.

La siguiente tabla muestra las distintas afectaciones de los campos en el orden en que aparecen en el
asistente:
Campo Bloque
NumeroPedido Inicio del documento
Fecha Cabecera de página
TotalHT Fin del documento
TotalTVA Fin del documento
TotalTTC Fin del documento
Referencia Cuerpo
Cantidad Cuerpo
TotalTTC_Li Cuerpo
TotalHT_Li Cuerpo
TextoProducto Cuerpo
PrecioUnitarioHT Cuerpo
Sociedad Inicio del documento
NombreCompleto Inicio del documento
Direccion Inicio del documento
CodigoPostal Inicio del documento
Ciudad Inicio del documento
Departamento Inicio del documento
Pais Inicio del documento
Telefono Desmarcar
Movil Desmarcar
Email Desmarcar
10. El asistente propone crear un contador, una suma o una media sobre los campos numéricos presentes en el
informe. En este informe, los cálculos están realizados por la consulta. Clique sobre el botón “Ningún cálculo”
y avance al paso siguiente.
11. Esta pantalla permite definir el formato del informe:

Guardaremos los valores por defecto con la orientación “Vertical”.
Márgenes de impresión
Cuando elija los márgenes de impresión, no olvide tener en cuenta los márgenes físicos de las
Notas
impresoras. Los márgenes físicos son aquellos reservados por las impresoras en los que no se
puede imprimir. Además, los márgenes físicos difieren en función de los modelos de impresoras.

13. Esta pantalla permite seleccionarla plantilla utilizada por el informe. Se aconseja utilizar la misma plantilla que
para las páginas. En nuestro caso, seleccione por ejemplo la plantilla “Evolución” y avance al paso siguiente.
14. Ya solo queda darle un nombre y un título al informe.
 Introduzca el título “Factura”.
 Introduzca el nombre “INF_Factura”.
15. Valide.
16. La tabla que se ha definido no cabe dentro de una página A4 vertical. WEBDEV propone:
 Imprimir el informe en dos páginas.
 Cambiar a modo horizontal.
 Reducir el tamaño de la tabla.

Seleccione “Reducir el tamaño de la tabla”.
17. El informe aparecerá para editar en el editor de informes:
18. Las distintas líneas del pedido se agrupan en forma de tabla.

19. Guarde el informe ( o [CTRL]+[S]). Valide si hiciera falta las informaciones para guardar.
Ejecute este informe clicando sobre en los botones de acceso rápido

1. El editor de informes pide el destino de la impresión. El destino de la impresión puede elegirse entre:
 Vista previa de impresión: el informe se muestra en la pantalla dentro de una ventana específica.

La vista previa de impresión solo está disponible cuando se desarrolla el sitio.
En ejecución, el usuario no tendrá la vista previa de impresión. La única vista previa disponible
Notas
será la visualización por el navegador del fichero generado.
 Impresora: El informe se imprimirá directamente en la impresora por defecto.

 Fichero específico: El informe se imprime en un fichero con el formato seleccionado.
Elija “Vista previa de impresión y valide.

2. El editor de informes pide los parámetros de la consulta utilizada por el informe. Recuerde que hemos
utilizado un parámetro para especificar el número del pedido a imprimir. Por ejemplo, introduzca el valor para
probar “1”.
Valide.
3. La ejecución del informe se muestra en la pantalla.

Modificaciones del informe “Factura”
Vamos a efectuar algunas modificaciones en el informe que acabamos de crear.
Primeramente vamos a posicionar las informaciones referidas al cliente y al pedido arriba de la página:
1. Elimine los textos delante de las informaciones del cliente (Nombre, …).
2. Sitúe el campo que contiene la población junto al código postal.
3. Agrande el campo que contiene el nombre de la sociedad con la ayuda de los contornos: el tamaño del
campo deberá ser idéntico al tamaño de los campos Código Postal y Ciudad.
4. Alinee los campos:
 Seleccione el campo Sociedad.
 Pulse sobre la tecla [CTRL] y luego seleccione con la ayuda del ratón los campos que contienen la dirección,
el estado y el país.
 En el panel “Alineación”, clique sobre “Justificar (Int y Ext)”-
5. Seleccione las informaciones concernientes al cliente y muévalas con la ayuda del ratón a la derecha del
informe.
6. Suba el número de pedido (arriba del bloque “Cabecera de página”).

Ahora vamos a crear un cuadro alrededor de las informaciones concernientes al cliente:
1. Cree un campo Etiqueta: en el panel “Creación”, dentro del grupo “Campos habituales”, clique sobre
“Etiqueta”.
2. Clique sobre la cabecera de la página, en el sitio donde se muestran las informaciones del cliente.
3. Pulse la tecla [SHIFT] y agrande la etiqueta (con la ayuda de los contornos) para que contenga todas las
informaciones del cliente. Esta manipulación permite agrandar la etiqueta sin mover los campos situados
debajo.
4. En el menú contextual del campo Etiqueta, seleccione “Editar la etiqueta” y elimine el contenido. Clique en el
informe para validar la modificación.
Para configurar el cuadro:
1. Seleccione el campo Etiqueta que acabamos de crear.
2. Pulse la tecla [R] y clique sobre la imagen que aparece arriba a la derecha del campo.
3. Seleccione la opción “Editar el cuadro”. Las opciones de configuración aparecerán:
4. Seleccione:
 El color azul oscuro en los colores contextuales.
 Un cuadro simple (trazado fino).
 Un redondeo de 2 mm en altura y anchura.
Ahora posicionaremos los totales correctamente en el bloque “Fin del documento”:
1. Seleccione los campos (etiquetas y datos) correspondientes a los totales que hay en bloque “Fin del
documento”.
2. Posicione estos campos con la ayuda del ratón bajo a la derecha del tablero.
3. El informe se visualiza en el editor de informes:
4. Guarde el informe clicando sobre en los botones de acceso rápido.

5. Verifique las modificaciones efectuadas ejecutando el informe en modo “Vista previa antes de la impresión”
(clique sobre en los botones de acceso rápido).
6. Cierre la vista previa de impresión.

Hemos finalizado nuestro informe “Factura”.
Visualizar el informe impreso desde un botón

Como hemos visto al principio de esta lección, el sitio se ejecuta en un servidor, la impresión de un documento se
efectuará en una impresora conectada al servidor (y por tanto inaccesible para el usuario).
La impresión será pues realizada en formato PDF en el servidor, y el documento PDF ser descargará o se mostrará en
el puesto del internauta. El documento podrá así ser impreso por el usuario en su impresora.
En nuestro sitio, el informe “INF_Factura” se imprimirá desde un botón en la página que realiza la búsqueda de un
pedido. Este botón permitirá imprimir la factura del pedido seleccionado.
Colocación de la impresión
Par imprimir el informe “INF_Factura”:
1. Sitúese en la página “PAGE_Busqueda_multicriterio”: Clique sobre el botón “PAGE_Busqueda_multicriterio” en
la barra de botones.
2. En el panel “Creación”, dentro del grupo “Campos habituales”, clique sobre “Botón”.
3. Clique a la derecha del campo Tabla para crear el botón.
4. Seleccione el botón y pulse la tecla [ENTER] del teclado. El texto pasa a modo edición.
5. Sustituya “Botón” por “Imprimir” y valide.
6. Muestre el código de este botón (tecla [F2]) e introduzca el siguiente código en el clic del servidor:
iDestination (iGenericPDF)
iInitReportQuery (INF_Factura, …
TABLE_REQ_BuscaPedidos.COL_IDPedido[TABLE_REQ_BuscaPedidos])
iPrintReport(INF_Factura)
FileDisplay (iLastFile(), “aplicación/pdf”)
 La función iDestination permite definir el formato de impresión utilizado (en este caso, formato PFF).
 El informe “INF_Factura”, al estar basado en una consulta parametrizada, necesitará pasar el parámetro a
la consulta antes de ejecutar el informe. Esta operación se realiza por la función iInitReportQuery. En
nuestro caso, el parámetro corresponde al número de pedido en curso, mostrado en el campo Tabla.
 La función iPrintReport permite mostrar al usuario la factura:
o La función iLastFile permite obtener la ruta del último fichero generado por un informe.
o “aplicación/pdf” es el tipo MIME del fichero enviado. Cuando se especifica este tipo, el navegador
puede mostrar directamente el fichero o elegir en qué aplicación delegar la visualización en el
puesto de usuario.
8. Guarde el informe ( o [CTRL]+[S]).
Prueba de la impresión
Ya solo queda probarlo en la realidad:
1. Lance la prueba de la página “PAGE_Busqueda_Multicriterio”.
2. Especifique los criterios y lance una búsqueda.
3. Seleccione uno de los pedidos mostrados en el campo Tabla.
4. Imprima el pedido utilizando el botón “Imprimir”.

5. El navegador abre el fichero PDF. El navegador sustituye la página actual por el fichero PDF. Vamos a
cambiar este comportamiento.
Para abrir el fichero PFD en otra pestaña o navegador:
1. Doble clic en el botón “Imprimir” en la página “PAGE_Busqueda_Multicriterio”. Se muestra la ventana de
descripción.
2. En la pestaña “General”, en el campo “Destino”, seleccione “Nuevo navegador”.

3. Valide.
¿Nueva pestaña o nueva ventana?

La visualización en una nueva pestaña o en una nueva ventana no puede elegirla ni el usuario ni
Notas
el desarrollador del sitio. Es el propio navegador quien elige si abre una nueva pestaña o una
nueva ventana. El comportamiento puede ser distinto según el navegador utilizado.

Lección 5.3. Enviar un email
 Como enviar un email desde un sitio WEBDEV

Presentación
WLangage tiene todas las funciones necesarias para gestionar el envío y la recepción de emails. Igualmente, puede
acceder a todas las características de un email:
 Remitente, destinatarios.
 Fecha de envío, objeto, mensajes.
 Datos adjuntos, …
WEBDEV permite gestionar los emails por diversos métodos:
 Gestión a través de Lotus Notes, Outloook o MSExchange:
o Software de mensajería Lotus Notes u Outlook: mediante este software, se pueden enviar y
recibir emails.
o API “Simple Mail API” (también llamado SMAPI o Simple MAPI): este modo de gestión de los
emails es utilizado por la mayor parte de las aplicaciones Microsoft y principalmente Microsoft
Exchange.
 Gestión a través de los protocolos POP3, IMAP y SMTP
o El protocolo POP3: Este protocolo de recepción de emails lo reconocen todos los proveedores de
servicios. Permite dialogar directamente con el servidor, disponible en casa de su proveedor de
acceso. Este protocolo permite listar los mensajes recibidos y leerlos.
o El protocolo IMAP: Este protocolo de recepción de emails permite dejar los emails en el servidor para
que puedan ser consultados por los distintos clientes de mensajería o webmail.
o El protocolo SMTP: Este protocolo de envío de correos lo reconocen todos los proveedores de
servicio.
En esta lección, vamos a crear una página PopUp que permitirá al usuario enviar una sugerencia por correo al
desarrollador del sitio. Este PopUp es el siguiente:
Para ello, vamos a utilizar el protocolo SMTP. Este es el modo más utilizado actualmente en el mundo.
Para más detalles sobre otros métodos, consulte la ayuda en línea.
Corregido
También hay disponible un proyecto corregido: En el panel “Inicio”, dentro del grupo “Ayuda en
línea”, despliegue “Guía de auto-formación” y luego seleccione “Sitio WebDev Completo
(Corregido)”.
Para más detalles sobre la gestión de los emails, consulte el ejemplo “Envío de email” (ejemplo
Ejemplo
unitario), proporcionado en estándar con WEBDEV. Este ejemplo es accesible desde la ventana
de inicio de WEBDEV.

Una página PopUp para enviar los emails
La página PopUp que vamos a crear contendrá todos los campos que permitirán al usuario introducir los distintos
elementos del email. Un botón “enviar” reagrupará todos los tratamientos que permitirán el envío del email.
Creación de la página PopUp
Para crear la página PopUp:
1. Abra si hiciera falta el proyecto “Sitio_WebDev_Completo”.
2. Muestre la página “PAGE_Lista_de_productos”.
3. En el panel “Creación”, dentro del grupo “Contenedores”, clique sobre “PopUp”.
4. En el editor aparecerá la página PopUp.
5. Agrande la página PopUp en altura y anchura con ayuda de los bordes.
Creación de los campos que permitan introducir las características del email
Para escribir un email, el usuario deberá tener a su disposición:
 Un campo que permita introducir la dirección del remitente.
 Un campo que permite introducir el sujeto del email.
 Un campo que permita introducir el texto del email.
Vamos a añadir todos estos campos en algunos clics en nuestra página. Al ser el destinatario el desarrollador del sitio,
la dirección correspondiente ya estará en el código de envío del email. Del mismo modo, los parámetros del servidor
SMTP serán introducidos directamente en el código.
Para crear el campo de entrada correspondiente a la dirección del remitente:
1. En el panel “Creación”, dentro del grupo “Campos usuales”, despliegue “Entrada”.
2. Seleccione el campo de entrada predefinido “E-Mail”.
3. Clique en la página: el campo de entrada se crea automáticamente.
4. Modifique el texto del campo: “Remitente”.
Para crear el campo de entrada correspondiente al sujeto del email:
1. En el panel “Creación”, dentro del grupo “Campos habituales”, clique sobre .

2. Clique sobre el campo “Remitente”: el campo de entrada se crea automáticamente.
3. Modifique el texto del campo: “Sujeto”.
Para el cuerpo del mensaje, vamos a utilizar un campo de entrada HTML: el usuario podrá así dar forma
fácilmente el texto del email mediante una barra de utilidades específica.
1. En el panel “Creación”, en el grupo “Campos habituales”, despliegue “Entrada”.
2. Seleccione un campo de entrada predefinido “Texto HTML”.
3. La forma del campo aparecerá bajo el cursor del ratón.
4. Clique bajo el campo “Sujeto”: El campo de entrada se crea automáticamente.
5. Agrande el campo para que puedan visualizarse varias líneas.
6. Muestre la ventana de descripción del campo (doble clic sobre el campo).
 En la pestaña “General”, modifique el modo de visualización de la barra de utilidades HTML. Esta barra de
utilidades deberá estar siempre visible.
 Valide la ventana de descripción del campo.
7. Si hiciera falta, reposicione el campo.
Alinee los distintos campos existentes en la página.

Vamos ahora a crear el botón que permita enviar los emails.
Envío del email

Para crear el botón de envío:

2. Clique en el emplazamiento de creación del botón (por ejemplo, bajo de la página).
3. Seleccione el botón y modifique su texto (por ejemplo, utilizando la tecla [ENTER]). El nuevo texto es
“Enviar”.
4. Edite el código de este botón (tecla [F2]).
5. Introduzca los distintos códigos siguientes en el tratamiento servidor de “Clic”.
 El código de conexión y de apertura de la sesión SMTP.
MiSesion is EmailSMTPSession
MiSesion.ServerAddress = “NombreServidorSMTP”
// Introduzca aquí la dirección del servidor SMTP
MiSesion.Name = “Nombre_Usuario”
// Introduzca aquí el nombre de usuario (si es necesario)
MiSesion.Password = “Contraseña”
// Introduzca aquí la contraseña (si es necesaria)
// Para abrir la sesión SMTP
IF EmailStartSession (MiSesion) = False THEN
ToastDisplay (“Imposible conectar al servidor SMTP.”, ErrorInfo ())
RETURN
END
Este código utiliza una variable avanzada de tipo EmailSMTPSession. Las distintas propiedades de esta
variable permiten definir las características de la sesión SMTP. La función EmailStartSession utilizada junto a
esta variable, permite abrir la sesión.
 Código de preparación del email:
Sugerencias is Email
Sugerencias.Sender = EDT_Remitente
Sugerencias.Subjec t= EDT_Sujeto
Sugerencias.HTML = EDT_Texto_HTML
Sugerencias.Message = HTMLToText (EDT_Texto_HTML)
Sugerencias.Recipient[1] = “Desarrollador@misitio”
// Introduzca aquí la dirección del destinatario de las sugerencias

Este código utiliza una variable de tipo Email. Las distintas propiedades de esta variable permiten definir las
características del email a enviar. Este código asocia pues el contenido de los distintos campos de la página a
las propiedades de la variable de tipo Email.
 Código del envío del email:
// Envío del email
IF EmailSendMessage (MiSesion, Sugerencias) = False THEN
ToastDisplay (“Error de envío”, ErrorInfo ())
ELSE
ToastDisplay (“Gracias por sus sugerencias.”)
END
El envío del email se realiza sencillamente con la función EmailSendMessage. Hay que pasarle como
parámetro la variable que contiene las características de la sesión SMTP y la variable que contiene las
características del email a enviar.
Si se envía el email, se muestra un mensaje de tipo Toast indicando que el email se ha enviado. Un mensaje
de tipo Toast corresponde a un mensaje furtivo.
 Código de cierre de la sesión SMTP
// Cierre de la sesión SMTP
EmailCloseSession (MiSesion)
Este código cierra la sesión utilizando la función EmailCloseSession.
Guarde la página y su código ( o [CTRL]+[S])..
El tratamiento propuesto para el envío de los emails es puramente pedagógico. En un sitio

verdadero, convendría verificar los parámetros introducidos, tratar los errores, guardar un
Notas
fichero de log, …
Mejoras en la página
Vamos a aportar algunas mejoras a nuestra página PopUp:
 Añadir un botón de cierre.
 Lanzar la página PopUp desde la página “PAGE_Lista_de_Productos”.
Cierre de la página PopUp
Para añadir un botón que permita cerrar la página PopUp:
1. En el panel “Creación”, dentro del grupo “Campos habituales”, clique sobre “Botón”.
2. Clique en la página, en la posición donde se deberá crear el botón (por ejemplo, bajo, a la derecha del botón
“Enviar”).

3. Seleccione el campo y utilice la tecla [ENTER] del teclado. El texto pasa a modo edición. Introduzca “Anular” y
valide.
5. En el código clic navegador, introduzca el siguiente código:
PopUpClose ()
La función PopUpClose permite cerrar la ventana PopUp.
Esta función es una función Navegador, ejecutada solamente en el navegador: no hace falta ningún retorno al
servidor. Vamos pues a modificar el tipo de botón “Anular” en consecuencia:
1. Muestre la ventana de descripción del botón “Anular” (doble clic sobre el campo por ejemplo).
2. En la pestaña “General”, dentro de la zona “Operaciones sobre los campos”, seleccione “Ninguna”.

Vamos ahora a ver como abrir la página PopUp.
Apertura de la página PopUp
La página PopUp de envío de un email desde el menú de la página “PAGE_Lista_de_Producto”.
Muestre la página “PAGE_Lista_de_Productos”:
1. En el editor, en la cinta de la página, despliegue “Páginas PopUp”.
2. En la lista que se muestra, clique sobre “PAGE_Lista_de_Productos”.

Vamos ahora a crear un enlace que permita enviar una sugerencia:
1. En el panel “Creación”, dentro del grupo “Campos habituales”, clique sobre “Enlace”.
2. Clique a continuación en la parte superior de la página (bajo del campo de búsqueda): se crea el campo
enlace.
3. Modifique su texto: “Enviar una sugerencia” y valide.
4. Muestre la ventana de descripción del campo (doble clic sobre el campo).
5. En la zona “Operaciones sobre los campos”, seleccione “Ninguna”.
6. En la zona “Acción”, seleccione “Ninguna”.
9. En código clic navegador, introduzca el siguiente código:
PopUpDisplay (POPUP_SinNombre1)

La función PopupDisplay permite mostrar el PopUp.
¿Por qué no abrir la popup desde el menú presente en el modelo de páginas?

La página popup que hemos creado está enlazada con la página “PAGE_Lista_de_Productos”.
Solamente puede ser utilizada en esta página.
Notas
Para utilizar una popup desde un modelo de páginas, el popup deberá crearse a partir de un
modelo de páginas.
Guarde la página ( o [CTRL]+[S]).
Lance la prueba de la página ( en los botones de acceso rápido) y abra el popup de envío de una
sugerencia.

Lección 5.4. Identificador del usuario: El
Groupware Usuario
 ¿Qué es el groupware usuario?
 Integrar el groupware usuario
 Configurar el groupware usuario
 Probar el groupware usuario

Presentación
Un sitio puede utilizarse por distintos intervinientes, teniendo todos perfiles distintos. A menudo es preciso prever los
niveles de acceso según la identidad del internauta (cliente, comercial, director, por ejemplo).
Tomemos un ejemplo simple: Cuando se actualiza un sitio de venta, el sitio propone las funcionalidades siguientes:
 Consulta de tarifa
 Modificación de tarifa
 Introducir pedidos
 Gestión de clientes
Según el internauta, los posibles accesos son distintos. Algunos ejemplos:
 Los internautas clientes pueden consultar las tarifas y crear los pedidos.
 Los comerciales pueden consultar la tarifa y establecer los pedidos, generar nuevos clientes.
 Los directores comerciales tienen acceso a todas las opciones.
WEBDEV permite gestionar estos distintos niveles de acceso con algunos clics en sus sitios por medio del groupware
usuario.
Vamos a integrar el groupware usuario en nuestro sitio “Sitio_WebDev_Completo” y configurarlo para limitar el acceso
a la adición de productos.
Corregido
Integrar el groupware usuario

Para integrar el groupware usuario en el proyecto “Sitio_WebDev_Completo”:
1. En el panel proyecto, dentro del grupo “Proyecto”, clique sobre “Groupware Usuario”. Se muestra la ventana
de parametrización del groupware usuario.
2. En el panel “Integración”, seleccione las siguientes opciones:

 Groupware usuario automático.
 Activar el groupware usuario integrado.
Cuando no se utiliza el groupware usuario integrado, se propone una conexión estándar.

Si el usuario introduce su login y contraseña, podrá acceder al sitio.
Cuando el groupware usuario se utiliza, el desarrollador tiene a su disposición un modelo
Notas
de campos específico. Ese modelo de campos permite integrar en su página un enlace que
permitirá al usuario conectarse. Vamos a presentar esta solución en este curso, porque es
flexible y fácilmente integrable.
3. Valide. Aparecerá un mensaje indicando que por defecto, un usuario Supervisor se ha creado.

Por defecto, solo existe un usuario, el supervisor. La primera vez que se lanza el sitio, conéctese
Notas
utilizando el nombre: “Supervisor” y la contraseña “Supervisor”.
4. Valide este mensaje. El Groupware usuario está integrado en el proyecto.
En este ejemplo, conservaremos todas las opciones por defecto. Numerosas opciones son
Notas
igualmente parametrizables. Para más detalles, consulte la ayuda en línea.
Configurar el groupware usuario

La configuración del groupware usuario se hace directamente cuando se ejecuta el sitio. Esa configuración consiste en
definir los distintos usuarios y sus derechos sobre las distintas páginas y campos del sitio.
La configuración de los usuarios podrá realizarse:

 Cuando se desarrolla la aplicación. Los ficheros de datos necesarios (usuarios y sus
Notas
derechos) podrán instalarse con el sitio.

 Cuando el sitio está instalado, por el administrador.
Integración del espacio cliente en el sitio

En este ejemplo, vamos a integrar el enlace de conexión en la página “PAGE_Lista_de_Productos”.
El enlace de conexión está proporcionado bajo la forma de un modelo de campos.
Un modelo de campos es una página específica que contiene distintos campos. En esta página,
puede poner todos los tipos de campos. Un modelo de campos es un fichero de extensión
“WDT”.
El primer interés de un modelo de campos es la re-utilizabilidad. Un modelo de campos presente
en un proyecto puede reutilizarse no importe en qué página del proyecto. Las modificaciones
Notas
solo se hacen en el modelo de campos y es WEBDEV quien reporta las modificaciones

automáticamente.
Los modelos de campos pueden estar sobrecargados: el código puede añadirse, los campos
pueden desplazarse en la página utilizando el modelo de campos. Los campos pueden
modificarse.
Para integrar el enlace de conexión:

1. Muestre la página “PAGE_Lista_de_Productos” en el editor.
2. En el explorador del proyecto, en la carpeta “Componentes internos”, despliegue “WDGPU_WB_CNX”. Este
componente interno se integra en el proyecto cuando se establece el groupware integrado. Comprende todos
los elementos necesarios para esta gestión, incluyendo el modelo que campos que permiten la conexión.
3. Despliegue a continuación “Modelo de campos Web”.

4. Seleccione el modelo de campos “MDLC_GPU_Connexion” y realice un “Drag and Drop” hacia la página
“PAGE_Lista_de_Productos”. Deposite el modelo de campos debajo del campo de búsqueda.
5. El modelo de campos se ha integrado. El enlace “Conexión” aparece.

Prueba del sitio
Vamos a continuación a probar nuestro sitio:

2. Aparece la página correspondiente a la lista de productos.
3. Clique sobre el enlace “Conexión”. Aparecerá la página de conexión.
4. Conéctese como supervisor:
 Login: supervisor
 Contraseña: supervisor
5. Valide

6. Aparecerá la página de configuración del groupware.
Creación de usuarios y grupos
Para configurar el groupware usuario, vamos en primer lugar a crear un grupo “Gestión de productos”. Este grupo
agrupará los usuarios autorizados a modificar y añadir los productos en el sitio.
Crearemos un usuario Alicia, asociado al grupo “Gestión de productos”.
Para crear un nuevo grupo de usuarios:
1. Clique sobre el botón “Nuevo” bajo de la zona “Grupos”. Aparece la pantalla para la introducción de un nuevo
grupo.
2. Introduzca el nombre del grupo “Gestión de productos”.
3. Clique sobre el botón “Guardar”. El grupo “Gestión de productos” aparecerá en la lista de grupos definidos
para el groupware usuario.

Para crear un nuevo usuario:
1. Clique sobre el botón “Nuevo” debajo de la zona “Usuarios”. Aparece la pantalla para la introducción de un
nuevo usuario.
2. Introduzca las siguientes informaciones:
 Login: Alicia
 Nombre: Alicia
 Usuario activado (la cuenta de usuario es activada automáticamente en el sitio y puede utilizarse
inmediatamente).
 Contraseña: Alicia. También se puede permitir al usuario elegir su contraseña en la primera conexión.
Información concerniente al usuario:

 En las informaciones concernientes al usuario, solo es obligatorio el login.
Notas
 También puede definirse aquí que el usuario también es un supervisor del groupware. En
este caso, estará autorizado a modificar los usuarios, los grupos y los derechos.
3. Clique sobre el botón “Guardar”. El usuario “Alicia” aparece en la lista de usuarios definidos para el groupware
usuario.
Para asociar el usuario “Alicia” al grupo “Gestion de productos”:
1. Seleccione el usuario “Alicia” en la página.
2. Seleccione el grupo “Gestión de productos”.
3. Clique sobre la flecha de adición
4. Ya se ha realizado la asociación.
Definición de los derechos
Vamos ahora a definir los derechos de acceso al menú de creación de producto.
Una buena práctica en términos de seguridad consiste en prohibir el acceso por defecto y autorizar el
acceso solo a los grupos deseados.
Vamos a definir los derechos para los usuarios no conectados (es decir, a los no identificados por el
groupware). Estos derechos serán los que se usarán por defecto cuando se lance el sitio, mientras que no se
conecte un usuario.
Para definir los derechos:

1. Clique sobre la opción “Gestión de los derechos” a la izquierda de la página.
2. Para prohibir a todos los usuarios el acceso a la página de creación de productos, seleccione el grupo por
defecto de los nuevos usuarios “Visitante (no conectado)”.
3. Clique sobre “Siguiente”.

4. La página que aparece permitirá seleccionar cada página, modelo de páginas o informes de la aplicación.
 Para cada página, modelo de páginas o informe, se puede especificar si será o no accesible para el grupo.
 Para cada página o modelo de página, se puede indicar si los campos mantendrán el comportamiento del sitio
(por defecto), o serán inactivos, invisibles o inhabilitados.
En nuestro caso, el enlace “Añadir un producto” está en el model ode páginas “PAGEMOD_Menu:”
1. Seleccione el modelo de páginas “PAGEMOD_Menu” en la lista. Los derechos definidos sobre el modelo de
páginas aparecerán en todas las páginas que utilizan el modelo.
2. Clique sobre “Siguiente”.
3. Aparecerá la ventana de configuración de los derechos sobre los campos.
4. Seleccione la opción a configurar: “Sub-menu Opción_2”.
5. Clique sobre “Gris”.

6. Guarde las modificaciones clicando sobre “Guardar”.
Prueba del sitio
Ahora vamos a probar el sitio:

2. Por defecto, la opción “Añadir un producto” aparecerá inhabilitada”.
3. Clique sobre “Conexión” y utilice el login “Alicia” (con la contraseña “Alicia”). Valilde.
4. La opción “Añadir un producto” aparecerá habilitada.

Desmarcar la gestión del groupware usuario

En el seguimiento de este curso, no utilizaremos más el groupware usuario. Puede pues, desactivar la
gestión de los derechos de los usuarios en este proyecto:
1. En el panel “Proyecto”, dentro del grupo “Proyecto”, clique sobre “Groupware Usuario”.
2. En la ventana que aparece, en la pestaña “Integración”, seleccione “No Groupware Usuario”.
3. Valide.

Lección 5.5. Gestionar el Multi-Lenguaje
 ¿Qué es un sitio multi-lenguaje?
 Paso a paso, creación de un sitio multi-lenguaje.

¿Qué es un sitio multi-lenguaje?
Un sitio multi-lenguaje es un sitio que propone un interface en distintos idiomas: inglés, francés, alemán o cualquier
otra lengua.
Un único sitio creado con WEBDEV puede proponer hasta 64 idiomas distintos.
Vamos a manipular un proyecto para que pueda ejecutarse en francés o en inglés, según la elección del usuario.
Los principales pasos para hacer un sitio multilingüe son:
 Elegir los idiomas del proyecto.
 La internacionalización de los elementos del proyecto (páginas, informes, campos, …)
 Internalización de los mensajes del código.
 Programación del cambio de idioma en el sitio.
Vamos a aplicar las distintas etapas al proyecto “Sitio_WebDev_Compelto”. Este proyecto, disponible en francés, va a
ser traducido al inglés.
Si no ha realizado las manipulaciones de las lecciones anteriores, puede seguir esta lección
Corregido
abriendo un proyecto corregido: En el panel “Inicio”, dentro del grupo “Ayuda en línea”,
despliegue “Guía de auto-formación” y luego seleccione “Sitio WebDev Completo (Con páginas)”.
Seleccione los idiomas del proyecto

La primera operación consiste en elegir los idiomas del proyecto.
1. Muestre la descripción del proyecto: en el panel “Proyecto”, dentro del grupo “Proyecto”, clique sobre
“Descripción”.
2. Clique sobre la pestaña “Idiomas”. Nuestro proyecto gestionará Francés e Inglés.
3. Clique sobre el botón “Añadir”. La ventana de selección de idiomas aparecerá.
4. Clique sobre “Inglés”. Una marca aparecerá a la derecha del idioma.

5. Valide. El idioma “Inglés” aparecerá en la lista de los idiomas del proyecto.

La pestaña “Lenguas” permite también parametrizar las opciones lingüisticas referidas a los nombres, las
monedas, las fechas, … para el idioma seleccionado. Veamos un ejemplo:
1. Clique sobre el idioma “Inglés”.
2. Seleccione la pestaña “Fecha”.
3. Por defecto, se utilizan las opciones lingüísticas específicas. Se puede definir el formato de fecha utilizado, así
como la traducción de los días y los meses. Si selecciona la opción “Utilizar los parámetros definidos en la
opciones del sistema operativo”, los parámetros que utilizará, no serán los del puesto servidor, sino los
parámetros del puesto usuario.
4. Conserve la opción “Utilizar los siguientes parámetros”.
En las opciones lingüísticas, se puede escoger el sentido de la escritura del idioma (pestaña
“Varios”, opción “Sentido de la escritura”). Así se puede crear los interfaces con un idioma que
Notas
se escribe de derecha a izquierda.
Valide. Un mensaje propone sincronizar los distintos elementos del proyecto. Responda “Si”. Todos los
elementos del proyecto abiertos en el editor (páginas, informes, …) se cerrarán y el o los idiomas
suplementarios, se añadirán a todos los elementos.
Los errores de IHM son susceptibles de aparecer. Vamos a ignorarlos por el momento. Estos
Notas
errores se tratarán más adelante en este curso.
Internalización de los elementos del proyecto

Todos los elementos del proyecto pueden ser multi-lenguaje: Páginas, informes, …
Vamos a modificar algunos elementos de la página “PAGE_Lista_de_Productos” para ver los distintos métodos a
utilizar.
Vamos así a ver como modificar:
 La imagen del logo utilizado en la página PAGE_Lista_de_Productos”.
 Los textos de los campos de la página PAGE_Lista_de_Productos”.
 Las opciones del menú
 Un mensaje mostrado por el código “WLangage”.
Abra la página “PAGE_Lista_de_Productos” en el editor (doble clic sobre su nombre en la pestaña “Explorador
del proyecto por ejemplo).
Verificamos a continuación que la página PAGE_Lista_de_Productos está bien asociada con los distintos idiomas
definidos en el proyecto:
1. Muestre la descripción de la página (opción “Descripción” del menú contextual de la página).
2. Seleccione la pestaña “Idioma”: los dos idiomas seleccionados en el proyecto aparecerán.
3. Seleccione la pestaña “General”: es necesario traducir el título de la página.
4. Introduzca “List of products” en la zona del inglés.

5. Valide la ventana.
Internalización de una imagen
Para cambiar la imagen del logo utilizado en la página PAGE_Lista_de_Productos según el idioma de ejecución:
1. Abra la página “PAGE_Lista_de_Productos” si hiciera falta.
2. La imagen del logo está contenida en el modelo asociado a la página. Se necesitará pues, abrir el modelo de
páginas asociado:
 Clique sobre el logo y muestre el menú contextual.
 Seleccione la opción “Abrir el modelo”.

 El modelo de páginas aparecerá, rodeado de un cuadro naranja.
3. Muestre la ventana de descripción del logo (doble clic sobre el campo).
4. En la pestaña “General”, a la derecha de la zona “Imagen”, clique sobre el botón .

5. Aparecerá la ventana de gestión de las imágenes multi-lenguaje. Se puede utilizar una imagen distinta para
cada idioma. Esta funcionalidad será muy útil en el caso de que las imágenes contenga texto.
6. Cierre la ventana de descripción del campo.

Ya que estamos en el modelo de páginas, vamos a aprovechar para traducir la opción del menú “Lista de
productos”.
Internalización del menú
La traducción de las opciones de un menú puede realizarse como para los otros campos mediante la ventana de
descripción de la opción, o directamente desde el editor de páginas.
Para nuestro ejemplo, vamos a traducir la opción de menú “Lista de productos”.
1. Seleccione y luego clique sobre el menú existente en el modelo de páginas.
2. El menú pasa a modo edición y aparece un cuadrado amarillo.
3. Seleccione la opción “Lista de productos”.
4. Muestre la ventana de descripción de la opción: muestre el menú contextual y seleccione “Descripción de la
opción”.
5. En la ventana de descripción, introduzca la opción en inglés “List of products”.
6. Valide.
La traducción de las opciones puede igualmente realizarse directamente en el editor de páginas.
Para traducir la opción “Añadir un producto”:
1. En el panel “Mostrar”, dentro del grupo “Opciones”, despliegue “Lengua a mostrar” y seleccione el idioma a
visualizar en el editor (Inglés en nuestro caso).
2. Se muestran las opciones de menú en la lengua seleccionada. Si alguna traducción no corresponde al
lenguaje seleccionado, las opciones del menú se muestran en francés.
3. Seleccione la opción “Añadir un producto”.
4. Pulse la tecla [ESPACIO] del teclado: el texto pasa a modo edición.

5. Introduzca el texto en inglés: “Add a product”.
6. Utilice la tecla [ESC] para salir del modo de edición.
7. Guarde el modelo de páginas ( o [CTRL]+[S]).
8. Vuelva a modo de mostrar en francés: en el panel “Mostrar”, dentro del grupo “Opciones”, despliegue
“Lengua a mostrar” y seleccione “Francés”.
9. Actualice las páginas que usan el modelo de páginas clicando sobre el icono en la banda naranja. Valide
la ventana de actualización.
10. Cierre el modelo de páginas mostrado en el editor.
Internalización de los campos
Un campo puede mostrar numerosas informaciones al usuario:
 Un texto,
 Una imagen, …
Todas estas informaciones deberán traducirse. Estas informaciones están accesibles en las distintas pestañas de la
ventana de descripción del campo.
Para traducir el enlace “Modificar” en la página PAGE_Lista_de_Productos”:
1. Seleccione el enlace “Modificar”.
2. Muestre la ventana de descripción del campo (opción “Descripción” del menú contextual).
3. Introduzca el texto en inglés: “Modify”.
4. Valide.
Internalización de un mensaje de programación
Todos los mensajes de su programa puede igualmente introducirse en varios idiomas.
Veamos como traducir un mensaje de programación:
1. Muestre el editor de código (tecla [F2] sobre la página “PAGE_Lista_de_Productos”).
2. En el código de declaración de las globales, introduzca el siguiente código:
sMiCadena is string = “Français”
3. Para traducir este tipo de mensaje, posicione el cursor en la cadena “Français” y utilice la combinación de
teclas [CTRL]+[T]. También es posible, en el panel “Código”, dentro del grupo “Lenguajes”, desplegar
“Traducir las cadenas” y seleccionar “Traducción de los mensajes”.
4. Aparecerá la siguiente ventana:
5. Esta ventana permite introducir todos los mensajes del programa en todos los lenguajes del proyecto.
6. En la zona “Inglés”, introduzca “French” y valide.

7. El icono así como una cifra aparecen en el editor de código. Estos iconos indican que el mensaje multi-
lenguaje existe en dos idiomas.
Las herramientas de traducción

Acabamos de traducir manualmente algunos elementos de nuestra aplicación.
Para traducir estas informaciones, WEBDEV pone a su disposición varios medios:
 Una traducción directa de los mensajes en los distintos editores: esta funcionalidad es la que acabamos de
utilizar para traducir algunos elementos de nuestro sitio. Esta traducción puede eventualmente utilizar una
herramienta de traducción, Google Traducción (sujeto a la posesión de una licencia), …
 Una traducción “industrializada” realizada mediante una utilidad externa (WDMSG y WDTRAD).
Entrada directa de las traducciones
Las traducciones son directamente introducidas en el interface del producto: este es el método que hemos utilizado
hasta ahora.
Si dispone de un software de traducción o de un sitio de traducción, puede configurar WEBDEV para utilizar este
software:
1. En el panel “Inicio”, dentro del grupo “Entorno”, despliegue “Opciones” y seleccione “Opciones generales de
WEBDEV”.
2. Muestre la pestaña “Traducción”.
3. Especifique:
 Si los parámetros regionales deberán estar automáticamente activados según el idioma en curso de
introducción. En este caso, si el idioma necesita un alfabeto específico, este alfabeto se seleccionará
automáticamente.
 El software o el sitio a utilizar para la traducción. Es posible utilizar WDDixio, diccionario de traducción
proporcionado con WDMSG (ver página siguiente), un software o un sitio de traducción específico, o Google
Traducción (para más detalles, consulte la ayuda en línea).
 Los idiomas gestionados.
4. Cuando se han definido los parámetros de traducción, se puede utilizar el botón presente en las
distintas ventanas de descripción de los elementos del proyecto: este botón permitirá utilizar el software
definido para la traducción.
Traducción con WDMSG y WDTRAD
Existe también una herramienta opcional WDMSG que permite:
 Extraer todos los mensajes de un proyecto (texto de los campos, mensajes de código, títulos de las ventanas, …)
para traducirlos.
 Reintegrar los mensajes traducidos.
Los mensajes a traducir se extraen:
 En un formato texto que puede configurarse para poder ser utilizado por la mayoría de software de traducción.
 Con formato HFSQL.
WDMSG también se suministra con una herramienta de ayuda a la traducción WDTRAD. WDTRAD permite introducir
sencillamente todas las traducciones de las informaciones multi-lenguaje de un proyecto.
Para obtener más informaciones sobre WDMSG y WDTRAD, contacte con el servicio comercial de PC SFOFT.
Otros elementos para traducir: los mensajes de framework
Numerosas informaciones y mensajes están presentes en el framework WEBDEV. Por ejemplo, los nombres de los
días y de los meses utilizados por las funciones de gestión de las fechas provenientes del framework WEBDEV. Para
traducir una o más librerías de este framework, es necesario utilizar WDINT (utilidad opcional proporcionada con
WDMSG).
Este software permite obtener un fichero de extensión WDM que contiene todas las traducciones de las librerías. Para
utilizar este fichero en su aplicación:
 Puede utilizar la función LoadError.
 Puede integrar el fichero a la descripción del proyecto en la pestaña “Idiomas”. Hay que seleccionar el idioma
deseado y seleccionar la pestaña “Varios”.
Para obtener más información sobre WDINT, contacte con el servicio comercial de PC SOFT.
Programación del cambio de lenguaje

Por defecto, el proyecto se ejecuta en el idioma de ejecución definido por el proyecto, en la pestaña “Lenguajes” de la
descripción del proyecto (opción “Descripción”, en la pestaña “Proyecto”).
En un sitio, la selección del idioma puede efectuarse mediante una opción de menú. La función Nation utilizada en el
tratamiento asociado a la opción del menú permite cambiar el idioma de la aplicación que se está ejecutando.

Añadir una opción de menú
Para añadir una opción de menú:
1. Abra si hiciera falta la página “PAGE_Lista_de_Productos” en el editor (doble clic sobre su nombre en el
explorador del proyecto).
2. Clique sobre el menú y seleccione la opción “Abrir el modelo” del menú contextual.
3. En el modelo de páginas, seleccione y luego clique sobre “Opción 3”.
4. El menú pasa al modo edición y aparecerá un cuadro amarillo.
5. Pulse la tecla [ESPACIO] del teclado: el texto pasará a edición.
6. Introduzca el texto “Idiomas” y valide.
7. Seleccione la opción “Idiomas” que acaba de crear.
8. Muestre el menú contextual (clic derecho) y seleccione la opción “Insertar un sub-menú”.
9. Introduzca el texto de la primera sub-opción “Francés”.
10. Pulse la tecla [ENTER] dos veces e introduzca el texto de la segunda sub-opción “Inglés”.
Ahora vamos a introducir el código WLangage necesario para la carga del idioma.
Programación
Para introducir el código de gestió de idiomas
1. Seleccione la opción “Lenguas .. Francés” en el modelo de páginas mostrado en el editor.
2. Muestre el menú contextual (clic derecho). Seleccione la opción “Código”.
3. Introduzca el siguiente código en el código servidor de la opción de menú:
Nation (nationFrench)
PageUse(CurrentPage())
5. Seleccione la opción “Lenguas .. Inglés” en el modelo de páginas mostrado en el editor.
6. Muestre el menú contextual (clic derecho). Seleccione la opción “Código”.
7. Introduzca el siguiente código:
Nation(nationEnglish)
PageUse(CurrentPage())
En este código:
 La función Nation permite cambiar el idioma de ejecución del sitio. Las constantes pasadas como parámetro
permite especificar el idioma a utilizar.
 La funciónPageUse permite volver a mostrar una página (en nuestro caso, la página actual) para que tenga
en cuenta el cambio de idioma.
8. Utilice la tecla [ESC] para salir del modo edición.
9. Guarde el modelo de páginas ( o [CTRL]+[S]).
10. Actualice las páginas utilizando el modelo de páginas y clicando sobre el icono en la cinta naranja. Valide
la ventana de actualización.
11. Cierre el modelo de páginas mostrado en el editor.
Prueba del proyecto
Hemos traducido algunos elementos de la aplicación y ahora vamos a probar el cambio del idioma.
Para probar el sitio:
1. Lance la prueba del proyecto ( en los botones de acceso rápido). La página se mostrará en modo de
prueba en francés.
2. Seleccione la opción “Idiomas .. Inglés”.
3. Los distintos elementos que hemos traducido aparecerán en inglés:


Lección 5.6. La referenciación
 Asistente de referenciación
 Propiedades de las páginas
 Plan de navegación
 Nombramiento físico de las páginas

Presentación
Esta lección presenta las buenas prácticas a adoptar para que su sitio Internet esté correctamente referenciado por
los motores de búsqueda. En efecto, tener un sitio Internet está muy bien, pero tener un sitio referenciado, es mucho
mejor.
Esta lección concierne únicamente a los desarrolladores de sitios Internet. Si desarrolla un sitio
Notas
Intranet, la referenciación no es importante.
Si no ha realizado las manipulaciones de las lecciones anteriores, puede seguir esta lección
Corregido
abriendo un proyecto corregido: En el panel “Inicio”, dentro del grupo “Ayuda en línea”,
despliegue “Guía de auto-formación” y luego seleccione “Sitio WebDev Completo (Con páginas)”.
Recuerde: Modo AWP

Desde el principio de este curso, hemos presentado las diferencias entre un sitio WEBDEV en modo clásico y un sitio
WEBDEV en modo AWP.
Solo el modo AWP permite tener las URL con páginas independientes, fijas y directamente direccionables.
Un sitio Internet, para poder ser referenciado, deberá obligatoriamente estar desarrollado en modo AWP.
Los métodos a su disposición
Para ayudarle a optimizar la referenciación de sus páginas AWP, WEBDEV propone varias herramientas:
 Un asistente de referenciación.
 Las propiedades de las páginas.
 El plan de navegación.
Vamos a detallar estos distintos métodos.
Asistente de referenciación
WEBDEV viene acompañado de un asistente de ayuda a la referenciación.
Para lanzar este asistente, en la cinta, en el panel “Proyecto”, dentro del grupo “Web”, despliegue
“Referenciación” y seleccione “Optimizar la referenciación”.

El asistente propone algunos consejos para optimizar la referenciación del sitio. Los consejos más importantes son los
siguientes:
 Título de las páginas: El título de las páginas deberá reflejar el contenido y contener las palabras clave
importantes. El título de una página se define en la ventana de descripción de la página para cada idioma.
 Palabras clave de las páginas: Es aconsejable asociar las palabras clave a una página. Para definir estas
palabras clave:
o Muestre la ventana de descripción de la página “PAGE_Lista_de_novedades”: muestre el menú
contextual y seleccione la opción “Descripción”.
o Muestre la pestaña “Detalle”.
o En el apartado “Referenciación”, clique sobre “Editar las expresiones y las palabras clave”.
 Texto alternativo: Los textos alternativos son los textos que sustituyen las imágenes cuando éstas no se
muestran (que puede ser porque el internauta ha pedido explícitamente no mostrar las imágenes, porque aún
no se han cargado, o incluso porque el internauta utiliza un navegador en modo texto o un lector de pantalla
para ciegos).
Los textos alternativos describen la imagen y son indexados por los motores de búsqueda. Por este motivo, es
conveniente elegirlas con atención.
El texto alternativo de una imagen se define en la ventana de descripción del campo imagen, en la pestaña
“Ayuda”.
Propiedades de las páginas
Como acabamos de ver, el asistente de referenciación indica varias modificaciones que pueden efectuarse a nivel de
la ventana de descripción de las páginas:
 Título de la página
 Palabras clave de las páginas, …
Otras propiedades que influyen en la referenciación, pueden estar definidos en la ventana de descripción de la
página:
 Frecuencia de la actualización
 Importancia en el sitio
Frecuencia de la actualización
La frecuencia de la actualización indica al motor de búsqueda con qué frecuencia deberá reindexarse.
En la medida de los posible, hay que indicar una frecuencia próxima a la realidad:
 Si la página cambia más a menudo de lo que se indica aquí, algunas versiones podrían no indexarse.
 Si la página cambia menos a menudo, el paso del motor de búsqueda encontrará una carga inútil en el servidor y
la indexación podrá ser penalizada.
Importancia en el sitio
Este criterio permite al motor de búsqueda saber qué página poner como prioritaria al internauta cuando varias
páginas del sitio corresponden a una búsqueda.
Plan de navegación
El plan de navegación define la organización de su sitio. En referenciación, hay dos usos:
 Permitir mostrar el campo “Plan del sitio” para guiar a los internautas al interior del sitio.
 Generar el fichero sitemap.xml
Para definir el plan de navegación:
1. En la cinta, en el panel “Proyecto”, dentro del grupo “Web”, clique sobre “Plan de navegación”.
2. Se abre una ventana para permitir construir la arborescencia de su sitio. Un modo de construcción automática
puede ayudarle a realizar una versión preliminar detectando automáticamente los enlaces entre las páginas.
Puede personalizar el plan de navegación para el sitio.
El fichero sitemap se construye automáticamente por WEBDEV a partir del plan de navegación. Está generado
en el directorio _WEB de su sitio y se llama _sitemap.xml.
El fichero sitemap.xml deberá suministrarse con las utilidades para webmasters de los motores de búsquedapara
permitirles indexar el contenido de su sitio.
Nombre físico de las páginas

Para mejorar aún más la referenciación, se puede fijar el nombre físico de las páginas AWP para que sean distintas en
cada idioma (y también distintas del nombre lógico).
Por ejemplo, una página mostrando un cuadro de ventas en el que el nombre lógico (el nombre utilizado en
programación) sería PAGE_TDBVentas puede estar generado en francés en el fichero “tableau-de-bord-ventes.awp” y
en inglés en el fichero “sales-dashboard.awp”.
Para configurar el nombre de generación de una página:
1. Muestre la ventana de descripción de la página “PAGE_Lista_de_novedades”.
2. En la pestaña “General”, clique sobre el botón “Lenguaje” a la derecha del campo “Fichero generado”.
3. Se muestra una ventana que permite configurar el nombre de las páginas:

CAPÍTULO 6
Despliegue
de un sitio
Capítulo 6 – Despliegue de un sitio |197

Lección 6.1. Desplegar un sitio
 ¿Cómo desplegar?
 Configuración necesaria

Presentación
Cuando el sitio WEBDEV está totalmente desarrollado, es necesario desplegarlo en un servidor para hacerlo accesible
a los internautas.
Vamos a ver los distintos pasos necesarios para el despliegue de un sitio WEBDEV.
Este capítulo presenta el desarrollo en un servidor Windows. Si desea utilizar un servidor Linux,
Notas
diríjase a la documentación del servidor de aplicación WEBDEV para Linux o a la ayuda en línea.
Es posible desplegar un sitio dinámico WEBDEV por uno de los siguientes métodos:
 Despliegue por medio físico (CD-ROM, …). Este despliegue puede ser autónomo: en este caso, la instalación se
realiza igualmente un servidor Web y un servidor de aplicación WEBDEV limitado.
 Despliegue a distancia directamente desde el puesto de desarrollo (por FTP).
 Despliegue a distancia desde un puesto de administración (por FTP) con la ayuda de un “paquete de despliegue”.
 Despliegue del sitio a través del servicio de hospedaje de prueba PC SOFT.
 Despliegue desde el Cloud de PC SOFT.
Configuración necesaria
Para el despliegue en el servidor, es necesario tener instalado y configurado:
 Un servidor Web
 Un servidor FTP
 Un servidor de aplicación WEBDEV (con WEBDEV se proporciona una versión con 10 conexiones).
Cuando se instala WEBDEV, tiene la posibilidad de instalar la versión de prueba del Servidor de aplicaciones WEBDEV.
De esta forma, tiene la posibilidad de probar el despliegue de sus sitios dinámicos.
Para simplificar las tareas del despliegue y para que pueda probar directamente el despliegue de su sitio Web, vamos
a:
 Instalar un Servidor de Aplicaciones WEBDEV 10 conexiones en un puesto Windows. Este servidor de aplicación
deberá estar instalado en un puesto distinto del puesto de desarrollo y WEBDEV Desarrollo no deberá estar
instalado en este sitio.
 Desplegar el sitio a distancia (por FTP).
Si ya posee los parámetros de acceso al servidor sobre el que su sitio va a desplegarse, no será
necesario instalar el Servidor de Aplicaciones WEBDEV 10 conexiones. Puede realizar la
Notas
instalación directamente en el servidor por FTP.
Instalación y configuración del “Servidor de Aplicaciones WEBDEV – 10

Conexiones”
El programa de instalación del “Servidor de Aplicaciones WEBDEV – 10 conexiones” está disponible:
 Descargándolo desde el sitio www.pcsoft.fr, en la sección “Descargas”, “Actualizaciones de WEBDEV”, “Servidor
de Aplicaciones (despliegue)”.
 Desde el DVD de instalación de WEBDEV: Lance “menú.exe” y elija la opción “Instalación de un servidor de
Aplicaciones WEBDEV – 10 conexiones”.
Instalación del “Servidor de Aplicaciones WEBDEV – 10 conexiones”
Los pasos de instalación son los siguientes:
1. Acepte la licencia.
2. Seleccione la plataforma “Windows”. Avance al paso siguiente.

Este capítulo presenta el desarrollo en un servidor Windows. Si desea utilizar un servidor Linux,
Notas
diríjase a la documentación del servidor de aplicación WEBDEV para Linux o a la ayuda en línea.
3. Seleccione la ruta de instalación del servidor de aplicaciones (por defecto “C:\WEBDEV21”). Valide la creación
del directorio.
4. El paso siguiente permite indicar los módulos complementarios a instalar:

 El servidor de aplicaciones (módulo obligatorio, no puede desmarcarse)
 El administrador SaaS que servirá para administrar sus sitios SaaS (para más detalles consulte la ayuda en
línea).
5. Valide este paso sin modificar las opciones.

6. Conserve la opción “Albergar los sitios en versiones anteriores” y avance al paso siguiente.
7. Valide los distintos pasos de la instalación

Observación: si la instalación no detecta un servidor Web válido, el servidor Web IIS se instalará
automáticamente (en caso de fallo, le propondrá instalar el servidor Web Apache).
8. Seleccione los servidores Web virtuales sobre los que el servidor de aplicaciones WEBDEB deberá estar
instalado. El sitio Web por defecto es suficiente. Valide.
9. Conserve las opciones seleccionadas y marque la opción “Lanzar el administrador de WEBDEV”. Valide.
10. Se lanzará automáticamente el administrador.
El fichero PDF “WebDevDespliegue.pdf” está instalado con el servidor de aplicaciones WEBDEV

10 conexiones. Consultar este fichero puede ser útil y necesario para resolver los problemas de
configuración relacionados con los derechos de acceso al servidor.
Notas
Observación: Si la opción “Colocar los iconos en el menú Inicio” está marcada al final de la
instalación, este fichero estará accesible desde el menú “Inicio”.
Configuración a través del Centro de Control de Hospedaje
El Centro de Control de Hospedaje es una utilidad concebida para apoyar automáticamente toda la configuración del
Servidor de Aplicaciones, del Servidor Web (IIS) y del servidor FTP (IIS). Para utilizar el Centro de Control de
Hospedaje:
1. Lance el Centro de Control de Hospedaje desde el menú “Inicio de Windows”.
2. En el menú, dentro del grupo “Parámetros del hospedaje”, clique en “Directorios” para indicar donde se
instalarán los sitios.
3. Elija el directorio raíz en el que se crearán los sub-directorios de las cuentas WEBDEV.
Utilice un directorio local en la máquina. Si desea utilizar un directorio de red, indique

obligatoriamente un camino UNC. El invitado Internet del puesto deberá tener acceso a esta ruta
Notas
sin tener necesidad de autentificarse.
Podrá elegir el nombre de los subdirectorios que contendrán los sitios, los servicios web y los datos.
4. Dentro del grupo “Parámetros del hospedaje”, clique en “Cuentas del OS”. Esta opción permite definir dentro
de qué grupos serán afectados los usuarios Windows creados para el despliegue.
Para el despliegue, puede crear un grupo o utilizar el grupo estándar “Usuarios con poderes”.
Para la ejecución de los sitios, una buena práctica consiste en utilizar el grupo “IIS_IUSRS” (en aquellas
versiones de Windows en las que exista).

5. Dentro del grupo “Parámetros del hospedaje”, clique en “Cuentas WebDev”. Esta opción permite especificar
las limitaciones de los recursos a aplicar en las cuentas WEBDEV:
 Número máximo de conexiones a repartir entre los sitios (0 corresponde a un número ilimitado).
 Limitación del número de sitios a asociar a una cuenta, …
6. Dentro del grupo “Parámetros del hospedaje”, clique en “Base HFSQL Cliente/Servidor”. Esta opción permite
parametrizar la creación de una base HFSQL a cada creación del usuario.
7. Después de haber parametrizado el hospedaje, clique sobre “Aplicar” bajo de la pantalla.

Creación de una cuenta de despliegue
El Centro de Control del hospedaje permite también crear una cuenta de despliegue.
Para crear una cuenta de despliegue:
1. Dentro del grupo “Usuarios”, clique sobre “Nuevo usuario”.
2. Se abre el asistente de creación de un nuevo usuario. Hay que seguir los distintos pasos.

3. Introduzca el nombre del usuario y su contraseña (puede también generar la contraseña. En este caso no
olvide anotarla). Avance al paso siguiente del asistente.
4. El asistente propone crear las cuentas Windows necesarias. Conserve las elegidas por defecto y avance al
paso siguiente.
5. Introduzca las informaciones referidas al usuario. Avance al paso siguiente.

6. Los directorios de la cuenta usuario se rellenan automáticamente en función de los datos especificados.
7. Continúe con el asistenta hasta el paso “Sitio Web Virtual”.
 Si elige crear un nuevo sitio virtual, hay que indicar el nombre DNS que necesitará este sitio (el DNS deberá
configurarse en consecuencia).
 Si elige utilizar un sitio virtual que ya existe, su configuración será reemplazada.

9. Seleccione un sitio FTP. Avance al paso siguiente.
10. El asistente ha finalizado. Verifique todas las elecciones. Es posible desmarcar algunas operaciones ni no
desea que el asistente las efectúe en su lugar.
11. Valide el asistente. Su servidor está ahora presto a recibir los sitios WEBDEV.
Los distintos modos de despliegue

Ahora que hemos configurado nuestro servidor Web, podremos desplegar nuestro sitio. Para ello existen diversos
métodos. La elección de uno u otro dependerá fundamentalmente de las condiciones técnicas (posibilidad de utilizar
un servidor FTP o no, acceso al puesto servidor, …).
Un sitio dinámico WEBDEV puede desplegarse por uno de los siguientes métodos:
 Despliegue por medio físico (CD-ROM, …). El despliegue por medio físico crea un soporte de instalación (como
una aplicación) que deberá ser ejecutado directamente en el servidor. Este método de despliegue, evita tener un
servidor FTP. Solamente funciona bajo Windows.
 Despliegue a distancia directamente desde el puesto de desarrollo (por FTP). Vamos a desplegar nuestro
sitio siguiendo este método.
 Despliegue a distancia desde un puesto de administración (por FTP) con la ayuda de un “paquete de
despliegue”. Este modo de despliegue funciona igual que el despliegue por FTP. La única diferencia es que el
despliegue no se realiza desde el entorno del desarrollo de WEBDEB. De este modo:
o El desarrollador genera un paquete de despliegue.
o El administrador del sitio (que puede ser una persona distinta del desarrollador) despliega el paquete en
el servidor a distancia (utilizando el mismo mecanismo que el despliegue por FTP) mediante la utilidad
WDDespliegue. WDDespliegue es una utilidad redistribuible proporcionada en estándar con WEBDEV.
 Despliegue del sitio a través del servicio de hospedaje de prueba PC SOFT.
 Despliegue en el Cloud PC SOFT.
Detallaremos ahora el despliegue por FTP.
Un ejemplo detallado: Despliegue por FTP
Vamos a desplegar el proyecto “Sitio_WebDev_Completo” manipulado en el capítulo 3 de este curso de auto-
formación. Si no ha manipulado este proyecto, hay disponible una versión corregida.
Para abrir este proyecto en WEBDEV:
1. Si es necesario, cierre el proyecto en curso para hacer aparecer la ventana de bienvenida.
2. En la ventana de bienvenida, clique sobre “Curso de auto-formación” y seleccione “Sitio WebDev Completo
(Ejercicio)”.

Si no ha realizado las manipulaciones de los capítulos precedentes, abra el proyecto corregido.
Este proyecto contiene las distintas páginas creadas en los capítulos precedentes.
Corregido
Para abrir el proyecto corregido, en el panel “Inicio”, dentro del grupo “Ayuda en línea”,
despliegue “Guía de Auto-formación” y luego seleccione “Sitio WebDev Completo (Con páginas)”.
Preparación de la instalación
WEBDEV dispone de un asistente de instalación, permitiendo difundir fácilmente su sitio en un albergador WEBDEV
(para un sitio Internet o Extranet por ejemplo) o sobre uno de sus servidores dedicado al hospedaje WEBDEV (para
un sitio Intranet por ejemplo).
Vamos a utilizar este asistente:
1. En la cinta, en el panel “Proyecto”, dentro del grupo “Generación”, despliegue “Desplegar el sitio” y seleccione
“Desplegar el sitio a distancia”.
2. Muestre el paso siguiente.
3. Antes de proceder a la instalación hay que poner en la biblioteca todos los elementos de su sitio. Una
biblioteca es un fichero que agrupa todos los elementos creados durante el desarrollo (descripción de la base
de datos, páginas, informes, consultas, …). Las páginas HTML y las imágenes no se incluyen en la biblioteca.
Avance al paso siguiente.
4. Puede elegir la integración de distintos idiomas en la biblioteca. En nuestro ejemplo, vamos a conservar las
opciones por defecto. Avance al paso siguiente.
5. Las informaciones sobre la versión de la biblioteca permiten introducir los elementos que serán mostrados en
las propiedades del fichero en el explorador Windows. Avance al paso siguiente
6. No guarde el proyecto y valide la creación de la biblioteca.
Instalación
El asistente de instalación ahora realizará algunas preguntas para definir de que manera se difundirá el sitio. En
nuestro caso, vamos a realizar una instalación a distancia mediante FTP:
1. Seleccione la primera opción “Desplegar el sitio WebDev en un Servidor de Aplicaciones WebDev distante”.
Avance al paso siguiente.

2. Para definir los parámetros del servidor, necesitará las siguientes informaciones proporcionadas por su
hospedador para continuar. Vamos a introducir las informaciones correspondientes a la instalación realizada
previamente:
 Dirección del servidor (en nuestro ejemplo, nombre del puesto donde está instalado el Servidor de
Aplicaciones WEBDEV 10 conexiones). El nombre puede ser:
o Un nombre de máquina accesible por la red (por ejemplo: “ServidorTEST”).
o Una dirección IP (por ejemplo: 192.168.15.99)
o Una dirección de internet (por ejemplo: www.miservidor.fr)
 Características de la cuenta usuario introducidas por el hospedador en la gestión de cuentas WEBDEV.

 Características de la cuenta FTP introducidas por el hospedador cuando se creó la cuenta FTP.
Atención: el nombre de usuario puede estar precedido del nombre del dominio para evitar
confusiones.
Notas
Por ejemplo: “mipuesto\prueba” o “midominio\prueba”
3. Cuando ha finalizado la introducción de las informaciones de su cuenta WEBDEV y de su cuenta FTP, avance
al paso siguiente.
4. Introduzca los parámetros de despliegue del sitio. Conservaremos las opciones dadas por defecto. Avance al
paso siguiente.

5. WEBDEV se conecta, y luego le indica el resumen de las operaciones efectuadas (número de ficheros
actualizados, número de ficheros eliminados, …). Para obtener el detalle de las operaciones y si es necesario
modificarlos, clique sobre el botón “Editar la lista de ficheros”.

7. El asistente le propone ahora incluir la modificación automática de los ficheros de datos en la instalación.
Puede también configurar los elementos necesarios para el uso de una base de datos HFSQL Cliente/Servidor.
Deje las opciones por defecto y avance al paso siguiente.

8. Indique los parámetros del sitio:
Podrá modificar:
 El número máximo de conexiones al sitio: si define un valor de “5” por ejemplo, solo 5 internautas podrán
consultar su sitio a la vez.
 El número máximo de conexiones por internauta: Si define un valor de “5” por ejemplo, un solo
internauta podrá lanzar hasta 5 veces su sitio.
 La duración de la inactividad antes de desconectar a un usuario: esta opción permite liberar todos los
recursos ocupados por la sesión del internauta si éste no efectúa ninguna acción durante el tiempo
especificado.
9. Por defecto, su sitio se activa inmediatamente después de la instalación. Si desmarca la caja “Activar el sitio
inmediatamente después de su instalación”, los usuarios no podrán acceder a su sitio.
10. El asistente propone realizar:
 Una instalación inmediata: los ficheros se transferirán inmediatamente al puesto servidor y la instalación
de su sitio se realizará también inmediatamente.
 Una instalación en diferido: Los ficheros se transferirán inmediatamente al puesto servidor, pero la
instalación de su sitio empezará a la fecha y hora indicada (opción “Programar el despliegue para una
fecha posterior”).
11. Avance al paso siguiente
12. El asistente propone generar automáticamente los ficheros de estadísticas para el sitio instalado. Estas
estadísticas son concernientes por ejemplo a las acciones realizadas en el sitio, el origen de los internautas, …
Conserve las opciones propuestas por defecto y avance al paso siguiente.
13. Muestre la pantalla siguiente y luego valide la instalación. El asistente de instalación transfiere los ficheros.
Durante la transferencia de ficheros, el asistente comprime y encripta los datos transferidos. Sus datos transitan
entonces en total seguridad.
Al final de la instalación, un enlace permite lanzar inmediatamente el sitio.

Correspondencia entre los directorios del puesto de desarrollo y el
despliegue
La distribución de los ficheros de un sitio es ligeramente distinta entre el desarrollo y el servidor de despliegue. Aquí
vemos un cuadro recapitulativo de la distribución propuesta automáticamente por WEBDEV.
Directorio en el puesto de desarrollo Directorio en el servidor de despliegue

<Nombre Proyecto>\<Nombre <sitios>\<nombre sitio>\<NOMBRE SITIO en mayúsculas>_WEB
Proyecto>_WEB
<Nombre Proyecto>\Exe Caso de un sitio:
 Ficheros de datos (.fic, .ndx, .mmo, .ftx): <datos>\<nombre
sitio>
 Otros ficheros: <sitios>\<nombre sitio>
Caso de un Webservice:
 Ficheros de datos (.fic, .ndx, .mmo, .ftx): <datos>\<nombre
sitio>
 Otros ficheros: <webservice>\<nombre sitio>
Donde:
 <sitio>, <datos> y <webservice> son los directorios definidos cuando se crea la cuenta de hospedaje (ver más
arriba).
 <nombre sitio> es el nombre del sitio.
La distribución de ficheros es totalmente parametrizable en el asistente de despliegue.

Lección 6.2. Administrar un sitio
 Administrador WEBDEV local
 Administrador WEBDEV remoto

Presentación
Para administrar los sitios WEBDEV (y los Webservices), dispone de las utilidades:
 Administrador WEBDEV.
 Administrador WEBDEV remoto.
Administrador WEBDEV local

El administrador WEBDEV es una aplicación, instalada con el servidor de aplicaciones.
El administrador WEBDEV solo puede utilizarse si puede acceder directamente al servidor Web
Notas
sobre el que se ha desplegado su sitio.
Esta aplicación se compone de siete partes, representadas por siete pestañas:

 Conexiones: Muestra la lista de usuarios conectados a los sitios y permite desconectar un usuario.
 Sitios: Lista los sitios desplegados en el servidor, así como sus parámetros:
 Webservices: Lista los webservices desplegados en el servidor, así como sus parámetros.
 Configuración: Permite gestionar la configuración del servidor.

 Avanzado: Configura los parámetros complementarios del servidor como la gestión de las impresiones, el
spooler de correo, …
 Instalación/Cuentas: Permite bloquear el servidor por mantenimiento, autorizar o prohibir las instalaciones a
distancia y configurar el diario de las instalaciones. Este diario permite trazar los elementos instalados en un
sitio. Es particularmente útil antes de contactar con el Soporte Técnico si encuentra errores cuando despliega.

 Diario: Permite consultar los diarios para los sitios o los webservices para un periodo especificado. Los
elementos mostrados son los elementos que han tenido errores durante el periodo especificado y para que
están activados los diarios.
Administrador WEBDEV remoto

El administrador remoto es un sitio WEBDEV que proporciona las funcionalidades equivalentes al administrador
WEBDEV que permite administrar los sitios WEBDEV en la distancia.
Si utiliza el administrador remoto, la configuración de seguridad es importante, y se recomienda

Atención!
acceder únicamente a través de una conexión HTTPS y elegir contraseñas fuertes.
Observación: Esta utilidad no está disponible con el servidor de aplicaciones WEBDEV 10 conexiones.
Cuando despliegue su sitio dinámico en un lugar hospedador (y si el hospedador tiene autorizada la administración
remota de su sitio), podrá usar esta utilidad para actualizar los parámetros de su sitio.
Para lanzar WDAdminWeb210:
1. Lance el administrador WEBDEV (WDAdminWeb210) en el puesto de despliegue.
2. Abra su navegador favorito (por ejemplo, Internet Explorer) en su puesto.
3. Introduzca en la barra de direcciones del navegador la siguiente URL (respetando la caja):
http://puesto/WDAdminWeb210
donde “puesto” es el nombre del servidor de despliegue.

CAPÍTULO 7
Funcionalidades
específicas de la Web
Capítulo 7 – Funcionalidades específicas de la Web |215

Lección 7.1. Los estilos
 Los estilos CSS
 Los estilos WEBDEV
Tiempo estimado: 1 h

Presentación
WEBDEV permite bien entendido, “diseñar” sus sitios. Para ayudarle en esta tarea, WEBDEV propone utilizar dos tipos
de estilos:
 Los estilos CSS
 Los estilos WEBDEV
El uso de los estilos para sus campos presenta una gran ventaja: una modificación realizada en un estilo (WEBDEV o
CSS) se reporta automáticamente a todos los campos que usan este estilo.
Descubrir los estilos

Antes de manipular los estilos, veamos el soporte de la aplicación: los campos.
Un campo: varios elementos
Cada campo WEBDEV está compuesto de varios elementos.
Consideremos por ejemplo un campo de entrada. Este campo está compuesto de tres elementos:
 El texto
 La zona de entrada
 Una zona complementaria que contiene el texto y la zona de entrada
¿Cómo se aplican los estilos en el campo de entrada? Según el tipo de estilo utilizado (WEBDEV o CSS), el modo
de aplicación varía.
 Los estilos CSS en WEBDEV se aplicarán a los elementos de un campo
En el caso de un campo de entrada, es posible aplicar un estilo CSS específico al texto del campo de entrada
o a la zona de entrada.
 Los estilos WEBDEB se aplicarán al campo completo
Un estilo WEBDEV se compone de varios estilos CSS.
Por ejemplo, sobre el campo de entrada, el estilo WEBDEV contiene:
o El estilo CSS para el texto.
o El estilo CSS para la zona de entrada.
o Las distintas opciones de estilo para la zona global del campo.
Descubrir los estilos mediante un ejemplo
Para descubrir los estilos en WEBDEV, hemos preparado un ejemplo sencillo:
1. Lance WEBDEV 21 (si no lo ha hecho ya). Si es necesario, cierre el proyecto en curso para hacer aparecer la
ventana de bienvenida.
2. Abra el proyecto “Estilos”. Para ello, en la ventana de bienvenida, clique sobre “Curso de auto-formación” y
seleccione el primer proyecto “Estilos (Corregido)”.
Si la ventana de bienvenida no se muestra, en el panel “Inicio”, dentro del grupo “Ayuda en

Astucia
línea”, despliegue “Guía de auto-formación” y luego seleccione la opción “Estilos (Corregido)”.
3. Abra la página “PAGE_Estilos” en el editor.

4. Muestre la ventana de descripción del campo de entrad “Nombre” (muestre el menú contextual del campo y
seleccione la opción “Descripción”).
5. Seleccione la pestaña “Estilo”. Esta pestaña permite definir todas las características de estilo del campo.
6. Se muestra la siguiente ventana:
A partir de esta ventana, se pueden gestionar los estilos CSS (parte 1 de la ventana) y los estilos WEBDEV (parte 2 de
la ventana) para el campo. Vamos a ver el conjunto de las posibilidades de esta ventana.
Seleccionar el estilo CSS de un campo
Para seleccionar los estilos CSS de un campo:
1. En la pestaña “Estilo” de la ventana de descripción del campo, en el combo “Elemento”, seleccione el
elemento de estilo deseado.
Observación: Todos los elementos que están señalados “(CSS)” pueden utilizar un estilo CSS directamente:
basta con seleccionar su nombre.
2. El combo “Estilo CSS” permite elegir el estilo CSS del elemento: este estilo se aplicará en el elemento.
Editar el estilo CSS de un campo
Para crear o editar un estilo CSS:
1. En la pestaña “Estilo” de la ventana de descripción de un campo, clique sobre “…” al lado del combo “Estilo
CSS”.

2. La ventana de edición de estilos CSS se abre.
3. En esta ventana, se pueden crear o modificar todos los estilos CSS del proyecto.
Examinemos esta ventana. Esta ventana se compone de dos zonas:
 Zona 1. El estado del campo sobre el cual se debe aplicar el estilo: normal, sobrevolado, activo, …
 Zona 2. Las propiedades CSS asociadas al estado seleccionado. Cada propiedad CSS puede modificarse por
estado.
Comprobemos por ejemplo las características del estilo CSS “MiEstiloPerso_ZonaDeEntrada”:
1. Seleccione el estilo “MiEstiloPerso_ZonaDeEntrada” en el combo de la zona 1 si fuera necesario.
2. Seleccione la situación “Normal” (la primera situación de la zona 1).
3. Clique sobre la pestaña “Fondo”: el color del fondo es blanco.
4. Seleccione la situación “En entrada” (la cuarta situación de la zona 1).
5. En la pestaña “Fondo”, el color de fondo de la zona de entrada es amarillo pastel. El estilo CSS contiene el
estilo para cada una de las situaciones.
6. Cierre la ventana de descripción del estilo CSS.
La pestaña “Estilo” de la ventana de descripción del campo aaprece de nuevo. En la barte inferior de la ventana,
tiene un acceso rápido a los elementos de estilo modificados con más frecuencia:
 Fuente
 Tamaño
 Negrilla, Itálica, Subrayado, Tachado

 Alineación vertical y horizontal
 Color de fondo.
Estas opciones permiten realizar una sobrecarga rápida del estilo CSS para el campo actual. En
este caso, las modificaciones efectuadas en estas opciones no se reportarán sobre los otros
Atención
campos que utilizan este estilo CSS.

El enlace “Más opciones” permite sobre cargar todas las otras propiedades del estilo CSS .
Descubramos ahora los estilos WEBDEV.

Estilos WEBDEV
Un estilo WEBDEV se compone de varios estilos CSS. Por ejemplo, en el campo de entrada, el estilo WEBDEV
contiene:
 El estilo CSS para el texto.
 El estilo CSS para la zona de entrada.
 Las distintas opciones de estilo para la zona global del campo.
Para gestionar los estilos WEBDEV, hay que utilizar el panel mostrado a la derecha de la pestaña “Estilo” del
campo:
El nombre del estilo WEBDEV aparece arriba de esta ventana. Se puede:

 Elegir un estilo existente.
 Añadir el estilo del campo actual a la hoja de estilos del proyecto.
Esta opción permite reutilizar este estilo en otros campos del proyecto.
 Disociar el campo.
Esta opción permite evitar que las futuras modificaciones del estilo sean reportadas sobre este campo. Esta
opción no es aconsejable: es preferible utilizar la sobrecarga de estilos.
El ambiente del proyecto define por defecto un estilo WEBDEV para cada tipo de campos. Este estilo puede utilizarse
“tal cual” o bien puede modificarse en algunos elementos del campo.
Por ejemplo, para indicar que el texto deberá estar en negrilla en un campo de entrada ( y solamente aquí), hay que:
 Seleccionar el elemento “Texto (CSS) en la zona base de la pestaña “Estilo”.
 Seleccionar la opción “Negrilla”, en la zona base.
Esta modificación no disociará el estilo WEBDEV del campo: una sobrecarga de la propiedad Negrilla se realizar en
relación con el estilo original.
Así, si el estilo original se modifica (cambiar el color de fondo, por ejemplo), esta modificación se reportará
igualmente al campo todo y conservar la sobrecarga.

Para ver los elementos sobrecargados, hay que clicar arriba del panel de gestión de los estilos
Notas
WEBDEV sobre el enlace que indica el número de sobrecargas efectuadas por el campo.
Actualizar los estilos: un ejemplo práctico

Tras la teoría, un poco de práctica. Vamos a crear un campo de entrada y modificar sus estilos en la página
“PAGE_Estilos” del proyecto “Estilos”.
Observación: Vamos a manipular un campo de entrada pero el principio de la manipulación de los estilos puede
aplicarse a todos los campos disponibles en WEBDEV.
Para crear el campo de entrada_

2. Por defecto, este campo está asociado a un estilo WEBDEV (este es el estilo WEBDEV por defecto definido en
el ambiente que se seleccionó al crear el proyecto).
Tres métodos permite seleccionar el estilo WEBDEV de un campo:
 A través de la pestaña “Estilo” de la ventana de descripción del campo (ya lo habíamos visto previamente).
 A través del panel “Modificación” de la cinta: una vista de los distintos estilos WEBDEV que hay disponibles
para el campo se mostrará.
 Mostrando el menú contextual del campo y eligiendo la opción “Seleccionar un estilo WEBDEV”.
Vamos a utilizar este último método para asociar el campo que acabamos de de crear con el estilo
“EDT_Personalizado. Este estilo se utilizará para los otros campos de la página.
Valide la ventana de selección de los estilos. El texto del campo cambia de color: se ha aplicado el estilo.

Guarde la página ([CTRL]+[S]) y lance la prueba de la página ( en los botones de acceso rápido).
1. La página se muestra en el navegador.
2. Entre en introducción en el nuevo campo de entrada: La zona de entrada pasa a color amarillo.
Sobrecargar un estilo CSS para un campo
Ahora vamos a modificar el estilo de la zona de entrada del campo:
1. Muestre la ventana de descripción del campo creado.
2. En la pestaña “Estilo”, elija el elemento “Zona de entrada (CSS)”.
3. Clique sobre el enlace “Más opciones” para sobrecargar las opciones CSS de este elemento.
4. Seleccione la situación “En entrada”.
5. En la pestaña “Fondo”, cambie el color del fondo. Elija por ejemplo un color malva.
6. Valide. En la pestaña de los estilos WEBDEV, arriba a la derecha del enlace indique “1 sobrecarga”.
7. Clicando bajo, verá que este es el color de fondo de la zona interna en entrada que está sobrecargada.
2. Pase el cursor de un campo a otro: el color de fondo permanece amarillo para todos los campos excepto para
el que acaba de crear.
Modificar un estilo CSS para todos los campos
Vamos ahora a modificar el estilo CSS de la zona de entrada para cambiar el color del texto introducido. Esta
modificación se realizará para todos los campos de entrada de la página.
1. Muestre la ventana de descripción del campo creado ([ALT]+[ENTER]).
2. En la pestaña “Estilo”, elija el elemento “Zona de entrada (CSS)”.
3. Clique sobre el botón […] a la derecha del nombre del estilo CSS. La ventana de edición del estilo CSS se
muestra.
4. Seleccione la situación “Normal”.
5. En la pestaña “Texto”, cambie el color. Elija por ejemplo un color verde.
6. Valide y luego valide la ventana de descripción del campo.
2. Introduzca el texto en los distintos campos de la página: el texto introducido se muestra con el nuevo color
seleccionado. Esta modificación se tendrá en cuenta también para el campo que hemos creado y cuyo estilo
se ha sobrecargado.
Estilos y texto enriquecido

A nivel del aspecto, también puede definirse texto enriquecido en los elementos.
Gracias al texto enriquecido, se pueden utilizar estilos distintos para las distintas palabras del texto de un campo. Así,
en el texto de un campo de entrada, se puede definir que una parte del mismo utilizará el color del estilo por defecto,
y otra parte utilizará otro color.
Tomemos un ejemplo sencillo: Añadir un asterisco rojo para especificar el carácter obligatorio de un campo.
En nuestro ejemplo:
1. Seleccione el campo “Nombre”.
2. Pulse la tecla [ESPACIO] o [ENTER] del teclado.
3. El texto de la etiqueta pasa a modo edición.

4. Añada un asterisco al final del texto.
5. Seleccione este asterisco.
6. En la pestaña “Texto”, en el grupo “Fuente”:
 Clique en el botón para pasar el asterisco a modo exponente.

 Cambie el color del texto a rojo con el botón .
7. Salga del modo “Edición” pulsando la tecla [ESC]. El asterisco aparece en rojo y en modo exponente en el
texto.

Lección 7.2. Los cookies
 ¿Qué es un cookie?
 ¿Cómo gestionar los cookies?

¿Qué es un cookie?
Un cookie es un medio sencillo de almacenar temporalmente una información en el puesto del internauta. Esta
información podrá ser releída posteriormente por el sitio que la ha creado.
Así se puede evitar el pedir las informaciones que se introdujeron en una conexión anterior y proponer páginas
personalizadas.
Un cookie tiene una fecha de expiración (por defecto, 30 días después de la creación del cookie).
Se destruye automáticamente por el navegador del internauta cuando ha pasado su duración.
Internet
Atención: El uso de cookies solo es posible si el navegador del internauta está configurado para
aceptarlos.
Un cookie permite por ejemplo conservar en el puesto del internauta informaciones como el nombre del usuario, las
páginas consultadas, la fecha de su última conexión, guardar sus opciones, …
Estas informaciones, guardadas en forma de cookies, pueden leerse por el sitio en la siguiente conexión del
internauta. El sitio podrá de esta forma proponer informaciones personalizadas para el usuario:
 Cinta de publicidad correspondiente a los sujetos consultados durante la última conexión.
 Personalización de la página de bienvenida con el nombre del internauta y la fecha de la última conexión.
 Mostrar promociones correspondientes a las búsquedas efectuadas durante la última visita, …
Los cookies se almacenan sin encriptar: se recomienda no utilizarlas para almacenar

Notas
informaciones sensibles.
¿Qué contiene un cookie?

UN cookie es un fichero de texto conservado en el disco del puesto del internauta (generalmente en la “cache”
Internet del navegador) durante un tiempo específico. El cookie se crea por el navegador o por el servidor.
Para almacenar una información en un cookie, se necesitarán los siguientes elementos:
 Nombre del cookie, que permite al sitio identificarlo.
 Texto del cookie, correspondiente a las informaciones registradas por el sitio: las páginas consultadas,
informaciones proporcionadas por el internauta, …
 Fecha de expiración, a partir de la cual el cookie no será válido (será automáticamente eliminado).
 Nombre del dominio de internet que ha creado el cookie.
Ejemplo práctico
Para probar la gestión de los cookies, vamos a abrir el ejemplo unitario “Uso de los cookies” en el proyecto
actual.
Para abrir un ejemplo unitario:
1. Muestre la ventana de bienvenida de WEBDEV ([CTRL]+[<]).
2. Clique sobre “Abrir un ejemplo”.
3. En el campo de búsqueda, introduzca “Cookies”. El ejemplo unitario “Los Cookies” aparecerá en la ventana.
4. Clique sobre el enlace existente bajo el nombre del ejemplo unitario.
5. En el editor se mostrará la página correspondiente al ejemplo unitario.
¿Cómo utilizar los cookies?
Hay dos tipos de uso de los cookies:
 Los cookies utilizados en código Servidor
 Los cookies utilizados en código Navegador
Para utilizar los cookies, WEBDEV pone a su disposición 2 funciones utilizables tanto en código servidor como en
código navegador:
 CookieWrite: Permite enviar un cookie cuando se muestra la página HTML en el navegador del internauta.
 CookieRead: Permite recuperar el valor de un cookie guardado en el puesto del internauta.
La página ejemplo “PAGE_Cookies” presenta un ejemplo de lectura y de escritura de un cookie en código servidor y
en código navegador.
Cierre el navegador y consulte si es necesario el código de los distintos botones.
Para más detalles, consulte la ayuda en línea.

Lección 7.3. Transacciones y pagos securizados
 Asegurar las informaciones y las páginas mediante TLS/SSL
 Pago seguro

Asegurar las informaciones y las páginas mediante TLS/SSL
Presentación
Por defecto, los datos que circulan entre el puesto del internauta y el servidor no están protegidos. Estos datos
transitan claros por la red.
Para asegurar estos datos, existen varios sistemas. Un sistema corriente es el uso del protocolo TLS (Transport Layer
Security) / SSL (Secure Socket Layer).
Las informaciones no transitarán entonces por el protocolo HTTP, sino por el protocolo HTTPS (Por ejemplo:
htts://clientes.misitiowebdev.com/clientes).
Actualización de las transacciones aseguradas por el protocolo TLS/SSL
Para actualizar las transacciones aseguradas por TLS/SSL, se necesita instalar un certificado en el servidor Web y
configurar el servidor Web.
Este certificado se puede obtener de dos modos distintos:
1. Adquiriéndolo en un organismo certificado.
2. Generando un certificado autofirmado.
Para más detalles sobre los certificados, consulte la ayuda en línea con la palabra clave “SSL”.
Transacciones aseguradas por TLS/SSL en un sitio WEBDEV
El paso en modo seguro se efectúa durante la visualización de la página que necesita esta seguridad (página de
introducción del número de la cuenta del banco, por ejemplo).
Hay que utilizar la función SSLActive en el código navegador del botón que abre esta página. Desde que se abre la
página segura, todas las acciones efectuadas lo serán en modo seguro (es decir, encriptado), sean los que sean los
objetos utilizados (enlace, tabla, zona de repetición, imagen clicable, …).
Para más detalles sobre el uso de la función SSLActive, consulte la ayuda en línea con la palabra clave “SSLActive”.
Pago seguro
Presentación
La mayoría de los sitios comerciales ofrecen a los internautas la posibilidad de poder comprar o alquilar en línea
utilizando un sistema de pago en línea por tarjeta bancaria.
Para un sitio tienda, el pago seguro es un elemento esencial. La solución del pago retenido deberá ofrecer a la vez
confianza al internauta (el “cliente”) y garantizar el pago al sitio tienda.
Todos los datos que circulan durante esta transacción, deberán estar asegurados (por ejemplo, gracias al protocolo
SSL que hemos abordado en el párrafo anterior.
Las soluciones de pago utilizadas son diversas y variadas (PayBox, ATOS, CyberMut, CyperPaiement, SPPlus, …).
El principio del pago seguro puede variar ligeramente de un prestatario a otro, pero el resto es globalmente el mismo
para todos:

Consulta del sitio. Llenado del carrito Introducción del número de la tarjeta bancaria
Identificación (Introducción de las coordenadas) Autorización bancaria
Verificación del pedido Respuesta del banco
Redirección hacia el pago asegurado Resultado de la transacción
 1 a 4: Preparación del pedido en el sitio tienda: el internauta efectúa su pedido en el sitio. Cuando se lanza la
orden de pago, el sitio tienda transfiere al operador de pago las informaciones necesarias para la identificación
del pedido (número de comerciante, importe del pedido, …)
 5 a 7: Introducción y control del número de tarjeta bancaria: el internauta introduce su número de tarjeta
bancaria en una página del operador de pago seguro. La transmisión de las informaciones está protegida por el
SSL, asegurando así la confidencialidad de los datos. El sitio tienda no conocerá nunca el número de la tarjeta
bancaria del internauta.
 8: Retorno al sitio tienda: el operador de pago indica al sitio tienda que el pago es válido, anulado, o fallido.
Importante: el dominio del pago electrónico evoluciona rápidamente. Antes de establecer una
Atención!
solución de pago, verifique siempre las últimas soluciones propuestas por los distintos
prestatarios.
Sistema de pago seguro en un sitio WEBDEV

Pasos generales
Para establecer una solución de pago seguro, a menudo es necesario efectuar las siguientes operaciones:
1. Solicitar un kit de desarrollo al operador de pago (PayBox, ATOS, SIPS, CyberMut, …).
2. Contactar con el banco de la sociedad comerciante para establecer un contrato de venta a distancia (V.A.D.).
En este paso, el banco proporcionará un número de comerciante.
3. Contactar con el operador de pago para establecer un contrato indicando los parámetros del contrato de
venta a distancia.
4. Poner en producción el sitio tienda.
Uso del componente proporcionado con WEBDEV: “Componente de pago seguro”
Varios componentes que permiten el pago en línea son proporcionados estándar con WEBDEV.
El componente “Pago seguro” agrupa numerosos modos de pago asegurado. El componente “Pago seguro” está
proporcionado con sus fuentes y un ejemplo de uso.
Para abrir el ejemplo de uso del componente “Pago seguro”:
1. Muestre la ventana de bienvenida de WEBDEV ([CTRL]+[<]).
2. Clique sobre la opción “Abrir un ejemplo”.
3. En la zona de búsqueda introduzca “Pagos”.
4. Clique en el enlace correspondiente al ejemplo “WWW_PagoSeguro”: el proyecto correspondiente se abre
automáticamente en el editor.
5. En el explorador del proyecto, seleccione la configuración “Ejemplo”.
6. Podrá probar este ejemplo:

Lección 7.4. Anclajes y Zoning
 ¿Qué es un anclaje?
 Crear una página en modo Zoning.
 Establecer los anclajes.

Presentación
Un anclaje permite definir el comportamiento de un campo o de una zona cuando se redimensiona el navegador. ¿El
campo deberá agrandarse?¿Deberá desplazarse?
Así es posible definir el comportamiento de las páginas cuando se muestran en resoluciones específicas (tabletas,
teléfonos, …).
El establecimiento de los anclajes se hace muy fácilmente gracias a una opción del menú contextual de los campos.
Vamos a manipular los anclajes usando un ejemplo.
Vamos a crear un proyecto en el que crearemos una página que permitirá establecer anclajes y ver su interés.
Para crear un proyecto en WEBDEV:
1. Lance WEBDEV si no lo había hecho antes. Si es necesario, cierre el proyecto en curso.
2. En la ventana de bienvenida, clique sobre el botón “Crear un proyecto”, luego sobre la opción “Sitio Web”. Se
abre el asistente de creación del proyecto.
3. Introduzca el nombre del proyecto “Anclajes” y valide las distintas pantallas del asistente con las opciones por
defecto.
Un ejemplo corregido está disponible en todo momento para verificar la validez de las
operaciones efectuadas.
Corregido
Para abrir este proyecto corregido, en el panel “Inicio”, dentro del grupo “Ayuda en línea”,
despliegue “Guía de auto-formación” y luego seleccione “Anclajes (Corregido)”.
Creación de una página en modo zoning

Para crear una página que permita poner en práctica la gestión de los anclajes:
1. Cree una nueva página en blanco.
 En la ventana de creación de un nuevo elemento, clique sobre “Página” y luego sobre “Página”.
Observación: para mostrar la ventana de creación de un nuevo elemento, clique sobre en los botones de
acceso rápido.
 Se lanza el asistente de creación de una página.
 Clique sobre “En blanco-Disposición simple” y valide el asistente.
2. Guarde la página ( o [CTRL]+[S]). Esta página tiene como título “Anclaje”, y su nombre “PAGE_Anclaje”
se propone automáticamente. Valide la ventana para guardarla.
Ahora vamos a dividir nuestra página en 3 zonas:
 Una cabecera (arriba sobre toda la anchura)
 Un menú a la izquierda (sobre toda la altura)
 Una zona de contenido al centro.
Cada zona tendrá un comportamiento específico cuando se redimensione la página.
Para crear las zonas, vamos a utilizar la funcionalidad de zoning.
Para crear una primera zona de título arriba de la página:
1. En el panel “Página”, dentro de la zona “Edición”, despliegue “Zoning” y seleccione “Recortar la disposición”.
2. El cursor del ratón se transforma en lápiz.
3. Clique arriba de la página y dibuje un trazo horizontal. Cuando se suelta el botón del ratón, se ha creado la
zona.

Para visualizar esta zona, vamos a asociarle un color de fonto:
1. Muestre la ventana de descripción de la zona: en el menú contextual, seleccione la opción “Descripción de la
zona”.
2. En la pestaña “Estilo”, para el elemento “Cuadro/Fondo”, seleccione un color de fondo (por ejemplo, color
amarillo burbuja).
3. Valide la ventana de descripción de la zona.
Vamos a realizar las mismas operacioens para dividir en dos la zona inferior de nuestra página:
1. En la pestaña “Página”, dentro de la zona “Edición”, despliegue “Zoning” y seleccione “Recortar la
disposición”.
2. El cursor del ratón se transforma en un lápiz.
3. Clique en medio de la zona inferior y dibuje un trazo vertical.
Para visualizar estas zonas, asocie el color verde a la zona inferior izquierda y el color naranja a la zona inferior
derecha.
Vamos ahora a crear los campos texto dentro de cada zona:
1. Salga del modo de edición “Zoning”, clicando sobre la pestaña “Página” arriba de la página (en la cinta).
2. En el panel “Creación”, en el grupo “Campos habituales”, despliegue “Texto” y seleccione “Texto simple”.
3. Clique en la zona amarilla. El campo Texto se crea automáticamente.
4. Modifique el texto mostrado (tecla [ESPACIO] del teclado): El texto del campo es “Cabecera”.
5. Repita las operaciones 2 a 4 para crear:
 Un texto en la zona vede mostrando “Menú”.
 Un texto en la zona naranja mostrando “Contenido”.
1. La página aparece en el navegador.
2. Redimensione el navegador: la página permanece centrada, pero las zonas no se redimensionan.

Vamos a cambiar este funcionamiento para que las zonas se adapten al tamaño del navegador utilizando los anclajes.
Configurar el anclaje
Primeramente, vamos a configurar el anclaje de las zonas y luego el anclaje de los campos en las zonas.
El objetivo es conseguir el siguiente funcionamiento cuando se agrande el navegador:
 La zona de cabecera (amarilla) deberá hacerse más ancha.
 La zona de menú (verde) deberá hacerse más alta.
 La zona de contenido (naranja), deberá agrandarse en altura y en anchura.
 Para los campos, deseamos que queden centrados con respecto a su zona.
Vamos pues a realizar todas las manipulaciones necesarias.
Para configurar el anclaje de las zonas:
1. Muestre la página en modo zoning: clique sobre la pestaña “Zoning” arriba de la página:
2. Seleccione la zona amarilla.

3. Muestre el menú contextual y seleccione la opción “Anclaje”. Aparecerá la ventana de gestión de anclajes.

4. La zona deberá agrandarse en anchura: Seleccione la opción “Anchura ( ) y valide.
5. Seleccione la zona verde, muestre el menú contextual y seleccione la opción “Anclaje”.
6. La zona deberá expandirse en altura: seleccione la opción “Altura” ( ) y valide.
7. Seleccione la zona naranja y muestre la ventana de gestión de los anclajes. La zona deberá agrandarse en
altura y anchura: seleccione la opción “Altura y anchura” ( ) y valide.
Para configurar el anclaje de los campos:
1. Muestre la página en modo Página: clique sobre la pestaña “Página” en la parte superior de la página.
2. Seleccione el texto “Cabecera”.

3. Muestre el menú contextual y seleccione la opción “Anclaje”.
4. El campo deberá centrarse a lo ancho: seleccione la opción “Centrado horizontal” ( ) y valide.

5. Repita las mismas operaciones para el campo “Menú” y el campo “Contenido”:
 El texto “Menú” deberá centrarse en altura ( ).
 El texto “Contenido” deberá centrarse en altura y anchura ( ).

2. Redimensione el navegador: las zonas se adaptan al sitio disponible en el navegador.

CAPÍTULO 8
Funcionalidades
útiles de WEBDEV
Capítulo 8 – Funcionalidades útiles de WEBDEV |237

Lección 8.1. Los componentes internos
 ¿Qué es un componente interno?
 Paso a paso, creación de un componente interno.
 Difusión y uso de un componente interno.

Presentación
Un componente interno es una agrupación de elementos de un proyecto. Esta agrupación permite:
 Organizar un proyecto.
 Compartir elementos entre distintos proyectos (principalmente a través del Gestor de Fuentes).
Cuando un componente interno está integrado en un proyecto, todos los elementos del componente están integrados
en el proyecto. Se pueden manipular los elementos públicos directamente en el editor. Además, el componente
interno puede depurarse directamente desde el proyecto que lo utiliza.
Los proyectos que utilizan un componente interno, tendrán acceso desde el editor WEBDEV al nombre de los objetos,
procedimientos o métodos hechos visibles para el diseñador del componente.
La realización de un componente es muy sencilla.
¿Cómo se hace? Haga como habitualmente, cree sus páginas, procedimientos, clases. Luego, cuando haya terminado,
elija la opción de creación de un componente interno; eso es todo!.
Un componente interno puede contener el código, las páginas, un análisis, ficheros de datos, etc.
Paso a paso
Paso 1: Creación de un componente interno
Vamos a crear un componente interno que permita inscribirse o desinscribirse a una carta de información en un sitio
Web.
Este componente está formado por:
 Una página, que permite visualizar los inscritos en la carta de información.
 Un modelo de campos Web que contiene los distintos campos (introducción de la dirección email, botón de
validación, …).
 Un análisis que describe el fichero de datos de los inscritos.
Para no tener que desarrollar el código necesario para el funcionamiento del componente, vamos a agrupar todos los
elementos necesarios en un proyecto “WW_Componente_Interno”. Vamos a servirnos de este proyecto para crear
nuestro componente interno. Más adelante crearemos un nuevo proyecto para utilizar este componente interno.
Para abrir el proyecto ejemplo:
1. Cierre si es necesario el proyecto en curso. Aparecerá la ventana de bienvenida.
2. En la ventana de bienvenida, clique sobre “Curso de auto-formación” y seleccione el proyecto “Componente
Interno (Ejercicio)”.
Astucia: Si la ventana de bienvenida no está visible: en el panel “Inicio”, dentro del grupo “Ayuda
en línea”, despliegue “Guía de Auto-Formación” y luego seleccione “Componente Interno
Notas
(Ejercicio)”.
3. El proyecto se carga.
Vamos a probar directamente el modelo de campos de este proyecto:
1. Muestre el modelo de campos Web (MDLC_InscriptionNewsletter” (Doble clic sobre su nombre en el
2. Lance la prueba del modelo de campos Web ( en los botones de acceso rápido).
3. Introduzca una dirección email.

4. Clique sobre “Validar” para añadir la dirección en el fichero de datos.
5. Cierre el navegador y vuelva al editor.
6. Podrá ahora verificar el contenido del fichero de datos con la utilidad “WDMap” (accesible en el panel
“Utilidades” de la cinta).
Vamos ahora a crear nuestro componente interno.
Para crear un componente interno:
1. En el explorador del proyecto:
 Seleccione la carpeta “Componentes internos”.
 Muestre el menú contextual (clic derecho).
 Seleccione la opción “Nuevo componente interno”.

 Se abre el asistente de creación de un componente intern.
2. Pase a la pantalla siguiente del asistente.
3. Identifique su componente: introduzca el nombre “ComponenteInternoInscripcionNoticias”. El texto del
componente se propone automáticamente.
5. Seleccione los elementos que constituyen el componente. En nuestro caso, todos los elementos deberán
seleccionarse.

7. El asistente pide seleccionar los elementos del componente que serán accesibles desde el proyecto cliente.
En nuestro caso, todos los elementos deberán seleccionarse.

9. Esta etapa permite indicar el modo de gestión de los datos del componente. En nuestro caso, el componente
interno utiliza su propio análisis.

10. Seleccione la opción “Utilizar un análisis específico”. Y luego dentro del campo “Análisis”, seleccione el análisis
correspondiente al proyecto en curso (fichero “WW_Componente_Interno.wda”, que está en el sub-directorio
“WW_Componente_interno.ana” del proyecto).
WEBDEV propone copiar el directorio del análisis en el directorio del componente interno.
Acepte.
11. Finalice el asistente. WEBDEV creará el componente interno en un directorio específico de su proyecto.
En el explorador del proyecto, el modelo de campos Web “MDLS_InscriptionNewsletter” no existe en la lista de
modelos de campos Web del proyecto. Por el contrario, el componente interno que acabamos de crear, aparecerá en
la carpeta “Componente Interno” con sus distintos elementos: análisis y modelo de campos Web.

Paso 2: Uso del componente interno
Una vez creado, su componente interno puede utilizarse en cualquier otro proyecto WEBDEV.
Vamos ahora a ver como reutilizar este componente.
En este ejemplo, vamos a ver un uso “directo” del componente interno. Para una compartición
de los recursos, es aconsejable el uso de los componente internos a través del Gestor de
Notas
Fuentes (GDS).
Para más detalles, consulte la ayuda en línea (palabra clave: “Componente Interno”).
En nuestro ejemplo, vamos a importar el componente interno en el proyecto “Sitio_WebDev_Completo”.

Abra el proyecto “Sitio_WebDev_Completo”.
1. Cierre si hiciera falta el proyecto en curso. Aparecerá la ventana de bienvenida.
2. En la ventana de bienvenida, clique sobre “Curso de auto-formación” y seleccione “Sitio WebDev Completo
(Con páginas)”. Se carga el proyecto.
Astucia: Si no está visible la ventana de bienvenida: en el panel “Inicio”, dentro del grupo “Ayuda en línea”,
despliegue “Guía de Auto-Formación” y luego seleccione “Sitio WebDev Completo (con páginas)”.
Integre el componente interno en el proyecto.
1. En la cinta, en el panel “Proyecto”, dentro del grupo “Proyecto”, despliegue la opción “Importar” y seleccione
la opción “Un componente Interno .. Desde un fichero”.
2. Seleccione el fichero “ComponenteInternoInscripcionNoticias.wci” que está en el sub-directorio
“WW_Componente_Interno\ComponenteInternoInscripcionNoticias” del curso de auto-formación WEBDEV).
3. El componente se integra en el proyecto.
Para utilizar el componente interno, vamos a instanciar el modelo de campos Web proporcionado por el
componente interno dentro de la página de bienvenida del sitio. Para ello:
1. Muestre en el editor la página “PAGE_Lista_de_novedades” (doble clic sobre su nombre en el explorador del
proyecto).
2. Seleccione la pestaña “Creación” de la cinta y dentro del grupo “contenedores”, clique sobre “Modelo de
campos”.
3. Se muestra la ventana de selección del modelo a instanciar.

4. Seleccione el modelo proveniente del componente interno y valide.
5. Sitúe el modelo de campos Web en la página clicando en el sitio deseado.
Vamos ahora a probar el funcionamiento del modelo de campos:
1. Lance la prueba de la página ( en los botones de acceso rápido).

2. Introduzca una dirección email.
3. Clique sobre “Validar”.
4. Un mensaje confirmará la inscripción.

Lección 8.2. Gestión automática de los errores
 ¿Qué es la gestión automática de los errores?
 Uso de la gestión automática de los errores

Presentación
WEBDEV puede gestionar automáticamente los errores. Esta funcionalidad permite al mismo tiempo reducir
sensiblemente el código de un proyecto uniformando todo y centralizando la gestión de los errores.
El uso de esta funcionalidad también hace el código más legible.
Funcionamiento.
Cuando una función de WLangage encuentra un error, se realizan dos operaciones:
 La función devuelve un valor de error (por ejemplo, la función fOpen devuelve el valor ” -1” si el fichero
especificado no puede abrirse).
 El error es detectado por WLangage (la variable ErrorOccurred corresponde a True) y se pueden recuperar
las informaciones sobre este error con la función ErrorInfo.
Es esta segunda operación la que puede gestionarse automáticamente mediante la gestión de errores de WEBDEV.
Colocación
La parametrización de la gestión automática de los errores puede efectuarse:
 Directamente en el editor de código: clicando sobre el enlace “Si error: Por programa” en el editor de código:
 Por programación, con la función ErrorChangeParameter.

Tipos de errores a los que concierne
WLangage puede encontrar dos tipos de errores:
 Errores “no fatales” (también llamados errores de ejecución): estos errores se gestionan generalmente en el
código y no provocan la interrupción de la aplicación. Por ejemplo, abrir un fichero inaccesible o un archivo
inexistente.
 Errores “fatales” (también llamado errores de programación): estos errores generalmente son debidos a un
fallo de concepto (acceso a un fichero no declarado, uso de campos inexistentes, …). Un error “fatal” puede
suceder a causa de un error “no fatal” mal gestionado. En este caso, la aplicación se detendrá.
El mecanismo de gestión de los errores permite gestionar de manera bien distinta estos dos tipos de errores para
poder especificar comportamientos adaptados a los errores encontrados.
Gestión automática de los errores: un ejemplo didáctico

Para comprender los distintos casos de errores y su gestión, le proponemos manipular un ejemplo didáctico
proporcionado en estandar con WEBDEV.
1. Cierre si hiciera falta el proyecto en curso. Aparecerá la ventana de bienvenida.

2. En la ventana de bienvenida, clique sobre “Abrir un ejemplo”. Se mostrará la lista de los ejemplos completos y
los ejemplos didácticos proporcionados con WEBDEV.
3. En la zona de búsqueda, introduzca “Error”. Solo los ejemplos que contengan esta palabra se listarán
entonces.
4. Seleccione el proyecto “WW_Gestion_Auto_Errores”. Se cargará el proyecto.

Este proyecto presenta la gestión:
 De un error no fatal (abrir un fichero que no existe).
 Un error fatal (división de un entero por 0).
 Un error a varios niveles.
Pruebe el proyecto clicando sobre en los botones de acceso rápido.

1. Clique sobre la elección “Error no fatal”.
2. Se muestra la siguiente página:
3. Clique sobre el botón “Probar esta gestión de error”.

4. Cuando se ejecuta la línea de código que genera el error, se muestra un mensaje de error.
5. Valide el mensaje de error.
Clique sobre la elección “Error fatal”.
1. Aparece la página siguiente. Esta página permite probar el error en el caso de la división de un entero por 0.
2. Clique sobre el botón “Probar esta gestión de error”.
3. Cuando se ejecuta la línea de código que genera el error:
 El procedimiento devuelve falso al tratamiento que lo llamó.
 El tratamiento que lo llamó, muestra un mensaje de error y detiene el tratamiento.
4. Valide el mensaje de error.
Cierre el navegador para finalizar la prueba.
WEBDEV propone igualmente una gestión automática para los errores HFSQL. Para más detalles,
Ejemplo
consulte la ayuda en línea (palabra clave: HFSQL, gestión de errores).

Lección 8.3. Importar/Exportar
 Importar elementos de un proyecto en otro
 Exportar elementos de su proyecto.
 Importaciones específicas (páginas HTML).

Importar elementos
Existe la posibilidad de importar elementos WEBDEV existentes, dentro de su proyecto. Puede importar todos los tipos
de elementos WEBDEV:
 Páginas, informes
 Clases, componentes
 Procedimientos, …
Para importar elementos existentes al proyecto en curso:
1. En el panel “Proyecto”, dentro del grupo “Proyecto”, despliegue “Importar” y seleccione “Elementos WEBDEV
y sus dependencias…”.
2. Clique sobre “…” y seleccione el directorio donde se encuentran los elementos a importar (el directorio deberá
contener los elementos WEBDEV).
3. Valide. WEBDEV lista entonces los distintos elementos que puede importar y que existen en el directorio
especificado (los sub-directorios no se tienen en cuenta).
4. Seleccione los elementos a importar y luego valide. Los elementos (y todos los ficheros utilizados por estos
elementos: imágenes, … ) forman desde ahora, parte del proyecto.
El botón “Calcular” (presente en la ventana de importación) permite calcular el tamaño de los

Notas
elementos seleccionados con todas sus dependencias.
Exportar elementos
Igualmente, puede exportar elementos de su proyecto hacia otro directorio, por ejemplo. Estos elementos podrán
reutilizarse en otros proyectos.
La exportación de elementos es mucho más que una simple copia de elementos. Es el único
medio seguro para transferir un elemento de un proyecto con todas sus dependencias
Atención!
(imágenes, iconos, ….). Una solución práctica para transmitir páginas con sus dependencias por
email, por ejemplo.
Para exportar elementos de su proyecto:

1. En el panel “Inicio”, dentro del grupo “General”, despliegue “Guardar” y seleccione la opción “Exportar ..
hacia un directorio…).
2. En la ventana que aparece, seleccione los elementos de su proyecto que desea exportar:
3. Indique el nombre de directorio de destino (o selecciónelo con el botón “…”).
4. Valide. Los elementos se exportarán entonces hasta el directorio indicado. Estos elementos permanecerán
siempre disponibles en su proyecto.
El botón “Calcular” (presente en la ventana de importación) permite calcular el tamaño de los

Notas
elementos seleccionados con todas sus dependencias.
Importaciones específicas
Importación de un proyecto WINDEV
WEBDEV permite importar una ventana o un proyecto WINDEV completo dentro de un proyecto WEBDEV.
Con esta importación:
 Las ventanas se transforman en páginas
 Los códigos se transforman en código servidor
 La importación de elementos sin equivalente en WEBDEV, se efectúa en forma de comentarios o de
elementos separados.
Para importar un proyecto WINDEV a un proyecto WEBDEV:
1. En el panel “Proyecto”, dentro del grupo “Proyecto”, despliegue “Importar” y seleccione “Un proyecto
WINDEV o WINDEV Mobile”. Se lanzará el asistente de importación de un proyecto WINDEV o WINDEV
Mobile.
2. Seleccione el proyecto WINDEV a importar. Este proyecto no se va a modificar y se creará un nuevo proyecto
WEBDEV.
3. De un nombre y un emplazamiento al proyecto WEBDEV a crear.
4. Si hay un análisis relacionado al proyecto, indique su nombre, su emplazamiento y si este análisis va a ser
utilizados por el proyecto WEBDEV.
5. Indique los elementos a compartir entre el proyecto WEDBEV y el proyecto WINDEV (elementos comunes del
tipo “Informes”, “Clases”, …). Si los elementos son compartidos, no se copiarán en el proyecto WEBDEV.
6. Valide. El proyecto WINDEV se ha convertido en proyecto WEBDEV.
Para importar elementos WINDEV a un proyecto WEBDEV:
1. Abra el proyecto WEBDEV en el que se va a importar el elemento.
2. En el panel “Proyecto”, dentro del grupo “Proyecto”, despliegue “Importar” y seleccione “Elementos WINDEV
o WINDEV Mobile”. Se abre el asistente de importación. Seleccione el proyecto WINDEV que contiene los
elementos a importar o directamente los elementos WINDEV a importar. Pase a la etapa siguiente.
3. Indique los elementos a compartir entre los proyectos WINDEV y WEBDEV. Estos elementos no se copiarán al
proyecto WEBDEV.
4. Valide. Los elementos especificados son importados automáticamente al proyecto WEBDEV en curso.

Importación de una página HTML
¿Le interesa una página de un sitio no WEBDEV? ¿Desea recuperar su interface? Nada más sencillo.
WEBDEV ofrece la posibilidad de importar sus páginas HTML existentes a su proyecto WEBDEV. Cada página
HTML importada se convierte en un elemento de su sitio WEBDEV. Esta página, por supuesto, es modificable.
La funcionalidad de importación de página HTML es una ayuda aportada al desarrollador de

sitios WEBDEV. No se trata en ningún caso de una funcionalidad de “aspiración” de sitios de
internet.
Notas
Pueden aparecer diferencias entre la visualización de una página HTML antes de la importación y
la página HTML después de la importación.
Para importar una página HTML en un proyecto WEBDEV:

1. Abra su proyecto WEBDEV (Por ejemplo: un proyecto existente o un nuevo proyecto).
2. En el panel “Proyecto”, dentro del grupo “Proyecto”, despliegue “Importar” y seleccione “Una página
HTML…”. Se abre el asistente de importación de páginas html.
3. Indique el emplazamiento de la página HTML. Esta página puede ser un fichero existente en su puesto (botón
“…”) o una dirección de internet (por ejemplo: htttp://www.misitiowebdev.fr/mipagina.html). la página “HTML
se muestra en el cuadro “Vista de la página”.
4. Valide. Se acaba de crear una nueva página WEBDEV.
5. Guarde la página. La página se añade automáticamente a la lista de elementos de su proyecto.

CAPÍTULO 9
Optimizar y
depurar un
proyecto
Capítulo 9 – Optimizar y depurar un proyecto |254

 ¿Por qué optimizar un sitio?
 Proyecto ejemplo

Presentación
Su sitio está finalizado. Funciona. Quiere desplegarlo.
¿Ha pensado en utilizar las herramientas de WEBDEV para optimizar su sitio? WEBDEV propone una serie de
herramientas y funcionalidades que permiten optimizar rápidamente su sitio y evitar sencillamente “bugs” de bulto.
Este capítulo presenta con detalle estas herramientas y su uso.
Para mejor manipular estas funcionalidades, hemos preparado un proyecto para optimizar.
Apertura del proyecto
Lance WEBDEV (Si no lo había hecho previamente). Si fuera necesario, cierre el proyecto en curso para mostrar
la pantalla de bienvenida.
Abra el proyecto “WW_Optimización”.
Para ello, en la ventana de bienvenida, clique sobre “Curso de auto-formación” y seleccione “Optimizar un
proyecto”.
Astucia: Si la ventana de bienvenida no se visualiza, en el panel “Inicio”, dentro del grupo “Ayuda en línea,
despliegue “Guía de Auto-Formación” y luego seleccione la opción “Optimizar un proyecto”.
Este proyecto será utilizado en las siguientes lecciones de este capítulo.

Lección 9.2. Auditorías del proyecto
 ¿Qué es una auditoría y para qué sirve?
 Lanzar y analizar la auditoría estática.
 Lanzar y analizar la auditoría dinámica.

¿Qué es una auditoría?
Las auditorías aportan una serie de funcionalidades que permiten mejorar automáticamente la calidad y las
realizaciones de un proyecto y seguir con más precisión sus condiciones de puesta en marcha.
Hay disponibles dos tipos de auditorías:
 Auditoría estática: La auditoría estática consiste en un análisis detallado de un proyecto y sus elementos. Esta
auditoría se realiza directamente desde el editor del proyecto.
 Auditoría dinámica: La auditoría dinámica es un análisis del comportamiento de un proyecto durante su
ejecución. Esta auditoría puede realizarse en modo prueba o directamente en el entorno de producción.
Vamos a continuación a probar estas auditorías en el proyecto WW_Optimización”.
Auditoría estática.
La auditoría estática es una funcionalidad del entorno que permite analizar las fuentes de un proyecto para detectar
distintos problemas y proponer mejoras.
Para lanzar la auditoría estática en el proyecto “WW_Optimizacion”:
1. En la cinta, en el panel “Proyecto”, en el grupo “Auditoriayrealizaciones”, despliegue “Auditoría de edición” y
seleccione “Desencadenar la auditoría de edición”.
La auditoría estática del proyecto puede igualmente lanzarse desde el tablero de control del
proyecto a través del widget “Auditoría estática y compilación”.
Hay que:
 Activar el Widget si fuera necesario (clique sobre el enlace “Clique aquí para reactivar”).
 Clique sobre la flecha.
Notas
2. Se lanza el asistente. Vamos a definir el objetivo de la auditoría estática.

3. Seleccione la opción “Lanzar la auditoría estática sobre el proyecto completo”.
4. Valide el asistente.
5. Se muestra el informe de la auditoría:
La auditoría estática se compone de:

 Auditoría estática del proyecto.
 Auditoría del contenido de la biblioteca de la aplicación.
Examinemos con atención los puntos presentes en este informe.
Procedimiento no ejecutado
En nuestro proyecto, la auditoría nos indica que un procedimiento no se va a ejecutar jamás.
Ocurre frecuentemente en los proyectos importantes, que se crea uno o varios procedimientos para realizar un
tratamiento, y luego debido a una reorganización del código, el procedimiento no se vuelve a utilizar jamás en el
proyecto.
La presencia de procedimientos no utilizados, hace más pesados inútilmente los recursos distribuidos a los usuarios
finales.
Para tratar este problema:
1. Clique sobre el botón “[…] para obtener más informaciones. La ventana que muestra los códigos “muertos”
aparecerá:
2. El procedimiento “ProcedimientoObsoleto” no será llamado nunca. Esta ventana permite:

 Especificar que el procedimiento todavía se utiliza (botón “Marcar como utilizado”).
En este caso, el procedimiento no se tendrá en cuenta cuando se audite.
 Suprimir el procedimiento si realmente es inútil (botón “Suprimir”).
 Ver el procedimiento (botón “Ver”).
 Buscar los casos en los que se usa dentro de las cadenas por ejemplo (botón “buscar”).
3. En nuestro caso, este procedimiento es realmente inservible, clique sobre “Suprimir”.
4. Se muestra una ventana pidiendo la confirmación de la eliminación. Confirme la eliminación clicando sobre el
botón “Suprimir”.
5. Cierre la ventana del código muerto (utilice el aspa arriba a la derecha).
En la ventana de la auditoría estática, clique sobre el botón “Refrescar” para actualizar el informe de auditoría.
Elemento huérfano
La auditoría nos indica que nuestro proyecto contiene un elemento huérfano.
Al igual que los procedimientos ejecutados, también es frecuente crear ventanas, informes para realizar una prueba
rápida, guardarlos y olvidarlos. La presencia de elementos huérfanos en el ejecutable, hace más pesados los recursos
distribuidos a los usuarios finales.
1. Clique en el botón […] para obtener más información. La ventana que lista los elementos huérfanos
aparecerá:

2. La página “PAGE_Pagina_Inutilizada” no se ha llamado jamás. La ventana que lista los elementos huérfanos
permite:
 Especificar que el elemento todavía puede utilizarse (botón “Marcar como utilizado”). En este caso, la página
de nuestro ejemplo no se tendrá en cuenta cuando se audite. Esta opción puede ser interesante por ejemplo,
en el caso de una página de prueba específica al desarrollo.
 Eliminar la página si realmente está inutilizada (botón “Suprimir”).
 Ver la página (botón “Ver”).
 Buscar los casos en los que se usa dentro de las cadenas por ejemplo (botón “Buscar”).
3. En nuestro caso, esta página “PAGE_Pagina_Inutilizada” es realmente inservible, clique sobre “Suprimir”.
4. Cierre la ventana de los elementos huérfanos (utilice el aspa arriba a la derecha).
En la ventana de auditoría estática, clique sobre el botón “Refrescar” para actualizar el informe de auditoría.
Consulta a optimizar
La auditoría nos indica que nuestro proyecto contiene una consulta a optimizar.
Esta optimización permite mejorar la velocidad de ejecución de una consulta. La optimización de una consulta
descansa sobre el siguiente principio: un asistente determina las claves compuestas a modificar y/o añadir en el
análisis asociado al proyecto.
Para optimizar la consulta:
1. Clique sobre el botón […] para obtener más informaciones. La ventana que lista las modificaciones a realizar
en el análisis aparecerá.

2. El asistente propone modificar un campo del análisis transformándolo en una clave con duplicados.
3. Vamos a aplicar el cambio propuesto: clique en el botón “Aplicar esta modificación en el análisis”.
4. Una ventana se muestra pidiendo la confirmación de la modificación del análisis. Valide esta ventana.
5. El editor de análisis está abierto y se ha efectuado la modificación. Un mensaje indica que se necesita la
generación del análisis. Confirme la generación del análisis clicando sobre “Si”.
6. El proyecto utiliza los datos, es necesaria una modificación automática de los ficheros de datos. Valide las
distintas pantallas del asistente de modificación de los datos (conservando las opciones por defecto).
7. La ventana de la auditoría estática se refresca automáticamente.
Limpieza del proyecto
Nuestro proyecto contiene varios ficheros inutilizados. Es posible limpiar el proyecto para conservar solamente los
elementos necesarios. La instalación cliente no se hará más pesada con las imágenes, ficheros externos, … no
utilizados.
1. Clique sobre el botón […] para conseguir más información.
2. El asistente de limpieza del proyecto se lanza. Este asistente indica los ficheros inutilizados que pueden ser
suprimidos.
4. Indique el tipo de limpieza a realizar. Se puede:
 Crear un fichero zip con los ficheros inútiles.
 Mover los ficheros inútiles a un directorio específico.
5. Valide la opción propuesta por defecto y pase a la etapa siguiente.
6. Finalice el asistente.
Hemos optimizado nuestro proyecto siguiendo todos los consejos de la auditoría estática.
La auditoría estática permite tener un informe general sobre las fuentes de su proyecto. Nuestro consejo: láncela con
regularidad.
Y ahora, veamos que sucede en ejecución lanzando la auditoría dinámica.
Auditoría dinámica.
La auditoría dinámica permite analizar la ejecución de la aplicación. La auditoría permitirá detectar algunos problemas
como:
 Consumo excesivo de memoria.
 Lentitud de los algoritmos utilizados.
 Errores “enmascarados” cuando se ejectua.
 …
Una auditoría dinámica puede efectuarse en un entorno de pruebas o en una aplicación en producción.
El proyecto “WW_Optimizacion” contiene una página específica que provoca errores que pueden ser detectados por la
auditoría dinámica.
Vamos a lanzar la auditoría dinámica al mismo tiempo que la prueba del proyecto.
Para lanzar la auditoría dinámica sobre el proyecto “WW_Optimizacion”:
1. En la cinta, bajo la pestaña “Proyecto”, en el grupo “Modo prueba”, despliegue “Modo prueba” y seleccione
“Depurar el proyecto con la auditoría activada”. Se lanza la prueba del proyecto.
La auditoría dinámica del proyecto puede igualmente lanzarse desde el cuadro de mandos del
proyecto a través del Widget “Auditoría dinámica”. Hay que:
 Activar el Widget si hiciera falta (clique sobre el enlace “Clique aquí para reactivar”).
 Desplegar la flecha y seleccione “Go minucioso del proyecto”.
Notas
Observación: a cada GO del proyecto, se lanza automáticamente la auditoría dinámica. Se

muestra automáticamente un informe en el Cuadro de mando.
2. Clique sobre el botón “Página de prueba de la auditoría dinámica”.

3. Clique sobre los distintos botones presentes en la página.
 Al fin de cada tratamiento, un mensaje en forma de tostada se muestra para indicar que ha finalizado el
tratamiento.
Observación: Espere que aparezca la tostada antes de clicar sobre un nuevo botón.
 Para la opción “Aserción y Excepción”, se muestra una aserción: clique “Continuar” para ver aparecer el
siguiente mensaje en forma de tostada.
4. Detenga la prueba del sitio.
5. Se muestra automáticamente la ventana del informe de la auditoría dinámica.

Examinemos esta ventana:
 La parte superior de esta ventana permite elegir el modo de visualización de los datos. Se puede:
o Elegir una visualización cronológica (respetando el orden de llegada de los eventos) o una
visualización sintética, que permita reagrupar los distintos tipos de problemas. En este caso, la línea
del tiempo permite ver la posición y la importancia de los problemas.
o Elegir el tipo de problemas a mostrar (error, aserción, …). Así es posible, por ejemplo, concentrarse
solamente sobre los errores graves, …
 La parte inferior de esta ventana muestre los distintos eventos sobrevenidos que pueden dar problemas en la
aplicación.
En este ejemplo, la auditoría dinámica detecta varios problemas:
 Una instrucción SWITCH donde no se ejecuta ningún CASE.
 Una aserción desencadenada.
 Una excepción desencadenada.
 La afectación de un fichero imagen que no existe en un campo imagen.
Para cada problema, un botón “…” permite acceder al detalle del evento registrado.
Si el evento está relacionado con una línea de código en particular, el botón permite abrir directamente el editor
de código en el sitio correspondiente a fin de poder corregir el problema.
Cierre la ventana de auditoría dinámica.
La auditoría dinámica del proyecto puede igualmente efectuarse cuando el sitio está desplegado.
Hay que utilizar la función dbgEnableAudit para desencadenar la auditoría dinámica.
La auditoría genera un fichero “.wdaudit”; este fichero deberá ser cargado en el entorno de
Notas
desarrollo para analizar el resultado.

Para más detalles, consulte la ayuda en línea (palabra clave: “Auditdynamique”)..

Lección 9.3. Analizador de actuaciones
 Presentación
 Lanzar el analizador de actuaciones.
 Analizar el resultado

Presentación
El analizador de actuaciones (llamado también Profiler) es una herramienta que permite verificar y optimizar el tiempo
de ejecución de los tratamientos de su sitio.
Su principio es simple:
 Pruebe su sitio.
 Durante esta prueba, el analizador de actuaciones recapitula todas las acciones efectuadas y guarda los tiempos
de ejecución de cada uno de los tratamientos ejecutados.
Al final de la prueba, el analizador de actuaciones presenta:
 Las 10 actuaciones que han tardado más tiempo.
 La duración y el número de llamadas de todos los tratamientos ejecutados.
El proyecto “WW_Optimizacion” contiene una página específica que permite visualizar los resultados interesantes con
el analizador de actuaciones.
Lanzar el analizador de actuaciones

El analizador de actuaciones puede ser lanzado:
 Directamente desde el editor de WEBDEV:
En este caso, el proyecto se ejecuta automáticamente en modo prueba. Puede manipular su aplicación y lanzar
los tratamientos de su elección.
Para volver al editor de WEBDEV, basta con salir del sitio.
El analizador de actuaciones muestra entonces el resultado del análisis. Este resultado queda guardado en forma
de un fichero WPF.
 Desde uno de sus tratamientos en WLangage, por medio de las siguientes funciones:
ProfilerStart Lanza la “colecta de informaciones” para el analizador de actuaciones.
ProfilerEnd Detiene la “colecta de informaciones” para el analizador de actuaciones.
En este caso, solo el código presente entre las funciones ProfilerStart y ProfilerEnd se analizará. El resultado se
guardará en un fichero WPF.
En nuestro ejemplo, vamos a utilizar el primer método. Para lanzar el analizador de actuaciones en el proyecto
“WW_Optimizacion”:
1. En la cinta, en el panel “Proyecto”, dentro del grupo “Auditoría y actuaciones”, despliegue “Analizar las
actuaciones” y seleccione “Analizar las actuaciones”.
El analizador de actuaciones puede también lanzarse desde el cuadro de mandos del proyecto a
través del Widget “Actuaciones”. Hay que:
 Activar el Widget si es necesario (clique sobre el enlace “Clicar aquí para reactivar”).
 Clicar sobre la flecha y seleccionar “Analizar las actuaciones”.
Notas
Análisis del resultado

Examinemos la ventana del informe del analizador de actuaciones. Los resultados se muestran en varias
pestañas:
 La pestaña “Síntesis” presenta los 10 tratamientos que han tardado más tiempo.
 La pestaña “Cartografía” presenta una visión gráfica de los tratamientos más importantes.
 La pestaña “Detalle” presenta todos los tratamientos lanzados durante la prueba de la aplicación (clases de
más largas a más rápidas).
 La pestaña “Llamadas” permite visualizar el detalle de las operaciones realizadas en el tratamiento.

Detallemos las diferentes pestañas en el caso de nuestro ejemplo.
 La pestaña “Síntesis” presenta los diez tratamientos más consumidores de tiempo. En nuestro ejemplo,
podemos ver que el procedimiento local “ActualizarProductosEnStock” tarda más de 3 segundos en
ejecutarse (este tiempo puede variar en función de la potencia de su máquina).
 La pestaña “Cartografía” permite identificar de manera visual cual ha tomado más tiempo. En nuestro caso,
es una llamada a la función HTTPRequete (httpRequest):
 La pestaña “Detalles” presenta todos los tratamientos llamados, desde el más largo al más rápido.

Para cada tratamiento, se muestran las siguientes informaciones:
o Función: Función, tratamiento o procedimiento ejecutado.
o Tiempo total: Tiempo de ejecución de la función.
o Tiempo interno: Tiempo de ejecución del motor.
o N. Llamadas: Número de llamadas efectuadas a la función (procedimiento o tratamiento).
o Tiempo 1 llamada: Tiempo de ejecución de una llamada a la función (procedimiento o tratamiento).
o % Código: Porcentaje del tiempo pasado en el tratamiento de la función o del procedimiento (código
del desarrollador que puede ser optimizado).
o Padre: Elemento que contiene el tratamiento.
En nuestro caso, la pestaña “Detalle” permite encontrar la llamada a la función httpRequest en los
elementos que toman más tiempo.
Seleccione esta línea. Vamos a ver en el código si hay algún problema que pueda explicar este
ralentizamiento.
o Clicando sobre el botón “Llamadas”, aparece el detalle de las llamadas del procedimiento
ActualizarProductosEnStock. Seleccionando la línea “HTTPRequest” y clicando sobre el botón
“Código”, la línea de código correspondiente se muestra en el editor de código.

o Cierre el analizador de actuaciones.
o La línea de código ejecutado es la siguiente:
httpRequest (“dir-proveedor”)
La ralentización viene del hecho de que la dirección especificada por la función httpRequest es
inaccesible.
Probemos rápidamente el funcionamiento de la aplicación optimizando el código:
1. Sustituya la línea de código que contiene la función httpRequest por la línea de código siguiente:
// Verificar la accesibilidad del servidor proveedor
httpRequest (www.google.fr)
2. Guarde el código ([CTRL]+[S]).
Vamos ahora a relanzar el analizador de actuaciones:
1. En el panel “Proyecto”, dentro del grupo “Auditoría y actuaciones”, despliegue “Analizar las actuaciones” y
seleccione “Analizar las actuaciones”.
2. Se lanza la prueba del proyecto.
3. Clique sobre el botón “Página de prueba del analizador de actuaciones”.
4. Clique sobre el botón “Tratamiento a analizar”.
5. Valide la ventana de información y detenga la prueba del proyecto. Aparecerá la ventana del informe del
analizador de actuaciones.
6. En la pestaña “Cartografía”, la función httpRequest ya no aparece con la misma importancia.

Cierre la ventana del informe del analizador de actuaciones.

Lección 9.4. Depuración de un proyecto
 Presentación
 Utilizar el depurador

Presentación
Detengámonos un momento en el depurador suministrado en estándar con WEBDEV. ¿Qué es el depurador?
El depurador es una potente herramienta que permite seguir paso a paso el desarrollo de un código o de una
aplicación. Poner a punto un tratamiento o una aplicación, se convierte en un juego de niños.
Vamos a utilizar el depurador en el tratamiento largo que hay en la página PAGE_AnalizadorRealizaciones.
Utilizar el depurador
Para depurar la página PAGE_AnalizadorRealizaciones:
1. Abra la página “PAGE_AnalizadorRealizaciones” en el editor de páginas (doble clic en su nombre en el
2. En el editor de WEBDEV, sitúe un punto de interrupción en el código del botón “Tratamiento a analizar”:
clique delante de la primera línea del código de tratamiento de clic servidor o utilice el atajo [CTRL]+[B];
aparecerá un punto rojo. Cuando se llegue a la ejecución de la línea de código precedida del punto de
detención, se lanzará el depurador.
3. Lance la prueba de la página “PAGE_AnalizadorRealizaciones” ( en los botones de acceso rápido).
Hay muchos métodos que permiten lanzar el depurador; para más detalles, consulte la ayuda en
Notas
línea (palabra clave: “Depurador, lanzar una prueba”).
4. Clique en el botón “Tratamiento a analizar”. Se abre el depurador: el editor de código aparecerá en modo
“Depurador”. La línea actual, está precedida de una pequeña flecha.
En la parte inferior de la pantalla, aparecerá el panel “Depurador”. Este panel muestra dos zonas distintas:
 La pila de las llamadas: esta zona permite conocer la jerarquía de los tratamientos mostrados en el
depurador. En nuestro ejemplo, por el momento, estamos empezando a depurar el tratamiento de clic sobre
el botón BTN_TratamientoLargo.
 La lista de expresiones a evaluar. Por defecto, las principales variables utilizadas en el código se muestran en
esta zona. También se pueden añadir variables para seguir su evolución (veremos esta funcionalidad más
adelante).
Vamos a efectuar algunas manipulaciones en el depurador para poder descubrir sus posibilidades.
Primero, vamos a ejecutar paso a paso las distintas instrucciones y veremos el contenido de las variables:
1. Pulse la tecla [F7] (o sobre el botón “Paso a paso con detalle”). La línea en curso se ejecuta automáticamente
y si es necesario, se entra en los sub-procedimientos.
Observación: Para no entrar en los sub-procedimientos, utiliza la tecla [F9] o el botón “Paso a paso”.
Si lo necesita, los valores de las variables pueden modificarse en el panel “Depurador” (mostrado por defecto
en la parte inferior de la pantalla.
2. Continúe pulsando la tecla [F7] hasta la línea “Produit.Stock = InterrogeBaseFournisseur…) y pase con el
cursor sobre “Produit.Stock”. Una burbuja de ayuda se muestra con el valor de la expresión.
3. El valor de “Produit.Stock” se muestra en una burbuja de ayuda. Este valor corresponde a 20 porque la línea
de código no se ha ejecutado.
4. Utilice la tecla [F8] para ejecutar la línea.
5. Pase nuevamente sobre “Produit.Stock”. El valor de “Produit.Stock” mostrado en la burbuja de ayuda
corresponde desde ahora al resultado del procedimiento InterrogeBaseFournisseur.
Ahora vamos a añadir una expresión para monitorizar la evolución de su valor en el panel “Depurador”. Esta
expresión puede ser de cualquier tipo: variable, función, operación sobre variables, … El resultado de la
expresión se calcula y se muestra.
Esta expresión permite efectuar una depuración personalizada. Por ejemplo, se puede conocer el contenido de
una variable al tiempo y a medida de su uso en la aplicación.
1. Seleccione “Produit.Stock” en el código y muestre el menú contextual (clic derecho). Seleccione la opción
“Añadir la expresión en el depurador”.
2. La expresión se añade automáticamente en el panel del depurador bajo de la pantalla.
El depurador permite también ejecutar un conjunto de líneas de código:

1. Posicione el cursor de entrada en la línea siguiente:
IF HExecuteQuery(REQ_QuantitéCommandée) THEN
2. Utilice la tecla [F6] (o el botón “Ejecutar hasta el cursor” que hay en la cinta).
3. La flecha que indica la línea en curso, se desplaza hasta la línea de código donde está posicionado el cursor.
Las líneas que hay hasta el cursor se ejecutan automáticamente.

Ahora vamos a poner un punto de detención y ejecutar el código hasta el siguiente paso sobre el punto de
detención:
1. Clique con el ratón sobre la zona tramada, delante de la función HModify. Un punto de detención (de color
rojo) aparecerá.
2. Utilice la tecla [F5] (o clique sobre el botón “Continuar” que hay en la cinta). El código se ejecuta hasta el
punto de detención. La flecha que permite identificar la línea en curso se desplaza hasta el punto de
detención.
3. Quite el punto de detención, clicando directamente sobre el mismo.
Para acabar la prueba, vamos a utilizar una expresión “Autostop”. Una expresión “Autostop” permite lanzar el
depurador hasta que se verifica una condición o hasta que se modfique el valor de una variable. En nuestro
ejemplo, vamos a lanzar el depurador hasta que el valor del stock sea igual a 50:
1. En el panel “Depurador”, seleccione la expresión “Produit.Stock” que hemos añadido previamente.
2. Clique sobre el círculo verde.
3. Pulse la tecla [F5] para continuar la prueba.
4. Se muestra un mensaje indicando que el valor de la expresión “Produit.Stock” ha cambiado.
5. Valide.
6. En el panel “Depurador”, seleccione la expresión “Produit.Stock”. Clique una segunda vez sobre la expresión:
La columna “Expresión” pasa a edición. En la zona “Expresión”, añada “=50”. Obtendrá “Produit.Stock = 50”.
7. Pulse la tecla [F5]. El programa continúa ejecutándose. El depurador se lanza nuevamente hasta que la
variable “Produit.Stock” tenga un valor de 50.
Y ya está, hemos terminado nuestra visita al depurador. Para detener la prueba del depuradro, clique en
“Terminar la prueba” en la cinta.
CAPÍTULO
103
Administrar una
base HFSQL
Cliente/Servidor
Capítulo 11 – Gestor de fuentes (GDS) |275

Lección 10.1. Introducción
 Principio de Cliente/Servidor
 ¿Por qué pasar una aplicación en HFSQL Cliente/Servidor?

Presentación
WEBDEV permite crear aplicaciones/sitios accediendo a las bases de datos HFSQL Cliente/Servidor.
Una base de datos en modo Cliente/Servidor permite dejar la o las bases de datos en un puesto servidor (el cual
puede ser distinto de aquel donde se ha desplegado el sitio).
Este modo de funcionamiento:
 Aumenta la seguridad de sus datos.
 Permite gestionar más fácilmente el modo multi-usuario.
 Facilita el mantenimiento.
 Permite las conexiones desde el exterior (asiento para el back office, por ejemplo).
WEBDEV permite:
 Crear un sitio utilizando una base de datos HFSQL Cliente/Servidor
 Modificar un sitio que utiliza una base HFSQL Clásico para que utilice una base de datos HFSQL Cliente/Servidor.
¿Para qué pasar un sitio a modo HFSQL Cliente/Servidor?

Las principales ventajas de un sitio en modo HFSQL Cliente/Servidor con respecto a un sitio en modo HFSQL Clásico
son las siguientes:
 El uso de HFSQL es más seguro (utiliza un login, una contraseña y definiciones de derechos a los usuarios).
 No hay gestión de directorios: todos los ficheros de la base de datos están agrupados en el mismo lugar.
 Las bases de datos en modo Cliente/Servidor pueden utilizarse para una conexión Internet.
 Una gestión del modo multi-usuario nativo: las realizaciones en modo multi-usuario son optimizadas.

Lección 10.2. Establecimiento de una base de
datos Cliente/Servidor
 Instalación de un servidor HFSQL local
 Creación de un sitio utilizando una base de datos HFSQL Cliente/Servidor
 Adaptación de un sitio para gestionar una base de datos HFSQL Cliente/Servidor
 Funcionalidades disponibles en modo Cliente/Servidor

Presentación
En esta lección, vamos a efectuar todas las operaciones necesarias al desarrollo y al despliegue de un sitio utilizando
una base de datos HFSQL Cliente/Servidor.
Instalación de un servidor HFSQL local

La primera operación a realizar antes de empezar a desarrollar consiste en instalar un servidor HFSQL.
En el puesto de desarrollo, este servidor puede instalarse en local (es lo que vamos a hacer). En el despliegue, este
servidor puede instalarse en un puesto específico o directamente en el servidor que alberga su sitio.
El programa de instalación del servidor HFSQL está disponible en el CD de WEBDEV. Si no tiene este CD, la instalación
del servidor HFSQL está también disponible en el sitio de PC SOFT (www.pcsoft.fr).
Para instalar el servidor HFSQL en local:
1. Lance el programa de instalación de WEBDEV.
2. Elija la opción “Instalación del servidor HFSQL C/S”.
3. Seleccione a continuación la opción “Instalar un servidor HFSQL Cliente/Servidor”.
4. Acepte la licencia.
5. Elija la plataforma (opción “Para Windows sobre esta máquina”).
6. Si ya tiene servidores HFSQL instalados en el puesto actual, elija la opción “Instalar un nuevo servidor”.
7. Seleccione el directorio de instalación e indique el nombre del servidor y el puerto. Por defecto, el puerto
utilizado es 4900.
Piense en abrir este puerto en el firewall para conectarse al servidor HFSQL desde otra máquina.
Notas
8. Instale el centro de control HFSQL si no existe o no es accesible desde su sitio.

Atención!
El centro de control HFSQL es necesario para la gestión de la base HFSQL Cliente/Servidor.
9. La instalación ya se ha realizado. Por defecto, para conectarse al servidor en modo administrador, hay que
utilizar “admin” sin contraseña.
Por razones evidentes de seguridad, piense en cambiar la contraseña del administrador.

Notas
Creación de un sitio utilizando una base de datos HFSQL Cliente/Servidor

La creación de un sitio WEBDEV que utiliza una base de datos Cliente/Servidor se realiza muy sencillamente. Es
necesario:
1. Crear el proyecto que pide crear una nueva base de datos.
2. Crear el análisis especificando que las bases de datos utilizadas por el proyecto serán de tipo “HFSQL
Cliente/Servidor”.
3. Indicar las características de la conexión al servidor HFSQL Cliente/Servidor a utilizar.
4. Cuando se cree un fichero en el análisis, indique que este fichero es en modo Cliente/Servidor y especifique la
conexión utilizada.

Puede también describir la conexión al servidor por programación. Para más detalles, consulte la
Notas
ayuda en línea: “HDescribeConnection”
Adaptación de un sitio para utilizar una base de datos HFSQL

Cliente/Servidor
Presentación
El paso de una base de datos HFSQL Clásico a modo Cliente/Servidor es la operación más corriente.
WEBDEV propone varias soluciones para realizar este paso:
 Realizar esta adaptación en el editor de análisis.
 Realizar esta adaptación desde el Centro de Control HFSQL.
Para comprender mejor las distintas fases, vamos a pasar a modo Cliente/Servidor el sitio que hemos realizado en el
capítulo 4 de este libro, utilizando el primer método, el editor de análisis.
Adaptación del ejemplo
Si no ha realizado las manipulaciones de las lecciones precedentes, puede seguir esta lección
Corregido
abriendo un proyecto corregido: En el panel “Inicio”, en el grupo “Ayuda en línea”, despliegue

“Guía de auto-formación” y luego seleccione “Sitio WebDev Completo (Corregido)”.
Para adaptar el proyecto:

1. Abra si hiciera falta el proyecto “Sitio_WebDev_Completo”.
2. Cargue el análisis de su proyecto en el editor de análisis: Clique sobre en los botones de acceso rápido
del menú de WEBDEV. Se mostrará el editor de análisis.
3. En la cinta, en el panel “Análisis”, en el grupo “Conexión”, clique sobre “Nueva conexión”. Se abrirá un
asistente que permitirá la creación de una conexón.
4. Seleccione el tipo de conexión a crear “HFSQL Cliente/Servidor”. Avance al paso siguiente.
5. Indique los siguientes planos:

 El nombre del servidor sobre el que ha instalado el servidor HFSQL Cliente/Servidor (localhost si lo ha
instalado en su máquina, por ejemplo) y el número de puerto. Avance a la pantalla siguiente.
 El nombre del usuario y su contraseña (deje estas informaciones vacías para utilizar el administrador.
Pase a la pantalla siguiente.
 El nombre de la base de datos (“Sitio_WebDev_Completo” en nuestro ejemplo. Pase a la pantalla
siguiente.
6. Introduzca el nombre de la conexión (conserve el nombre propuesto).
7. Avance a la etapa siguiente y valide. La conexión a la base de datos se creará automáticamente.
El asistente propone asociar los distintos ficheros de datos existentes en el análisis a la conexión que acaba
de crearse.
8. Clique sobre “Si”.

9. En la pantalla siguiente, seleccione todos los ficheros propuestos:
Avance a la etapa siguiente.

10. El asistente propone a continuación copiar los ficheros de datos en el servidor. Valide (opción “Copiar ahora”).

11. Seleccione los ficheros de datos del análisis a copiar en el servidor: en nuestro caso son todos los ficheros de
datos del directorio EXE.
12. Avance a la etapa siguiente y valide.

13. Los ficheros de datos del análisis se transforman automáticamente en ficheros de datos HFSQL
Cliente/Servidor y asociados a la conexión elegida.

14. Genere el análisis: En el panel “Análisis”, en el grupo “Análisis”, clique sobre “Generación”. Los ficheros de
datos se modificarán automáticamente. Si todos los ficheros de datos están al día, puede anular la
modificación automática de los ficheros de datos.
Paso a modo Cliente/Servidor: algunos consejos

 Verifique el código de su proyecto: en modo HFSQL Cliente/Servidor, las instrucciones como
HSubstDir, …son inútiles.
 Según los parámetros indicados durante la creación de la conexión, es posible modificar la
Notas
conexión definida en el análisis gracias a las funciones HOpenConnection y

HChangeConnection.
 La función HOpenConnection permite siempre cambiar a modo HFSQL Clásico: Hay que
indicarle el camino del directorio que contiene los ficheros de datos HFSQL Clásico.
15. Ya ha adaptado el proyecto de desarrollo. Puede ser necesario también adaptar el sitio desplegado (por
ejemplo si el sitio desplegado utiliza ficheros HFSQL Clásico). Esta operación se parametriza durante la
creación del programa de instalación del sitio.
Funcionalidades disponibles en modo HFSQL Cliente/Servidor

HFSQL Cliente/Servidor propone numerosas funcionalidades:
 Transacciones
 Diarios
 Procedimientos almacenados
 Triggers
 Modificación automática de los datos en caliente
 Reindexación en caliente
 Copias de seguridad planificadas
 Copias de seguridad incrementales
 Replicación multi-sitios.
No vamos a detallar aquí estas funcionalidades (algunas ya se abordaron en este curso en modo HFSQL Clásico). Le
aconsejamos que consulte la ayuda en línea para más detalles sobre estos sujetos.

Lección 10.3. Administrar una base de datos
Cliente/Servidor
 El Centro de Control HFSQL.
 Crear un usuario en el Centro de Control HFSQL.
 Guardar la base de datos.

Presentación
Ahora que sabemos crear/adaptar un sitio para que funcione en modo HFSQL Cliente/Servidor, vamos a ver como
administrar la base de datos asociada.
En efecto, una base de datos Cliente/Servidor necesita:
 Una configuración específica de los puestos (instalación de un servidor HFSQL, …).
 Una administración realizada por el Centro de Control HFSQL.
Configuración de los puestos

Para utilizar una base HFSQL Cliente/Servidor, es necesario instalar un servidor HFSQL en el puesto servidor. Es
posible utilizar varios servidores HFSQL en el mismo sitio, utilizando puertos distintos. Sin embargo, para algunas
cuestiones de rendimientos, esta última configuración no es aconsejable. En cada servidor pueden estar instaladas
una o varias bases de datos.
Por ejemplo, se pueden instalar en el mismo puesto un servidor HFSQL de pruebas, con una base de datos de
pruebas y un servidor HFSQL de producción, utilizando un puerto distinto.
El Centro de Control HFSQL

El Centro de Control HFSQL permite realizar todas las operaciones de administración de los servidores y de las bases
de datos HFSQL Cliente/Servidor.
Vamos a ver las funcionalidades más importantes.
Vamos primero a lanzar el Centro de Control HFSQL desde el proyecto WEBDEV.
Para lanzar el Centro de Control HFSQL desde WEBDEV y acceder a los datos:
1. En el menú de WEBDEV, en el panel “Utilidades”, en el grupo “Base de datos”, clique sobre “HFSQL”.
Aparecerá el Centro de Control HFSQL.
2. Se muestra la ventana de bienvenida del Centro de Control HFSQL. El análisis del proyecto en curso se
selecciona automáticamente.
3. Valide la pantalla. Aparecerá el Centro de Control HFSQL. Este modo de lanzamiento permite ver los distintos
ficheros relacionados con el análisis del proyecto en curso.
4. Clique si es necesario en el panel vertical “HFSQL C/S”. La lista de ficheros de datos en formato HFSQL
Cliente/Servidor se mostrará.

El Centro de Control lista aquí los ficheros de datos Cliente/Servidor encontrados en el análisis enlazado al
proyecto en curso. No se ha realizado ninguna conexión: los ficheros aparecen grisáceos.
5. Para visualizar los datos de los ficheros haga doble clic sobre uno de los ficheros de datos en la lista a la
izquierda (por ejemplo “Pedido”). Si el Centro de Control HFSQL no conoce todos los parámetros de la
conexión, una ventana de conexión permite realizar la conexión efectiva al servidor HFSQL Cliente/Servidor
utilizado. Si esta ventana se muestra, indique la contraseña y valide.
6. Las distintas informaciones del fichero de datos seleccionado y utilizando esta conexión se muestran en una
nueva pestaña:
 La pestaña “Descripción” presenta las informaciones de los ficheros de datos (campos del ficheros, …).
 La pestaña “Contenido” muestra los registros existentes en el fichero de datos.
Desde el Centro de Control HFSQL, se puede administrar toda la base de datos HFSQL Cliente/Servidor.
Crear una cuenta usuario en el Centro de Control HFSQL

Hemos visto que durante la instalación de un servidor HFSQL y durante la creación de una base de datos, solo se crea
una cuenta de usuario: la cuenta de administrador (login “Admin” sin contrarseña).
La utilización de la cuenta de usuario permite asegurar el acceso a los datos. En efecto, todos los usuarios del sitio no
son administradores. A cada usuario (o grupo de usuarios), se le pueden asociar derechos.
Los derechos de los usuarios especificados en el Centro de Control HFSQL son los de rechos de
la base de datos y no los derechos de acceso al sitio.
Atención!
No hay que confundir la gestión de los derechos de las bases de datos Cliente/Servidor con el
groupware usuario que habíamos visto en una lección anterior.

Algunos usuarios pueden por ejemplo, no tener derechos de escritura en algunos ficheros.
Para hacer una prueba simple, vamos a crear un usuario y se le permitirá consultar los registros del fichero Cliente.
Para conectar directamente a la base de datos existente en el servidor:
1. Despliegue el menú situado arriba a la izquierda del Centro de Control HFSQL y seleccione la opción
“Conectarse a un servidor HFSQL”.
2. Se muestra la ventana de bienvenida en el Centro de Control HFSQL.
3. La opción “Conectarse a un servidor HFSQL” está seleccionada por defecto. Indique las características del
servidor instalado en la lección anterior.
4. Las características del servidor HFSQL se muestran en los distintos paneles:
 En el panel de la izquierda, aparecen el puesto, el nombre del servidor HFSQL así como la lista de las
bases existentes en el servidor .
 En la parte derecha de la pantalla, una nueva pestaña se muestra permitiendo ver las características del
servidor HFSQL.
5. En la parte derecha de la pantalla, seleccione el panel “Usuarios”. Este panel permite gestionar los usuarios
del servidor.
6. De momento, solo existe el usuario “Admin”.

7. Para crear un nuevo usuario, en la cinta, en el grupo “Usuarios”, clique sobre el botón “Nuevo”. Aparece la
pantalla que permitirá definir las características del usuario.
8. Introduzca por ejemplo las siguientes informaciones:
(utilice por ejemplo “Test” igualmente como contraseña).
Varias características pueden ser clasificadas:

 Super Usuario: Los usuarios designados como “Super Usuario” están autorizados a efectuar
todas las acciones en el servidor, las bases de datos y en todos los ficheros.
 Cuenta activa: Si esta opción no está marcada, el usuario existe, pero no está activo (caso
Notas
de los usuarios abandonados por ejemplo).

 Expiración de la contraseña: Es posible tener una contraseña válida solamente para un
número de días determinado (parametrizable).
9. Valide la creación del usuario. Por defecto, este usuario no tiene ningún derecho.

Vamos ahora a atribuir los derechos al usuario: el usuario “Test” puede conectarse a la base de datos y consultar el
fichero Cliente.
Para conceder el derecho de conexión a la base de datos:
1. En el Centro de Control HFSQL, doble clic en la base de datos “Sitio_WebDev_Completo”. Aparecerá una
nueva pestaña.
2. En la pestaña “Sitio_WebDev_Completo”, en el grupo “Derechos”, clique sobre “Gestión de derechos”.
3. Seleccione el usuario “Test” en la lista de usuarios.
4. En la lista de los derechos, para la acción “Derecho de conectarse al servidor (conexión encriptada y no
encriptada), clique en la columna “Derecho definido” y seleccione la marca verde.
5. Clique sobre el botón “Aplicar” que hay bajo de la ventana (flecha azul). El derecho se vuelve efectivo.
6. Cierre la ventana de gestión de los derechos.
Para permitir la lectura del fichero Cliente:
1. En el Centro de Control HFSQL, despliegue la base de datos “Sitio_WebDev_Completo”, y luego doble clic
sobre el fichero Cliente (a la izquierda de la pantalla).
2. En el panel “Cliente”, dentro del grupo “Derechos”, clique sobre “Gestión de derechos”.
3. Seleccione al usuario “Test” en la lista de usuarios.
4. En la lista de derechos, para la acción “Derecho a leer los registros de un fichero”, clique en la columna
“Derecho definido” y seleccione la marca verde.

5. Clique sobre el botón “Aplicar” que hay en la parte inferior de la ventana (flecha azul). El derecho se volverá
efectivo.
6. Cierre la ventana de gestión de los derechos.
De esta manera, se pueden definir los derechos:

 Sobre el servidor HFSQL.
 Sobre la base de datos.
 Sobre los ficheros de la base de datos.
En nuestro ejemplo, el usuario “Test” podrá solamente recorrer los registros del fichero Cliente. Si este usuario intenta
otra acción, se mostrará un mensaje: “El usuario Test no tiene los derechos suficientes para XXXX” (donde XXXX
corresponde a la acción intentada).
Una vez se ha creado la cuenta, puede utilizarse mediante la conexión de la aplicación al servidor (cuando se utiliza la
función HOpenConnection).
La gestión de los usuarios y sus derechos, puede también efectuarse por programación a través
Notas
de las funciones WLangage. Para más detalles, consulte la ayuda en línea.
Copia de seguridad de la base de datos

Para guardar la base de datos:
1. Posiciónese sobre la pestaña correspondiente a la base “Sitio_WebDev_Completo”.
2. Seleccione el panel vertical “Copia de seguridad.
3. En el menú, dentro del grupo “Copias de seguridad”, despliegue “Nueva copia” y seleccione “Nueva copia en
caliente”.
Observación: Este botón es accesible en el grupo “Copias de seguridad”:
 En la pestaña correspondiente al servidor HFSQL
 En la pestaña correspondiente a la base de datos.

Conclusión
El Centro de Control HFSQL es una herramienta completa de administración de base de datos, permitiendo entre
otras cosas:
 Detener o re-arrancar un servidor en caso de problemas.
 Gestionar los usuarios y sus derechos.
 Reindexar los ficheros de datos si hiciera falta.
 Hacer copias de seguridad de la base
El Centro de Control HFSQL es una herramienta redistribuible que puede instalarse en los clientes que
tengan las bases de datos HFSQL Cliente/Servidor. El Centro de Control deberá ser utilizado por la
persona que administre la base de datos.

CAPÍTULO 11
Gestor de
fuentes (GDS)

Lección 11.1. Gestor de fuentes(GDS)
 Presentación
 El gestor de fuentes

Introducción
Un desarrollo informático importante necesita la participación de varios desarrolladores. Estos desarrolladores deben
trabajar en un proyecto WEBDEV único, y compartir los distintos recursos (páginas, clases, …) manipulados.
WEBDEV propone en estándar un gestor de fuentes llamado “GDS” que permite compartir los fuentes de distintos
proyectos entre los desarrolladores y conocer el historial completo de las modificaciones realizadas (en el código,
interfaces, …).
GDS (Gestor de fuentes)

Principio del GDS
El gestor de fuentes permite almacenar y compartir proyectos y todos sus elementos.
El principio es el siguiente:
 Una versión de referencia de cada uno de sus proyectos está presente en un servidor. El conjunto de estas
versiones se llama “Base de fuentes”.
 Cada desarrollador tiene en su puesto una copia local de los distintos proyectos sobre los que ha trabajado.
 Cuando un desarrollador quiere modificar un elemento de un proyecto (una página, un informe, una consulta,
…), le indica al GDS que se adueñará temporalmente de este elemento. Para ello, el desarrollador extraerá
este elemento de la base de fuentes.
 Este desarrollador obtiene entonces los derechos exclusivos sobre este elemento: puede hacer todas las
modificaciones deseadas sobre este elemento.
 Los restantes desarrolladores continúan con la copia de la versión de referencia de este elemento (existente
en la base de fuentes).
 Cuando el desarrollador finaliza sus modificaciones, devuelve el elemento extraído a la base de fuentes.
 Los restantes desarrolladores son avisados de esta devolución. Pueden entonces actualizar su copia local.

El GDS gestiona entonces el trabajo colaborativo y permite conocer el historial de todas las modificaciones realizadas.
El GDS permite también administrar y reglamentar los elementos compartidos entre varios proyectos.
Creación de la base de datos
Para compartir un proyecto con el gestor de fuentes, se necesita crear una base de fuentes. Esta base de fuentes
deberá crearse una sola vez en un puesto servidor.
Esta base de fuentes puede crearse en varios momentos:
 Cuando se instala WEBDFEV
 Cuando se crea un proyecto utilizado el GDS
 Cuando se importa un proyecto en el GDS
 Cuando se desee, directamente desde WEBDEV o desde el administrador de GDS.
La base de fuentes puede instalarse en modo:
 HFSQL Clásico
 HFSQL Cliente/Servidor
 Cloud. El modo Cloud permite tener acceso a los fuentes de los proyectos sin importar desde donde ni
cuándo. Para más detalles, consulte el sitio www.pcscloud.net.
En la siguiente lección, crearemos nuestra base de fuentes cuando se importe un proyecto en el GDS.
Es aconsejable hacer regularmente copias de seguridad de la base de fuentes del GDS. Para ello,
hay que conectarse como administrador en la herramienta de administración del GDS y
Notas
seleccionar la opción “Herramientas .. Administración .. Copia completa de la base”.

Lección 11.2. Integración de un proyecto en el
GDS
 Añadir un proyecto en el GDS
 Abrir un proyecto desde el GDS
 Configuración del GDS

Integración de un proyecto en el GDS
Añadir el proyecto en el GDS
Para utilizar un proyecto existente con el gestor de fuentes, hay que integrar el proyecto en la base de fuentes del
GDS.
Si no ha realizado las manipulaciones de las lecciones precedentes, puede seguir esta lección
Corregido
abriendo un proyecto corregido: En el panel “Inicio”, en el grupo “Ayuda en línea”, despliegue

“Guía de auto-formación” y luego seleccione “Sitio WebDev Completo (Corregido)”.
Vamos a integrar el proyecto “Sitio_WebDev_Completo” en la base de fuentes del GDS:

1. En la cinta, en el panel “GDS”, dentro del grupo “Proyecto”, clique sobre “Añadir el proyecto”. Se lanza el
asistente para añadir el proyecto dentro del GDS:
Aún no habíamos creado la base de fuentes. Vamos pues a crear una.

Observación: Vamos a crear una base de fuentes “Cliente/Servidor” en el servidor que habíamos instalado en
el capítulo 10. Si no ha seguido este capítulo, es necesario seguir la parte “Instalación de un servidor HFSQL
local”.
2. Clique sobre el botón “Crear una base”.
3. La pantalla que permite la creación de la base se muestra:

La base de fuentes puede estar en formato HFSQL clásico (local o red) o en formato HFSQL Cliente/Servidor.
Vamos a crear una base de fuentes en formato HFSQL Cliente/Servidor.
El uso de una base de fuentes con formato HFSQL Cliente/Servidor permite utilizar esta base de
Notas
fuentes a la distancia.
4. Seleccione la opción “Creación en modo HFSQL Cliente/Servidor”.

5. Indique los parámetros del servidor instalado anteriormente.
 El nombre del servidor, su puerto.
 El nombre del administrador, su contraseña eventual.
6. Valide la creación de la base de fuentes (botón “Crear la base”). Esta operación puede ser relativamente larga
en modo Cliente/Servidor.
7. La base de fuentes se crea ahora. Vamos a poder integrar nuestro proyecto en esta base de fuentes.
8. Avance al paso siguiente. El usuario actual no está registrado en la base de usuarios del servidor HFSQL.

Vamos a crear este usuario: Clique sobre el botón “Crear la cuenta”.
9. El asistente nos propone situar el proyecto en el subdirectorio “Proyectos WebDev” de la base de fuentes.
Vamos a aceptar este emplazamiento. Avance al paso siguiente.

10. El asistente nos pide seleccionar los distintos elementos del proyecto a añadir en la base de fuentes.

Queremos que todos los elementos del proyecto se añadan. Avance al paso siguiente.
11. El asistente nos pide seleccionar las distintas dependencias del proyecto a añadir en la base de datos. Estas
dependencias corresponden a todos los elementos externos necesarios para el proyecto (imágenes, hojas de
estilos, …).
Queremos que todas las dependencias del proyecto sean añadidas. Avance al paso siguiente.
12. Valide la integración del proyecto en el GDS. Nuestro proyecto y todos sus elementos están desde entonces
añadidos en nuestra base de fuentes.
Compartición de los elementos del proyecto

Con la integración en el GDS de proyectos que comparten los mismos recursos (el mismo
análisis, las mismas ventanas, …) los elementos concernientes pueden ser compartidos entre los
Notas
distintos proyectos. Así, el mismo elementos solo se integra una vez en el GDS y las
modificaciones se reportan automáticamente en los otros proyectos.
Apertura del proyecto desde el GDS

En nuestro ejemplo, el proyecto está integrado en el GDS y puede manipularlo directamente.
En un caso real, para que otros desarrolladores trabajen sobre un proyecto existente en el gestor de
fuentes, deberán recuperar, en local, una copia de este proyecto.
Para ello, las manipulaciones a efectuar son las siguientes:
1. Abrir el proyecto desde el gestor de fuentes: En el panel “Inicio”, dentro del grupo “General”, desplegar
“Abrir” y seleccionar “Abrir un proyecto desde el GDS”.
2. Indicar los parámetros de localización de la base de fuentes y validar (este paso solo será necesario si el
proyecto en curso en el editor no pertenece al GDS):
3. En la pantalla que se muestra, indique si es necesaria la conexión y el directorio local:

Observación: Si tiene ya abierto el proyecto desde el GDS, el GDS le propone abrir el proyecto normalmente o
borrar el contenido (para recuperar el proyecto completo).
Esta operación deberá efectuarse solamente una vez para cada desarrollador que utilice el proyecto.
El desarrollador que ha añadido el proyecto en el gestor de fuentes (en este caso es usted) no tiene que efectuar
ninguna manipulación.
Las próximas aperturas de un proyecto gestionado por el GDS son idénticas a las aperturas de
un proyecto no gestionado por el GDS: hay que abrir el proyecto (fichero “.WWP”)
Notas
correspondiente a la copia local.
Configuración del GDS

Antes de empezar a trabajar sobre los elementos del proyecto presentes en el GDS, es importante configurar el modo
de extracción de los elementos del proyecto.
Cuando se trabaja sobre los elementos de un proyecto presente en el GDS, es necesario extraer el elemento de la
base de fuentes antes de comenzar a modificarlo, y luego reintegrarlo una vez que se han efectuado las
modificaciones. El elemento modificado queda así disponible para todos los usuarios del GDS.
WEBDEV propone dos modos de extracción de los elementos del proyecto:
 El modo clásico: Si muestra un elemento del GDS no extraído, un panel indica que este elemento deberá
extraerse para poder modificarse. Puede extraerlo inmediatamente (botón de extracción presente en el
panel).
 El modo automático: Si intenta modificar un elemento del GDS que no ha sido extraído, GDS propone
automáticamente extraer el elemento. Luego de la validación de la extracción, el elemento podrá modificarse.
Observación: este modo es desaconsejable cuando se utiliza una conexión a Internet lenta.
En este curso, vamos a utilizar la extracción automática.
Para verificar que la extración automática está bien desactivadad, en el panel “Inicio”, en el grupo “Entorno”,
despliegue “Opciones” y seleccione la opción “Opciones generales de WEBDEV”. En la pestaña “General”,
marque si hiciera falta la opción “Extracción de los elementos a la primera modificación”.

Lección 11.3. Manipular un proyecto en el GDS
 Modificación de un parámetro del proyecto.
 Modificación de una página del proyecto.
 Sincronización del proyecto.
 Modo desconectado.
 Administrador del GDS.

Presentación
Vamos ahora a empezar a trabajar con el GDS en condiciones reales realizando las siguientes manipulacioens:
 Modificar un parámetro del proyecto.
 Modificar una página del proyecto.
Modificación de un parámetro del proyecto

Vamos a modificar el proyecto pidiendo que muestre el ambiente en los cuadros de diálogo:
1. Muestre la descripción del proyecto: en el cinta, en el panel “Proyecto”, dentro del grupo “Proyecto”, clique
sobre “Descripción”.
2. Clique sobre la pestaña “Estilos de ambiente”.
3. Marque la opción “Aplicar el ambiente en los cuadros de diálogo (SiNo y OKAnular)”.
4. Valide la ventana de descripción del proyecto.
Aparecen varias ventanas del GDS:
1. Primeramente se muestra la ventana de extracción automática del proyecto. En efecto, modificaremos una
característica del proyecto, y es necesario extraer el proyecto.
2. Valide esta ventana.

3. Aparecerá una nueva ventana. Esta ventana permite añadir elementos y sus dependencias en el proyecto
presente en la base del GDS. En efecto, la opción que hemos seleccionado añade varias páginas en el
proyecto:

5. Una ventana de reintegración del proyecto aparecerá. En efecto, las modificaciones del proyecto que han sido
modificadas y el proyecto se reintegra.
Modificar una página del proyecto.

Vamos ahora a modificar la página “PAGE_Ficha_del_producto”. Vamos a mover los botones “Anular” y “Validar”.
Para modificar un elemento del proyecto, es necesario extraerlo.
Para modificar la página “PAGE_Ficha_del_producto”:
1. Seleccione la página “PAGE_Ficha_del_producto” en el explorador del proyecto y doble clic sobre el elemento
para abrirlo en el editor de páginas.
2. La extracción automática se activa a la primera modificación. Basta con desplazar un campo para extraer el
elemento.
3. También puede utilizar el icono “Extraer” que está en la cinta del panel GDS ( ).
4. Aparecerá la ventana de extracción:
5. El GDS propone tres modos de extracción:

 Exclusivo (modo aconsejado): Nadie podrá extraer el elemento hasta su reintegración. El elemento solo
podrá extraerse para pruebas.
 Para pruebas: El elemento podrá modificarse, pero las modificaciones no podrán ser reintegradas.
 Múltiple: El elemento podrá ser extraído por otros usuarios. En este caso, cuando se reintegre, podrán
visualizarse las diferencias entre las diferentes versiones del elemento. Este modo se reserva para casos
de utilizaciones específicas a desarrolladores avanzados.
6. Vamos a extraer la página en modo exclusivo. Conserve la opción “Exclusivo” marcada.
7. Introduzca un comentario (“Modificar los botones”, por ejemplo). Este comentario será útil para los restantes
desarrolladores.
8. Valide la extracción.
La página está extraída.
Modificación del elemento extraído
La modificación del un elemento extraído (IHM, código, …) se realiza como en un proyecto no gestionado por el GDS.
Sin embargo, todas las modificaciones efectuadas en un elemento extraído no son visibles para los otros
desarrolladores.
Si otro desarrollador ejecuta el elemento extraído, el elemento que existe actualmente en la base de fuentes será el
que se utilice.
De este modo es posible hacer evolucionar una aplicación guardando siempre una versión estable en la base de
fuentes.
Modifique la página extraída:
1. Seleccione los botones “Anular” y “Validar”.
2. Desplace los botones hacia la derecha (bajo del campo de descarga).
3. Guarde su página ([CTRL]+[S]).
Pruebe sus modificaciones.
Reintegración del elemento extraído

Ahora que las modificaciones se han realizado y se han probado, vamos a reintegrar la página en la base de fuentes.
Sus modificaciones serán entonces accesibles para los restantes desarrolladores.
En el panel “GDS”, en el grupo “Elemento en curso”, clique sobre el botón “Reintegrar”.
Se muestra la siguiente pantalla:
Esta pantalla permite:

 Conocer las modificaciones efectuadas comparando el elemento de la base de fuentes con el elemento
extraído (botón “Mis Modificaciones”).
Fusión de código
Puede comparar un elemento con una de sus versiones anteriores. Entonces se
Notas
puede comparar el código para recuperar un código “perdido” o eliminado por error
por otro desarrollador, por ejemplo.
 Acceder al historial del elemento en la base de fuentes (botón “Propiedades”).

 Introducir un comentario sobre las modificaciones realizadas. Por defecto, WEBDEV propone introducir los
comentarios durante la extracción.
 Enviar un mensaje a los otros desarrolladores.
 Reintegrar las modificaciones efectuadas en el elemento, pudiendo conservar el elemento extraído(opción
“Guardar el elemento extraído”).
Si utiliza los Centros de Control, también pueden terminar la tarea en curso con la reintegración
del elemento en el Gestor de fuentes. Esta funcionalidad es especialmente útil para asegurar el
Notas
seguimiento de las tareas, la corrección de los bugs, …

4. Valide la reintegración.
5. La página aparecerá entonces en el editor, con la cinta naranja indicando que el elemento no está extraído.
Sincronización del proyecto

Varias opciones permiten configurar un proyecto manipulado con el GDS. Estas opciones están reagrupadas en la
pestaña “GDS” de la descripción del proyecto (mostrado con un clic sobre “Descripción” en la pestaña “Proyecto”).
Estas opciones son las siguientes:

 Proponer la recuperación de la última versión de los elementos a la apertura del proyecto.
Esta opción permite cuando se abre un proyecto presente en el GDS, proponer la recuperación de la última
versión de los distintos elementos del proyecto.
 Proponer la reintegración de los elementos al cierre del proyecto.
Esta opción permite mostrar al cierre del proyecto la lista de todos los elementos extraídos actualmente, para
reintegrar algunos o todos estos elementos. Por defecto, al cierre del proyecto, no se reintegran los
elementos extraídos.
 Extraer/Reintegrar automáticamente el proyecto.
Esta opción permite extraer o reintegrar automáticamente el proyecto cuando se manipula un elemento.
Esta opción está seleccionada por defecto.
Modo desconectado (o nómada)

El GDS permite trabajar muy fácilmente en modo desconectado o nómada.
Este modo permite por ejemplo a un desarrollador que utiliza un portátil continuar trabajando sobre un proyecto
existente en la base de fuentes incluso estando desconectado.
El principio es simple:
 Antes de la desconexión, en el panel “GDS”, dentro del grupo “Otras acciones”, despliegue “Trabajo a
distancia” y seleccione la opción “Desconectarse para una utilización nómada”.
 Al volver a conectarse, en el panel “GDS”, dentro del grupo “Otras acciones”, despliegue “Trabajo a distancia”
y seleccione la opción “Reconectarse y sincronizar”. Bastará entonces con reintegrar los elementos
modificados.
En modo nómada, se ofrecen dos soluciones relativas a la extracción de los elementos:
 No realizar ninguna extracción de elementos del GDS. De esta forma, durante el período nómada, otros
desarrolladores podrán trabajar sobre el o los mismos elementos. A la vuelta y a la reconexión al GDS, será
necesario realizar las fusiones entre las modificaciones realizadas y las efectuadas por otros desarrolladores.
 Hacer una extracción exclusiva sobre el o los elementos a modificar. Se reserva así el elemento durante todo
el período nómada.
Administrador del GDS

El administrador del GDS permite manipular directamente los distintos proyectos incluso dentro del gestor de fuentes.
Por ejemplo, puede:
 Gestionar las bases de fuentes (creación, conexión a una base de fuentes).
 Gestionar los ficheros y los directorios existentes en un proyecto de la base de fuentes (añadir, eliminar,
renombrar, … los ficheros y los directorios).
 Gestionar los distintos ficheros de la base de fuentes (extracción, reintegración, compartición, …).
 Lanzar algunas herramientas (opciones, mantenimientos, …).
 Visualizar el historial de un elemento.
 Visualizar la situación de los elementos.
 Realizar copias de seguridad.
 Conceder derechos a los distintos usuarios del GDS.
 Listar los proyectos en los que participa, para poder disociarse (si lo desea).
Lance el administrador del GDS: en el panel “GDS”, dentro del grupo “Base GDS”, clique sobre el botón
“Gestionar”. Todos los elementos del proyecto se listarán en el administrador.
Para más información sobre el GDS, consulte la ayuda en línea de WEBDEV (palabra clave: “GDS”).
Desconexión del GDS

Si desea abandonar el uso del GDS en un proyecto:
1. Muestre la ventana de descripción del proyecto: en el panel “Proyecto”, dentro del grupo “Proyecto”, clique
2. En la pestaña “GDS”, seleccione la opción “Sin Groupware de desarrollador ni GDS”.
3. Valide la ventana de descripción del proyecto.

CAPÍTULO 12
Anexos
Capítulo 12 - Anexos |309

Anexo 1. Vocabulario
 Los términos utilizados por WINDEV, WEBDEV y WINDEV Mobile
Tiempo estimado: 1 hora

Principales términos utilizados
Acceso nativo (Conector):
Método de conexión a una base de datos desde un programa.
Ajax
AJAX (por Asynchronous Javascript and XML) permite refrescar solamente los datos modificados en una página HTML
sin volver a mostrar la totalidad de la página.
Afectación
Operación que consiste en poner un valor en una variable o en un campo. Por ejemplo:
// Afectación del valor DUPONT en la variable NombreCliente
NombreCliente = “DUPONT”
El signo “=” es el operador de afectación
Alineación
Manera de organizar los campos de una ventana o de una página. Por ejemplo, centrar un campo en una página,
poner la misma anchura a varios campos, …
Ambiente
Carta gráfica de un sitio WEBDEV.
Elemento en el que se define la forma gráfica de las páginas de un proyecto WEBDEV.
Análisis
Descripción de la estructura de los ficheros de datos y sus relaciones.
Anclaje
Mecanismo que consiste en definir las reglas de posición o redimensionamiento para que el contenido de una ventana
o de una página se adapte al redimensionamiento de una ventana o de un navegador.
AWP
Formato de página direccionable directamente (URL fija), referenciable, sin contexto automático.
Base de datos
Elemento que contiene los datos de un programa. Los datos se organizan en ficheros o tablas.
Bloque (Informe)
Elemento que constituye un informe. Por ejemplo, un bloque Cabecera de página, un bloque Pie de página, un bloque
Cuerpo.
Campo (Ventana o página)

Elemento gráfico que sirve para la constitución del IHM de un programa o de un sitio.
Campo (Rúbrica)
Elemento que forma parte de la estructura de un fichero de datos o de una tabla (de un análisis). Por ejemplo, un
fichero CLIENTE puede estar compuesto por los campos Nombre y Apellidos.
Clase (POO)
Elemento definido en programación orientada a objetos. Una clase, reúne métodos (acciones) y miembros (datos).

Clásico (fichero)
Tipo de acceso a un fichero HFSQL. Un fichero HFSQL es de tipo clásico cuando se accede al mismo directamente en
su directorio.
Clave (fichero)
Característica de un campo del fichero. Un campo clave permite optimizar las búsquedas y las clasificaciones dentro
de un fichero de datos.
Sinónimo: índice.
Cliente/Servidor (fichero)
Tipo de acceso a un fichero HFSQL. Un fichero HFSQL es de tipo Cliente/Servidor cuando se accede al mismo
conectándose a un servidor que contiene este fichero a través del motor HFSQL.
Código del proyecto

Código ejecutado cuando se lanza un programa o un sitio.
Componente Externo
Bloque de software que permite exportar una o varias funciones de negocio para reutilizarlas.
Componente Interno
Contenedor que agrupa elementos de un proyecto (ventana, página, consulta, informe, clase, …) para facilitar la
compartición con otro proyecto.
Configuración del proyecto

Descripción del formato de salida de un proyecto: ejecutable Windows, Linux, JAVA, …
Consulta
Elemento escrito en lenguaje SQL que permite acceder en lectura o escritura al contenido de una ase de datos con el
formato SQL.
Contexto (Página)
Parte en memoria en un servidor Web que sirve para constituir una página que está visible en un navegador.
CSS
Lenguage de descripción de los estilos de los diferentes elementos de una página HTML.
Data binding
Método que permite asociar un elemento gráfico del IHM a un dato (variable, campo).
Despliegue
Acción de instalar un programa en el puesto del usuario.
Editor
Programa que permite crear un elemento de un proyecto (editor de ventanas, editor de informes, …)
Enlace (análisis)
Permite describir la naturaleza de la relación o el punto en común entre dos ficheros del análisis. De un enlace,
depende la descripción de las reglas de integridad a respetar al escribir en los ficheros implicados.
Estilo
Elemento que permite describir el aspecto gráfico de un campo en una ventana o en una página. Un estilo se
compone por ejemplo de un tipo de fuente de caracteres, del tamaño de los caracteres, del color de los caracteres, …

Estructura
Tipo de variable que está compuesta de varias sub-variables.
FAA
Funciones Automáticas de la Aplicación
Fichero (Tabla)
Elemento que constituye una base de datos. Un fichero sirve para almacenar los datos introducidos en un programa.
Por ejemplo, un fichero CLIENTE contendrá las informaciones de los clientes que han sido introducidos en un
programa.
GDS
Gestor de fuentes. Herramienta para organizar, compartir fuentes de los proyecto, gestionar derechos, …
Global (Variable o Procedimiento)

Corresponde al alcance en memoria de una variable o de un procedimiento. Un elemento global es accesible desde
cualquier elemento del proyecto. Lo contrario, es local.
Groupware de usuario
Herramienta de los derechos de acceso al IHM para los usuarios de un programa o de un sitio. Por ejemplo, impedir
que un usuario pueda clicar sobre un botón “Eliminar” en función de su login o su grupo.
Hoja de estilos
Contiene la lista de los estilos utilizados en un proyecto.
Homotético
Método de redimensionamiento de una imagen para poder mostrarla más grande sin deformar su contenido.
HTML
HyperTextMarkupLanguage
Lenguaje que permite describir los elementos de una página WEB.
IHM
Interface Homme Machine. Descripción de las ventanas o las páginas que constituyen un programa. Es lo que vé el
usuario cuando utiliza el programa.
Índice (fichero)
Sinónimo: Clave
Informe
Elemento de un proyecto que define una impresión a realizar.
Javascript
Lenguaje de programación que es utilizado por los navegadores para hacer cálculos y tratamientos en una página
HTML.
Live Data
Mecanismo que consiste en mostrar los datos reales provenientes de la base de datos durante la creación del IHM.
Este mecanismo se utiliza solamente si el elemento está enlazado al fichero de datos.

Local (Variable o Procedimiento)
Corresponde al alcance en memoria de una variable o de un procedimiento. Un elemento local solo es accesible
dentro del tratamiento en el cual está definido. Lo contrario es global.
Miembro
Variable que forma parte de una clase.
Menú contextual
Menú desplegable que contiene las acciones posibles dependiendo del lugar donde se realiza el clic derecho del ratón
y del tipo de elemento sobre el cual se efectúa el clic.
Método
Procedimiento que forma parte de una clase permitiendo actuar sobre los datos (miembros) de la clase.
Modelo de campos
Contenedor de uno o varios campos (con tratamientos) que puede ser reutilizado indefinidamente en las páginas.
Característica principal de un modelo: si el modelo original se modifica, las modificaciones son repercutidas
automáticamente en las distintas utilizaciones del modelo.
Modelo de informes
Contenedor que representa un informe tipo, que puede aplicarse a uno o varios informes de un proyecto.
Modelo de páginas
Contenedor que representa una página tipo que puede aplicarse a una o varias páginas de un proyecto.
n-tiers
Método de programación en capas. Cada capa es independiente y puede cambiarse sin impactar sobre las restantes.
Ventaja: gran flexibilidad de mantenimiento.
Inconveniente: dificultad y tiempo de desarrollo.
Página
Elemento de un proyecto WEBDEV en el que se define una parte del interface gráfico del sitio a realizar. Un sitio se
compone generalmente de varias páginas que se encadenan.
Parámetro (ventana, página, procedimiento, método)

Elemento esperado en una ventana, página, procedimiento o método cuando se le llama. Cada valor que se pasa en
parámetros, deberá estar afectado en una variable.
POO
Abreviatura de Programación Orientada a Objetos.
Popup
Tipo de ventana (o página). Una Popup es una ventana (o página) que se superpone a otra ventana (o página). Así
se puede continuar visualizando el contenido de la ventana (o página) de debajo y continuar la introducción en la
popup.
Privado
Variable o procedimiento solamente utilizable por el elemento que la contiene.

Procedimiento
Elemento de un proyecto que contiene el código de un tratamiento a ejecutar.
Programación de eventos
Tipo de programación. Una acción de un usuario en una ventana o una página induce a ejecutar un código. El código
de la acción a ejecutar se introduce en el evento representando la acción del usuario.
Por ejemplo, el evento “Clic de un botón”, corresponde a un clic con el ratón del usuario sobre este botón.
Programación Orientada a Objetos (POO).

Método de programación avanzado, por oposición a la programación procedimental.
En POO, solamente se manipulan los objetos, es decir los conjuntos agrupados de variables y métodos asociados a las
entidades que integran de manera natural estas variables y estos métodos.
En programación procedimental, se definen funciones que se llaman entre sí. Cada función o procedimiento está
asociado a un tratamiento particular que puede descomponerse en sub-tratamientos hasta obtener las funciones
básicas.
Proyecto
Elemento que reagrupa todos los elementos que forman parte de un programa o un sitio. Un proyecto contiene por
ejemplo, un análisis, páginas, informes, consultas, …
Propiedad (campo, ventana, …)

Palabra clave que representa una característica de un elemento. Las propiedades permiten manipular y modificar las
características de los elementos de un proyecto por programación.
Público (que)
Variable o procedimiento utilizable desde todos los elementos.
RAD
Acrónimo de Rapid Application Development
Método de desarrollo rápido de un programa a partir de un análisis (descripción de los ficheros de datos).
RAD Aplicativo
Método de desarrollo rápido de un programa a partir de un modelo de programa.
Restricción de integridad
Regla a respetar asociada a un campo de un fichero para asegurar la coherencia de los datos en una base de datos.
Rotura (Informe)
Mecanismo consistente en reagrupar y separar los datos siguiendo un valor.
Por ejemplo, hacer una rotura en un informe que lista los clientes por ciudad. Se agrupan por tanto los clientes de la
misma ciudad. Visualmente, se separan los clientes a cada cambio de ciudad.
Sitio dinámico.
Proyecto desarrollado en WEBDEV que contiene las páginas estáticas y dinámicas. Las páginas dinámicas permiten
gestionar el acceso a los datos almacenados en una base de datos.
Sitio estático.
Proyecto desarrollado en WEBDEV que contiene las páginas estáticas, es decir aquellas que no tienen acceso a una
base de datos.

Tabla (fichero)
Elemento que constituye una base de datos. Una tabla sirve para almacenar los datos introducidos en un programa.
Por ejemplo, una tabla CLIENTE contendrá los nombres y las direcciones de los clientes que han sido introducidos por
un programa.
Tabla (campo)
Elemento gráfico presenten en una ventana o en una página. Un campo tabla está formado por una o varias
columnas y de varias líneas.
Tablero
Tipo de variable que contiene varios valores. Los valores son accesibles a través de un índice. Los “[“ “]” permiten
desde el lenguaje acceder a los elementos de un tablero.
Variable
Elemento que permite almacenar en memoria un valor dentro de un programa. Existen varios tipos de variables. Cada
tipo corresponde a la naturaleza del valor que se desea memorizar. Por ejemplo, una variable de tipo cadena (string)
para almacenar el nombre de una persona, una variable de tipo monetario para almacenar un importe.
WebService
Programa instalado en un servidor Web, cuyos tratamientos son accesibles por la Web.
XML
Lenguaje para organizar los datos para normalizar y facilitar el intercambio de estos datos (utilizado especialmente en
los intercambios con los WebServices).
Zoning
Método para definir la distribución de una página Web.

Anexo 2. Bases de programación
 Los distintos tipos de variables.
 Instrucciones básicas de WLangage
 Operadores básicos de WLangage
 Procedimientos y funciones
 Tratamiento de las cadenas, los numéricos y los monetarios
 Tratamiento de las fechas y las horas
Tiempo estimado: 1 hora

Introducción.
Esta lección le permitirá retornar sobre las bases de programación en WLangage, presentando los siguientes sujetos:
 Declaración de los distintos tipos de variables,
 Instrucciones básicas de WLangage.
 Procedimientos y funciones.
 Tratamiento de las cadenas.
 Tratamiento de los numéricos.
 Tratamiento de las fechas y las horas.
Declaración de los distintos tipos de variables.

Los distintos tipos de variables
WEBDEV propone una gran variedad de tipos de variables (booleana, entero, real, monetarios, cadena, fecha, hora,
duración, fechaHora, variante, tablero, estructura, …).
La sintaxis para declarar una variable es muy sencilla: hay que indicar el nombre de la variable y su tipo:
NombreVariable is TipoVariable
Algunos ejemplos:
Indice is integer
NombreProveedor is string
TablaPrecios is Array [10] currency
I, J, K are integer
Contador is integer = 20
B1 is Boolean = False
Para más información sobre todos los tiposde variables disponibles (tipos simples, tipos avanzados, …) consulte la
ayuda en línea (palabra clave: “Tipos de datos”).
Declaración de las variables y su alcance.
WLangage permite manipular dos tipos de variables:
 Variables globales
Las variables globales pueden serlo para el proyecto o para una página. Estas variables hay que declararlas:
 En el código servidor de inicialización del proyecto (variables servidor globales al proyecto). Estas variables
podrán utilizarse en el código servidor de todos los tratamientos del proyecto y de todos los elementos del
proyecto (páginas, informes, …).
 En el código servidor de declaración de las globales de la página. (variables servidor globales a una página).
Estas variables podrán utilizarse en el código servidor de todos los tratamientos de la página y todos los
elementos de la página.
 En el código servidor de declaración de las colecciones de procedimientos (variables servidor globales a una
colección de procedimientos).
Las variables globales declaradas en código servidor están disponibles en los códigos navegador
de la página solamente para los siguientes tipos: booleano, entero, real, cadena, tablero simple
Atención!
o tablero asociativo.
Las modificaciones aportadas en código navegador sobre una variable global (afectación de un
valor, por ejemplo), no están reportadas en código servidor.
 Dentro del código navegador de la carga de la página (variables navegador globales a una página). Estas
variables podrán ser utilizadas en el código navegador de todos los tratamientos de la página y todos los
elementos de la página.
Las variables navegador globales a una página no están disponibles para el código servidor de la
Atención!
página.

Las variables declaradas en cualquier otra parte, son variables locales.
Variable local: particularidad en código navegador:

Atención!
En código navegador, solo podrán ser declaradas como variables locales los siguientes tipos:
booleano, entero, real, cadena, tablero simple o tablero asociativo de uno de los tipos anteriores.
La mayoría de desarrolladores se sienten tentados de declarar las variables en “global” dentro de

un proyecto. Este tipo de programación es efectivamente más “fácil”. Al ser todas las variables
globales, son manipulables desde cualquier tratamiento.
Atención!
Pero este tipo de programación, es frecuentemente la causa de “machacar” las variables y otros
efectos secundarios indeseados.
Es pues preferible declarar un número limitado de variables locales y luego declarar las variables
locales.
Instrucciones de WLangage
WLangage es un L5G enriquecido, compuesto de:
 Funciones WLangage.
 Propiedades WLangage.
 Palabras clave WLangage.
 Instrucciones WLangage.
A su tiempo, y a medida de su formación, descubrirá las instrucciones necesarias.
En esta lección, simplemente vamos a presentarle las instrucciones básicas, que permiten realizar las condiciones y
los bucles, o simplemente introducir comentarios.
Para comprender un concepto, pasemos a la manipulación. El proyecto “WW_Bases_Programacion” contiene
ejemplos para cada concepto presentado.
1. Arranque WEBDEV 21 si no lo había hecho previamente.
2. Cierre si es necesario el proyecto en curso: En el panel “Inicio”, dentro del grupo “General”, despliegue
“Cerrar” y seleccione la opción “Cerrar el proyecto”.
3. En la ventana de bienvenida, clique sobre la opción “Curso de Auto-formación” y seleccione el proyecto
“Bases de la programación”.
Astucia: también puede en el panel “Inicio”, dentro del grupo “Ayuda en línea”, desplegar “Guía de Auto-
formación” y luego seleccionar la opción “Bases de la programación”.
Instrucciones condicionales (código servidor y navegador)
WLangage permite gestionar instrucciones condicionales del tipo:
 IF, ELSE, END para verificar una condición.
 SWITCH, CASE, END para ejecutar una o varias acciones según los distintos resultados del valor de una
condición
Algunos ejemplos:
IF EDT_Maximo > Random (1.999) THEN
Info (“Bravo, ha ganado usted”)
ELSE
Info (“Lo siento, ha perdido”)
END
SWITCH dia
CASE “Lunes”
// primer día de la semana
CASE “Miércoles”
// Tercer día de la semana
CASE “Viernes”
// Quinto día de la semana
CASE “Sábado”, “Domingo”
// Es fin de semana
OTHER CASE
// Es otro día
END
Ejemplo práctico
Después de haber presentado las principales instrucciones condicionales, hagamos una pequeña prueba real!.
Abra la página “PAGE_Instrucciones” (por ejemplo, doble clic sobre su nombre en el explorador del proyecto).
Esta página presenta distintos ejemplos.
Lance la prueba de esta página ( en los botones de acceso rápido)

1. Clique sobre la pestaña “IF/ELSE”.
2. Pruebe los distintos ejemplos. El código se muestra en la página.

Instrucciones de bucle
WLangage propone varias posibilidades para gestionar los bucles:
 FOR, END para un número de iteraciones determinado.
 WHILE, END para un número de iteraciones indeterminado y donde la condición de salida del bucle se
comprueba al principio del bucle.
 LOOP, END para un número de iteraciones indeterminado y donde la condición de salida del bucle se
comprueba en el bucle. La instrucción EXIT permite salir de este blucle.
WLangage propone también los bucles del tipo FOR ALL, END permitiendo recorrer los elementos
de un campo, las cadenas de caracteres, los registros de un fichero de datos, … Estos bucles
Notas
avanzados, se estudiarán en la continuación de este curso de auto-formación.
Algunos ejemplos:
I is int = 0
WHILE I < Maximo
I++ // Equivalente a I = I + 1
END
I is int = 0
LOOP
I++ // equivalente a I = I +1
IF I > Maximo THEN EXIT
END
FOR I = 1 TO 100 // Aquí no es necesario declarar I

Cuenta ++ // Equivalente a Cuenta = Cuenta + 1
END
Ejemplo práctico:
Después de haber presentado las principales instrucciones de bucle, verifiquemos el funcionamiento en ejecución
probando de nuevo la página “PAGE_Instrucciones”.
Lance la prueba de la página “PAGE_Instrucciones” ( en los botones de acceso rápido)

1. Clique sobre la pestaña “Bucle”.
2. Pruebe los distintos ejemplos. El código se muestra en la página.

3. Cierre el navegador y regrese al editor..
Comentarios
Para introducir comentarios en el código, hay que empezar el código por // (dos caracteres “/”).
Ejemplo:
// Esta es una línea de comentario
Puede poner como comentarios varias líneas seleccionando con el teclado (o el ratón) las líneas
a poner en comentario y luego pulsar las teclas [CTRL]+[/] (del teclado numérico).
Puede realizar la operación inversa (quitar los comentarios) seleccionando con el teclado (o el
Notas
ratón) las líneas a las que se van a quitar los comentarios y luego pulsando las teclas
[CTRL]+[SHIFT]+[/] (del teclado numérico).
Operadores básicos de WLangage

WLangage dispone de varios tipos de operadores:
 Operadores lógicos (AND, OR, NOT, …).
 Operadores aritméticos que permiten sumar, restar, …
 Operadores de comparación que permiten comparar valores. Hemos visto algunos en el párrafo anterior (>,
<, =, …).
 Operadores binarios que permiten efectuar operaciones sobre los valores binarios.
 Operadores de afectación y de intercambio (=, <=>).
 Operadores de indirección que permiten construir el nombre de un campo a partir de una expresión.
 Operadores para las cadenas de caracteres (que veremos en el párrafo “Tratamiento de cadenas”).
 …
Vamos aquí a detallar el uso de operadores lógicos, operadores de comparación y operadores de indirección. Veremos
los restantes tipos de operadores al hilo de nuestras necesidades en este curso. Para más detalles sobre un tipo de
operador, consulte la ayuda en línea (palabra clave: “Operadores”).
Operadores lógicos
WLangage dispone de 5 operadores lógicos que permiten efectuar las operaciones lógicas y construir las condiciones:
 AND y _AND_ que corresponden a la multiplicación lógica.
 OR y _OR_ que corresponden a la suma lógica.
 NOT que corresponde a la negación lógica.
Ejemplo práctico:
He aquí un ejemplo para comprender las sutilezas de estos operadores.
En el proyecto “WW_Bases_Programación”, abra la página “PAGE_Operador”
Lance la prueba de esta página ( en los botones de acceso rápido) y pruebe los operadores lógicos.
Operadores de comparación
WLangage tiene numerosos operadores de comparación que permiten realizar numerosos tratamientos.
 Operadores de igualdad: igualdad (=), igualdad flexible (~=) o igualdad muy flexible (~~).
 Operadores de comparación: distinto (<>), inferior y superior (<, <=, >, >=), o empieza por ([=, [=~,
[=~~).
Ejemplo práctico
Una página de ejemplo está disponible para probar algunos casos de utilización de los distintos operadores de
comparación.
En el proyecto “WW_Bases_Programación”, abra la página “PAGE_Operador”
Lance la prueba de esta página ( en los botones de acceso rápido) y pruebe los operadores de
comparación.
Operadores de indirección
El mecanismo de la “indirección” permite construir el nombre de un campo, de un campo del fichero o el nombre de
una variable a partir de una expresión de tipo cadena.
Esto permite por ejemplo, crear tratamientos genéricos independientes de los nombres de los campos, variables,
campos del fichero, …
La indirección se realiza con la ayuda de los operadores { }.

Notas
Para optimizar la velocidad de sus aplicaciones, es aconsejable precisar con el uso de la sintaxis de indirección, el tipo
del elemento manipulado.
Así, si manipula un campo, el tipo correspondiente será IndControl.
He aquí algunos ejemplos de indirección:
 Ejemplo de indirecciones simples:
{“NOM”, IndControl} = NomCli
// es equivalente a NOM=NomCli
{“NOM”,IndControl} = {“CL.NOMCLI”}
// es equivalente a NOM=CL.NOMCLI
{“PAGE_CLI.NOM”, IndControl = NomCli
// es equivalente a PAGE_CLI.NOM=NomCli
{“PAGE_CLI”+”.NOM”, IndControl} = NomCli
// es equivalente a PAGE_CLI.NOM = NomCli
 Ejemplo de indirección con un procedimiento:
NombreCampo is string
NombreCampo = “INTRODUCIR1” //INTRODUCIR1 es el nombre del campo
// llamada a un procedimiento que vuelve un campo invisible
PROCEDURE INVISIBLE (NombreDelCampo)

{NombreDelCampo, IndControl}..Visible = False
Para más detalles sobre el uso de las indirecciones, consulte el ejemplo unitario “Uso de las
Ejemplo
indirecciones” proporcionado estándar con WEBDEV. Este ejemplo es accesible desde la ventana
de bienvenida de WEBDEV ([CTRL]+[<]).
Procedimientos y funciones
Definición
Cuando un tratamiento se llama varias veces en un proyecto o en una página, es bastante interesante crear un
procedimiento que contenga este tratamiento. Bastará con llamar el procedimiento cada vez que sea necesario.
Junto a la programación, existen los procedimientos y las funciones:
 Las funciones devuelven un resultado.
 Los procedimientos sirven para ejecutar un tratamiento específico.
WEBDEV permite gestionar simplemente los dos tipos de tratamiento de la misma forma. En WEBDEV no hay
diferencia entre un tratamiento y una función. Por eso, en el seguimiento de este curso, utilizaremos solamente el
término “procedimiento”.
Existe la posibilidad de crear procedimientos “locales” y procedimientos “globales”.
Los procedimientos en código servidor no son accesibles directamente en código navegador y a

la inversa, los procedimientos en código navegador no son accesibles en código servidro.
Atención!
Sin embargo, se puede ejecutar un procedimiento servidor desde un código navegador mediante
la validación de un botón o con la función WLangage AJAXExecute
Procedimiento local
Un procedimiento “local” está enlazado a una página y solamente a esta página.
Un procedimiento, cuando es local, puede utilizarse solamente en los tratamientos de la página y los campos de la
página en la que está declarada. Forma parte de la página.
Procedimiento global y colección de procedimientos.
Los procedimientos “globales” están contenidos en las “colecciones de procedimientos”. Cada “Colección de
procedimientos” es un fichero que contiene todos los procedimientos globales que tiene asociados.
Por ejemplo, una colección permite agrupar los procedimientos según un tema: CálculosIVA, CálculosLibresDePortes,
…
En un proyecto correspondiente a un sitio dinámico, dos tipos de colecciones pueden utilizarse:
 Una colección de procedimientos de servidor, fichero de extensión “.WDG”.
 Una colección de procedimientos de navegador, fichero de extensión “.WWN”.
Puede crear tantas colecciones de procedimientos como desee, dentro de un proyecto.
Una colección de procedimientos permite:
 Compartir procedimientos globales entre varios desarrolladores, para un mismo proyecto.
 Compartir procedimientos globales entre varios proyectos. En efecto, una misma colección de procedimientos
puede utilizarse en varios proyectos.
Para crear una colección de procedimientos:
1. Seleccione la pestaña “Explorador del proyecto”.
2. Selecciones “Procedimientos”.
3. En el menú contextual (clic derecho), seleccione:
 O la opción “Nueva colección de procedimientos” para crear una colección de procedimientos servidor.
 O la opción “Nueva colección de procedimientos navegador” para crear una colección de procedimientos
navegador.
4. En la ventana que aparece, indique el nombre de la colección de procedimientos (servidor o navegador) y

valide.
5. Los tratamientos asociados a la colección de procedimientos aparecen en el editor de código.
6. Guarde la colección de procedimientos ([CTRL]+[S]).
7. La nueva colección de procedimientos aparecerá en el explorador del proyecto.
Es posible entonces crear procedimientos globales (esta creación se detallará a continuación en esta misma lección).
¿Cómo elegir si un procedimiento es global o local?
Para elegir si un procedimiento deberá ser global o local, pregúntese lo siguiente:”¿El procedimiento va a utilizarse
solamente en esta página, o podrá ser llamado desde otra página?”.
 Si la respuesta es “llamado solamente desde esta página”, el procedimiento puede ser “local”.
 Si el procedimiento puede ser llamado “desde varias páginas”, el procedimiento deberá ser “global”.
A propósito del paso de parámetros
Un procedimiento puede gestionar parámetros. Los parámetros pueden ser obligatorios u opcionales.
Los parámetros “obligatorios” se definen siempre antes que los parámetros “opcionales”. La declaración de un
parámetro “opcional”, se efectúa afectando un valor por defecto cuando se declara el parámetro. Por ejemplo:
PROCEDURE MiProcedimiento (Param1, ParamOpciones = “Valor por defecto”
Llamada de un procedimiento
Para llamar a un procedimiento en un tratamiento, basta con escribir su nombre en el editor de código y si es
necesario, indicar los parámetros.
WEBDEV obviamente, sabe gestionar las llamadas de los procedimientos anidados.
En el editor de código, cuando está posicionado sobre un nombre de procedimiento, el pulsar la

tecla [F2] permite visualizar el código de este procedimiento.
Astucia
Pulsar simultáneamente las teclas [CTRL]+[F2] permite regresar al código anterior en el nombre
del procedimiento.
Creación de un procedimiento
Un procedimiento puede crearse directamente desde el editor principal de WEBDEV. Basta con utilizar la pestaña
“Explorador del proyecto”.

Para crear un procedimiento local:
1. En la pestaña “Explorador del proyecto”, seleccione el nombre de la página asociada al procedimiento local.
2. Clique sobre la flecha a la izquierda para mostrar los distintos elementos.
3. Seleccione “Procedimientos locales” (o utilice la tecla de atajo [F8]).
4. En el menú contextual de “Procedimientos locales”, seleccione:
 La opción “Nuevo procedimiento local” para crear un procedimiento local servidor.
 La opción “Nuevo procedimiento local navegador” para crear un procedimiento local navegador.
5. En la ventana que aparece, indique el nombre del procedimiento y clique sobre “Añadir”.
6. El procedimiento aparece en el editor de código. Introduzca el código del procedimiento.
Para crear un procedimiento global:
1. Seleccione la pestaña “Explorador del proyecto”.
2. Seleccione “Procedimientos”.
3. Cree si hiciera falta, la colección de procedimientos en la que el procedimiento global deberá crearse. Si la
colección ya existe, selecciónela.
4. En el menú contextual, seleccione la opción “Nuevo procedimiento global”.
5. En la ventana que aparece, indique el nombre del procedimiento y valide.
6. El procedimiento aparece en el editor de código. Introduzca el código del procedimiento.
Recuerde: También se puede crear directamente un procedimiento a partir del código seleccionado en el editor de
código (opción “Nuevo .. Crear un procedimiento global que contenga el código seleccionado” del menú contextual).
¿Cuándo utilizar los procedimientos?

 Cuando el tratamiento se utiliza varias veces en la misma página, es aconsejable utilizar un
Astucia
procedimiento local en la página que contenga este tratamiento.

 Cuando un tratamiento se utiliza varias veces en un conjunto de páginas, es aconsejable
utilizar un procedimiento global al proyecto que contenga este tratamiento.
Ejemplo práctico
Después de haber visto la teoría, un poco de práctica!
En el proyecto “WW_Bases_Programación, abra la página “PAGE_Code” (Doble clic sobre su nombre en el
explorador del proyecto). Esta página presenta distintos ejemplos.
Lance la prueba de esta página ( en los botones de acceso rápido).

 Arriba, puede probar el uso de un procedimiento-
 Abajo, puede probar el uso de una función
Cierre el navegador
Consulte la lista de los distintos procedimientos locales (accesibles desde el panel “Explorador del proyecto”).
Haciendo doble clic sobre el nombre del procedimiento, el código de este procedimiento se mostrará en el editor
de código.
¿Un ejercicio de aplicación? Su turno!
Para poner en aplicación las distintas funcionalidades de este capítulo, le proponemos un pequeño ejercicio:
En la página “PAGE_Code”:
 Cree un procedimiento que permita mostrar todas cifras pares desde 10 a 1 (cuenta atrás) en el campo de
introducción EDT_Code.
 Este procedimiento se llamará desde el botón “Su turno”.
 Pruebe la página para probar su código
Corrección: El botón “Corrección” contiene la solución.
Tratamientos de las cadenas (código servidor y navegador)

Dentro de las funcionalidades básicas de un lenguaje de programación, la manipulación de las cadenas de caracteres
es una de las funcionalidades más importantes.

WLangage ofrece una variedad impresionante de posibilidades para manipular las cadenas de caracteres: funciones
WLangage, operadores de extracción, de concatenación, …
Presentaremos aquí las funciones más corrientes para manipular las cadenas de caracteres.
Para más detalles, consulte la ayuda en línea (palabra clave: “Cadena de caracteres”).
Ejemplo práctico
Dentro del proyecto “WW_Bases_Programación”, abra la página “PAGE_Cadena”. Esta página ilustra las
distintas manipulaciones que explicaremos en esta lección.
Pruebe la página ( en los botones de acceso rápido).

Principales manipulaciones sobre una cadena de caracteres.
Inicialización
Un campo de tipo texto (por ejemplo un campo Etiqueta o un campo de entrada) puede inicializarse por alguno de los
siguientes métodos:
 En la pestaña “Contenido” de la ventana de descripción del campo:
 Por programación afectando directamente la cadena al nombre del campo:

EDT_Texto = “WebDev es una herramienta formidable”
 Por programación, utilizando una variable de tipo cadena:
Ch is string
Ch = “WebDev es una herramienta formidable”
EDT_Texto = Ch
Concatenación
Una cadena puede construirse a partir de varias otras cadenas. Se habla entonces de concatenación de cadenas.
Para concatenar dos cadenas, basta con utilizar el operador “+”.
// La función info permite mostrar el resultado en la pantalla
Info (EDT_Texto1 + EDT_Texto2)
Extracción de partes de una cadena
La extracción de partes de una cadena puede realizarse con:
 Los operadores [[ y ]] (atención, no hace falta poner espacio entre los corchetes [[ y ]]).
Info (EDT_Texto[[1 a 6]]) //Muestra “WebDev”
 La función ExtractString, que extrae una sub-cadena desde una cadena:
Info (ExtractString (EDT_Texto,1,” “)) //Muestra “WebDev”
 La función Middle, que extrae un trozo de cadena desde una cadena:
Info (Middle(EDT_Texto,4,2)) // Muestra “De”
 La función Left, que devuelve la parte izquierda de una cadena:
Info (Left (EDT_Texto, 6)) // Muestra “WebDev”
 La función Right, que devuelve la parte derecha de una cadena:
Info (Right (EDT_Texto, 3)) // Muestra “ble”

Manipulaciones diversas
El tamaño de una cadena puede conocerse con la función Size
Info (Size (EDT_Texto) // Muestra 36
Una cadena puede transformarse en mayúsculas con la función Upper o en minúsculas con la función Lower:
Info (Upper (EDT_Texto)
Info (Lower (EDT_Texto)
Una cadena puede ser buscada dentro de otra cadena con la función Position:
CadenaABuscar is string = “WebDev”
Pos is int
Pos = Position (EDT_Texto, CadenaABuscar)
IF Pos = 0 THEN
InfoBuild (“%1 no se encuentra en el texto”, CadenaABuscar)
ELSE
InfoBuild (“%1 encontrado en el texto”, CadenaABuscar)
END
Igualmente puede efectuar la búsqueda de la posición de una cadena de caracteres en otra sin tener en cuenta
mayúsculas o minúsculas. Basta con añadir a la función Position la constante IgnoreCase:
Pos = Position (EDT_Texto, CadenaABuscar, 1, IgnoreCase)
Para conocer el nombre de ocurrencias de una cadena de caracteres determinada en otra cadena de caracteres,
utilice la función StringCount:
NbOcurrencias is int
NbOcurrencias = StringCount (“anastasia”, “a”) // Devuelve 4
También puede buscar una cadena y reemplazarla en una única operación con la función Replace:
Replace (EDT_Texto, “DreamDream”, “WebDev”)
Para construir una cadena a partir de una cadena y del resultado de una función se aconseja
utilizar la función InfoBuild. Esta función permite construir el texto mostrado en función de
parámetros (%1, %2, …):
InfoBuild (%1 no se encuentra en el texto”, CadenaABuscar)
Por supuesto, también se puede utilizar la concatenación simple:
Info (CadenaABuscar + “ no se encuentra en el texto”)
Astucia
El uso de la función InfoBuild presenta varias ventajas:

 La legibilidad del código: Una cadena más sencilla de leer.
 La traducción: Una cadena puede traducirse en su totalidad. Es posible invertir las
palabras y los parámetros. El traductor solo tiene una obligación: poner el %1, %2 y
%3.
Siguiendo el mismo principio, WLangage propone las funciones StringBuild, ErrorBuild, …

Para implementar las distintas funcionalidades de este capítulo le proponemos un pequeño ejercicio:
En la página “PAGE_Cadena”, se le propone un ejercicio en la zona “Su turno”:
 En el botón “Su código”, escriba un código permitiendo mostrar la quinta palabra del texto manipulada en
mayúsculas así como el tamaño de esta palabra.
 Pruebe la página para probar su código.
Corrección: En la parte “Corregida”, el botón “Su código” contiene la solución.
Tratamientos de los numéricos (código servidor y navegador)

Los cálculos sobre los numéricos pueden efectuarse a partir de los campos de entrada de tipo numérico o
directamente manipulando las variables típicas (entero, real, numérico, monetario, …).
Ejemplo práctico
En el proyecto WW_Bases_Programación”, abra la página “PAGE_Numérica”-

Pruebe la página. Esta página presenta una vista previa de las manipulaciones sobre los numéricos
Principales manipulaciones sobre los numéricos

Inicialización
Un campo de entrada de tipo numérico puede inicializarse mediante uno de los siguientes métodos:
 La pestaña “Contenido” de la ventana de descripción del campo.
 Por programación, afectando directamente el valor numérico al nombre del campo:
EDT_ValorInicial = 3.14
 Por programación utilizando una variable de tipo numérico:
Ent1 is integer
Ent1 = 1234
EDT_ValorInicial = Ent1
Se puede concatenar una cadena y un numérico con el operador “+”:
Info (“El campo EDT_ValorInicial contiene el valor: “ + EDT_ValorInicial)
Si ejecuta el siguiente código:

Info (“Un cálculo: “ + 1 + 2)
La caja de diálogo mostrará “Un cálculo: 12”.
Astucia
Si lo que desea es mostrar el resultado del cálculo, hace falta utilizar el siguiente código:
Info (“Un cálculo: “ + (1 + 2))
La caja de diálogo mostrará “Un cálculo: 3”.
Manipulaciones diversas
Algunos ejemplos de manipulaciones de numéricos realizadas en WLangage:
 La parte entera de un número se averigua por la función IntegerPart, la parte decimal por la función
DecimalPart:
InfoBuild (“Parte entera de %1: %2” + CR + “Parte decimal de %1: %3”, …
EDT_RealConSigno, IntegerPart (EDT_RealConSigno), DecimalPart (EDT_RealConSigno))
 El valor absoluto de un número lo devuelve la función Abs:
InfoBuild (Valor absoluto de %1: %2”, EDT_RealConSigno, Abs(EDT_RealConSigno))
 El valor redondeado de un número lo devuelve la función Round:
InfoBuild (Redondeo de %1: %2”, EDT_RealConSigno, Round (EDT_RealConSigno))
 La función Root permite calcular la raíz enésima de un número:
InfoBuild (“Raíz cuadrada de %1: %2”, EDT_Referencia_Raiz, Root (EDT_Referencia_Raiz, 2))
 La función Power permite elevar un número a la potencia N:
InfoBuild (Potencia 2 de %1: %2”, EDT_Referencia_Potencia, …
Power (EDT_Referencia_Potencia, 2))
Observación: El tipo de los campos de entrada numéricos
Cuando un campo se define como numérico, no se conoce a priori su tipo (entero, real, real doble, …). Su tipo se
define automáticamente en función de la máscara seleccionada para el campo.
Para forzar el tipo de un campo, basta con utilizar una variable tipificada. Por ejemplo:
Val1 is integer
Val1 = 123456789
EDT_Num1 = Val1 // Afectación del campo
Val1 = EDT_Num1 // Recuperación del campo
Para implementar las distintas funcionalidades de este capítulo le proponemos un pequeño ejercicio:
En la página “PAGE_Numérica”, dentro de la zona “Su turno”, se le propone un ejercicio:
 En el botón “Calcular”, escriba el código que permite mostrar en el campo “Resultado”, el resultado de la
resta de los campos “Importe 1” e “Importe 2” redondeado a 1 decimal.
Corrección: En la parte “Corregida”, el botón “Calcular” contiene la solución.

Tratamiento de los monetarios (código servidor solamente)
Ejemplo práctico
En el proyecto “WW_Bases_Programación”, abra la página “PAGE_RealMonetario”.
Pruebe la página. Esta página permite probar los distintos códigos presentes en este párrafo
Detalles
Los reales permiten manipular por programación los números decimales.
Los monetarios permiten gestionar igualmente estos números decimales pero de manera más precisa.
En efecto, con los reales, los redondeos se realizan por sistema y estos redondeos pueden inducir a errores de
cálculo.
Por ejemplo:
// Con una variable de tipo Real Doble, el cálculo es falso
X is real
X=18.6 – 8.6 – 10
Error (“18.6 – 8.6 – 10 = “ + X)
Para probar este código, clique sobre el botón “Operaciones con reales” en la página de prueba.
Con las variables de tipo monetario, el cálculo lo realiza WLangage.
WLangage garantiza 23 cifras significativas lo que permite tener cálculos correctos en todas las circunstancias.
Con el siguiente código, el cálculo es correcto:
X is currency
X = 18.6 – 8.6 – 10
Info (“18.6 – 8.6 – 10 = “ + X)
Para probar este código, clique sobre el botón “Operaciones con monetarios” en la página de prueba:
Para efectuar las divisiones con los monetarios, es aconsejable pasar por variables intermedias de tipo “Monetario”.
Monetario1, Monetario2 are currency
// Atribuir un número a las dos variables monetarias
Monetario1 = “12 345 678 901 234 567,123456”
Monetario2 = “12 345 678 901 234 567,123456”
// División de Monetario1 por Monetario2
Monetario1 = Monetario1 / Monetario2
// Mostrar el resultado de la división
Info (“12 345 678 901 234 567,123456”, “ dividido por “, …
12 345 678 901 234 567,123456 “, “ = “ + Monetario1
Para probar este código, clique en el botón “División de monetarios” en la página de prueba.
Para hacer cálculos avanzados, WLangage pone a su disposición el tipo Numeric. Por defecto, el
tipo Numeric corresponde a 32 cifras para la parte entera y 6 cifras para la parte decimal (como
Observación
el tipo monetario).
Pero la ventaja del tipo Numeric es que se puede configurar el número de cifras a utilizar para la
parte entera y el número de cifras a utilizar para la parte decimal.
Para más detalles, consulte la ayuda en línea (Palabra clave: “Numeric”).
Mezcla de cadenas y numéricos

Los numéricos y las cadenas hacen buena mezcla. WEBDEV es muy flexible con las afectaciones de variables. Así, se
puede afectar una cadena de cifras en una variable numérica y a la inversa. Por ejemplo:
I is int
C is string
I = 123
C=I // La variable C contiene la cadena “123”
C = “456”
I=C // La variable I contiene el valor 456
Si desea transformar un número en una cadena de caracteres respetando un formato bien precisado, basta con
utilizar la función NumToString. Por ejemplo:
NumToString (1234.567, “012,3f” ) // devuelve “00001234,567”
En el proyecto “WW_Bases_Programacion”, abra la página “PAGE_NumerosACadena”.
Pruebe la página. Esta página permite probar los distintos parámetros de la función NumToString.
A cada vez que deba utilizar la función NumToString y no sabe exactamente que parámetros tiene que utilizar,
utilice el asistente de código propuesto por WEBDEV: este asistente le dará la sintaxis a utilizar en función del
resultado deseado.
En el editor de código, cuando se introduce el nombre de una función seguido del paréntesis
abierto, aparecen varias informaciones en una lista:
Notas
 El nombre del asistente correspondiente a la función. Si selecciona esta opción se lanza un

asistente. Con algunas simples preguntas, este asistente escribirá automáticamente el código
deseado.
 El nombre de un ejemplo que utiliza esta función. Si selecciona esta opción, el ejemplo se
abre automáticamente en el editor.
La función “inversa” de NumToString es la función Val. Esta función permite convertir una cadena en numérico.
Tratamiento de las fechas y de las horas (código servidor y navegador)

Para gestionar simplemente las fechas y las horas en sus aplicaciones, WEBDEV pone a su disposición:
 Un campo de introducción de tipo Fecha, Hora o Duración. Con este campo, no hay ningún problema para
introducir una fecha o una hora válida.
 Un campo etiqueta de tipo Fecha, Hora o Duración. Con este campo, no hay ningún problema para mostrar
una fecha o una hora con formato válido.
 Variables de tipo Fecha, Hora, FechaHora y Duración.Estas variables simplifican la manipulación de fechas
y horas por programación y permiten múltiples cálculos.
Las fechas (código servidor y navegador)

Ejemplo práctico
En el proyecto “WW_Bases_Programacion”, abra la página “PAGE_Date”. Esta página ilustra las explicaciones
que se dan en esta lección.
Máscara de introducción y valor devuelto
Las fechas (como las horas), son cadenas que tienen un formato predefinido.
En un campo de entrada de tipo “Fecha” (o de tipo “Hora”), hay que distinguir:
 Máscara de introducción: es el formato en el que se introducirán la fecha y la hora.
 Valor devuelto (o memorizado): es el valor devuelto por el campo hacia el programa.
Estas informaciones se introducen en la ventana de descripción del campo de entrada.
En la página “PAGE_Date”, muestre la ventana de descripción del campo “Introducir una fecha” (opción
“Descripción” del menú contextual del campo). Muestre la pestaña “General”. Las informaciones mostradas son
las siguientes:

Por ejemplo, para un campo de tipo “Fecha”:
 La máscara de entrada será “DD/MM/AAAA”. La fecha introducida por el usuario será en la forma: “01/11/2013”.
 El valor devuelto será por defecto “AAAAMMDD” (Ejemplo: el valor introducido en la forma “23/04/2013”
devolverá al programa “20130423”).
Existe la posibilidad de elegir una máscara de entrada de tipo “Fecha Sistema”. En este caso, el
formato mostrado será el definido en los “Parámetros regionales del panel de configuración de
Windows” de la máquina donde se va a ejecutar.
Notas
Atención: Los parámetros del sistema de explotación son los del servidor. Si su sitio está en
francés, pero albergado en un servidor inglés, las fechas se propondrán en formato
“MM/DD/AAAA”.
Para comprender la importancia y las relaciones entre la máscara de entrada y el valor devuelto, observemos los
siguientes ejemplos:
 Si la máscara de entrada de un campo fecha es “DD/MM/AA” y el valor devuelto es “AAAAMMDD”:
DateJ = “20131225” // Muestra la fecha de la forma “25/12/13”
DateJ = “131225” // Muestra la fecha de una forma incorrecta
La fecha mostrada será incorrecta.
 Si la máscara de entrada de un campo fecha es “MM/DD/AAAA” y el valor devuelto es “MMAADD”:
DateJ = “131225” // Muestra la fecha de la forma “12/25/2013”
DateJ = “20131225” // Muestra la fecha de una forma incorrecta
La fecha mostrada será incorrecta.
Por lo tanto, deberemos prestar mucha atención al formato del valor devuelto en un campo de tipo
fecha u hora.
Las funciones WLangage que manipulan:
 Las fechas utilizan el formato “AAAAMMDD”.
 Las horas utilizan el formato “HHMMSSCC” (algunas utilizan el formato “HHMMSSCCC”, para la gestión de los
milisegundos).
Recuerde: Por defecto, el formato (máscara de introducción) del campo corresponde a la

máscara fecha definida en la pestaña “Idiomas” de la ventana de descripción del proyecto (en la
pestaña “Proyecto”, dentro del grupo “Proyecto”, clique sobre “Descripción”). Así la misma
Notas
máscara se utilizará automáticamente en todos los campos de tipo Fecha del proyecto.
Esta funcionalidad es igualmente muy útil en los sitios multi-lenguaje.
Vamos ahora a ver como gestionar las fechas por programación.

1. Cierre si es necesario la ventana de descripción del campo.
2. Pruebe la página “PAGE_Date” ( en los botones de acceso rápido).

¿En qué día estamos?
Para conocer la fecha del día, basta con utilizar la función Today (o DateSys). La función Today devuelve la fecha
del sistema de su ordenador en forma de una cadena de caracteres con formato “AAAAMMDD”. Ejemplo:
Info (“Hoy estamos a “ + Today ())
Para probar esta funcionalidad en nuestro ejemplo, clique sobre el botón “FechaDelDia”.
Como podrá constatar, la fecha se muestra en formato “AAAAMMDD”.
Para mostrar la fecha en un formato más explícito, hay que utilizar la función DateToString:
Info (Hoy estamos a “+ DateToString (Today (), MaskSystemDate))
La función DateToString transforma una cadena con formato “AAAAMMDD” al formato elegido. La constante
“MaskSystemDate permite utilizar el formato de fecha definido en la pestaña “Lenguas” de las características del
proyecto.
Recuerde: Para mostrar las características del proyecto, en la pestaña “Proyecto”, dentro del grupo “Proyecto”, clique
Para probar esta funcionalidad en nuestro ejemplo, clique sobre el botón “FechaACadena”.
¿En qué día estamos, pero el día y el mes en letras?

Para mostrar la fecha en todas las letras, hay que utilizar la función DateToString utilizando un formato de fecha
específico:
Info (“Estamos a “+ DateToString (Today (), “DDDD DD MMMM AAAA”))
En este código:
 La cadena “DDDD DD” permite obtener el día en todas sus letras. Por ejemplo: Martes 17.
 La cadena “MMMM” permite obtener el mes en todas sus letras. Por ejemplo: “Septiembre”.
 La cadena “AAAA” permite obtener el año. Por ejemplo: 2013.
Para probar esta funcionalidad en nuestro ejemplo, clique sobre el botón “En letras”.
¿Cuál es el número de días entre dos fechas?

¿Desea saber cuántos días han transcurrido entre dos fechas? Es muy sencillo: utilice la función DateDifference:
NumeroDias is int
NumeroDias = DateDifference (“20100101”, Today ())
InfoBuild (“Número de días entre el %1 y el %2: %3”, …
DateToString (“20100101”, MaskSystemDate), …
DateTiString (Today (), MaskSystemDate), NumeroDias)
Para probar esta funcionalidad en nuestro ejemplo, clique sobre el botón “DiferenciaFechas”.
También es posible obtener la duración entre la fecha del día y una fecha específica en forma de
un texto claro (hay dos días, en tres semanas, …). Basta con utilizar:
 Una máscara de visualización del tipo “Duración relativa”.
Observación
 La función DateToString con la constante maskDateRelativeDuration.

Por ejemplo:
// Si la fecha del día es 22/01/2013
Res = DateToString (“20130101”, maskDateRelativeDuration)
// devuelve: hay 3 semanas
¿Qué día de la semana es una fecha concreta?

Siempre tan sencillo, puede conocerse el día de no importa que fecha con la función DateToDayInAlpha:
J is string
J = DateToDayInAlpha (“17890714”)
Info (“El 14 de Julio de 1789 era un “+ J)
Para probar esta funcionalidad en nuestro ejemplo, clique sobre el botón “Fechaadiaenletra”.
Pequeño ejercicio práctico

Ahora que conoce las fechas, una pregunta: ¿Qué hace el siguiente código?
DateToString (Today(), “DDDD DD MMM AAAA”)
Manipulación de las variables de tipo Fecha

WLangage propone tipos de variables específicos para los valores de tipo Fecha, FechaHora o Duración.
Estas variables son asimilables a las “cadenas”. Cada una contiene un valor según el cuadro siguiente:
Tipo Formato por defecto

Date AAAAMMDD
DateTime AAAAMMDDHHMMSSCC
Duration AAAAMMDDHHMMSSCC
El tipo “Date” permite gestionar las fechas comprendidas entre el “01/01/0001” y el “31/12/9999” ( Se puede estar
tranquilo por una buena temporada).
Más en serio, para manipular el valor de estas variables, puede utilizar las sintaxis siguientes:
MiFecha is Date = “20121021”
Info (DateToString (MiFecha)) // Muestra “21/10/2012”
MiFecha..Year = MiFecha..Year + 1
MiFecha..Month = MiFecha..Month + 1
MiFecha..Day = MiFecha..Day + 1
Info (DateToString (MiFecha)) // Muestra “22/11/2013”
En este código, Year, Month y Day son propiedades WLangage

En la página “PAGE_Date”, el botón “Ejemplo de código” permite calcular el número de días hasta el próximo 1
de enero utilizando una variable de tipo Date.
El código utilizado es el siguiente:
MiFecha is Date
// MiFecha se inicializa automáticamente a la fecha del día
// Cálculo de la fecha del próximo 1 de Enero
NuevoAnyo is Date
NuevoAnyo..Year++
NuevoAnyo..Day = 1
NuevoAnyo..Month = 1
MiDuracion is Duration = NuevoAnyo – MiFecha
Info (StringBuild ( Quedan %1 días antes que llegue el primer día del año”, …
“el %2. “, MiDuracion..InDays, DateToString (NuevoAnyo))
Para implementar las distintas manipulaciones de las fechas le proponemos un pequeño ejercicio:
En la página “PAGE_Date”, dentro de la zona “Su turno”, se le propone un ejercicio:
 En el botón “Su turno”, escriba el código que permita calcular la fecha que será dentro de 180 días y muestre
el resultado en letras.
Corrección: El botón “Corregido” contiene la solución.
Las horas (código servidor y navegador)

Ejemplo práctico
En el proyecto “WW_Bases_Programacion”, abra la página “PAGE_Hora”. Esta página ilustra las explicaciones
ofrecidas en esta lección.
Pruebe esta página.

¿Qué hora es?
Para conocer la hora, hay que utilizar la función Now (o TimeSys). La función Now devuelve la hora actual de su
sistema bajo la forma de una cadena de caracteres con formato “HHMMSSCC”:
Info (ahora son las “ + Now())
Para probar esta funcionalidad en nuestro ejemplo, clique sobre el botón “Ahora”.
¿Desea mostrar la hora en formato estándar “HH:MM:SS:CC”? el código es el siguiente:
Info (“Ahora son las “+ TimeToString (Now ()))
La función TimeToString transforma una hora con formato “HHMMSSCC” en una cadena con formato
“HH:MM:SS:CC”.
Para probar esta funcionalidad en nuestro ejemplo, clique sobre el botón “HoraACadena”.
Para no mostrar las centésimas de segundo, el código es:
Info (“Ahora son las “ + TimeToString (Now (), “HH:MM:SS”))
Basta con precisar el formato de visualización de la hora con la función TimeToString.
Para probar esta funcionalidad en nuestro ejemplo, clique sobre el botón “Sin las centésimas”.
¿Cuánto tiempo ha transcurrido entre dos horas?

Ahora son las 17:25. ¿Cuánto tiempo ha pasado desde las 12:15? El código es el siguiente:
// muestre el tiempo transcurrido desde las 12:15
Diff is int = TimeDifference (“1215”, Now ())
Resultado_Tiempo is Time = IntegerToTime (Abs (Diff))
IF Diff < 0 THEN

InfoBuild (“Tiempo transcurrido antes de las 12:15 -> %1 h %2 min %3 s”, …
Resultado_Tiempo.. Hour, Resultado_Tiempo..Minute, …
Resultado_Tiempo..Second)
ELSE
InfoBuild (“Tiempo transcurrido desde las 12:15-> %1 h %2 min %3 s”, …
Resultado_Tiempo.. Hour, Resultado_Tiempo..Minute, …
Resultado_Tiempo..Second)
END
La función IntegerToTime transforma un entero (que corresponde al número de centésimas de segundo
transcurridas desde la medianoche (o 00:00)) hacia una hora bajo el formato “HHMMSSCC”.
La función TimeToInteger realiza la operación inversa.
 No ponga ningún “:” en la hora pasada como parámetro a la función TimeToString, ya que
Atención!
falseará el resultado.
 Para calcular las duraciones de más de 24 horas, utilice los tipos Fecha, Hora, …
Para probar esta funcionalidad en nuestro ejemplo, clique sobre el botón “Primer ejemplo”.
El mismo cálculo puede efectuarse utilizando las variables de tipo Time o Duration.
WLangage propone tipos de variables específicas para los valores de tipo Date, Time, DateTime o Duration. Estas
variables son asimilables a las “cadenas”. Cada una contiene un valor según el cuadro siguiente:
Tipo Formato por defecto

Time HHMMSSCC
Duration AAAAMMDDHHMMSSCC

El código puede ser:
En12H is Time
En12H..Hour +=12
En12H..Minute += 30
InfoBuild (“En 12 horas y 30 minutos, serán %1”, TimeToString (En12Hm “HH:MM”))
Para probar esta funcionalidad en nuestro ejemplo, clique sobre el botón “Segundo ejemplo”.
Cierre el navegador para volver al editor

Para implementar las distintas manipulaciones de las fechas le proponemos un pequeño ejercicio:
En la página “PAGE_Hora”, dentro de la zona “Su turno”, se le propone un ejercicio:
 En el botón “Su código”, escriba el código que permita mostrar el tiempo que falta hasta las 23:59 con
formato “HH:MM”.
Corrección: El botón “Corregido” contiene la solución.
Cálculos con las fechas y las horas

WLangage posee numerosas funciones para gestionar las fechas y las horas y efectuar los distintos cálculos.
Para más detalles, consulte la ayuda en línea (palabra clave: “Fecha, Funciones WLangage”).

Anexo 3. El editor de código: Preguntas y
Respuestas
 ¿Cómo visualizar el elemento al que pertenece el tratamiento en curso?
 ¿Cómo imprimir el código fuente?
 ¿Cómo hacer una búsqueda y/o reemplazar?
 ¿Qué significan los signos “+” o “-“ en el editor de código?
 ¿Se puede identificar a la persona que ha escrito una línea de código?
 ¿Se puede conocer el número de una línea de código?
 ¿Hay un medio de conseguir fácilmente la sintaxis o la ayuda sobre una función?
 ¿Cuáles son los atajos del teclado a conocer en el editor de código?

Preguntas/Respuestas
Pregunta ¿Cómo visualizar el elemento al que pertenece el tratamiento en curso?
Para visualizar el elemento correspondiente al tratamiento en curso, en el panel “Código”, en el grupo “Navegación”,
clique sobre “Ir al objeto” ([CTRL]+[ALT]+[F2]). Se muestra la página que contiene el elemento deseado.
Pregunta ¿Cómo imprimir el código fuente?
El código fuente en curso puede imprimirse directamente clicando sobre el icono en el panel “Inicio” o con la
combinación de teclas [CTRL]+[P].
Pregunta ¿Cómo hacer una búsqueda y/o reemplazar?
Las funciones de búsqueda o de reemplazamiento (en el código, el interface, …) son accesibles desde el panel
“Inicio”, en el grupo “Buscar” o en la pestaña “Buscar – Reemplazar” ([CTRL]+[F]):
Podrá a continuación las distintas características de la búsqueda a efectuar.
Pregunta ¿Qué significan los signos “+” o “-“ en el editor de código?
El editor de código permite colapsar o desplegar el código WLangage. Esta funcionalidad es muy útil si sus
tratamientos utilizan numerosas instrucciones estructuradas (bucles, condiciones, recorridos, …).
Para replegar el código, en el panel “Visualización”, despliegue “Replegar” y seleccione la opción de menú “Replegar
todo” (o el atajo [CTRL]+[SHIFT]+[*] (del teclado numérico)).
Solo los comentarios quedarán visibles. Pasando sobre cada línea de comentario permite visualizar el código asociado
dentro de una burbuja:

La combinación de teclas [CTGRL]+[*] (del teclado numérico) permite desplegar todo el código. El clic sobre los
símbolos “-“ o “+” permite plegar o desplegar solamente la parte de código correspondiente.
Pregunta ¿Se puede identificar a la persona que ha escrito una línea de código?
Pulsando la tecla [F6] se pueden mostrar las informaciones (nombre y fecha de la creación/modificación) de cada
línea de código.
Pregunta ¿Se puede conocer el número de una línea de código?
En el editor de código, para activar (o no) la numeración de las líneas de código, en el panel “Visualizar”, dentro del
grupo “Ayuda a la edición”, clique sobre “Mostrar los números de línea”. El atajo correspondiente es
[CTRL]+[SHIFT]+[G].
Pregunta ¿Hay un medio de conseguir fácilmente la sintaxis o la ayuda sobre una función?
Al escribir una función se muestra la sintaxis de la función:

 En una burbuja de ayuda debajo de la línea en curso de introducción. Para cada parámetro (incluyendo el
resultado de la función), se muestra una burbuja explicativa.
Si hay varias sintaxis disponibles, se puede pasar de una sintaxis a otra con las teclas [CTRL]+[ALT]+ flecha
derecha o flecha izquierda.
 En la barra de mensajes del editor.
En la ayuda mostrada, los parámetros encerrados entre [ y] son opcionales.
Para las funciones que utilizan los nombres de ficheros de datos, campos, páginas o informes, la entrada asistida
permite mostrar la lista de los elementos del proyecto correspondientes al parámetro de la función en curso de
introducción.
Ejemplo de entrada asistida para la función HReadFirst: La opción <Asistente> permite lanzar un asistente del
código. Este asistente plantea distintas cuestiones para el uso de la función y genera automáticamente el código
correspondiente.
Todas las funciones y las propiedades de WLangage tienen una ayuda asociada. Esta ayuda es accesible directamente
desde el editor pulsando la tecla [F1] sobre el nombre de la función o la propiedad deseada.

Pregunta ¿Cuáles son los atajos del teclado a conocer en el editor de código?
 [CTRL]+[L] Elimina la línea en curso.

 [CTRL]+[D] duplica la línea en curso (o las líneas seleccionadas) en la línea siguiente.
 [TAB] y [SHIFT]+[TAB] permiten gestionar la sangria del conjunto de las líneas seleccionadas.
 [CTRL]+[/] pone como comentario las líneas seleccionadas. [CTRL]+[SHIFT]+[/] elimina los comentarios
(Atención: tecla [/] del teclado numérico.
 [F2] sobre el nombre de un campo, de un método de una clase, de un procedimiento o de un bloque de
informe, muestra el tratamiento de este objeto.
 [CTRL]+[F2] permite evolver al tratamiento inicial.
Pulsando repetidamente la Tecla [F2] podrá desplazarse de un tratamiento a otro. Para volver al tratamiento
inicial, hay que pulsar a la vez las teclas [CTRL]+[F2].
 [CTRL]+[R] permite aplicar automáticamente la sangría al código mostrado.

Conclusión
El curso ya ha terminado!
Este curso ha abordado un conjunto de sujetos, pero no la totalidad de funcionalidades de WEBDEV, ni mucho
menos!
Ahora se ha familiarizado con los principales conceptos.
Explore también los ejemplos proporcionados con WEBDEV: algunos son simples y no tratan más que un sujeto, y
otros son más complejos. Estos ejemplos le mostrarán las distintas facetas de WEBDEV. La lectura del código fuente
será igualmente instructiva en general.
Por falta de espacio, no hemos podido abordar todos los sujetos (hay centenares, tal vez millares!). WEBDEV ofrece
numerosas posibilidades no abordadas o no profundizadas en este curso:
 Funciones HTTP
 Informes anidados, consultas parametrizadas, …
 Compilación dinámica, llamadas a DLL’s, …
Para más detalles sobre todas estas posibilidades, solo necesita consultar la ayuda en línea.
Recuerde: Para recibir directamente las actualizaciones intermedias y consejos de uso, abónese a la LST (Revista
trimestral + DVD), en francés.
Le deseamos buenos desarrollos con WEBDEV 21, AGL número 1 en Francia!

Auto-Formación WEBDEV - 21

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Auto-Formación WEBDEV - 21

Cargado por

Copyright:

Formatos disponibles

WEBDEV 21 |1

Dirección de Soporte técnico gratuito: supportgratuit@pcsoft.fr

Presentación del curso de autoformación.

Desde la edición de este documento, el curso de auto-formación puede haber evolucionado. No

línea”, despliegue “Guía de Auto-formación” y seleccione la opción “Guía de Auto-formación

¿Cómo acceder a la ayuda en línea?

Cada internauta puede añadir comentarios en las páginas de documentación: explicaciones

Leyenda de los símbolos

Este símbolo presenta una “Advertencia”: la lectura del texto es primordial.

Este símbolo presenta una “Nota”: la lectura del texto es aconsejable.

¿Qué puedo hacer con WEBDEV?

Capítulo 1 – Descubriendo WebDev |18

Tiempo estimado: 5 min

Capítulo 1 – Descubriendo WebDev |19

Detengámonos un instante en el entorno de desarrollo de WEBDEV.

Capítulo 1 – Descubriendo WebDev |20

Los distintos elementos de la cinta:

Capítulo 1 – Descubriendo WebDev |21

Capítulo 1 – Descubriendo WebDev |22

Tiempo estimado: 30 min

Capítulo 1 – Descubriendo WebDev |23

Capítulo 1 – Descubriendo WebDev |24

1. En el panel “Inicio”, en el grupo “Entorno”, despliegue “Pestañas”.

Capítulo 1 – Descubriendo WebDev |25

Por ejemplo, para el campo botón, los tratamientos asociados son:

// Se verifica que el campo “EDT_Nombre” es igual a una cadena vacía

// RESET de la estructura cliente

Cierre la página mostrada en el editor (utilice el aspa arriba a la derecha).

Capítulo 1 – Descubriendo WebDev |27

 Valide la ventana de descripción de la página.

El método para crear un sitio

Capítulo 1 – Descubriendo WebDev |28

Capítulo 1 – Descubriendo WebDev |29

Tiempo estimado: 30 min

Capítulo 1 – Descubriendo WebDev |30

actuar directamente sobre las páginas por medio de campos, botones, …

En este capítulo, nos vamos a concentrar en la creación de páginas sencillas. El proyecto

“Mis_Primeras_Páginas” es un proyecto vacío, ya creado. La creación del proyecto será abordado

línea”, despliegue “Guía de Auto-formación” y luego selecciones “Mis primeras páginas

Creación de una página “formulario”

1. Clique sobre en los botones de acceso rápido:

Capítulo 1 – Descubriendo WebDev |31

1. En el panel “Creación”, en el grupo “Campos habituales, clique sobre (bajo de “Introducción”).

2. El campo en creación seguirá el movimiento del ratón.

Capítulo 1 – Descubriendo WebDev |32

disponibles son accesibles en este panel.

Para modificar el texto de un campo:

Capítulo 1 – Descubriendo WebDev |33

Texto Tipo Tamaño

Capítulo 1 – Descubriendo WebDev |34

 El campo de entrada “Dirección” permite introducir varias líneas.

Para alinear los campos de la página:

Si le convence el posicionamiento, clique sobre la opción.

Modificación del estilo de los campos “Login” y “Contraseña”.

Capítulo 1 – Descubriendo WebDev |36

Para reutilizar el estilo creado y asociarlo a otro campo:

5. Valide la ventana de descripción del campo “Login”.

Capítulo 1 – Descubriendo WebDev |37

3. Se obtendrá el siguiente interface:

Guardar los datos en un fichero de datos.

7. Avance al paso siguiente.

Capítulo 1 – Descubriendo WebDev |39

10. Avance al paso siguiente.