Nowość: sgcCustomization HTML. Budujemy Twoją aplikację webową za Ciebie. Opisz aplikację, której potrzebujesz, a nasz zespół zbuduje ją z sgcHTML + sgcWebSockets. Pakiety od €149.
Poznaj sgcCustomization HTML
Delphi 7 do 13, C++ Builder i .NET 110 komponentów, dziesięć rodzin

sgcHTML: komponenty interfejsu webowego dla Delphi, C++ Builder i .NET

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.

DelphiC++ Builder.NETBootstrap 5 + htmxObsługa danych / TDataSetBez potrzeby pisania JavaScriptu

Wolisz nie budować tego samodzielnie? Zbudujemy to za Ciebie →

Pulpit ERP zbudowany z sgcHTML dla Delphi, pokazany w oknie przeglądarki: karty KPI, słupkowy wykres przychodów i siatka ostatnich faktur.

Pierwsze kroki →

Jedna aplikacja zbudowana wyłącznie z sgcHTML

Klienci, produkty, dostawcy i fakturowanie, z wykresami na pulpicie, administracją opartą na rolach i logowaniem kluczem dostępu. Plik wykonywalny Delphi o rozmiarze 7,7 MB, bez DLL obok, obsługujący kompletny webowy ERP na SQLite.

Pełny ERP z jednego pliku exe

ERP: aplikacja webowa w Delphi zbudowana z sgcHTML, pokazana w działaniu w przeglądarce.

Klienci

ERP: aplikacja webowa w Delphi zbudowana z sgcHTML, pokazana w działaniu w przeglądarce.

Faktury

ERP: aplikacja webowa w Delphi zbudowana z sgcHTML, pokazana w działaniu w przeglądarce.

Raporty

110 komponentów, dziesięć rodzin

Od nawigacji i siatek danych po wykresy, formularze, nakładki i czat AI: pełne słownictwo Bootstrap 5 jako natywne komponenty. Każdy ma własną stronę z przykładami dla Delphi, C++ Builder i .NET.

Nawigacja i struktura

NavBar, Sidebar, Breadcrumb, Tabs, Pagination, Toolbar, TreeView, Stepper, Dropdown, ButtonGroup, ListGroup, DashboardLayout, Splitter.

Zobacz komponenty →

Dane i tabele

Grid, DataTable, TreeGrid, PivotTable, Calendar, Scheduler, Timeline, ActivityFeed, KanbanBoard, Gantt: z sortowaniem, filtrowaniem, eksportem i powiązaniem ze zbiorem danych.

Zobacz komponenty →

Wykresy i wizualizacja

Chart (Chart.js), CandlestickChart, Gauge, Heatmap, Sparkline, TreeMap, Diagram (przepływ SVG), Map (Leaflet), QRCode, Barcode: wizualizacje oparte na Twoich własnych zbiorach danych.

Zobacz komponenty →

Formularze i pola

Form, Edit, Memo, CheckBox, RadioGroup, Select, MultiSelect, InputGroup, AutoComplete, DatePicker, TimePicker, ColorPicker, Slider, FileUpload, RichEditor, Rating, SignaturePad, Transfer.

Zobacz komponenty →

Treść i układ

Panel, StatCard, Accordion, Carousel, Image, Avatar, Video, Badge, PDFViewer: karty, multimedia i kafelki KPI dla pulpitów.

Zobacz komponenty →

Nakładki i komunikaty

Modal, Offcanvas, Popover, Toast, Snackbar, Notification, Spinner, Placeholder, ContextMenu, ProgressBar, JobProgress, LogViewer: okna dialogowe i powierzchnie statusu.

Zobacz komponenty →

Czat i AI

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

Zobacz komponenty →

Uwierzytelnianie

Login, SocialLogin (OAuth), OAuthCallback, WebAuthnLogin (klucze dostępu), UserManagement, RolesPermissions: gotowe procesy logowania i ekrany administracyjne.

