sgcHTML en cinco minutos

sgcHTML convierte Object Pascal en HTML. Construyes una página como un árbol de componentes, lees una propiedad de tipo cadena y escribes esa cadena en una respuesta HTTP. Esta página hace exactamente eso y después te señala lo que querrás a continuación: formularios, rejillas, gráficos y htmx.

Bootstrap 5 y htmx, en el lado del servidor
Sin JavaScript que escribir
Windows, Linux y macOS

Lo que necesita la primera página

Un componente de página que se renderiza a sí mismo en una cadena y un servidor HTTP que entrega esa cadena a un navegador. Dos objetos.

El componente de página

TsgcHTMLComponent_Site, declarado en sgcHTML_Component_Site.pas y registrado en la página SGC HTML de la paleta. Renderiza una estructura completa: navegación, barra lateral, tema y contenido.

La propiedad que importa

HTML, heredada de TsgcHTMLComponent. Es de solo lectura, y leerla renderiza el árbol de componentes actual en un documento HTML completo.

El servidor

Cualquier cosa capaz de escribir una cadena en una respuesta HTTP. La demo incluida usa TsgcWSHTTPServer de sgcWebSocket_Server.pas cuando hay una compilación Professional disponible, y recurre a TIdHTTPServer en caso contrario.

Plataformas

Solo escritorio y servidor. SGC_HTML se define dentro de {$IFNDEF ANDROID} y {$IFNDEF IOS}, así que en móvil cada unit de sgcHTML se compila a nada. Windows, macOS y Linux funcionan sin problema.

Requisitos y ediciones

La columna de edición es el define que controla el código, con la línea en la que se encuentra en Source/sgcVer.inc.

Qué Valor
IDE Delphi 7 hasta RAD Studio 13, y C++Builder 2007 hasta 13. Lazarus también es compatible, y se incluye una demo de ERP que se ha ejecutado en Linux.
Cláusula uses sgcHTML_Component_Site para la estructura de la página, más las units de nodos que realmente uses, por ejemplo sgcHTML_Nodes, sgcHTML_Nodes_Bootstrap, sgcHTML_Nodes_Table, sgcHTML_Nodes_Forms y sgcHTML_Nodes_Charts.
Define del paquete SGC_PACK_HTML se define en la línea 871, dentro del bloque {$IFDEF SGC_EDT_ALL} que va de la línea 870 a la 874. En el árbol de código de sgcWebSockets eso significa que lo activa la edición All-Access. sgcHTML también se vende como producto propio, con su propio instalador y su propia licencia.
Defines de características Dentro del bloque {$IFDEF SGC_PACK_HTML} en las líneas 882 a 892: SGC_HTML en la línea 885 y SGC_HTMX en la línea 886, ambos dentro de {$IFNDEF ANDROID} en la 883 y {$IFNDEF IOS} en la 884. SGC_HTML_CONTROL, la superficie visual en tiempo de diseño, está en la línea 888 dentro de {$IFDEF MSWINDOWS} en la 887.
Qué significa en móvil Cada unit de sgcHTML envuelve su interfaz en {$IFDEF SGC_HTML}, así que una compilación para Android o iOS las convierte en units vacías. Es una biblioteca del lado del servidor, y ese es el objetivo: el teléfono recibe HTML, no Pascal.
Registro La página de la paleta se registra solo cuando están definidos tanto SGC_PACK_HTML como SGC_HTML.

¿Qué componentes existen? Alrededor de ochenta, desde una rejilla y un planificador hasta gráficos, un editor enriquecido, un código QR y un escáner de cámara. La matriz de características los agrupa por área, y cada uno tiene su propia página en componentes.

Instala y localiza la página de la paleta

sgcHTML se distribuye como paquete propio y también dentro de la compilación All-Access de sgcWebSockets. La instalación tiene la misma forma.

1. Descomprime

Descomprime la descarga en una carpeta, llamada {$DIR} más abajo.

2. Ruta de biblioteca

Tools, Options, Library. Añade {$DIR}\source y la carpeta lib de tu IDE, por ejemplo {$DIR}\libD13\$(Platform).

