sgcHTMLAplikacje webowe,pisane w Pascalu.Bez JavaScriptu.
Twórz kompletne, nowoczesne interfejsy webowe bezpośrednio z Delphi, C++ Builder i .NET. sgcHTML to framework komponentów po stronie serwera ze 110 gotowymi widżetami: wykresy, gridy, formularze, pulpity, czat i wiele więcej. Wiele z nich wiąże się bezpośrednio z TDataSet, renderuje znaczniki Bootstrap 5 i pozostaje interaktywnych dzięki htmx. Ty piszesz w Object Pascal lub C#, a sgcHTML pisze HTML, CSS i JavaScript.
Demo ERP | jeden plik exe Delphi serwujący własny interfejs webowy
Punkt sprzedażyMonitor na żywoSerwis terenowy
110Komponentów interfejsu w dziesięciu rodzinach
3Języki: Delphi, C++ Builder i .NET
17Wbudowanych języków interfejsu, w tym od prawej do lewej
15Prawdziwych aplikacji działających online
0Linii ręcznie pisanego JavaScriptu
Zobacz, jak działają
Osiemnaście filmów. Żadnych slajdów.
Każdy klip to nagranie ekranu prawdziwej, działającej aplikacji, z lektorem i napisami. Wybierz jeden z listy. Nic nie jest pobierane, dopóki nie naciśniesz odtwarzania.
sgcHTML w dwie minuty
Zbuduj kompletny interfejs webowy z Delphi za pomocą komponentów po stronie serwera, znaczników Bootstrap 5 i htmx, bez kroku budowania JavaScript.
Piętnaście prawdziwych aplikacji, działających właśnie teraz.
Każdy ekran poniżej to aplikacja Delphi serwująca własny HTML przez sgcHTML. Bez etapu budowania JavaScript, bez osobnego projektu front-endu. Zaloguj się danymi, które są już wpisane na każdej stronie logowania.
Harmonogram Gantta, serie Chart.js, wskaźniki, wykresy iskrowe, mapy drzewa i mapy cieplne powstają w całości z Twojego kodu w Pascalu lub C#. Ty ustawiasz dane, a sgcHTML generuje znaczniki i całe okablowanie po stronie klienta.
Kreator tabel przestawnych ad hoc na działającym zbiorze danych
Użytkownicy wybierają wymiary, miary i agregację, a tabela krzyżowa jest przebudowywana z TFDQuery. Pomiędzy nie ma warstwy REST, strona czyta bazę danych bezpośrednio w tym samym procesie.
Te same komponenty na ręcznym skanerze
Każdy komponent renderuje responsywne znaczniki Bootstrap 5, więc układ terminala magazynowego to ta sama biblioteka komponentów w szerokości telefonu, a nie osobna baza kodu mobilnego.
Jak to działa
Ty piszesz Pascal lub C#. sgcHTML tworzy front-end.
Uruchom serwer HTTP, podłącz silnik htmx i odpowiadaj na żądania stroną zbudowaną z komponentów. To samo API w Delphi, C++ Builder i .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
}
Uruchom serwer, podłącz htmxTsgcWSHTTPServer odpowiada na żądania, a TsgcHTMX_Engine_Server utrzymuje stronę interaktywną i aktualizowaną na żywo przez WebSocket.
Zbuduj stronę z komponentówUstaw właściwości wykresu, gridu lub formularza, a następnie odczytaj jego HTML. TsgcHTMLTemplate_Bootstrap opakowuje go w kompletny, responsywny dokument.
Udostępnij i wypychaj aktualizacjeKliknięcia i wysyłki formularzy trafiają do Twoich procedur obsługi zdarzeń, a serwer podmienia fragmenty HTML na miejscu. Bez łańcucha budowania JavaScript.
Te same klocki, w większej skali
Pulpit demo ERP: karty KPI, wykres przychodów i grid ostatnich faktur, wszystko zbudowane z komponentów.
sgcHTML zamienia istniejący back-end w Delphi, C++ Builder lub .NET w serwer aplikacji webowych. Każdy komponent to natywna klasa emitująca HTML Bootstrap 5, a htmx utrzymuje stronę interaktywną i aktualizowaną na żywo bez ani jednej linii ręcznie pisanego JavaScriptu.
Komponenty, które renderują HTML
Każdy widżet to klasa: TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form i 86 kolejnych. Ustaw jego właściwości, a następnie odczytaj właściwość HTML, aby uzyskać czyste znaczniki Bootstrap 5 gotowe do udostępnienia.
Obsługiwane przez Twój własny serwer
Umieść TsgcHTMLEngine_Server (lub podłącz HTML do istniejącego TsgcWebSocketHTTPServer). Żądania trafiają do Twojej procedury OnCommandGet obsługi, a Ty odpowiadasz stroną zbudowaną z komponentów. Bez zewnętrznego stosu webowego.
Hosting na WebBroker i DataSnap
sgcHTML nie jest związany z serwerem sgcWebSockets. Serwuj te same strony zbudowane z komponentów z dowolnej aplikacji Embarcadero WebBroker za pomocą TsgcHTMX_Engine_Server_WebBrokeralbo z serwera DataSnap z wypychaniem WebSocket na żywo na tym samym porcie co Twoje punkty końcowe REST.
Dodaj TsgcHTMX_Engine_Server, a kliknięcia, wysyłki formularzy i aktualizacje na żywo trafiają do Twoich procedur obsługi zdarzeń w Pascalu lub C#. Serwer podmienia fragmenty HTML na miejscu. Wrażenie SPA, bez łańcucha budowania JavaScript.
Czas rzeczywisty przez WebSockets
Ponieważ htmx działa na serwerze sgcWebSockets, możesz wypychać HTML na żywo do każdej połączonej przeglądarki. Pulpity, monitory i okna czatu aktualizują się w chwili zmiany danych, sterowane przez serwer, bez odpytywania. Gdy proxy blokuje WebSockets, ta sama strona może odbierać aktualizacje przez server-sent events.
Motywy i szablony
TsgcHTMLTemplate_Bootstrap opakowuje Twoją treść w kompletny, responsywny dokument. TsgcHTMLThemeController i TsgcHTMLThemeBuilder zapewniają motywy jasny i ciemny oraz wspólny arkusz stylów. Bootstrap 5.3 i htmx są dostarczane wbudowane, bez CDN w czasie działania.
Bezpośrednie wiązanie z bazą danych
Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline i Form wiążą się bezpośrednio z TDataSet przez LoadFromDataSet / DataSource. Wskaż komponentowi zapytanie, a wyrenderuje wiersze.
Zlokalizowany interfejs, 17 języków
Wbudowane teksty interfejsu (przyciski, etykiety, komunikaty walidacji) po angielsku, hiszpańsku, francusku, niemiecku, portugalsku, włosku, niderlandzku, szwedzku, norwesku, polsku, czesku, turecku, rosyjsku, chińsku, japońsku, koreańsku i arabsku. Wybierz język przez sgcHTMLSetLanguage. Arabski i hebrajski automatycznie odwracają całą stronę na układ od prawej do lewej: dir="rtl", arkusz stylów RTL Bootstrapa i lustrzane komponenty, bez zmian w kodzie.
Bezpieczne wyjście domyślnie
Każdy komponent przepuszcza swój dynamiczny tekst, atrybuty, wbudowany JavaScript i adresy URL przez automatyczne kodowanie oraz sanityzację URL (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), dzięki czemu dane użytkownika nie mogą wyrwać się ze swojego kontekstu i wstrzyknąć skryptu.
Biblioteka komponentów
110 komponentów, dziesięć rodzin.
Od elementów nawigacji po gridy danych, wykresy, formularze, nakładki i czat AI: pełne słownictwo Bootstrap 5 jako natywne komponenty. Każdy prowadzi do własnej strony z przykładami dla Delphi, C++ Builder i .NET.
Każdy dodatek jest wyłączony, dopóki go nie użyjesz, więc strona, która go nie używa, renderuje się dokładnie tak jak wcześniej. Pełna lista znajduje się w matrycy funkcji.
Twoja strona wewnątrz ChatGPT i Claude
Narzędzie MCP odpowiada stroną zamiast tekstu, zbudowaną z tych samych komponentów, których używasz na każdej stronie webowej, i renderowaną przez ChatGPT, Claude i VS Code. Wymaga edycji Enterprise lub All-Access albo pakietu sgcAI.
Opisz stronę albo przekaż projektantowi zrzut ekranu, a zbuduje ją z Twoich własnych komponentów. Odpowiada na podstawie schematu zbudowanego z Twojego rejestru, więc nie może wskazać klasy, której nie udostępniłeś, a nic nie jest stosowane, dopóki tego nie zaakceptujesz. Wymaga jednostek AI z edycji Enterprise lub All-Access albo pakietu sgcAI.
Lista, wyszukiwanie, stronicowanie, formularz, usuwanie i ścieżka zapisu jednej tabeli jako pojedynczy komponent, nad zbiorem danych lub nad Twoim własnym SQL. Tworzy go kreator w IDE.
Pytanie zwykłym językiem staje się filtrami, sortowaniami, grupowaniami i wyróżnieniami, sprawdzanymi względem Twoich własnych kolumn, zanim cokolwiek zostanie zastosowane. Działa bez klucza API dzięki wbudowanemu parserowi, a z siedmioma dostawcami, gdy jednostki AI są w Twojej edycji.
Server-sent events dla sieci blokujących WebSockets, Web Push dla przeglądarki, która nie jest uruchomiona, skrzynka powiadomień i tabela preferencji. Web Push wymaga edycji Enterprise lub All-Access.
Sesje w ciasteczkach, tokeny CSRF, ograniczanie prób logowania i ochrona tras według ról. Parametry ścieżki i filtry metod w trasach, nawigacja jednostronicowa z szablonu strony oraz pomocniki do testowania generowanych znaczników.
Jeśli budujesz aplikacje ASP.NET Core MVC lub Razor Pages w stylu Telerik albo DevExpress, sgcHTML mówi teraz tym samym językiem. Tag Helpery takie jak <sgc-grid>, <sgc-form>, <sgc-dialog> i <sgc-chart>, oraz ich płynne odpowiedniki w Html.Sgc()renderują po stronie serwera HTML Bootstrap 5 i komunikują się z Twoimi kontrolerami przez htmx. Nie trzeba uczyć się żadnego frameworka JavaScript ani pisać źródła danych JSON. Warstwa Razor jest dostarczana w pakiecie NuGet esegece.sgcHTML.AspNetCore pakiecie NuGet, łącznie z edycją Community, a pojawi się w następnym wydaniu.
// 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"));
}
}
}
Grid nad IQueryable
<sgc-grid> stronicuje, sortuje, filtruje (tekst i zakres), przeszukuje oraz eksportuje do XLSX i PDF po stronie serwera. Kontroler odpowiada wywołaniem this.SgcGrid(request, query), a EF Core zamienia każde kliknięcie na sparametryzowane SQL. push-url zachowuje stronę, sortowanie i filtry w pasku adresu, więc przeładowanie i przycisk Wstecz działają.
Formularze powiązane przez asp-for
<sgc-textbox>, <sgc-select>, <sgc-datepicker>, <sgc-checkbox> i <sgc-autocomplete> wiążą się z Twoim modelem przez asp-for i pokazują błędy ModelState pod każdym polem. <sgc-form hx="true"> wysyła dane przez htmx, a this.SgcRedirect(url) przechodzi dalej po poprawnym zapisie.
Edycja w oknie dialogowym
Każdy element z atrybutem sgc-dialog="name" ładuje swój adres URL do <sgc-dialog>. Po poprawnym wysłaniu formularza this.SgcCloseDialog("edit-order", refresh: "orders") zamyka okno dialogowe i przeładowuje grid: wzorzec edycji w oknie, bez własnego skryptu.
Wykresy odświeżane na żywo, bez SignalR
<sgc-chart> renderuje dane statyczne, odpytuje akcję z refresh-every="5s", albo działa w trybie live="true": usługa w tle wywołuje hub.BroadcastChartAsync(...), a każda otwarta przeglądarka rysuje wykres na nowo przez WebSocket sgcHTML. Wykresy Telerik i DevExpress wymagają infrastruktury SignalR do wypychania danych z serwera, w sgcHTML jest to wbudowane.
Przechodzisz z Telerik UI for ASP.NET Core lub DevExpress? [DataSourceRequest] zamienia się w SgcDataRequest, ToDataSourceResult zamienia się w this.SgcGrid(request, query) (albo query.ToSgcDataResult(request) gdy potrzebne są tylko dane), a Html.Kendo().TextBoxFor(m => m.X) zamienia się w Html.Sgc().TextBoxFor(m => m.X). Działające demo MVC, 22.RazorMvc, to przykład zamówień Telerik napisany w sgcHTML na EF Core.
Dwie warstwy API
Gotowe komponenty lub niskopoziomowe węzły.
Sięgnij po gotowe komponenty, gdy chcesz mieć widżet w jednej linii, albo zejdź do warstwy węzłów, gdy potrzebujesz pełnej kontroli nad znacznikami.
Warstwa komponentów
110 widżetów TsgcHTMLComponent_*. Skonfiguruj właściwości, opcjonalnie powiąż zbiór danych, odczytaj HTML. Wiele z nich udostępnia też statyczny pomocnik Build(...) do jednolinijkowego użycia w treści.
Warstwa węzłów i kompozycji
Prymitywy, takie jak TsgcHTMLContainer (z flagą Void dla znaczników samozamykających), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton i TsgcHTMLTable składają się w dowolny układ, a następnie są renderowane przez TsgcHTMLTemplate_Bootstrap. Zestaw węzłów obejmuje także elementy budulcowe Bootstrap, takie jak TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode i TsgcHTMLImage.
Wizualny kreator stron
TsgcHTMLPageBuilder wraz z edytorem działającym w czasie projektowania pozwala składać strony w IDE, podczas gdy TsgcHTMLThemeController zarządza motywami jasnym i ciemnym w całej aplikacji.
Trzy drogi startu
Zacznij od miejsca, w którym jesteś.
Nie chcesz budować tego samodzielnie?
Dzięki sgcCustomization HTML opisujesz aplikację, której potrzebujesz, a zespół eSeGeCe buduje ją dla Ciebie z komponentami sgcHTML + sgcWebSockets. Trzy jednorazowe pakiety od €149, a Ty otrzymujesz kompletny projekt, który możesz skompilować, rozbudować i przestylizować swoimi licencjonowanymi komponentami.
Masz już aplikację webową zbudowaną w IntraWeb, uniGUI, TMS WEB Core, Elevate Web Builder lub D2Bridge? Przewodniki krok po kroku przeprowadzą Cię przez przeniesienie jej do sgcHTML, z mapowaniem pojęć dla każdego frameworka. Dostępny jest także formularz pomocy w migracji, jeśli chcesz, aby nasz zespół pomógł zaplanować przenosiny lub wykonał je za Ciebie.
Udostępniaj te same strony zbudowane z komponentów z dowolnej aplikacji Embarcadero WebBroker albo z serwera DataSnap z wypychaniem przez WebSocket na tym samym porcie co Twoje punkty końcowe REST.
Zaufali nam programiści Delphi, C++ Builder, Lazarus i .NET budujący aplikacje czasu rzeczywistego na całym świecie.
Wasza biblioteka sgcWebSockets jest bardzo przydatna i łatwa w konfiguracji. Tak trzymać!
Simone MorettiProgramista Delphi
sgcWebSockets jest niesamowity, a wasze wsparcie jest najlepsze!
Christian MeyerZałożyciel i CTO
Bardzo dziękuję za pomoc i wsparcie, uwielbiam wasze komponenty.
Mark SteinfeldCTO
Wdróż interfejs webowy bez opuszczania swojego IDE.
Dodaj wykresy, gridy, formularze, pulpity i strony czasu rzeczywistego do swojej aplikacji w Delphi, C++ Builder lub .NET, w języku, którego już używasz.