Zobacz komponenty →

Przyrządy i SCADA

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.

Zobacz komponenty →

Infrastruktura i silnik

EngineServer, HTMXEngine, PageBuilder, TemplateBootstrap, ThemeController, ThemeBuilder, HTMXFragment, HTMXRouter: elementy niewizualne, które serwują strony i utrzymują je aktywne.

Zobacz komponenty →

Zobacz pełną matrycę funkcji →

Ty piszesz Pascal lub C#. sgcHTML tworzy front-end.

sgcHTML zamienia istniejący back-end w Delphi, C++ Builder lub .NET w serwer aplikacji webowych. Każdy komponent to natywna klasa, która generuje HTML w Bootstrap 5; htmx utrzymuje stronę interaktywną i aktualizowaną na żywo bez ani jednej linii ręcznie pisanego JavaScript.

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; 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 w 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/ciemny i wspólny arkusz stylów. Bootstrap 5.3 i htmx są 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

sgcHTML dostarcza wbudowane teksty interfejsu (przyciski, etykiety, komunikaty walidacji) w 17 językach: angielskim, hiszpańskim, francuskim, niemieckim, portugalskim, włoskim, niderlandzkim, szwedzkim, norweskim, polskim, czeskim, tureckim, rosyjskim, chińskim, japońskim, koreańskim i arabskim. Wybierz jeden za pomocą sgcHTMLSetLanguage, a komponenty renderują się w języku odwiedzającego z poprawnymi natywnymi pismami, w tym CJK, cyrylicą i alfabetem arabskim. Języki pisane od prawej do lewej, takie jak arabski i hebrajski, odwracają całą stronę automatycznie: jest renderowana z dir="rtl", ładuje arkusz stylów RTL Bootstrapa i odbija lustrzanie pasek boczny, siatkę, stepery, czat i pozostałe 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 HTML, atrybutów, JavaScript i URL oraz oczyszczanie adresów URL (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), dzięki czemu dane użytkownika nie mogą wyrwać się ze swojego kontekstu i wstrzyknąć skryptu. Ochrona przed XSS i wstrzyknięciami działa bez dodatkowej pracy.

Języki pisane od prawej do lewej: arabski i hebrajski

Arabski i hebrajski automatycznie odwracają całą stronę od prawej do lewej: dir="rtl", arkusz stylów RTL Bootstrapa i lustrzane komponenty, bez zmian w kodzie.

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.

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.

Otwórz demo na żywo →

Przeczytaj temat pomocy o lokalizacji

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, paginacja, formularz, usuwanie i ścieżka zapisu jednej tabeli jako jeden komponent, nad zestawem danych lub nad 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, zwalidowanymi 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, które blokują 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 roli. Parametry ścieżki i filtry metod w trasach, nawigacja w stylu aplikacji jednostronicowej z szablonu strony oraz funkcje pomocnicze do testowania generowanych znaczników. Zobacz Auth.

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 Pakiet NuGet, wraz z edycją Community.

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.

@* 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"));
        }
    }
}

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.

Pulpit webowy w kilku linijkach

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
}

Zobacz 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.

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 jasny/ciemny w całej aplikacji.

Gdzie działa sgcHTML

CelSzczegóły
Delphi 7 do 13Delphi 7, 2007, 2009, 2010, XE do XE8, 10 Seattle do 10.4 Sydney, 11 Alexandria, 12 Athens i 13 Florence. Obsługiwane są Windows, macOS i Linux.
C++ BuilderC++ Builder (odpowiadające wersje)
.NET.NET 8, .NET 9, .NET 10, .NET Standard 2.0, na hostach Windows, Linux i macOS, z Razor Tag Helpers dla ASP.NET Core.
HostingSerwer HTTP sgcWebSockets, dowolna aplikacja WebBroker, serwer DataSnap lub ASP.NET Core.
PrzeglądarkaZasoby Bootstrap 5 i htmx są wbudowane. Bez CDN w czasie działania.