3. Compila los paquetes

Abre el grupo de paquetes de tu versión de IDE en {$DIR}\Packages\. Compila primero el .dpk de runtime y después instala el de tiempo de diseño, el dcl. Lazarus usa el .lpk en su lugar.

4. Comprueba la paleta

Aparece una página llamada SGC HTML, con unos ochenta componentes. Si falta en un destino Android o iOS es lo esperado, porque SGC_HTML está excluido ahí.

5. Ejecuta primero una demo

Abre {$DIR}\Demos\60.HTML\01.RunTime\07.Site, compílala y ejecútala. Es un servidor de consola, imprime su propia URL y de ella procede el código de más abajo.

Una página en Pascal, servida por HTTP

Construye la página, lee la propiedad HTML y escríbela en la respuesta. La primera pestaña es la página, la segunda es el servidor y la tercera es el programa de consola completo.

sgcSiteDemo_Pages.pas
uses
  SysUtils, Classes,
  // sgc
  sgcHTML_Component_Site;

class function TsgcSiteDemoPages.BuildPage: string;
var
  oSite: TsgcHTMLComponent_Site;
begin
  oSite := TsgcHTMLComponent_Site.Create(nil);
  try
    oSite.Title := 'sgcHTML Site Layouts';
    oSite.Layout := slSidebarLeft;

    oSite.AddMenu('Dashboard', '/');
    oSite.AddMenu('Customers', '/?page=customers');

    oSite.AddSection('Welcome', '<p>Served from Delphi.</p>');

    // reading HTML is what runs the render
    Result := oSite.HTML;
  finally
    oSite.Free;
  end;
end;

Layout acepta un TsgcHTMLSiteLayout: slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail o slOffcanvas. El valor por defecto es slTopNavSidebarLeft, así que la línea anterior solo está para mostrar el cambio.

sgcSiteDemo_Server.pas
uses
  SysUtils, Classes,
  // sgc
  sgcWebSocket_Server,
{$IFDEF SGC_INDY}
  sgcIdContext, sgcIdCustomHTTPServer;
{$ELSE}
  IdContext, IdCustomHTTPServer;
{$ENDIF}

constructor TsgcSiteDemoServer.Create;
begin
  inherited Create;
  FPort := 8092;
  FHTTP := TsgcWSHTTPServer.Create(nil);
  FHTTP.Port := FPort;
  FHTTP.OnCommandGet := HandleCommandGet;
end;

procedure TsgcSiteDemoServer.Start;
begin
  FHTTP.Active := True;
end;

procedure TsgcSiteDemoServer.SendHTML(AResponseInfo: TIdHTTPResponseInfo;
  const aHTML: string);
begin
  AResponseInfo.ResponseNo := 200;
  AResponseInfo.ContentType := 'text/html; charset=utf-8';
  AResponseInfo.ContentText := aHTML;
end;

Las units de Indy son condicionales porque una compilación con la biblioteca Indy personalizada las ve como sgcIdContext y sgcIdCustomHTTPServer, y una compilación con Indy estándar como IdContext y IdCustomHTTPServer. La demo incluida lleva exactamente ese condicional. Sirve cualquier servidor capaz de escribir una cadena. La demo incluida elige TsgcWSHTTPServer cuando hay una compilación Professional disponible y recurre a TIdHTTPServer en caso contrario, y por eso la demo tiene un condicional ahí y este extracto no.

sgcSiteDemoServer.dpr
program sgcSiteDemoServer;

{$APPTYPE CONSOLE}

uses
  SysUtils,
  sgcSiteDemo_Server in 'sgcSiteDemo_Server.pas',
  sgcSiteDemo_Pages in 'sgcSiteDemo_Pages.pas';

var
  oServer: TsgcSiteDemoServer;
begin
  oServer := TsgcSiteDemoServer.Create;
  try
    oServer.Start;
    WriteLn('sgcHTML Site Layouts Demo - http://localhost:' +
      IntToStr(oServer.Port));
    WriteLn('Press Enter to stop.');
    ReadLn;
    oServer.Stop;
  finally
    oServer.Free;
  end;
