sgcHTML in cinque minuti

sgcHTML trasforma Object Pascal in HTML. Costruisci una pagina come albero di componenti, leggi una proprietà di tipo stringa e scrivi quella stringa in una risposta HTTP. Questa pagina fa esattamente questo, poi ti indica le parti che vorrai usare dopo: form, griglie, grafici e htmx.

Bootstrap 5 e htmx, lato server
Nessun JavaScript da scrivere
Windows, Linux e macOS

Il percorso di 5 minuti: progetta una pagina su un form

Trascina quattro tipi di componente su un form VCL, imposta le loro proprietà nell'Object Inspector ed esegui. La pagina viene costruita a partire dal form, quindi non c'è HTML da scrivere e basta una sola riga di codice. Richiede sgcWebSockets 2026.10 o successivo.

Componente Cosa impostare
TsgcHTTPServer Port, per esempio 8081. È il server a cui si connette il browser. Con sgcWebSockets Professional, Enterprise o All-Access puoi inserire invece un TsgcWebSocketHTTPServer e ottenere il push WebSocket.
TsgcHTMLDesignServer Server punta al server HTTP, Surface alla superficie di progettazione, e PagePath è l'indirizzo della pagina, per esempio /.
TsgcHTMLDesignSurface Title della pagina e le Actions che eseguono codice Delphi quando l'utente fa clic o invia un modulo.
Componenti sgcHTML Il contenuto della pagina. Per esempio un TsgcHTMLComponent_Panel con il suo Title e Body.

L'unica riga di codice è HTTPServer.Active := True, nell'evento OnCreate del form:

uHelloWorld.pas
procedure TfrmHelloWorld.FormCreate(Sender: TObject);
begin
  { Start listening. From now on http://127.0.0.1:8081/ shows the page. }
  HTTPServer.Active := True;
end;

Cosa fa il DesignServer

Costruisce la pagina a partire dal form, serve Bootstrap, htmx e Chart.js dall'eseguibile, esegue il rendering in modo sicuro tra i thread del server e risponde 404 a qualsiasi percorso che non conosce.

Clic e invii eseguono codice Delphi

Aggiungi un'azione alla surface, imposta Source e Target nell'Object Inspector e fai doppio clic su OnExecute. È l'OnClick lato server. Il Target viene aggiornato sul posto, senza ricaricare la pagina.

Sei demo QuickStart

Sono incluse in Demos\60.HTML\00.QuickStart: 01.HelloWorld, 02.Components, 03.Events, 04.Forms, 05.Database e 06.Pages. Il codice qui sopra proviene da 01.HelloWorld.

Preferisci costruire la pagina nel codice? Il resto di questa pagina fa lo stesso da un programma console, senza alcun form.

Cosa serve per la prima pagina

Un componente pagina che si renderizza in una stringa e un server HTTP che consegna quella stringa a un browser. Due oggetti.

Il componente pagina

TsgcHTMLComponent_Site, dichiarato in sgcHTML_Component_Site.pas e registrato nella pagina SGC HTML della palette. Renderizza un'intera struttura: navigazione, barra laterale, tema e contenuto.

L'unica proprietà che conta

HTML, ereditata da TsgcHTMLComponent. È di sola lettura e leggerla renderizza l'albero dei componenti corrente in un documento HTML completo.

Il server

Qualsiasi cosa che sappia scrivere una stringa in una risposta HTTP. La demo inclusa usa TsgcWSHTTPServer da sgcWebSocket_Server.pas quando è disponibile una build Professional e ripiega su TIdHTTPServer in caso contrario.

Piattaforme

Solo desktop e server. SGC_HTML è definito dentro {$IFNDEF ANDROID} e {$IFNDEF IOS}, quindi su dispositivi mobili ogni unit sgcHTML viene compilata in nulla. Windows, macOS e Linux vanno tutti bene.

Requisiti ed edizioni

La colonna dell'edizione indica il define che regola il codice, con la riga in cui si trova in Source/sgcVer.inc.

Cosa Valore
IDE Da Delphi 7 a RAD Studio 13 e da C++Builder 2007 a 13. È supportato anche Lazarus ed è inclusa una demo ERP che è stata eseguita su Linux.
Clausola uses sgcHTML_Component_Site per la struttura della pagina, più le unit di nodi che usi davvero, per esempio sgcHTML_Nodes, sgcHTML_Nodes_Bootstrap, sgcHTML_Nodes_Table, sgcHTML_Nodes_Forms e sgcHTML_Nodes_Charts.
Define del pacchetto SGC_PACK_HTML è definito alla riga 871, dentro il blocco {$IFDEF SGC_EDT_ALL} che va dalla riga 870 alla riga 874. Nell'albero dei sorgenti di sgcWebSockets significa che lo attiva l'edizione All-Access. sgcHTML è venduto anche come prodotto a sé, con il proprio installer e la propria licenza. Quel prodotto include il runtime sgcWebSockets Core e serve le pagine con TsgcHTTPServer. I componenti server WebSocket non sono inclusi. Sono compresi in sgcWebSockets Professional, Enterprise o All-Access.
Define delle funzionalità Dentro il blocco {$IFDEF SGC_PACK_HTML} alle righe da 882 a 892: SGC_HTML alla riga 885 e SGC_HTMX alla riga 886, entrambi dentro {$IFNDEF ANDROID} alla 883 e {$IFNDEF IOS} alla 884. SGC_HTML_CONTROL, la superficie visuale di design-time, è alla riga 888 dentro {$IFDEF MSWINDOWS} alla 887.
Cosa significa su dispositivi mobili Ogni unit sgcHTML racchiude la propria interfaccia in {$IFDEF SGC_HTML}, quindi una build per Android o iOS le compila come unit vuote. È una libreria lato server, ed è proprio questo il punto: il telefono riceve HTML, non Pascal.
Registrazione La pagina della palette viene registrata solo quando sono definiti sia SGC_PACK_HTML sia SGC_HTML.

Quali componenti esistono? Circa ottanta, da una griglia e uno scheduler ai grafici, un editor rich text, un codice QR e uno scanner da fotocamera. La matrice delle funzionalità li raggruppa per area e ciascuno ha la propria pagina in componenti.

Installa e trova la pagina della palette

sgcHTML è distribuito come package a sé e anche dentro la build All-Access di sgcWebSockets. L'installazione ha la stessa forma.

1. Decomprimi

Decomprimi il download in una cartella, chiamata {$DIR} qui sotto.

2. Library path

Tools, Options, Library. Aggiungi {$DIR}\source e la cartella lib per il tuo IDE, per esempio {$DIR}\libD13\$(Platform).

3. Compila i package

Apri il gruppo di package per la versione del tuo IDE in {$DIR}\Packages\. Compila prima il .dpk di runtime, poi installa quello di design-time dcl. Lazarus usa invece il .lpk.

4. Controlla la palette

Compare una pagina chiamata SGC HTML, con circa ottanta componenti. Se manca su un target Android o iOS è previsto, perché lì SGC_HTML è escluso.

5. Esegui prima una demo

Apri {$DIR}\Demos\60.HTML\01.RunTime\07.Site, compilala ed eseguila. È un server console, stampa il proprio URL ed è da qui che proviene il codice qui sotto.

Una pagina in Pascal, servita via HTTP

Costruisci la pagina, leggi la proprietà HTML, scrivila nella risposta. La prima scheda è la pagina, la seconda è il server, la terza è l'intero programma console.

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 accetta un TsgcHTMLSiteLayout: slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail oppure slOffcanvas. Il valore predefinito è slTopNavSidebarLeft, quindi la riga qui sopra serve solo a mostrare come si cambia.

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;

Le unit Indy sono condizionali perché una build con la libreria Indy personalizzata le vede come sgcIdContext e sgcIdCustomHTTPServer, mentre una build su Indy standard come IdContext e IdCustomHTTPServer. La demo inclusa contiene esattamente quella condizione. Va bene qualsiasi server in grado di scrivere una stringa. La demo inclusa sceglie TsgcWSHTTPServer quando è disponibile una build Professional e ripiega su TIdHTTPServer in caso contrario, ed è per questo che la demo ha lì una condizione e questo estratto 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.

Un'applicazione console, quindi nessun form e nessuna VCL da configurare. È il programma sgcHTML più breve possibile, ed è ciò che è davvero la demo inclusa.

Tutte e tre le schede provengono dalla demo inclusa Demos\60.HTML\01.RunTime\07.Site, ridotta alle parti essenziali. Il progetto completo cambia anche layout, tema e schema di colori dalla query string, cosa che vale la pena leggere una volta che la prima pagina viene renderizzata.

Conferma che la pagina è stata renderizzata

Il programma stampa l'URL su cui è in ascolto. Aprilo, poi prova i parametri.

L'URL stampato

All'avvio il programma scrive http://localhost:8092 nella console. Aprilo. Una pagina con navigazione, barra laterale e il tuo contenuto significa che sia il rendering sia il server funzionano.

Active

FHTTP.Active := True riesce oppure solleva un'eccezione. Se qualcos'altro occupa già la porta 8092 lo scopri qui.

Il content type

Un browser che mostra il markup grezzo invece di una pagina significa che la risposta è partita senza text/html. Imposta ContentType prima di assegnare ContentText.

Cambia un layout

La demo inclusa legge layout, theme e mode dalla query string, quindi ?layout=topnav&mode=dark renderizza di nuovo la stessa pagina in modo diverso. È il modo più rapido per vedere cosa fa il componente.

Cosa va storto di solito la prima volta

Sei problemi spiegano quasi ogni primo tentativo che non viene renderizzato.

La pagina della palette non compare

La registrazione richiede sia SGC_PACK_HTML sia SGC_HTML. Il primo è definito alla riga 871 dentro il blocco All-Access, il secondo alla riga 885 dentro il blocco del pacchetto. Su un target Android o iOS il secondo è assente di proposito.

La pagina è vuota

Hai costruito l'albero ma non hai mai letto HTML. È quella proprietà a eseguire il rendering. Leggerla è l'intero passaggio di rendering e restituisce un documento completo, non un frammento.

Non cambia nulla quando modifichi la pagina

La demo costruisce un nuovo TsgcHTMLComponent_Site a ogni richiesta e lo libera subito dopo. Se metti l'oggetto in cache e lo riutilizzi, ricordati di svuotarne il contenuto con ClearContent prima di ricostruirlo.

Il browser mostra il markup grezzo

Il content type della risposta non è mai stato impostato. La demo imposta ContentType := 'text/html; charset=utf-8' prima di scrivere il corpo e, senza di esso, alcuni client mostrano l'HTML come testo.

Stai scrivendo stringhe HTML a mano

Non è necessario. Esistono unit di nodi per layout Bootstrap, tabelle, form e grafici, e lo scopo della libreria è proprio che tu li componga invece di concatenare markup.

La porta è già occupata

La demo resta in ascolto sulla 8092. Se qualcos'altro occupa quella porta il server non parte, quindi cambia la porta prima di cercare un problema più profondo.

Cosa si costruisce dopo la prima pagina

Quattro direzioni, tutte nello stesso pacchetto.

Form che inviano i dati

L'unit di nodi per i form costruisce input, select, validazione e layout, e htmx li invia senza ricaricare la pagina. L'escaping è gestito per te quando costruisci nodi invece di stringhe.

Componenti per form

Dati nella pagina

Una griglia con ordinamento, filtri e paginazione, più grafici, schede statistiche, uno scheduler, un diagramma di Gantt e un componente per diagrammi.

Matrice delle funzionalità

Applicazioni complete

Sono incluse più di quindici demo di runtime, da una dashboard ERP a un punto vendita, un helpdesk, un magazzino e un'app di assistenza sul campo. Sono il modo più rapido per vedere la libreria su scala reale.

Galleria delle demo

Porta il tuo livello web esistente

Esistono componenti per WebBroker e DataSnap, così un'applicazione web Delphi esistente può renderizzare pagine sgcHTML senza essere riscritta.

WebBroker e DataSnap

Riferimento, demo e documentazione

Il catalogo elenca ogni componente con un'anteprima. I progetti demo sono inclusi nel download, in Demos\60.HTML.

Pagina di TsgcHTMLComponent_Site La struttura di pagina su cui si basa questa guida rapida, proprietà per proprietà.
Matrice delle funzionalità Layout, form, dati, grafici, autenticazione, chat e il resto, raggruppati per area.
Galleria delle demo Le demo di runtime incluse, ciascuna con un breve video.
WebBroker e DataSnap Renderizzare pagine sgcHTML da un livello web Delphi esistente.
Scarica la versione di prova Lo stesso installer della versione di produzione, con limite di tempo.
Guida online Il riferimento generato, sempre allineato alla versione corrente.
Guida Getting Started PDF, in inglese. Le idee alla base delle sei demo QuickStart, spiegate in un unico testo continuo.

Letture correlate: il componente Site, componenti per interfacce web in Delphi, form più intelligenti e tabelle dati. Ogni prodotto ha la propria guida rapida, elencata nella pagina per iniziare.

Domande sulla guida rapida di sgcHTML

TsgcHTMLComponent_Site, dall'unit sgcHTML_Component_Site.pas. Renderizza una struttura di pagina completa, quindi ottieni navigazione, barra laterale, tema e area dei contenuti senza assemblarli da te. Costruiscilo, chiama AddMenu e AddContent oppure AddSection, poi leggi la proprietà HTML. La demo Site inclusa fa esattamente questo.
Lo scrivi tu stesso in una risposta HTTP. HTML è una semplice proprietà string, quindi va bene qualsiasi server. La demo inclusa usa TsgcWSHTTPServer su una build Professional e ripiega su TIdHTTPServer in caso contrario, imposta ResponseNo := 200 e ContentType := 'text/html; charset=utf-8' e assegna la stringa a ContentText.
Il vincolo è SGC_PACK_HTML, definito alla riga 871 di sgcVer.inc, dentro il blocco {$IFDEF SGC_EDT_ALL} che va dalla riga 870 alla riga 874. In quell'albero dei sorgenti è l'edizione All-Access a definirlo. sgcHTML è venduto anche come prodotto a sé, con il proprio installer, quindi consulta la pagina dei prezzi di sgcHTML per le licenze attuali invece di dedurle dal define.
No, ed è voluto. SGC_HTML è definito alla riga 885 dentro {$IFNDEF ANDROID} alla riga 883 e {$IFNDEF IOS} alla riga 884, quindi su quei target ogni unit sgcHTML viene compilata come unit vuota. È una libreria lato server: il telefono riceve HTML via rete, ed è per questo che il target mobile non ha bisogno del renderer. Windows, macOS e Linux sono tutti supportati.
No. La libreria genera markup Bootstrap 5 e attributi htmx, ed è htmx a far sì che un pulsante invii i dati e sostituisca parte della pagina senza ricaricarla. Descrivi l'interazione in Pascal e gli attributi vengono generati per te. Puoi comunque aggiungere il tuo script quando vuoi, tramite CustomHead e BodyEndHTML.
Sì. Layout accetta un TsgcHTMLSiteLayout, i cui membri sono slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail e slOffcanvas, e il valore predefinito è slTopNavSidebarLeft. Preset accetta un TsgcHTMLSitePreset con membri tra cui spAdmin, spDashboard, spPortal, spDocs, spLanding e spApp. I colori e la modalità chiara o scura si trovano nell'oggetto Theme.
Quando costruisci la pagina con i nodi, sì, perché è il nodo a scrivere il testo e a eseguirne l'escaping. Il rischio compare quando aggira i nodi e concateni il markup da solo, per esempio tramite AddContent con una stringa costruita a partire da input dell'utente. Preferisci le unit di nodi per qualsiasi contenuto che trasporti dati dell'utente.
Il download include più di quindici demo di runtime in Demos\60.HTML\01.RunTime, tra cui una dashboard ERP, un helpdesk, un punto vendita, un magazzino, un'app di report e un'app di assistenza sul campo. La galleria ha un breve video di ciascuna.
La scelta più conveniente: All-AccessTutti i prodotti eSeGeCe, con Supporto Premium incluso, a partire da €1,059/anno.
Vedi i prezzi All-Access

Pronto a costruire un'interfaccia web in Pascal?

Scarica la versione di prova ed esegui la demo Site prima di scrivere una riga di markup.