sgcHTML to biblioteka po stronie serwera: telefon odbiera HTML przez sieć, więc Android i iOS nie są platformami docelowymi kompilacji.

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, pokazana w działaniu w przeglądarce.

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 & BI: aplikacja webowa w Delphi zbudowana z sgcHTML, pokazana w działaniu w przeglądarce.

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, pokazana w działaniu w przeglądarce.

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 →
Magazyn (WMS): aplikacja webowa w Delphi zbudowana z sgcHTML, pokazana w działaniu w przeglądarce.

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 →
Serwis terenowy: aplikacja webowa w Delphi zbudowana z sgcHTML, pokazana w działaniu w przeglądarce.

Serwis terenowy

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

Otwórz demo na żywo →
Konsola administracyjna: aplikacja webowa w Delphi zbudowana z sgcHTML, pokazana w działaniu w przeglądarce.

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 →
Monitor na żywo: aplikacja webowa w Delphi zbudowana z sgcHTML, pokazana w działaniu w przeglądarce.

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 →
Portal klienta: aplikacja webowa w Delphi zbudowana z sgcHTML, pokazana w działaniu w przeglądarce.

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 →
Wielodostępny SaaS: aplikacja webowa w Delphi zbudowana z sgcHTML, pokazana w działaniu w przeglądarce.

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 →
Wielodzierżawowy SaaS: aplikacja webowa Delphi zbudowana z sgcHTML, uruchomiona w przeglądarce.

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

AI Data Pack

Grid danych, tabela przestawna i formularz sterowane zwykłym językiem: filtry, sortowania i grupowania dla 26 000 pozycji zamówień, asystent kolumn AI i inteligentne wklejanie. Działa bez klucza API.

Otwórz demo na żywo →

Shop Assistant

Witryna sklepu zbudowana w całości z komponentów sgcHTML, z pływającym asystentem czatu, którego odpowiedzi opierają się na katalogu produktów. Wersja online nie wymaga klucza API LLM.

Otwórz demo na żywo →

Aplikacje MCP

Aplikacja Delphi renderowana wewnątrz ChatGPT, Claude lub VS Code: narzędzia MCP zwracają strony sgcHTML wyświetlane przez hosta, a ich przyciski nadal tam działają.

Otwórz demo na żywo →

Przyrządy

Sterownia symulowanej pętli kotła: wskaźniki, wyświetlacze, elementy sterowania operatora, wykresy paskowe i oscyloskop utrzymywane na żywo przez serwer, bez odpytywania.

Otwórz demo na żywo →

SCADA / IoT

Symulacja instalacji wody chłodzącej ze zbiornikami, zaworami, pompami i animowanym przepływem, a także wskaźnikami, rejestratorem taśmowym i alarmami, wszystko sterowane przez MQTT. Online działa jako symulowana instalacja.

Otwórz demo na żywo →

Zobacz wszystkie dema online →

Krótkie filmy, bez slajdów

Każdy klip to nagranie ekranu jednej z tych aplikacji w trakcie rzeczywistego działania, z narracją i napisami. Nic nie pobiera się, zanim nie naciśniesz odtwarzania.

Katalog komponentów

Przegląd 110 komponentów, od siatek i wykresów po tablice Kanban i pola podpisu.

Grid i dziewięć jego zachowań

Sortowanie, filtrowanie, stronicowanie, edycja w miejscu, zaznaczanie i powiązanie ze zbiorem danych, wszystko sterowane z Pascala.

htmx w pigułce

Jak podmiana fragmentu zastępuje przeładowanie strony i jak to wygląda w Twoim kodzie Delphi.

Czas rzeczywisty przez WebSocket

Metryki serwera wypychane do fragmentów out-of-band, aktualizujące karty i wykresy w miarę zmian.

Kasa bez warstwy REST

Demo punktu sprzedaży czytające bazę danych w tym samym procesie, bez JSON API pośrodku.

Raportowanie prosto z danych

