sgcHTML Aplikacje 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.

Wolisz nie budować tego samodzielnie? Zbudujemy to za Ciebie →
  • Delphi
  • C++ Builder
  • .NET
  • Bootstrap 5 + htmx
  • Obsługa danych / TDataSet
  • Bez potrzeby pisania JavaScriptu
  • 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.

Dema na żywo

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.

ERP: aplikacja webowa w Delphi zbudowana z sgcHTML, uruchomiona w przeglądarce. Na żywo

ERP

Klienci, produkty, dostawcy i fakturowanie, z wykresami na pulpicie, administracją opartą na rolach i logowaniem kluczem dostępu (passkey).

Otwórz demo na żywo →
Raportowanie i BI: aplikacja webowa w Delphi zbudowana z sgcHTML, uruchomiona w przeglądarce. Na żywo

Raportowanie i BI

Pulpity, katalog raportów, kreator tabel przestawnych ad hoc i widok eksploracji dla 27 000 pozycji zamówień, odpytywanych w procesie.

Otwórz demo na żywo →
Punkt sprzedaży: aplikacja webowa w Delphi zbudowana z sgcHTML, uruchomiona w przeglądarce. Na żywo

Punkt sprzedaży

Dotykowa kasa z kategoriami, promocjami, wstrzymanymi sprzedażami, obsługą zmian i wyświetlaczem klienta na żywo.

Otwórz demo na żywo →
Serwis terenowy: aplikacja webowa w Delphi zbudowana z sgcHTML, uruchomiona w przeglądarce. Na żywo

Serwis terenowy

Tablica dyspozycji, harmonogram Gantta i mapa techników na żywo do planowania inżynierów i zleceń.

Otwórz demo na żywo →
Magazyn (WMS): aplikacja webowa w Delphi zbudowana z sgcHTML, uruchomiona w przeglądarce. Na żywo

Magazyn (WMS)

Przyjęcia, wydania, stany magazynowe, ruchy i inwentaryzacje cykliczne, a także układ terminala ręcznego dla skanerów.

Otwórz demo na żywo →
Monitor na żywo: aplikacja webowa w Delphi zbudowana z sgcHTML, uruchomiona w przeglądarce. Na żywo

Monitor na żywo

Metryki serwera wypychane przez WebSocket do fragmentów htmx out-of-band, aktualizujące karty KPI i wykresy w czasie rzeczywistym.

Otwórz demo na żywo →
Konsola administracyjna: aplikacja webowa w Delphi zbudowana z sgcHTML, uruchomiona w przeglądarce. Na żywo

Konsola administracyjna

Wyszukiwanie w trakcie pisania, dodawanie, edycja w miejscu i usuwanie, wszystko podmieniane jako fragmenty htmx bez przeładowania strony.

Otwórz demo na żywo →
Od prawej do lewej (RTL): aplikacja webowa w Delphi zbudowana z sgcHTML, uruchomiona w przeglądarce. Na żywo

Od prawej do lewej (RTL)

Jedna strona po angielsku, arabsku i hebrajsku. Wybierz arabski lub hebrajski, a cały układ obróci się od prawej do lewej, od paska bocznego po grid. Bez zmian w kodzie, tylko język.

Otwórz demo na żywo →
Portal klienta: aplikacja webowa w Delphi zbudowana z sgcHTML, uruchomiona w przeglądarce. Na żywo

Portal klienta

Obszar samoobsługowy, w którym klienci widzą własne zamówienia, profil i zgłoszenia do wsparcia za logowaniem.

Otwórz demo na żywo →
Wielodostępny SaaS: aplikacja webowa w Delphi zbudowana z sgcHTML, uruchomiona w przeglądarce. Na żywo

Wielodostępny SaaS

Publiczna witryna marketingowa, strona cennika i proces rejestracji przed izolowaną dla każdego najemcy płaszczyzną sterowania.

Otwórz demo na żywo →

Więcej dem online: AI, przyrządy i SCADA

Zobacz wszystkie dema online →

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 components
function 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 document
  finally
    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 -> HTML
    return oPage->GetHTML();             // full Bootstrap document
  }
  __finally
  {
    delete oPage;
    delete oChart;
  }
}
using esegece.sgcWebSockets;

