sgcHTML Web uygulamaları, Pascal ile yazılmış. JavaScript yok.

Delphi, C++ Builder ve .NET içinden eksiksiz, modern web arayüzleri oluşturun. sgcHTML, 110 hazır widget içeren sunucu taraflı bir bileşen çerçevesidir: grafikler, ızgaralar, formlar, panolar, sohbet ve daha fazlası. Çoğu doğrudan bir TDataSet'e bağlanır, Bootstrap 5 işaretlemesi üretir ve htmx ile etkileşimli kalır. Siz Object Pascal veya C# yazarsınız, HTML, CSS ve JavaScript'i sgcHTML yazar.

Kendiniz geliştirmek istemiyor musunuz? Sizin için biz geliştirelim →
  • Delphi
  • C++ Builder
  • .NET
  • Bootstrap 5 + htmx
  • Veriye duyarlı / TDataSet
  • JavaScript gerekmez
  • 110On ailede arayüz bileşeni
  • 3Dil: Delphi, C++ Builder ve .NET
  • 17Sağdan sola dahil, yerleşik arayüz dili
  • 15Çevrimiçi çalışan gerçek uygulama
  • 0Elle yazılmış JavaScript satırı
Çalışırken izleyin

On sekiz video. Slayt yok.

Her klip, gerçekten çalışan bir uygulamanın seslendirmeli ve altyazılı ekran kaydıdır. Listeden birini seçin. Oynat düğmesine basana kadar hiçbir şey indirilmez.

İki dakikada sgcHTML

Sunucu tarafı bileşenleri, Bootstrap 5 işaretlemesi ve htmx ile Delphi'den eksiksiz bir web arayüzü oluşturun; JavaScript derleme adımı gerekmez.

Canlı demolar

On beş gerçek uygulama, şu anda çalışıyor.

Aşağıdaki her ekran, kendi HTML'ini sgcHTML aracılığıyla sunan bir Delphi uygulamasıdır. JavaScript derleme adımı yok, ayrı bir ön yüz projesi yok. Her oturum açma sayfasında hazır olarak dolu gelen kimlik bilgileriyle oturum açın.

ERP: sgcHTML ile oluşturulmuş, tarayıcıda çalışırken gösterilen bir Delphi web uygulaması. Live

ERP

Müşteriler, ürünler, tedarikçiler ve faturalama; pano grafikleri, role dayalı yönetim ve passkey ile oturum açma.

Canlı demoyu açın →
Raporlama & BI: sgcHTML ile oluşturulmuş, tarayıcıda çalışırken gösterilen bir Delphi web uygulaması. Live

Raporlama & BI

Panolar, bir rapor kataloğu, anlık bir pivot oluşturucu ve aynı süreç içinde sorgulanan 27.000 sipariş satırı üzerinde bir keşif görünümü.

Canlı demoyu açın →
Satış Noktası: sgcHTML ile oluşturulmuş, tarayıcıda çalışırken gösterilen bir Delphi web uygulaması. Live

Satış noktası

Kategoriler, promosyonlar, bekletilen satışlar, vardiya yönetimi ve canlı bir müşteri ekranı içeren dokunmatik bir kasa.

Canlı demoyu açın →
Saha Hizmetleri: sgcHTML ile oluşturulmuş, tarayıcıda çalışırken gösterilen bir Delphi web uygulaması. Live

Saha hizmetleri

Teknisyenleri ve işleri planlamak için bir iş atama panosu, Gantt planlayıcı ve canlı teknisyen haritası.

Canlı demoyu açın →
Depo (WMS): sgcHTML ile oluşturulmuş, tarayıcıda çalışırken gösterilen bir Delphi web uygulaması. Live

Depo (WMS)

Mal kabul, sevkiyat, eldeki stok, hareketler ve döngü sayımları; ayrıca okuyucular için elde taşınan terminal düzeni.

Canlı demoyu açın →
Canlı İzleme: sgcHTML ile oluşturulmuş, tarayıcıda çalışırken gösterilen bir Delphi web uygulaması. Live

