sgcHTML: Costruisci Interfacce Web Moderne da Delphi Senza Scrivere JavaScript

· Componenti

Gli sviluppatori Delphi costruiscono applicazioni aziendali da trent'anni. Il back end è solido: accesso ai database, logica di business, generazione di report, integrazione con i servizi. Il problema è sempre stato il front end. Nel momento in cui un cliente richiede un'interfaccia basata su browser, l'approccio classico di Delphi mostra i suoi limiti. Si ricorre a IntraWeb (potente ma con stato e datato), si tenta TMS WEB Core (che compila Pascal in JavaScript ma impone un modello di distribuzione lato client), oppure si affida il front end a un team JavaScript e si mantengono due codebase completamente separate.

sgcHTML segue un approccio diverso. È una libreria di oltre 60 componenti lato server che generano HTML Bootstrap 5 direttamente dal codice Delphi, C++ Builder o .NET. Si configurano le proprietà, si legge la proprietà HTML e si serve il risultato. L'interattività è fornita da htmx, una piccola libreria JavaScript che consente al server di sostituire frammenti di pagina in risposta a clic e invii di moduli, senza dover scrivere JavaScript. Il risultato è un'applicazione web moderna e responsiva costruita interamente in Object Pascal o C#.

Il problema che sgcHTML risolve

L'architettura VCL standard di Delphi presuppone un client pesante: form, griglie e finestre di dialogo eseguiti su Windows. Questo modello funziona bene per gli strumenti interni. Mostra i suoi limiti quando il cliente vuole un portale accessibile da un browser su qualsiasi dispositivo, o quando la policy IT vieta l'installazione di applicazioni desktop.

Le alternative precedenti a sgcHTML comportavano tutte degli attriti:

sgcHTML colma il divario: una libreria di componenti Delphi nativa il cui output è HTML Bootstrap 5 standard e moderno, comprensibile da qualsiasi browser, mantenuto vivo da htmx, tutto controllato da un'unica codebase Pascal o C#.

Come funziona

L'architettura è composta da tre livelli.

Primo, un componente come TsgcHTMLComponent_Chart, TsgcHTMLComponent_DataTable o TsgcHTMLComponent_StatCard sa come descriversi come HTML Bootstrap 5. Lo si configura tramite le normali proprietà pubblicate e si chiama la sua proprietà HTML per ottenere il markup.

Secondo, un costruttore di pagine (TsgcHTMLPageBuilder) assembla i componenti in una griglia responsiva. Si assegna a ciascun componente una Section, un SectionTitle, un SectionOrder e una ColumnWidth (la griglia a 1–12 colonne di Bootstrap). Il costruttore di pagine li dispone automaticamente.

Terzo, un motore server (TsgcHTMLEngine_Server) collega tutto a un TsgcWSHTTPServer di sgcWebSockets. Le richieste arrivano nel gestore OnCommandGet e si risponde con una pagina HTML completa costruita dai componenti. Il CSS e il JavaScript di Bootstrap sono risorse incorporate all'interno della libreria, quindi non è necessario distribuire nulla insieme al binario.

uses
  sgcWebSocket_Server, sgcHTML_Engine_Server,
  sgcHTML_Template_Bootstrap, sgcHTML_Page,
  sgcHTML_Component_StatCard, sgcHTML_Component_Chart;

var
  oServer:   TsgcWSHTTPServer;
  oEngine:   TsgcHTMLEngine_Server;
  oTemplate: TsgcHTMLTemplate_Bootstrap;
  oPage:     TsgcHTMLPage;
  oStat:     TsgcHTMLComponent_StatCard;
  oChart:    TsgcHTMLComponent_Chart;
begin
  oServer := TsgcWSHTTPServer.Create(nil);
  oServer.Port := 8080;

  oEngine   := TsgcHTMLEngine_Server.Create(nil);
  oEngine.Server := oServer;

  oTemplate := TsgcHTMLTemplate_Bootstrap.Create(nil);
  oTemplate.Title := 'My Dashboard';

  oPage := TsgcHTMLPage.Create(nil);

  // KPI card: total revenue
  oStat := TsgcHTMLComponent_StatCard.Create(nil);
  oStat.PageBuilder := oPage.PageBuilder;
  oStat.Section := 'kpi';
  oStat.SectionOrder := 1;
  oStat.ColumnWidth := cw3;
  oStat.Title := 'Total Revenue';
  oStat.Value := '$128,450';
  oStat.Trend := stUp;
  oStat.TrendValue := '+12%';

  // Revenue trend chart
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  oChart.PageBuilder := oPage.PageBuilder;
  oChart.Section := 'charts';
  oChart.SectionOrder := 1;
  oChart.ColumnWidth := cw8;
  oChart.ChartType := ctLine;
  oChart.Title := 'Monthly Revenue';
  oChart.AddLabel('Jan'); oChart.AddLabel('Feb'); oChart.AddLabel('Mar');
  oChart.AddDataset('2026', [42000, 58000, 64000], '#0d6efd', '', True);

  oServer.Active := True;
end;

Oltre 60 componenti pronti all'uso

