sgcHTMLWeb 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.
ERP demosu | kendi web arayüzünü sunan tek bir Delphi exe
Satış noktasıCanlı izlemeSaha hizmetleri
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.
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.
Sunucu tarafında çizilen Gantt, grafikler ve haritalar
Gantt planlayıcı, Chart.js serileri, göstergeler, mini grafikler, ağaç haritaları ve ısı haritalarının tümü sizin Pascal ya da C# kodunuzdan üretilir. Veriyi siz verirsiniz, işaretlemeyi ve istemci tarafı bağlantıları sgcHTML üretir.
Canlı bir veri kümesi üzerinde anlık pivot oluşturucu
Kullanıcılar boyutları, ölçüleri ve bir toplama işlevini seçer, çapraz tablo bir TFDQuery'den yeniden oluşturulur. Arada REST katmanı yoktur, sayfa veritabanını doğrudan aynı süreç içinde okur.
Aynı bileşenler, elde taşınan bir okuyucuda
Her bileşen duyarlı Bootstrap 5 işaretlemesi üretir, bu yüzden depo terminali düzeni ayrı bir mobil kod tabanı değil, telefon genişliğindeki aynı bileşen kitaplığıdır.
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 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
}
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.
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.
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.
Aynı yapı taşları, büyük ölçekte
ERP demo panosu: KPI kartları, bir gelir grafiği ve son faturalar ızgarası, hepsi bileşenlerden oluşturuldu.
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.
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.
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.
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.
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.
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.
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.
Ç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.
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.
// 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"));
}
}
}
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, ToDataSourceResultthis.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.
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.
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.