Pulpity, kreator tabel przestawnych i widok eksploracji dla 27 000 pozycji zamówień.

Pięćdziesiąt komponentów w jednej aplikacji

Demo magazynu, ekran po ekranie zliczające bibliotekę komponentów, na której się opiera.

Dyspozytor i technik obok siebie

Ta sama aplikacja na tablicy w przeglądarce i na telefonie, stale zsynchronizowana.

Izolacja wielodostępna, udowodniona

Jeden plik binarny, jedna baza danych, ścisłe rozdzielenie najemców, pokazane, a nie tylko zadeklarowane.

Portal klienta

Samoobsługowe zamówienia, profil i zgłoszenia do wsparcia za logowaniem.

CRUD na żywo bez przeładowania

Wyszukiwanie w trakcie pisania, dodawanie, edycja w miejscu i usuwanie, podmieniane jako fragmenty htmx.

Helpdesk z obiegiem zgłoszeń

Rejestracja, wątki zgłoszeń i zmiany statusu, wszystko renderowane po stronie serwera.

Asystent AI oparty na Twoich danych

Asystent sklepu odpowiadający na podstawie katalogu produktów, zamiast zmyślać odpowiedź.

Układy całych witryn

Nawigacja, paski boczne i kompozycja stron zbudowane z komponentu Site.

Wpięcie w WebBroker

Dodanie wyjścia sgcHTML do istniejącej aplikacji Delphi WebBroker.

WebBroker i DataSnap razem

Udostępnianie nowoczesnego front-endu z warstwy usług, którą już masz.

Wybierz swoją licencję

Wszystkie licencje obejmują pełny kod źródłowy, 1 rok aktualizacji oraz 70% zniżki na odnowienie.

Delphi i C++ Builder

Zawiera sgcWebSockets Core

€299 / programista

1 rok aktualizacji

  • 110 komponentów HTML/UI
  • Delphi i C++ Builder
  • Silnik Bootstrap 5 + htmx
  • Wiązanie z TDataSet (data-aware)
  • Pełny kod źródłowy
  • Bezpłatna redystrybucja binariów
Single — €299 Team — €449 Site — €749

.NET

.NET Framework, .NET Core i .NET 5+ (NuGet)

€299 / programista

1 rok aktualizacji

  • Komponenty HTML/UI działające po stronie serwera
  • Silnik Bootstrap 5 + htmx
  • Pełny kod źródłowy
  • Bezpłatna redystrybucja binariów
Single — €299 Team — €449 Site — €749

sgcCustomization HTML

Budujemy Twoją aplikację webową za Ciebie.

€149

Trzy pakiety jednorazowe

W sgcCustomization HTML opisujesz potrzebną aplikację, a zespół eSeGeCe buduje ją dla Ciebie z komponentów sgcHTML + sgcWebSockets.

Poznaj sgcCustomization HTML

sgcHTML to samodzielny pakiet komponentów. Cena powyżej obejmuje już środowisko uruchomieniowe sgcWebSockets Core, na którym jest zbudowany, więc nie musisz dodawać niczego więcej do zamówienia.

Zacznij od miejsca, w którym jesteś

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.

Otwórz przewodniki migracji →
Porównanie frameworków →

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.

Hosting na WebBroker i DataSnap →

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.

Poznaj sgcCustomization HTML →

Wypróbuj sgcHTML

sgcHTML jest dołączony do wersji próbnej sgcWebSockets All-Access. Jeden instalator, oba produkty.

Pliki do pobrania RAD Studio / Delphi

Wersja próbna działa przez ograniczony czas na jednej stacji roboczej. Zawiera wszystkie komponenty sgcHTML.

Pobierz wersję próbną →

Pliki do pobrania C++ Builder

C++ Builder (odpowiadające wersje)

Pobierz wersję próbną →

Pakiet NuGet

Zainstaluj bezpośrednio z nuget.org dla wszystkich docelowych wersji .NET.