sgcHTML viene fornito con un'ampia palette di componenti che coprono i pattern più comuni per le interfacce web. Ogni componente è una classe Delphi standard che si può inserire in un form o creare via codice:

Collegamento a DataSource

Ogni componente sgcHTML supporta una proprietà DataSource che lo collega a qualsiasi TDataSource nell'applicazione. Impostando DataAutoRefresh := True, il componente si ridisegna automaticamente quando il dataset sottostante cambia. Per un controllo più preciso, si può chiamare direttamente LoadFromDataSet:

uses
  sgcHTML_Component_DataTable;

// Populate a data table from a FireDAC query
oTable := TsgcHTMLComponent_DataTable.Create(nil);
oTable.PageBuilder := oPage.PageBuilder;
oTable.Section := 'invoices';
oTable.Title := 'Recent Invoices';
oTable.ShowSearch := True;
oTable.ShowExport := True;
oTable.LoadFromDataSet(FDQuery1, 20); // 20 rows per page

Il componente grafico dispone di un metodo LoadFromDataSet equivalente che accetta il nome di un campo etichetta e uno o più nomi di campi valore, così una query ricavi per mese diventa un grafico a barre in tre righe:

oChart.LoadFromDataSet(fdqRevenue, 'month', ['revenue', 'cost']);

Interattività tramite htmx — JavaScript non richiesto

L'HTML statico è utile. L'HTML interattivo è necessario. sgcHTML ottiene l'interattività tramite htmx: una piccola libreria (14 KB compressa) che intercetta clic e invii di moduli, invia una richiesta HTTP al server e sostituisce l'HTML di risposta nella pagina. Il gestore OnCommandGet o OnCommandOther di Delphi riceve la richiesta, ricostruisce il componente pertinente e restituisce il suo HTML. Nessun ricaricamento della pagina. Nessun framework JavaScript.

// Server-side handler: update the chart fragment when the user changes the date range
procedure TMyServer.HandleChartFragment(aReq: TIdHTTPRequestInfo;
  aResp: TIdHTTPResponseInfo);
var
  oChart: TsgcHTMLComponent_Chart;
  vRange: string;
begin
  vRange := aReq.Params.Values['range']; // 'week', 'month', 'year'
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  try
    oChart.ChartType := ctBar;
    LoadRevenueData(oChart, vRange); // your data-loading procedure
    aResp.ContentText := oChart.HTML;
    aResp.ContentType := 'text/html';
  finally
    oChart.Free;
  end;
end;

Il grafico nel browser porta un attributo hx-get che punta all'endpoint del frammento. Quando l'utente seleziona un intervallo diverso in un menu a discesa, htmx sostituisce il div del grafico sul posto, senza ricaricare la pagina circostante.

Aggiornamenti in tempo reale via WebSocket

Poiché sgcHTML è costruito sopra sgcWebSockets, il push in tempo reale è una funzionalità di primo livello. Quando arrivano nuovi dati, un nuovo ordine, un tick di prezzo, una lettura di sensore, il server invia un frammento HTML via WebSocket e htmx lo inserisce nel corretto elemento DOM. Il client si iscrive a un endpoint WebSocket; il server chiama SendMessage. Nessun polling, nessun long-polling, nessun broker di messaggi esterno.

// Push an updated stat card to all connected clients
procedure TDashboardServer.PushRevenueUpdate(aNewRevenue: Double);
var
  oCard: TsgcHTMLComponent_StatCard;
begin
  oCard := TsgcHTMLComponent_StatCard.Create(nil);
  try
    oCard.CardID := 'kpi-revenue';
    oCard.Title := 'Total Revenue';
    oCard.Value := FormatCurr('$#,##0', aNewRevenue);
    oCard.Trend := stUp;
    // Send the HTML fragment to all clients subscribed to this channel
    FWSServer.Broadcast(oCard.HTML);
  finally
    oCard.Free;
  end;
end;

Nessuna build chain JavaScript, nessun npm, nessun Node.js

Ogni asset JavaScript e CSS necessario a sgcHTML (Bootstrap 5, Chart.js, htmx) è incorporato come risorsa binaria nell'eseguibile Delphi compilato. La distribuzione è un singolo file .exe. Non c'è alcuna directory node_modules, nessuna configurazione webpack, nessuna pipeline Babel e nessun conflitto di versione tra un gestore di pacchetti front end e il back end. Si installa sgcHTML come pacchetto Delphi, si compila e si distribuisce.

Per iniziare

sgcHTML è incluso nelle edizioni Enterprise e All-Access di sgcWebSockets, ed è disponibile anche come acquisto separato. Una versione di prova gratuita è disponibile per il download. La versione di prova include tutti i 60+ componenti senza restrizioni di funzionalità durante il periodo di prova.

La libreria supporta Delphi dalla versione 10.2 Tokyo fino a Delphi 13 e C++ Builder dalla 10.2 alla 13, mentre l'edizione .NET è destinata a .NET 6 e versioni successive. Il codice sorgente completo è incluso in tutti i livelli a pagamento.

Domande o richieste pre-vendita? Contattaci. Riceverai una risposta direttamente dalle persone che hanno scritto il codice.