sgcHTMLApp web,scritte in Pascal.Senza JavaScript.
Crea interfacce web complete e moderne direttamente da Delphi, C++ Builder e .NET. sgcHTML è un framework di componenti lato server con 110 widget pronti all'uso: grafici, griglie, form, dashboard, chat e altro. Molti si collegano direttamente a un TDataSet, generano markup Bootstrap 5 e restano interattivi grazie a htmx. Tu scrivi Object Pascal o C#, sgcHTML scrive l'HTML, il CSS e il JavaScript.
Demo ERP | un solo exe Delphi che serve la propria UI web
Punto venditaMonitor liveAssistenza sul campo
110Componenti UI in dieci famiglie
3Linguaggi: Delphi, C++ Builder e .NET
17Lingue della UI integrate, scrittura da destra a sinistra inclusa
15Applicazioni reali in esecuzione online
0Righe di JavaScript scritte a mano
Guardale in azione
Diciotto video. Nessuna slide.
Ogni clip è una registrazione dello schermo di un'applicazione reale in esecuzione, con voce narrante e sottotitoli. Scegline una dall'elenco. Nulla viene scaricato finché non premi play.
sgcHTML in due minuti
Costruisci una UI web completa da Delphi con componenti lato server, markup Bootstrap 5 e htmx, senza alcuno step di build JavaScript.
Quindici applicazioni reali, in esecuzione adesso.
Ogni schermata qui sotto è un'applicazione Delphi che serve il proprio HTML tramite sgcHTML. Nessuna catena di build JavaScript, nessun progetto front-end separato. Accedi con le credenziali già compilate in ogni pagina di login.
Il planner Gantt, le serie Chart.js, i gauge, gli sparkline, le tree map e le heat map sono tutti prodotti dal tuo codice Pascal o C#. Tu imposti i dati, sgcHTML genera il markup e il collegamento lato client.
Un generatore di tabelle pivot ad hoc su un dataset live
Gli utenti scelgono dimensioni, misure e un'aggregazione, e la tabella incrociata viene ricostruita da una TFDQuery. Non c'è alcun livello REST di mezzo, la pagina legge il database direttamente in-process.
Gli stessi componenti, su uno scanner palmare
Ogni componente genera markup Bootstrap 5 responsive, quindi il layout del terminale di magazzino è la stessa libreria di componenti alla larghezza di uno smartphone, non un codebase mobile separato.
Come funziona
Tu scrivi Pascal o C#. sgcHTML scrive il front end.
Avvia un server HTTP, collega il motore htmx e rispondi alle richieste con una pagina costruita dai componenti. La stessa API in Delphi, C++ Builder e .NET.
uses
sgcWebSocket_Server, sgcHTMX_Engine_Server,
sgcHTML_Template_Bootstrap, sgcHTML_Component_Chart;
// 1. Start a server and attach the htmx engine
FServer := TsgcWSHTTPServer.Create(nil);
FServer.Port := 8080;
FServer.OnCommandGet := HandleGet;
FHTMX := TsgcHTMX_Engine_Server.Create(nil);
FHTMX.Server := FServer; // realtime htmx over WebSocket
FServer.Active := True;
// 2. Build the page from componentsfunction TForm1.BuildDashboard: string;
var
oChart: TsgcHTMLComponent_Chart;
oPage: TsgcHTMLTemplate_Bootstrap;
begin
oChart := TsgcHTMLComponent_Chart.Create(nil);
oPage := TsgcHTMLTemplate_Bootstrap.Create(nil);
try
oChart.ChartType := ctBar;
oChart.AddLabel('Q1'); oChart.AddLabel('Q2'); oChart.AddLabel('Q3');
oChart.AddDataset('Revenue', [1200, 1900, 1500],
'#7C3AED', 'rgba(124,58,237,.25)', True);
oPage.Title := 'Dashboard';
oPage.BodyContent := oChart.HTML; // component -> HTML
Result := oPage.GetHTML; // full Bootstrap documentfinally
oPage.Free;
oChart.Free;
end;
end;
// includes: sgcWebSocket_Server.hpp, sgcHTMX_Engine_Server.hpp,// sgcHTML_Template_Bootstrap.hpp, sgcHTML_Component_Chart.hpp// 1. Start a server and attach the htmx engine
FServer = new TsgcWSHTTPServer(this);
FServer->Port = 8080;
FServer->OnCommandGet = HandleGet;
FHTMX = new TsgcHTMX_Engine_Server(this);
FHTMX->Server = FServer; // realtime htmx over WebSocket
FServer->Active = true;
// 2. Build the page from components
String __fastcall TForm1::BuildDashboard()
{
TsgcHTMLComponent_Chart *oChart = new TsgcHTMLComponent_Chart(NULL);
TsgcHTMLTemplate_Bootstrap *oPage = new TsgcHTMLTemplate_Bootstrap(NULL);
try
{
oChart->ChartType = ctBar;
oChart->AddLabel("Q1"); oChart->AddLabel("Q2"); oChart->AddLabel("Q3");
oChart->AddDataset("Revenue", OPENARRAY(double, (1200, 1900, 1500)),
"#7C3AED", "rgba(124,58,237,.25)", true);
oPage->Title = "Dashboard";
oPage->BodyContent = oChart->HTML; // component -> HTMLreturn oPage->GetHTML(); // full Bootstrap document
}
__finally
{
delete oPage;
delete oChart;
}
}
using esegece.sgcWebSockets;
// 1. Start a server and attach the htmx enginevar server = new TsgcWebSocketHTTPServer();
server.Port = 8080;
server.OnCommandGet += HandleGet;
var htmx = new TsgcHTMX_Engine_Server();
htmx.Server = server; // realtime htmx over WebSocket
server.Active = true;
// 2. Build the page from componentsstring BuildDashboard()
{
var chart = new TsgcHTMLComponent_Chart();
chart.ChartType = TsgcHTMLChartType.ctBar;
chart.AddLabel("Q1"); chart.AddLabel("Q2"); chart.AddLabel("Q3");
chart.AddDataset("Revenue", newdouble[] { 1200, 1900, 1500 },
"#7C3AED", "rgba(124,58,237,.25)", true);
var page = new TsgcHTMLTemplate_Bootstrap();
page.Title = "Dashboard";
page.BodyContent = chart.HTML; // component -> HTMLreturn page.GetHTML(); // full Bootstrap document
}
Avvia un server, collega htmxUn TsgcWSHTTPServer risponde alle richieste e un TsgcHTMX_Engine_Server mantiene la pagina interattiva e live tramite WebSocket.
Costruisci la pagina con i componentiImposta le proprietà di un grafico, di una griglia o di un form, poi leggi il suo HTML. TsgcHTMLTemplate_Bootstrap lo avvolge in un documento responsive completo.
Servi la pagina e invia gli aggiornamentiI clic e gli invii dei form arrivano ai tuoi gestori di eventi e il server sostituisce i frammenti HTML sul posto. Nessuna toolchain JavaScript.
Gli stessi blocchi, su scala più grande
La dashboard della demo ERP: schede KPI, un grafico dei ricavi e una griglia delle ultime fatture, tutto costruito con componenti.
sgcHTML trasforma il tuo back end Delphi, C++ Builder o .NET esistente in un application server web. Ogni componente è una classe nativa che genera HTML Bootstrap 5, e htmx mantiene la pagina interattiva e live senza una sola riga di JavaScript scritta a mano.
Componenti che generano HTML
Ogni widget è una classe: TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form e altri 86. Imposta le sue proprietà, poi leggi la sua proprietà HTML per ottenere markup Bootstrap 5 pulito, pronto da servire.
Servito dal tuo stesso server
Inserisci un TsgcHTMLEngine_Server (oppure collega l'HTML a un TsgcWebSocketHTTPServeresistente). Le richieste arrivano al tuo evento OnCommandGet dove rispondi con una pagina costruita con i componenti. Nessuno stack web esterno.
Hosting WebBroker & DataSnap
sgcHTML non è legato al server sgcWebSockets. Servi le stesse pagine costruite dai componenti da qualsiasi applicazione Embarcadero WebBroker tramite TsgcHTMX_Engine_Server_WebBroker, oppure da un server DataSnap con push WebSocket in tempo reale sulla stessa porta dei tuoi endpoint REST.
Aggiungi un TsgcHTMX_Engine_Server e i clic, gli invii dei form e gli aggiornamenti live arrivano ai tuoi gestori di eventi Pascal o C#. Il server sostituisce i frammenti HTML sul posto. L'esperienza di una SPA, senza la toolchain JavaScript.
Tempo reale sui WebSocket
Poiché htmx funziona sul server sgcWebSockets, puoi inviare HTML live a ogni browser connesso. Dashboard, monitor e finestre di chat si aggiornano nell'istante in cui cambiano i dati, guidati dal server, senza polling. Dove un proxy blocca i WebSocket, la stessa pagina può ricevere gli aggiornamenti tramite server-sent events.
Temi e template
TsgcHTMLTemplate_Bootstrap avvolge i tuoi contenuti in un documento responsive completo. TsgcHTMLThemeController e TsgcHTMLThemeBuilder offrono temi chiaro e scuro e un foglio di stile condiviso. Bootstrap 5.3 e htmx sono incorporati, nessuna CDN a runtime.
Binding diretto al database
Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline e Form si collegano direttamente a un TDataSet tramite LoadFromDataSet / DataSource. Punta un componente a una query e renderizza le righe.
UI localizzata, 17 lingue
Testi della UI integrati (pulsanti, etichette, messaggi di validazione) in inglese, spagnolo, francese, tedesco, portoghese, italiano, olandese, svedese, norvegese, polacco, ceco, turco, russo, cinese, giapponese, coreano e arabo. Scegline uno con sgcHTMLSetLanguage. Arabo ed ebraico ribaltano automaticamente l'intera pagina da destra a sinistra: dir="rtl", il foglio di stile RTL di Bootstrap e componenti specchiati, senza modifiche al codice.
Output sicuro per impostazione predefinita
Ogni componente fa passare testo dinamico, attributi, JavaScript inline e URL attraverso una codifica automatica più la sanificazione degli URL (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), così i dati dell'utente non possono uscire dal proprio contesto e iniettare script.
Libreria di componenti
110 componenti, dieci famiglie.
Dalla navigazione e struttura alle griglie dati, ai grafici, ai form, agli overlay e alla chat AI, l'intero vocabolario di Bootstrap 5 come componenti nativi. Ognuno ha la propria pagina con esempi Delphi, C++ Builder e .NET.
Ogni novità è disattivata finché non la usi, quindi una pagina che non ne usa nessuna viene renderizzata esattamente come prima. L’elenco completo è nella matrice delle funzionalità.
La tua pagina dentro ChatGPT e Claude
Un tool MCP risponde con una pagina invece che con testo, costruita con gli stessi componenti che usi per qualsiasi pagina web e renderizzata da ChatGPT, Claude e VS Code. Richiede l'edizione Enterprise o All-Access, oppure il pack sgcAI.
Descrivi una pagina o fornisci al designer uno screenshot, e lui costruisce la pagina con i tuoi componenti. Risponde a partire da uno schema costruito dal tuo registro di componenti, quindi non può nominare una classe che non gli hai offerto, e nulla viene applicato finché non lo accetti. Richiede le unit AI dell’edizione Enterprise o All-Access, oppure il pack sgcAI.
L'elenco, la ricerca, la paginazione, il form, l'eliminazione e il percorso di scrittura di una tabella come un unico componente, su un dataset o sul tuo SQL. Lo crea una procedura guidata dell'IDE.
Una domanda in linguaggio naturale diventa filtri, ordinamenti, raggruppamenti ed evidenziazioni, validati rispetto alle tue colonne prima che venga applicato qualsiasi cosa. Funziona senza chiave API tramite un parser integrato, e con sette provider quando le unit AI sono incluse nella tua edizione.
Server-sent events per le reti che bloccano i WebSocket, Web Push per un browser non in esecuzione, un'inbox di notifiche e una tabella delle preferenze. Web Push richiede l'edizione Enterprise o All-Access.
Sessioni con cookie, token CSRF, limitazione dei login e protezione delle route per ruolo. Parametri di percorso e filtri per metodo sulle route, navigazione a pagina singola dal template di pagina e helper per testare il markup che produci.
Se sviluppi applicazioni ASP.NET Core MVC o Razor Pages alla maniera di Telerik o DevExpress, sgcHTML ora parla la stessa lingua. Tag Helper come <sgc-grid>, <sgc-form>, <sgc-dialog> e <sgc-chart>, e i loro gemelli fluent sotto Html.Sgc(), generano lato server HTML Bootstrap 5 e dialogano con i tuoi controller tramite htmx. Non c'è nessun framework JavaScript da imparare e nessuna origine dati JSON da scrivere. Il livello Razor è distribuito nel esegece.sgcHTML.AspNetCore pacchetto NuGet, edizione Community inclusa, e arriva nella prossima release.
// Program.cs
builder.Services.AddControllersWithViews();
builder.Services.AddSgcHtml(o => o.ServeRootPage = false); // the MVC app owns "/"
builder.Services.AddSgcHtmlRazor(); // SgcDataRequest binder, grid state, /sgcHTML.css// ...
app.UseWebSockets(); // before UseSgcHtml, needed by live charts
app.UseSgcHtml();
app.MapDefaultControllerRoute();
// Controllers/OrdersController.cspublic class OrdersController : Controller
{
private readonly ShopDb FDb;
public OrdersController(ShopDb db) { FDb = db; }
// An IQueryable projection: EF Core turns paging, sort and filters into SQL.private IQueryable<OrderRow> Rows() =>
FDb.Orders.AsNoTracking().Select(o => new OrderRow
{
Id = o.Id, Reference = o.Reference, Customer = o.Customer.Name,
OrderDate = o.OrderDate, Total = o.Total, Paid = o.Paid
});
public IActionResult Index() => View(Rows());
// Every page, sort, filter and search click of the grid lands here.public IActionResult Read(SgcDataRequest request) => this.SgcGrid(request, Rows());
// The toolbar export links: the filtered and sorted rows as XLSX or PDF.public IActionResult Export(SgcDataRequest request) =>
this.SgcGridExport(request, Rows(), "orders");
}
@* The same grid with the fluent builder, the twin of Html.Kendo().Grid<T>() *@
@(Html.Sgc().Grid<OrderRow>("orders")
.Key(o => o.Id)
.Columns(c =>
{
c.Bound(o => o.Reference).Searchable();
c.Bound(o => o.Customer).Searchable();
c.Bound(o => o.OrderDate).Title("Date").Format("{0:yyyy-MM-dd}").Filter(SgcGridFilterKind.Range);
c.Bound(o => o.Total).Format("{0:N2}").Align("right").Filter(SgcGridFilterKind.Range);
c.Bound(o => o.Paid);
})
.Items(Model)
.Read("Read")
.Export(SgcExportFormat.Xlsx, SgcExportFormat.Pdf)
.ExportAction("Export")
.Pageable(15)
.Sortable().Filterable().Searchable().PushUrl())
@* _Layout.cshtml: live="ws" opens the WebSocket that live charts listen to *@
<sgc-scripts live="ws" />
@* The view *@
<sgc-chart name="live-orders" type="line" height="260" live="true">
<sgc-series name="Orders / s" data="new double[] { 0 }" color="#dc3545" />
</sgc-chart>
// builder.Services.AddHostedService<LiveSalesFeed>();public sealed class LiveSalesFeed : BackgroundService
{
private readonly ISgcHtmlHub FHub;
private readonly Queue<string> FLabels = new Queue<string>();
private readonly Queue<double> FValues = new Queue<double>();
public LiveSalesFeed(ISgcHtmlHub hub) { FHub = hub; }
protected override async Task ExecuteAsync(CancellationToken stoppingToken)
{
var oRandom = new Random();
while (!stoppingToken.IsCancellationRequested)
{
await Task.Delay(1000, stoppingToken);
FLabels.Enqueue(DateTime.Now.ToString("HH:mm:ss"));
FValues.Enqueue(oRandom.Next(0, 20));
if (FValues.Count > 20) { FLabels.Dequeue(); FValues.Dequeue(); }
// One WebSocket message redraws the chart in every open browser.await FHub.BroadcastChartAsync("live-orders", FLabels.ToArray(),
new SgcChartSeries("Orders / s", FValues.ToArray(), "#dc3545"));
}
}
}
Una griglia su IQueryable
<sgc-grid> pagina, ordina, filtra (testo e intervallo), cerca ed esporta in XLSX e PDF sul server. Il controller risponde con this.SgcGrid(request, query), e EF Core trasforma ogni clic in SQL parametrizzato. push-url mantiene pagina, ordinamento e filtri nella barra degli indirizzi, così ricaricare e il pulsante Indietro funzionano.
Form collegati con asp-for
<sgc-textbox>, <sgc-select>, <sgc-datepicker>, <sgc-checkbox> e <sgc-autocomplete> si collegano al tuo modello con asp-for e mostrano gli errori del ModelState sotto ogni input. <sgc-form hx="true"> invia i dati tramite htmx, e this.SgcRedirect(url) naviga dopo un salvataggio valido.
Modifica in una finestra di dialogo
Qualsiasi elemento con sgc-dialog="name" carica il proprio URL in un <sgc-dialog>. Dopo un invio valido, this.SgcCloseDialog("edit-order", refresh: "orders") chiude la finestra di dialogo e ricarica la griglia, il modello di modifica in popup senza alcuno script tuo.
Grafici inviati in tempo reale, senza SignalR
<sgc-chart> mostra dati statici, interroga un'azione con refresh-every="5s", oppure passa a live="true": un servizio in background chiama hub.BroadcastChartAsync(...) e ogni browser aperto ridisegna il grafico tramite il WebSocket di sgcHTML. I grafici di Telerik e DevExpress richiedono l'infrastruttura di SignalR per il push dal server, sgcHTML lo ha integrato.
Arrivi da Telerik UI for ASP.NET Core o da DevExpress? [DataSourceRequest] diventa SgcDataRequest, ToDataSourceResult diventa this.SgcGrid(request, query) (oppure query.ToSgcDataResult(request) per i soli dati), e Html.Kendo().TextBoxFor(m => m.X) diventa Html.Sgc().TextBoxFor(m => m.X). La demo MVC eseguibile, 22.RazorMvc, è l'esempio degli ordini di Telerik scritto con sgcHTML su EF Core.
Due livelli di API
Componenti di alto livello o nodi di basso livello.
Affidati ai componenti pronti all'uso quando vuoi un widget in una riga, oppure scendi al livello dei nodi quando ti serve il controllo completo sul markup.
Livello componenti
I 110 TsgcHTMLComponent_* widget. Configura le proprietà, collega facoltativamente un dataset, leggi HTML. Molti espongono anche un helper statico Build(...) per un uso inline in una sola riga.
Livello nodi / composizione
Primitive come TsgcHTMLContainer (con un flag Void per i tag a chiusura automatica), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton e TsgcHTMLTable si compongono in qualsiasi layout, poi si renderizzano con TsgcHTMLTemplate_Bootstrap. L'insieme dei nodi comprende anche elementi Bootstrap come TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode e TsgcHTMLImage.
Generatore visuale di pagine
TsgcHTMLPageBuilder con il suo editor di design ti permette di assemblare le pagine nell'IDE, mentre TsgcHTMLThemeController gestisce i temi chiaro e scuro in tutta l'app.
Tre modi per iniziare
Parti da dove sei.
Non vuoi costruirla da solo?
Con sgcCustomization HTML descrivi l'applicazione di cui hai bisogno e il team di eSeGeCe la costruisce per te con i componenti sgcHTML + sgcWebSockets. Tre pacchetti una tantum da €149, e ricevi un progetto completo che puoi compilare, estendere e ripersonalizzare con i tuoi componenti in licenza.
Hai già un'applicazione web costruita con IntraWeb, uniGUI, TMS WEB Core, Elevate Web Builder o D2Bridge? Guide passo passo ti accompagnano nel passaggio a sgcHTML, con una mappatura dei concetti per ogni framework. C'è anche un modulo di assistenza alla migrazione se vuoi che il nostro team aiuti a pianificare il passaggio o lo esegua per te.
Servi le stesse pagine costruite con i componenti da qualsiasi applicazione Embarcadero WebBroker, o da un server DataSnap con push WebSocket live sulla stessa porta dei tuoi endpoint REST.
Garanzia soddisfatti o rimborsati di 30 giorniNon sei soddisfatto? Richiedi un rimborso completo entro 30 giorni dall'acquisto. Vedi la politica di rimborso