Canlı izleme

Sunucu metrikleri WebSocket üzerinden bant dışı htmx parçalarına iletilir, KPI kartlarını ve grafikleri gerçek zamanlı günceller.

Canlı demoyu açın →
Yönetim Konsolu: sgcHTML ile oluşturulmuş, tarayıcıda çalışırken gösterilen bir Delphi web uygulaması. Live

Yönetim Konsolu

Yazdıkça arama, satır içi ekleme, düzenleme ve silme; hepsi sayfa yenilemesi olmadan htmx parçaları olarak yerleşir.

Canlı demoyu açın →
Sağdan Sola (RTL): sgcHTML ile oluşturulmuş, tarayıcıda çalışırken gösterilen bir Delphi web uygulaması. Live

Sağdan Sola (RTL)

İngilizce, Arapça ve İbranice tek bir sayfa. Arapça ya da İbranice'yi seçin, kenar çubuğundan ızgaraya kadar tüm yerleşim sağdan sola döner. Kod değişikliği yok, yalnızca dil.

Canlı demoyu açın →
Müşteri Portalı: sgcHTML ile oluşturulmuş, tarayıcıda çalışırken gösterilen bir Delphi web uygulaması. Live

Müşteri Portalı

Müşterilerin oturum açtıktan sonra kendi siparişlerini, profilini ve destek biletlerini gördüğü bir self servis alanı.

Canlı demoyu açın →
Çok Kiracılı SaaS: sgcHTML ile oluşturulmuş, tarayıcıda çalışırken gösterilen bir Delphi web uygulaması. Live

Çok Kiracılı SaaS

Kiracı başına yalıtılmış bir kontrol düzleminin önünde herkese açık bir tanıtım sitesi, fiyatlandırma sayfası ve kayıt akışı.

Canlı demoyu açın →

Daha fazla çevrimiçi demo: AI, enstrümanlar ve SCADA

Tüm çevrimiçi demoları görün →

Nasıl çalışır

Siz Pascal veya C# yazarsınız. Ön yüzü sgcHTML yazar.

Bir HTTP sunucusu başlatın, htmx motorunu ekleyin ve istekleri bileşenlerden oluşturulmuş bir sayfayla yanıtlayın. Delphi, C++ Builder ve .NET'te aynı API.

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. Bir sunucu başlatın, htmx'i ekleyinBir TsgcWSHTTPServer istekleri yanıtlar, bir TsgcHTMX_Engine_Server ise sayfayı WebSocket üzerinden etkileşimli ve canlı tutar.
  2. Sayfayı bileşenlerden oluşturunBir grafiğin, ızgaranın veya formun özelliklerini ayarlayın, ardından HTML'ini okuyun. TsgcHTMLTemplate_Bootstrap onu eksiksiz, duyarlı bir belgeye sarar.
  3. Sunun ve güncellemeleri itinTıklamalar ve form gönderimleri olay işleyicilerinize gidip gelir, sunucu da HTML parçalarını yerinde değiştirir. JavaScript derleme zinciri yok.
Delphi için sgcHTML ile oluşturulmuş ERP panosu, bir tarayıcı penceresinde: KPI kartları, bir gelir sütun grafiği ve son faturalar ızgarası.
ERP demo panosu: KPI kartları, bir gelir grafiği ve son faturalar ızgarası, hepsi bileşenlerden oluşturuldu.

Başlangıç kılavuzunu okuyun

Kaputun altında

Arka ucunuz web sunucusu olur.

sgcHTML, mevcut Delphi, C++ Builder veya .NET arka ucunuzu bir web uygulaması sunucusuna dönüştürür. Her bileşen, Bootstrap 5 HTML üreten yerel bir sınıftır ve htmx, tek satır elle yazılmış JavaScript olmadan sayfayı etkileşimli ve canlı tutar.

HTML üreten bileşenler

Her widget bir sınıftır: TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form ve 86 tanesi daha. Özelliklerini ayarlayın, ardından sunmaya hazır temiz Bootstrap 5 işaretlemesi almak için HTML özelliğini okuyun.