end.

Una aplicación de consola, así que no hay formulario ni VCL que configurar. Es el programa sgcHTML más corto posible, y es lo que realmente es la demo incluida.

Las tres pestañas proceden de la demo incluida Demos\60.HTML\01.RunTime\07.Site, recortada a las partes que importan. El proyecto completo también cambia el diseño, el tema y el esquema de colores desde la cadena de consulta, algo que merece la pena leer cuando la primera página ya se renderice.

Confirma que la página se renderizó

El programa imprime la URL en la que escucha. Ábrela y prueba después los selectores.

La URL que imprime

El programa escribe http://localhost:8092 en la consola al arrancar. Ábrela. Una página con navegación, barra lateral y tu contenido significa que el renderizado y el servidor funcionan.

Active

FHTTP.Active := True o bien funciona o bien lanza una excepción. Si algo más ya ocupa el puerto 8092 te enteras aquí.

El tipo de contenido

Un navegador que muestra el marcado en bruto en lugar de una página significa que la respuesta salió sin text/html. Define ContentType antes de asignar ContentText.

Cambia un diseño

La demo incluida lee layout, theme y mode de la cadena de consulta, de modo que ?layout=topnav&mode=dark vuelve a renderizar la misma página de otra manera. Es la forma más rápida de ver lo que hace el componente.

Lo que suele fallar la primera vez

Seis problemas explican casi todos los primeros intentos que no se renderizan.

La página de la paleta nunca aparece

El registro necesita tanto SGC_PACK_HTML como SGC_HTML. El primero se define en la línea 871 dentro del bloque All-Access, el segundo en la línea 885 dentro del bloque del paquete. En un destino Android o iOS el segundo está ausente a propósito.

La página está en blanco

Construiste el árbol pero nunca leíste HTML. Esa propiedad es la que ejecuta el renderizado. Leerla es todo el paso de renderizado, y devuelve un documento completo, no un fragmento.

No cambia nada al editar la página

La demo construye un TsgcHTMLComponent_Site nuevo en cada petición y lo libera después. Si guardas el objeto en caché y lo reutilizas, acuérdate de vaciar su contenido con ClearContent antes de reconstruirlo.

El navegador muestra marcado en bruto

Nunca se definió el tipo de contenido de la respuesta. La demo define ContentType := 'text/html; charset=utf-8' antes de escribir el cuerpo, y sin ello algunos clientes mostrarán el HTML como texto.

Estás escribiendo cadenas HTML a mano

No hace falta. Hay units de nodos para el diseño Bootstrap, tablas, formularios y gráficos, y el sentido de la biblioteca es que compongas esos nodos en lugar de concatenar marcado.

El puerto ya está ocupado

La demo escucha en el 8092. Si algo más ocupa ese puerto el servidor no arrancará, así que cambia el puerto antes de buscar un problema más profundo.

Lo que se construye después de la primera página

Cuatro direcciones, todas dentro del mismo paquete.

Formularios que envían datos

La unit de nodos de formularios construye entradas, selectores, validación y diseño, y htmx los envía sin recargar la página. El escape se gestiona por ti cuando construyes nodos en lugar de cadenas.

Componentes de formulario

Datos en la página

Una rejilla con ordenación, filtrado y paginación, además de gráficos, tarjetas de estadísticas, un planificador, un diagrama de Gantt y un componente de diagramas.

Matriz de características

Aplicaciones completas

Se incluyen doce demos de runtime, desde un panel de ERP hasta un punto de venta, un helpdesk, un almacén y una app de servicio en campo. Son la forma más rápida de ver la biblioteca a escala real.

Galería de demos

Aprovecha tu capa web existente

Hay componentes para WebBroker y DataSnap, de modo que una aplicación web Delphi existente puede renderizar páginas sgcHTML sin reescribirse.

WebBroker y DataSnap

Referencia, demos y documentación

