webstencils demo

Demo de píotulos web

Delphi 12.2 introdujo WebStencils, una forma basada en script de procesar texto similar a la tecnología ASP.NET Razor. Su uso principal es generar HTML dinámico a partir de una aplicación de servidor Webbroker, pero se puede usar de otras maneras para generar XML, JSON o cualquier tipo de salida textual de una plantilla.

Este repositorio contiene un par de aplicaciones Webbroker de Delphi 12.2 muy simples (se ejecuta como programas de Windows VCL que inician un navegador web) para comparar plantillas hechas con las etiquetas de estilo HTML utilizadas en los componentes TPageProducer , con las nuevas etiquetas de símbolos "@" utilizadas en los nuevos componentes de TWebStencilsProcessor . Todos los archivos del proyecto y HTML están en una carpeta y los dos proyectos comparten un módulo de datos para acceder a la base de datos Chinook SQLite (no incluida).

Hay cinco páginas en cada aplicación, hechas para parecer idénticas para que pueda concentrarse en la tecnología de plantilla:

1. Índice (presenta una página de inicio de sesión)
2. Error de inicio de sesión
3. Lista de clientes (enumera a los clientes en una tabla)
4. Edición del cliente (presenta una página de edición para el cliente seleccionado)
5. Una página de error (para prevenir el acceso no autorizado)

Los archivos HTML referenciados por los dos proyectos se nombran para dejar en claro con qué proyecto/tecnología trabajan:

Plantilla de Página de Page tradicional Archivos HTML:

• index-wbroker.html
• loginfailed-wbroker.html
• custlist-wbroker.html
• custedit-wbroker.html
• accessdenied-wbroker.html

Nuevos archivos HTML de plantilla de WebStencils:

• index-wStencils.html
• login-failed-wStencils.html
• custlist-wStencils.html
• custedit-wStencils.html
• accessdenied-wStencils.html
• custlistframework1.html

Observe que hay un archivo más en la colección WebStencils, es una plantilla de marco para cada página web generada a partir de las acciones de WebStencils y se combina a partir de las cuerdas de encabezado y pie de página incrustadas en los productores de páginas utilizados en el proyecto tradicional de Webbroker.

Construyendo los proyectos

Antes de intentar compilar o ejecutar, debe descargar la base de datos de muestra Chinook. Esta es una base de datos popular utilizada para tutoriales y demostraciones y se puede encontrar en muchos lugares diferentes. Utilizo DBeaver, una herramienta de base de datos gratuita, y la encontré envuelto con eso.

Una vez que tenga chinook.db en la misma carpeta que el proyecto, debe abrir el módulo de datos (utilizado por ambos proyectos), udmCust y modificar el componente TFDConnection para especificar la ubicación del archivo de la base de datos. También sugeriría usar una herramienta de base de datos o el explorador de datos de Delphi para ver las tablas en la base de datos.

Delphi 12.2 se utilizó para crear y probar estos programas (que no usan componentes de terceros).

Ejecutando las demostraciones

Ambas demostraciones se crean como programas de GUI de Webster Windows, lo que significa que se ejecutan como un pequeño programa de Windows VCL que abre un puerto para escuchar las solicitudes web con un botón para iniciar su navegador web predeterminado. La versión de PageProducer escucha en el puerto 8081 y la versión WebStencils escucha en el puerto 8082 para que pueda ejecutar ambos simultáneamente si lo desea.

La primera página enumerada es una página de inicio de sesión. Se debe ingresar un inicio de sesión válido antes de llevarlo a la lista de clientes. Un inicio de sesión válido es cualquier usuario en la tabla de empleados donde:

• El nombre de usuario es el FirstName , insensible al caso;
• La contraseña es una concatenación del EmployeeId y el LastName , Sensitive .

Por ejemplo, la primera entrada en la base de datos de muestra que descargué tenía el siguiente primer empleado:

• ID : 1
• FirstName : Andrew
• LastName : Adams

Por lo tanto, para iniciar sesión con este empleado:

• Nombre de usuario: ANDREW (caja superior o inferior o mixta)
• Contraseña: 1Adams (exactamente)

Una vez que se registra, se muestra la lista de clientes. La ID de cada cliente (columna más izquierda) es un enlace que lo lleva a una pantalla de "editar" que enumera todos los campos de clientes en los cuadros de edición. El botón Enviar no guarda cambios ni hace nada más que llevarlo de regreso a la lista de clientes.

Nombres de la mesa

He usado dos bases de datos de muestra "Chinook" diferentes, una tenía nombres de mesa singulares (por ejemplo, "cliente" y "empleado"), mientras que el otro tenía plural (por ejemplo, " clientes " y " empleados ")); Si el que obtiene es diferente al de este repositorio, simplemente cambie los nombres y consultas de la tabla para que coincidan.

¿Por qué las tablas HTML?

La lista de clientes se construye utilizando las viejas etiquetas de tabla HTML ( <table> , <tr> , <td> , etc.) porque esa es la forma simple y predeterminada que se realizaron las aplicaciones de servidor WebBroker antiguas utilizando los componentes TDataSetTableProducer . La nueva versión webstencils crea el mismo resultado HTML para que pueda comparar cómo se hace y las páginas web resultantes serán casi idénticas. Los sitios web modernos típicamente construyen tablas de estilo CSS, un beneficio que se puede realizar cambiando de datos de datos de datos a los píldeles web.

Blog

Lea mi blog "Introducir Webstencils" para obtener más información sobre la tecnología detrás de estos programas y por qué WebStencils es genial.