// 1. Start a server and attach the htmx engine
var 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 components
string BuildDashboard()
{
    var chart = new TsgcHTMLComponent_Chart();
    chart.ChartType = TsgcHTMLChartType.ctBar;
    chart.AddLabel("Q1"); chart.AddLabel("Q2"); chart.AddLabel("Q3");
    chart.AddDataset("Revenue", new double[] { 1200, 1900, 1500 },
        "#7C3AED", "rgba(124,58,237,.25)", true);

    var page = new TsgcHTMLTemplate_Bootstrap();
    page.Title = "Dashboard";
    page.BodyContent = chart.HTML;   // component -> HTML
    return page.GetHTML();            // full Bootstrap document
}
  1. Uruchom serwer, podłącz htmxTsgcWSHTTPServer odpowiada na żądania, a TsgcHTMX_Engine_Server utrzymuje stronę interaktywną i aktualizowaną na żywo przez WebSocket.
  2. 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.
  3. 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.
Pulpit ERP zbudowany z sgcHTML dla Delphi, pokazany w oknie przeglądarki: karty KPI, słupkowy wykres przychodów i siatka ostatnich faktur.
Pulpit demo ERP: karty KPI, wykres przychodów i grid ostatnich faktur, wszystko zbudowane z komponentów.

Przeczytaj przewodnik Pierwsze kroki

Pod maską

Twój back-end staje się serwerem webowym.

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.

Hosting na WebBroker i DataSnap →

Interaktywność dzięki htmx

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.

Nawigacja i struktura

Zobacz rodzinę →
  • NavBar
  • Sidebar
  • Breadcrumb
  • Tabs
  • Pagination
  • Toolbar
  • TreeView
  • Stepper
  • Dropdown
  • ButtonGroup
  • ListGroup
  • DashboardLayout
  • Splitter

Dane i tabele

Zobacz rodzinę →
  • Grid
  • DataTable
  • TreeGrid
  • PivotTable
  • Calendar
  • Scheduler
  • Timeline
  • ActivityFeed
  • KanbanBoard
  • Gantt

Sortowalne, filtrowalne, eksportowalne, powiązane ze zbiorem danych.

Wykresy i wizualizacja

Zobacz rodzinę →
  • Chart (Chart.js)
  • CandlestickChart
  • Gauge
  • Heatmap
  • Sparkline
  • TreeMap
  • Diagram (przepływ SVG)
  • Map (Leaflet)
  • QRCode
  • Barcode

Wizualizacje oparte na Twoich własnych zbiorach danych.

Formularze i pola

Zobacz rodzinę →
  • Form
  • Edit
  • Memo
  • CheckBox
  • RadioGroup
  • Select
  • MultiSelect
  • InputGroup
  • AutoComplete
  • DatePicker
  • TimePicker
  • ColorPicker
  • Slider
  • FileUpload
  • RichEditor
  • Rating
  • SignaturePad
  • Transfer

Treść i układ

Zobacz rodzinę →
  • Panel
  • StatCard
  • Accordion
  • Carousel
  • Image
  • Avatar
  • Video
  • Badge
  • PDFViewer

Karty, multimedia i kafelki KPI dla pulpitów.

Nakładki i komunikaty

Zobacz rodzinę →
  • Modal
  • Offcanvas
  • Popover
  • Toast
  • Snackbar
  • Notification
  • Spinner
  • Placeholder
  • ContextMenu
  • ProgressBar
  • JobProgress
  • LogViewer

Okna dialogowe i powierzchnie statusu.

Czat i AI

Zobacz rodzinę →
  • ChatBox
  • Chat (w stylu WhatsApp)
  • AIChat
  • Presence

AIChat z wyborem dostawcy, strumieniowaniem tokenów i cytowaniem źródeł RAG, Presence dla statusu online na żywo.

Uwierzytelnianie

Zobacz rodzinę →
  • Login
  • SocialLogin (OAuth)
  • OAuthCallback
  • WebAuthnLogin (klucze dostępu)
  • UserManagement
  • RolesPermissions

Gotowe przepływy logowania i ekrany administracyjne.

Przyrządy i SCADA

Zobacz rodzinę →
  • Gauge
  • LinearGauge
  • LED
  • LEDBar
  • SegmentDisplay
  • Odometer
  • AnalogClock
  • Compass
  • VUMeter
  • Knob
  • ToggleSwitch
  • PushButton
  • NumericStepper
  • StripChart
  • Oscilloscope
  • Annunciator
  • SCADAPanel

Panele sterowni utrzymywane na żywo przez serwer, z powiązaniem MQTT.

Infrastruktura i silnik

Zobacz rodzinę →
  • EngineServer
  • HTMXEngine
  • PageBuilder
  • TemplateBootstrap
  • ThemeController
  • ThemeBuilder
  • HTMXFragment
  • HTMXRouter

Elementy niewizualne, które serwują strony i utrzymują je na żywo.

Zobacz pełną matrycę funkcji

Właśnie dodane

Co nowego w sgcHTML.

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.

Zobacz MCPApp →

Generator stron AI

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.

Przeczytaj przewodnik →

CRUD jako jeden komponent

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.