El catálogo lista cada componente con una vista previa. Los proyectos de demo se incluyen dentro de la descarga, en Demos\60.HTML.

Página de TsgcHTMLComponent_Site La estructura de página sobre la que se apoya este inicio rápido, propiedad por propiedad.
Matriz de características Diseño, formularios, datos, gráficos, autenticación, chat y el resto, agrupados por área.
Galería de demos Las demos de runtime incluidas, cada una con un vídeo corto.
WebBroker y DataSnap Renderizar páginas sgcHTML desde una capa web Delphi existente.
Descarga la versión de prueba El mismo instalador que en producción, con límite de tiempo.
Ayuda en línea La referencia generada, siempre al día con la versión actual.

Lecturas relacionadas: el componente Site, componentes de interfaz web en Delphi, formularios más inteligentes y tablas de datos. Cada producto tiene su propio inicio rápido, listado en la página de primeros pasos.

Preguntas sobre el inicio rápido de sgcHTML

TsgcHTMLComponent_Site, de la unit sgcHTML_Component_Site.pas. Renderiza una estructura de página completa, así que obtienes navegación, barra lateral, tema y área de contenido sin ensamblarlos tú. Constrúyelo, llama a AddMenu y a AddContent o AddSection, y lee después la propiedad HTML. La demo Site incluida hace exactamente eso.
Lo escribes tú mismo en una respuesta HTTP. HTML es una propiedad string normal, así que sirve cualquier servidor. La demo incluida usa TsgcWSHTTPServer en una compilación Professional y recurre a TIdHTTPServer en caso contrario, define ResponseNo := 200 y ContentType := 'text/html; charset=utf-8', y asigna la cadena a ContentText.
La puerta es SGC_PACK_HTML, definido en la línea 871 de sgcVer.inc, dentro del bloque {$IFDEF SGC_EDT_ALL} que va de la línea 870 a la 874. En ese árbol de código lo define la edición All-Access. sgcHTML también se vende como producto propio con su propio instalador, así que consulta la página de precios de sgcHTML para ver las licencias actuales en lugar de deducirlas del define.
No, y es deliberado. SGC_HTML se define en la línea 885 dentro de {$IFNDEF ANDROID} en la línea 883 y {$IFNDEF IOS} en la línea 884, así que en esos destinos cada unit de sgcHTML se compila a una unit vacía. Es una biblioteca del lado del servidor: el teléfono recibe HTML por la red, y por eso el destino móvil no necesita el renderizador. Windows, macOS y Linux son compatibles.
No. La biblioteca emite marcado Bootstrap 5 y atributos htmx, y htmx es lo que hace que un botón envíe datos y cambie parte de la página sin recargar. Tú describes la interacción en Pascal y los atributos se generan por ti. Aun así puedes añadir tu propio script cuando quieras, mediante CustomHead y BodyEndHTML.
Sí. Layout acepta un TsgcHTMLSiteLayout, cuyos miembros son slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail y slOffcanvas, y por defecto vale slTopNavSidebarLeft. Preset acepta un TsgcHTMLSitePreset con miembros como spAdmin, spDashboard, spPortal, spDocs, spLanding y spApp. Los colores y el modo claro u oscuro están en el objeto Theme.
Cuando construyes la página con nodos, sí, porque el nodo escribe el texto y lo escapa. El riesgo aparece cuando te saltas los nodos y concatenas marcado tú mismo, por ejemplo mediante AddContent con una cadena construida a partir de datos del usuario. Prefiere las units de nodos para cualquier cosa que lleve datos del usuario.
La descarga incluye diecisiete demos de runtime en Demos\60.HTML\01.RunTime, entre ellas un panel de ERP, un helpdesk, un punto de venta, un almacén, una app de informes y una app de servicio en campo. La galería tiene un vídeo corto de cada una.
La mejor opción: All-AccessTodos los productos de eSeGeCe, con Premium Support incluido, desde €1,059 al año.
Ver precios de All-Access

¿Listo para construir una interfaz web en Pascal?

Descarga la versión de prueba y ejecuta la demo Site antes de escribir una línea de marcado.