Zobacz w NuGet →

Dema

Kod źródłowy dem sgcHTML dla ASP.NET Core w serwisie GitHub.

Zobacz w GitHub →

Najczęściej zadawane pytania

Nie. Biblioteka generuje znaczniki Bootstrap 5 i atrybuty htmx, a htmx sprawia, że przycisk wysyła dane zwrotnie i podmienia część strony bez przeładowania. Opisujesz interakcję w Pascalu, a atrybuty są generowane za ciebie. Nadal możesz dodać własny skrypt, gdy chcesz, przez CustomHead i BodyEndHTML.

Sam zapisujesz go do odpowiedzi HTTP. HTML to zwykła właściwość typu string, więc wystarczy dowolny serwer. Dostarczane demo używa TsgcWSHTTPServer w kompilacji Professional, a w przeciwnym razie TIdHTTPServer, ustawia ResponseNo := 200 i ContentType := 'text/html; charset=utf-8'i przypisuje tekst do ContentText.

TsgcHTMLComponent_Site, z jednostki sgcHTML_Component_Site.pas. Renderuje kompletną powłokę strony, więc dostajesz nawigację, panel boczny, motyw i obszar treści bez składania ich samodzielnie. Zbuduj go, wywołaj AddMenu i AddContent lub AddSection, a następnie odczytaj właściwość HTML. Dostarczane demo Site robi dokładnie to.

Gdy budujesz stronę z węzłów, tak, ponieważ węzeł zapisuje tekst i go zabezpiecza. Ryzyko pojawia się, gdy omijasz węzły i sam łączysz znaczniki, na przykład przez AddContent z ciągiem zbudowanym z danych użytkownika. Dla wszystkiego, co niesie dane użytkownika, preferuj jednostki węzłów.

Nie, i jest to celowe. SGC_HTML jest zdefiniowany w linii 885 wewnątrz {$IFNDEF ANDROID} w linii 883 i {$IFNDEF IOS} w linii 884, więc w tych środowiskach każda jednostka sgcHTML kompiluje się do pustej jednostki. To biblioteka po stronie serwera: telefon otrzymuje HTML przez sieć, dlatego cel mobilny nie potrzebuje renderera. Obsługiwane są Windows, macOS i Linux.

Pobrany pakiet zawiera ponad piętnaście dem uruchomieniowych w Demos\60.HTML\01.RunTime, w tym panel ERP, helpdesk, punkt sprzedaży, magazyn, aplikację raportów i aplikację serwisu terenowego. Galeria zawiera krótki film każdego z nich.

Pomoc i zasoby

Pomoc online

Każdy komponent, z przykładami dla Delphi, C++ Builder i .NET.

Pomoc online →

Pierwsze kroki

Uruchom serwer HTTP, podłącz silnik htmx i odpowiadaj na żądania stroną zbudowaną z komponentów.

Szybki start →

Przewodnik PDF

Przewodnik Getting Started: zaprojektuj stronę na formularzu VCL, uruchamiaj kod Delphi z akcji Surface i przejdź przez sześć dem QuickStart.

Przewodnik Getting Started (PDF, po angielsku) →

Matryca funkcji

110 komponentów, dziesięć rodzin

Zobacz pełną matrycę funkcji →

Galeria

Piętnaście prawdziwych aplikacji, działających właśnie teraz

Galeria →
3,000+Programistów
20+Lat
761+Komponentów
30+Integracji API
5Platform
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

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.

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.

Dowiedz się więcej →

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.

Dowiedz się więcej →

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.

Dowiedz się więcej →

sgcSign

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

Dowiedz się więcej →

sgcOpenAPI

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

Dowiedz się więcej →

sgcBiometrics

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

Dowiedz się więcej →

sgcIndy

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

Dowiedz się więcej →

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.

Dowiedz się więcej →

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.

Dowiedz się więcej →

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ż.

Dowiedz się więcej →

sgcSocial

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

Dowiedz się więcej →