Zobacz CRUD →

Zadaj gridowi pytanie

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.

Zobacz AIAssistant →

Dotrzyj do zamkniętej przeglądarki

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.

Zobacz WebPush →

Sesje, routing i testowanie

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.

Zobacz Auth →
Dla programistów .NET

Razor Tag Helpers dla ASP.NET Core.

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.

@* Views/Orders/Index.cshtml, page 1 renders inline from the model *@
@model IQueryable<OrderRow>

<sgc-grid name="orders" key="Id" items="Model"
          asp-action="Read" asp-export-action="Export" export="xlsx,pdf"
          page-size="15" sortable="true" filterable="true"
          searchable="true" push-url="true">
    <sgc-column field="Reference" searchable="true" />
    <sgc-column field="Customer" searchable="true" />
    <sgc-column field="OrderDate" title="Date" format="{0:yyyy-MM-dd}" filter="range" />
    <sgc-column field="Total" format="{0:N2}" align="right" filter="range" />
    <sgc-column field="Paid" />
</sgc-grid>
// 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.cs
public 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.

Przechodzisz z innego frameworka webowego?

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.

Już korzystasz z WebBroker lub DataSnap?

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.

REFERENCJE

Co mówią programiści

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 Moretti Programista Delphi
sgcWebSockets jest niesamowity, a wasze wsparcie jest najlepsze!
Christian Meyer Założyciel i CTO
Bardzo dziękuję za pomoc i wsparcie, uwielbiam wasze komponenty.
Mark Steinfeld CTO

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.

Więcej od eSeGeCe

Inne produkty eSeGeCe

Połącz sgcHTML z naszymi pozostałymi bibliotekami komponentów dla Delphi, C++ Builder i .NET.

sgcWebSockets

Komponenty klasy korporacyjnej: WebSocket, HTTP/2, MQTT, AMQP, WebRTC oraz AI/LLM. Dodaj do swojej aplikacji sgcHTML komunikację w czasie rzeczywistym i pełny stos sieciowy.

sgcQUIC

Komponenty klienta i serwera QUIC oraz HTTP/3 dla Delphi, C++ Builder i .NET. Serwuj wyrenderowany interfejs sgcHTML przez HTTP/3, aby skrócić czas wczytywania strony w sieciach o zmiennej jakości.

sgcWebRTC

Pełny silnik mediów WebRTC dla Delphi i C++ Builder: połączenia audio/wideo, kanały danych i udostępnianie ekranu. Dodatek do sgcWebSockets Enterprise.

sgcSign

Podpisy cyfrowe klasy enterprise: XAdES, PAdES, CAdES i ASiC z 10 dostawcami kluczy i 21 profilami krajów UE.

sgcOpenAPI

Parser OpenAPI 3.0 i generator SDK. Zamień dowolną specyfikację OpenAPI w silnie typowanego klienta Delphi w kilka sekund.

sgcBiometrics

Natywne komponenty Windows Hello, odcisku palca i Windows Biometric Framework dla Delphi i C++ Builder.

sgcIndy

Zaktualizowane komponenty Indy TCP/IP z nowoczesnym TLS, obsługą IPv6 i HTTP/2 dla Delphi 7 do 13.

sgcAI

15 komponentów AI, LLM i MCP dla Delphi i C++ Builder. Jeden komponent czatu sięga do OpenAI, Anthropic, Gemini, DeepSeek, Ollama, Grok i Mistral. Produkt samodzielny, środowisko uruchomieniowe sgcWebSockets Core jest w zestawie.

sgcMQ

Komponenty klienckie MQTT 3.1.1 i 5.0, AMQP 0.9.1, AMQP 1.0, Apache Kafka oraz STOMP dla Delphi i C++ Builder. Produkt samodzielny, środowisko uruchomieniowe sgcWebSockets Core jest w zestawie.

sgcCrypto

Uniwersalna biblioteka kryptograficzna dla Delphi i C++ Builder: szyfry symetryczne i asymetryczne, funkcje skrótu oraz algorytmy post-kwantowe. Bezpłatna od edycji sgcWebSockets Standard wzwyż.

sgcSocial

Klienci WhatsApp Business Cloud API i Telegram TDLib. Produkt samodzielny, środowisko uruchomieniowe sgcWebSockets Core jest w zestawie.

Najnowsze wpisy na blogu

Zobacz wszystkie wpisy →

Oglądasz widok sgcHTML eSeGeCe.

Pokaż mi inne ujęcie →
30-dniowa gwarancja zwrotu pieniędzyNie jesteś zadowolony? Poproś o pełny zwrot pieniędzy w ciągu 30 dni od zakupu. Zobacz politykę zwrotów