Kendi sunucunuz tarafından sunulur

Bir TsgcHTMLEngine_Server bileşeni bırakın (veya HTML'i mevcut bir TsgcWebSocketHTTPServer bileşenine bağlayın). İstekler OnCommandGet işleyicinize ulaşır ve siz bileşenlerden oluşturulmuş bir sayfayla yanıt verirsiniz. Harici bir web yığını yok.

WebBroker & DataSnap barındırma

sgcHTML, sgcWebSockets sunucusuna bağlı değildir. Bileşenlerden oluşturulan aynı sayfaları, TsgcHTMX_Engine_Server_WebBroker aracılığıyla herhangi bir Embarcadero WebBroker uygulamasından ya da REST uç noktalarınızla aynı portta canlı WebSocket iletimi olan bir DataSnap sunucusundan sunun.

WebBroker & DataSnap barındırma →

htmx ile etkileşimli

Bir TsgcHTMX_Engine_Server ekleyin; tıklamalar, form gönderimleri ve canlı güncellemeler Pascal veya C# olay işleyicilerinize gidip gelir. Sunucu HTML parçalarını yerinde değiştirir. SPA hissi, JavaScript derleme zinciri olmadan.

WebSocket üzerinden gerçek zamanlı

htmx, sgcWebSockets sunucusu üzerinde çalıştığı için bağlı her tarayıcıya canlı HTML itebilirsiniz. Panolar, monitörler ve sohbet pencereleri verileriniz değiştiği anda güncellenir, sunucu tarafından yönlendirilir, yoklama yoktur. Bir proxy WebSocket'leri engellediğinde aynı sayfa güncellemelerini bunun yerine sunucu tarafından gönderilen olaylar üzerinden alabilir.

Tema & şablonlar

TsgcHTMLTemplate_Bootstrap, içeriğinizi eksiksiz, duyarlı bir belgeye sarar. TsgcHTMLThemeController ve TsgcHTMLThemeBuilder açık ve koyu temalar ile ortak bir stil sayfası sağlar. Bootstrap 5.3 ve htmx gömülü gelir, çalışma zamanında CDN yoktur.

Doğrudan veritabanı bağlama

Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline ve Form, LoadFromDataSet / DataSource aracılığıyla doğrudan bir TDataSet'e bağlanır. Bir bileşeni bir sorguya yönlendirin, satırları işlesin.

Yerelleştirilmiş arayüz, 17 dil

Yerleşik arayüz metni (düğmeler, etiketler, doğrulama iletileri) İngilizce, İspanyolca, Fransızca, Almanca, Portekizce, İtalyanca, Felemenkçe, İsveççe, Norveççe, Lehçe, Çekçe, Türkçe, Rusça, Çince, Japonca, Korece ve Arapça dillerinde sunulur. sgcHTMLSetLanguage ile birini seçin. Arapça ve İbranice tüm sayfayı otomatik olarak sağdan sola çevirir: dir="rtl", Bootstrap'in RTL stil sayfası ve yansıtılmış bileşenler, kod değişikliği olmadan.

Varsayılan olarak güvenli çıktı

Her bileşen; dinamik metnini, özniteliklerini, satır içi JavaScript'ini ve URL'lerini otomatik kodlama ve URL temizleme (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL) üzerinden geçirir, böylece kullanıcı verisi bağlamından çıkıp betik enjekte edemez.

Bileşen kütüphanesi

110 bileşen, on aile.

Gezinme öğelerinden veri ızgaralarına, grafiklere, formlara, katmanlara ve AI sohbetine kadar tüm Bootstrap 5 sözlüğü yerel bileşenler olarak. Her biri, Delphi, C++ Builder ve .NET örnekleriyle kendi sayfasına bağlanır.

Gezinme & Yapı

Görüntüleyin →
  • NavBar
  • Sidebar
  • Breadcrumb
  • Tabs
  • Pagination
  • Toolbar
  • TreeView
  • Stepper
  • Dropdown
  • ButtonGroup
  • ListGroup
  • DashboardLayout
  • Splitter

Veri & Tablolar

Görüntüleyin →
  • Grid
  • DataTable
  • TreeGrid
  • PivotTable
  • Calendar
  • Scheduler
  • Timeline
  • ActivityFeed
  • KanbanBoard
  • Gantt

Sıralanabilir, filtrelenebilir, dışa aktarılabilir, veri kümesine bağlı.

Grafikler & Görselleştirme

Görüntüleyin →
  • Chart (Chart.js)
  • CandlestickChart
  • Gauge
  • Heatmap
  • Sparkline
  • TreeMap
  • Diagram (SVG akışı)
  • Map (Leaflet)
  • QRCode
  • Barcode

Kendi veri kümelerinizden veriye dayalı görseller.

Formlar & Girdiler

Görüntüleyin →
  • Form
  • Edit
  • Memo
  • CheckBox
  • RadioGroup
  • Select
  • MultiSelect
  • InputGroup
  • AutoComplete
  • DatePicker
  • TimePicker
  • ColorPicker
  • Slider
  • FileUpload
  • RichEditor
  • Rating
  • SignaturePad
  • Transfer

İçerik & Düzen

Görüntüleyin →
  • Panel
  • StatCard
  • Accordion
  • Carousel
  • Image
  • Avatar
  • Video
  • Badge
  • PDFViewer

Panolar için kartlar, medya ve KPI kutuları.

Katmanlar & Geri Bildirim

Görüntüleyin →
  • Modal
  • Offcanvas
  • Popover
  • Toast
  • Snackbar
  • Notification
  • Spinner
  • Placeholder
  • ContextMenu
  • ProgressBar
  • JobProgress
  • LogViewer

Diyaloglar ve durum yüzeyleri.

Sohbet & Yapay Zeka

Görüntüleyin →
  • ChatBox
  • Chat (WhatsApp tarzı)
  • AIChat
  • Presence

Sağlayıcı seçicili, token akışlı ve RAG kaynak alıntılı AIChat, canlı çevrimiçi durum için Presence.

Kimlik Doğrulama

Görüntüleyin →
  • Login
  • SocialLogin (OAuth)
  • OAuthCallback
  • WebAuthnLogin (passkeys)
  • UserManagement
  • RolesPermissions

Hazır oturum açma akışları ve yönetim ekranları.

Enstrümanlar & SCADA

Görüntüleyin →
  • Gauge
  • LinearGauge
  • LED
  • LEDBar
  • SegmentDisplay
  • Odometer
  • AnalogClock
  • Compass
  • VUMeter
  • Knob
  • ToggleSwitch
  • PushButton
  • NumericStepper
  • StripChart
  • Oscilloscope
  • Annunciator
  • SCADAPanel

Sunucu tarafından canlı tutulan, MQTT bağlamalı kontrol odası panelleri.

Altyapı & Motor

Görüntüleyin →
  • EngineServer
  • HTMXEngine
  • PageBuilder
  • TemplateBootstrap
  • ThemeController
  • ThemeBuilder
  • HTMXFragment
  • HTMXRouter

Sayfaları sunan ve canlı tutan görsel olmayan parçalar.

Tam özellik matrisini görün

Yeni eklenenler

sgcHTML'de yenilikler.

Her ekleme siz kullanana kadar kapalıdır, bu yüzden bunlardan birini kullanmayan bir sayfa tıpatıp eskisi gibi işlenir. Tam liste özellik matrisinde.

Sayfanız ChatGPT ve Claude içinde

Bir MCP aracı metin yerine bir sayfayla yanıt verir. Bu sayfa, herhangi bir web sayfası için kullandığınız aynı bileşenlerle oluşturulur ve ChatGPT, Claude ile VS Code tarafından görüntülenir. Enterprise veya All-Access sürümü ya da sgcAI paketi gerekir.

MCPApp'i görün →

AI sayfa üreticisi

Bir sayfayı tarif edin ya da tasarımcıya bir ekran görüntüsü verin, sayfayı kendi bileşenlerinizden oluşturur. Kayıt defterinizden oluşturulan bir şemaya göre yanıt verir, bu yüzden sunmadığınız bir sınıfın adını veremez ve siz kabul edene kadar hiçbir şey uygulanmaz. Enterprise veya All-Access sürümünün ya da sgcAI paketinin AI birimlerini gerektirir.

Kılavuzu okuyun →

Tek bir bileşen olarak CRUD

Tek bir tablonun liste, arama, sayfalama, form, silme ve yazma yolu tek bir bileşen olarak, bir veri kümesi üzerinden ya da kendi SQL'iniz üzerinden. Bir IDE sihirbazı onu oluşturur.

CRUD'u görün →

Izgaraya soru sorun

Sade bir dille sorulan soru, hiçbir şey uygulanmadan önce kendi sütunlarınıza göre doğrulanan filtrelere, sıralamalara, gruplamalara ve vurgulara dönüşür. Yerleşik bir ayrıştırıcı sayesinde API anahtarı olmadan çalışır, sürümünüzde AI birimleri varsa yedi sağlayıcıyla çalışır.

AIAssistant'ı görün →

Kapalı bir tarayıcıya ulaşın

WebSocket'leri engelleyen ağlar için sunucu tarafından gönderilen olaylar, çalışmayan bir tarayıcı için Web Push, bir bildirim gelen kutusu ve bir tercihler tablosu. Web Push için Enterprise veya All-Access sürümü gerekir.

WebPush'u görün →

Oturumlar, yönlendirme ve test

Çerezli oturumlar, CSRF belirteçleri, oturum açma kısıtlaması ve role göre rota koruması. Rotalarda yol parametreleri ve yöntem filtreleri, sayfa şablonundan tek sayfa gezinmesi ve ürettiğiniz işaretlemeyi test etmeye yarayan yardımcılar.

Auth'u görün →
.NET geliştiricileri için

ASP.NET Core Razor Tag Helpers.

ASP.NET Core MVC veya Razor Pages uygulamalarını Telerik ya da DevExpress tarzında geliştiriyorsanız, sgcHTML artık aynı dili konuşuyor. <sgc-grid>, <sgc-form>, <sgc-dialog> ve <sgc-chart> gibi Tag Helper'lar ile Html.Sgc() altındaki akıcı (fluent) karşılıkları, sunucu tarafında Bootstrap 5 HTML'i işler ve controller'larınızla htmx üzerinden konuşur. Öğrenilecek bir JavaScript framework'ü ve yazılacak bir JSON veri kaynağı yoktur. Razor katmanı, Community sürümü dahil esegece.sgcHTML.AspNetCore NuGet paketiyle gelir ve bir sonraki sürümle kullanıma sunulur.

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

IQueryable üzerinde bir grid

<sgc-grid> sayfalama, sıralama, filtreleme (metin ve aralık), arama ve XLSX ile PDF'e dışa aktarmayı sunucuda yapar. Controller this.SgcGrid(request, query) ile yanıt verir ve EF Core her tıklamayı parametreli SQL'e çevirir. push-url sayfayı, sıralamayı ve filtreleri adres çubuğunda tutar, böylece yenileme ve geri düğmesi çalışır.

asp-for ile bağlanan formlar

<sgc-textbox>, <sgc-select>, <sgc-datepicker>, <sgc-checkbox> ve <sgc-autocomplete>, asp-for ile modelinize bağlanır ve ModelState hatalarını her girdinin altında gösterir. <sgc-form hx="true"> htmx üzerinden gönderir, this.SgcRedirect(url) ise geçerli bir kayıttan sonra yönlendirir.

Diyalogda düzenleme

sgc-dialog="name" olan her öğe URL'sini bir <sgc-dialog> içine yükler. Geçerli bir gönderimden sonra this.SgcCloseDialog("edit-order", refresh: "orders") diyalogu kapatır ve gridi yeniler, kendi betiğiniz olmadan açılır pencerede düzenleme deseni.

SignalR olmadan canlı itilen grafikler

<sgc-chart> statik veri çizer, refresh-every="5s" ile bir action'ı yoklar ya da live="true" olur: bir arka plan servisi hub.BroadcastChartAsync(...) çağırır ve açık her tarayıcı grafiği sgcHTML WebSocket üzerinden yeniden çizer. Telerik ve DevExpress grafikleri sunucudan itme için SignalR altyapısı gerektirir, sgcHTML'de bu yerleşiktir.

Telerik UI for ASP.NET Core veya DevExpress'ten mi geliyorsunuz? [DataSourceRequest] SgcDataRequest olur, ToDataSourceResult this.SgcGrid(request, query) olur (yalnızca veri için query.ToSgcDataResult(request)), Html.Kendo().TextBoxFor(m => m.X) ise Html.Sgc().TextBoxFor(m => m.X) olur. Çalıştırılabilir MVC demosu 22.RazorMvc, sgcHTML ile EF Core üzerinde yazılmış Telerik sipariş örneğidir.

İki API katmanı

Üst düzey bileşenler veya alt düzey düğümler.

Tek satırda bir bileşen istediğinizde hazır bileşenlere uzanın ya da işaretleme üzerinde tam denetime ihtiyaç duyduğunuzda düğüm katmanına inin.

Bileşen katmanı

110 TsgcHTMLComponent_* bileşeni. Özellikleri yapılandırın, isteğe bağlı olarak bir veri kümesi bağlayın, HTML'i okuyun. Çoğu, tek satırlık satır içi kullanım için bir statik Build(...) yardımcısı da sunar.

Düğüm / kompozisyon katmanı

TsgcHTMLContainer (kendiliğinden kapanan etiketler için bir Void bayrağıyla), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton ve TsgcHTMLTable gibi temel öğeler herhangi bir düzene kompoze edilir, ardından TsgcHTMLTemplate_Bootstrap ile işlenir. Düğüm kümesi ayrıca TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode ve TsgcHTMLImage gibi Bootstrap yapı taşlarını da içerir.

Görsel sayfa oluşturucu

TsgcHTMLPageBuilder ve tasarım zamanı düzenleyicisi sayfaları IDE içinde bir araya getirmenizi sağlar, TsgcHTMLThemeController ise tüm uygulamada açık ve koyu temayı yönetir.

Üç giriş yolu

Bulunduğunuz yerden başlayın.

Kendiniz geliştirmek istemiyor musunuz?

sgcCustomization HTML ile ihtiyacınız olan uygulamayı tarif edersiniz ve eSeGeCe ekibi onu sgcHTML + sgcWebSockets bileşenleriyle sizin için oluşturur. €149 fiyatından başlayan üç tek seferlik paket; lisansladığınız bileşenlerle derleyebileceğiniz, genişletebileceğiniz ve yeniden biçimlendirebileceğiniz eksiksiz bir proje teslim alırsınız.

Başka bir web framework'ünden mi geliyorsunuz?

IntraWeb, uniGUI, TMS WEB Core, Elevate Web Builder veya D2Bridge ile oluşturulmuş bir web uygulamanız mı var? Adım adım kılavuzlar, her çerçeve için bir kavram eşlemesiyle uygulamanızı sgcHTML'e taşıma sürecinde size yol gösterir. Ekibimizin taşımayı planlamasına yardımcı olmasını ya da taşımayı sizin için yapmasını isterseniz bir geçiş yardımı formu da vardır.

Zaten WebBroker veya DataSnap mi kullanıyorsunuz?

Bileşenlerle oluşturulmuş aynı sayfaları herhangi bir Embarcadero WebBroker uygulamasından ya da REST uç noktalarınızla aynı portta canlı WebSocket itmesi sunan bir DataSnap sunucusundan sunun.

Referanslar

Geliştiriciler Ne Diyor

Dünya çapında gerçek zamanlı uygulamalar geliştiren Delphi, C++ Builder, Lazarus ve .NET geliştiricilerinin güvendiği.

sgcWebSockets kütüphaneniz çok kullanışlı ve kurulumu kolay. İyi çalışmalarınızı sürdürün!
Simone Moretti Delphi Geliştiricisi
sgcWebSockets harika ve desteğiniz en iyisi!
Christian Meyer Kurucu ve CTO
Yardımınız ve desteğiniz için çok teşekkürler, bileşenlerinize bayılıyorum.
Mark Steinfeld CTO

IDE'nizden çıkmadan bir web arayüzü yayınlayın.

Delphi, C++ Builder veya .NET uygulamanıza grafikler, ızgaralar, formlar, panolar ve gerçek zamanlı sayfalar ekleyin, zaten kullandığınız dille.

eSeGeCe'den daha fazlası

eSeGeCe'nin Diğer Ürünleri

sgcHTML'i diğer Delphi, C++ Builder ve .NET bileşen kitaplıklarımızla eşleştirin.

sgcWebSockets

Kurumsal WebSocket, HTTP/2, MQTT, AMQP, WebRTC ve yapay zeka/LLM bileşenleri. sgcHTML uygulamanıza gerçek zamanlı mesajlaşmayı ve eksiksiz ağ yığınını ekleyin.

sgcQUIC

Delphi, C++ Builder ve .NET için QUIC ve HTTP/3 istemci ve sunucu bileşenleri. sgcHTML'in oluşturduğu arayüzü, kayıplı ağlarda daha düşük gecikmeli sayfa yüklemeleri için HTTP/3 üzerinden sunun.

sgcWebRTC

Delphi ve C++ Builder için eksiksiz bir WebRTC medya motoru: sesli ve görüntülü aramalar, veri kanalları ve ekran paylaşımı. sgcWebSockets Enterprise için bir eklenti.

sgcSign

Kurumsal dijital imzalar: 10 anahtar sağlayıcısı ve 21 AB ülke profiliyle XAdES, PAdES, CAdES ve ASiC.

sgcOpenAPI

OpenAPI 3.0 ayrıştırıcısı ve SDK oluşturucusu. Herhangi bir OpenAPI belirtimini saniyeler içinde güçlü tipli bir Delphi istemcisine dönüştürün.

sgcBiometrics

Delphi ve C++ Builder için yerel Windows Hello, parmak izi ve Windows Biometric Framework bileşenleri.

sgcIndy

Delphi 7'den 13'e kadar modern TLS, IPv6 ve HTTP/2 desteğine sahip güncellenmiş Indy TCP/IP bileşenleri.

sgcAI

Delphi ve C++ Builder için 15 yapay zeka, LLM ve MCP bileşeni. Tek bir sohbet bileşeni OpenAI, Anthropic, Gemini, DeepSeek, Ollama, Grok ve Mistral'a erişir. Bağımsız bir üründür, sgcWebSockets Core çalışma zamanı pakete dahildir.

sgcMQ

Delphi ve C++ Builder için MQTT 3.1.1 ve 5.0, AMQP 0.9.1, AMQP 1.0, Apache Kafka ve STOMP istemci bileşenleri. Bağımsız bir üründür, sgcWebSockets Core çalışma zamanı pakete dahildir.

sgcCrypto

Delphi ve C++ Builder için genel amaçlı kriptografi kütüphanesi: simetrik ve asimetrik şifreleme, hashing ve kuantum sonrası algoritmalar. sgcWebSockets Standard sürümünden itibaren ücretsiz gelir.

sgcSocial

WhatsApp Business Cloud API ve Telegram TDLib istemcileri. Bağımsız bir üründür, sgcWebSockets Core çalışma zamanı pakete dahildir.

Blogdan Son Yazılar

Tüm yazıları görüntüleyin →

eSeGeCe'nin sgcHTML görünümünü görüyorsunuz.

Bana başka bir açı gösterin →
30 Günlük Para İade GarantisiMemnun kalmadınız mı? Satın alımdan sonraki 30 gün içinde tam para iadesi talep edin. İade politikasına bakın