Delphi, C++ Builder 및 .NET에서 바로 완전하고 현대적인 웹 UI를 구축하십시오. sgcHTML은 차트, 그리드, 폼, 대시보드, 채팅 등 89개의 즉시 사용 가능한 데이터 연동 위젯을 갖춘 서버 사이드 컴포넌트 프레임워크입니다 — 이들은 TDataSet에 바로 바인딩되고, Bootstrap 5 마크업으로 렌더링되며 htmx를 통해 인터랙티브하게 유지됩니다. 사용자가 Object Pascal 또는 C#을 작성하면 sgcHTML이 HTML, CSS 및 JavaScript를 작성합니다.
sgcHTML은 기존 Delphi, C++ Builder 또는 .NET 백엔드를 웹 애플리케이션 서버로 전환합니다. 모든 컴포넌트는 Bootstrap 5 HTML을 내보내는 네이티브 클래스입니다. htmx는 손으로 작성한 JavaScript 한 줄 없이도 페이지를 인터랙티브하고 실시간으로 유지합니다.
모든 위젯은 클래스입니다 — TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form 및 86개가 더 있습니다. 속성을 설정한 다음 HTML 속성을 읽으면 즉시 제공할 수 있는 깔끔한 Bootstrap 5 마크업을 얻을 수 있습니다.
TsgcHTMLEngine_Server를 배치하거나(또는 HTML을 기존 TsgcWebSocketHTTPServer에 연결하십시오). 요청은 OnCommandGet 핸들러에 도착하며, 사용자는 컴포넌트로 구성한 페이지로 응답합니다. 외부 웹 스택이 필요 없습니다.
sgcHTML은 sgcWebSockets 서버에 종속되지 않습니다. TsgcHTMX_Engine_Server_WebBroker를 통해 모든 Embarcadero WebBroker 애플리케이션에서 컴포넌트로 구성한 동일한 페이지를 제공하거나, REST 엔드포인트와 동일한 포트에서 실시간 WebSocket 푸시를 사용하여 DataSnap 서버에서 제공하십시오.
TsgcHTMX_Engine_Server를 추가하면 클릭, 폼 전송 및 실시간 업데이트가 사용자의 Pascal/C# 이벤트 핸들러로 왕복합니다. 서버가 HTML 조각을 제자리에서 교체합니다 — SPA 같은 느낌을 주면서 JavaScript 빌드 체인은 전혀 필요 없습니다.
htmx가 sgcWebSockets 서버 위에서 실행되기 때문에, 연결된 모든 브라우저에 실시간 HTML을 푸시할 수 있습니다. 대시보드, 모니터 및 채팅 창은 데이터가 변경되는 즉시 업데이트됩니다 — 서버 주도 방식이며 폴링이 없습니다.
TsgcHTMLTemplate_Bootstrap은 콘텐츠를 완전한 반응형 문서로 감쌉니다. TsgcHTMLThemeController와 TsgcHTMLThemeBuilder는 라이트/다크 테마와 공유 스타일시트를 제공합니다. Bootstrap 5.3과 htmx는 내장되어 제공됩니다 — 런타임에 CDN이 필요 없습니다.
Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline 및 Form은 LoadFromDataSet / DataSource를 통해 TDataSet에 바로 바인딩됩니다. 컴포넌트를 쿼리에 연결하면 행이 렌더링됩니다.
sgcHTML은 버튼, 레이블, 유효성 검사 메시지 등 내장 UI 텍스트를 17개 언어로 제공합니다: 영어, 스페인어, 프랑스어, 독일어, 포르투갈어, 이탈리아어, 네덜란드어, 스웨덴어, 노르웨이어, 폴란드어, 체코어, 터키어, 러시아어, 중국어, 일본어, 한국어 및 아랍어. sgcHTMLSetLanguage로 하나를 선택하면 컴포넌트가 CJK, 키릴 문자 및 아랍어를 포함한 올바른 네이티브 문자로 방문자의 언어에 맞게 렌더링됩니다.
모든 컴포넌트는 동적 텍스트, 속성, 인라인 JavaScript 및 URL을 자동 HTML, 속성, JavaScript 및 URL 인코딩과 URL 정리(sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL)를 거쳐 처리하므로, 사용자 데이터가 자신의 컨텍스트를 벗어나 스크립트를 주입할 수 없습니다. 추가 작업 없이 XSS 및 주입 방어가 켜져 있습니다.
내비게이션 크롬에서 데이터 그리드, 차트, 폼, 오버레이 및 AI 채팅까지 — 전체 Bootstrap 5 어휘를 네이티브 컴포넌트로 제공합니다. 각각은 Delphi, C++ Builder 및 .NET 예제가 포함된 자체 페이지로 연결됩니다.
NavBar, Sidebar, Breadcrumb, Tabs, Pagination, Toolbar, TreeView, Stepper, Dropdown, ButtonGroup, ListGroup, DashboardLayout, Splitter.
컴포넌트 보기 →Grid, DataTable, TreeGrid, PivotTable, Calendar, Scheduler, Timeline, ActivityFeed, KanbanBoard, Gantt — 정렬, 필터링, 내보내기 가능하며 데이터셋에 바인딩됩니다.
컴포넌트 보기 →Chart (Chart.js), CandlestickChart, Gauge, Heatmap, Sparkline, TreeMap, Diagram (SVG 흐름도), Map (Leaflet), QRCode, Barcode — 사용자 자신의 데이터셋에서 데이터 기반 시각 자료를 만듭니다.
컴포넌트 보기 →Form, Edit, Memo, CheckBox, RadioGroup, Select, MultiSelect, InputGroup, AutoComplete, DatePicker, TimePicker, ColorPicker, Slider, FileUpload, RichEditor, Rating, SignaturePad, Transfer.
컴포넌트 보기 →Panel, StatCard, Accordion, Carousel, Image, Avatar, Video, Badge, PDFViewer — 대시보드용 카드, 미디어 및 KPI 타일.
컴포넌트 보기 →Modal, Offcanvas, Popover, Toast, Snackbar, Notification, Spinner, Placeholder, ContextMenu, ProgressBar, JobProgress, LogViewer — 대화 상자 및 상태 표시 영역.
컴포넌트 보기 →ChatBox, Chat (WhatsApp 스타일), 제공자 선택기, 토큰 스트리밍 및 RAG 출처 인용 기능을 갖춘 AIChat, 실시간 접속 상태를 위한 Presence.
컴포넌트 보기 →Login, SocialLogin (OAuth), OAuthCallback, WebAuthnLogin (패스키), UserManagement, RolesPermissions — 즉시 사용 가능한 로그인 흐름 및 관리자 화면.
컴포넌트 보기 →EngineServer, HTMXEngine, PageBuilder, TemplateBootstrap, ThemeController, ThemeBuilder, HTMXFragment, HTMXRouter — 페이지를 제공하고 실시간으로 유지하는 비주얼이 아닌 구성 요소.
컴포넌트 보기 →HTTP 서버를 시작하고, htmx 엔진을 연결한 다음, 컴포넌트로 구성한 페이지로 요청에 응답하십시오. Delphi, C++ Builder 및 .NET에서 동일한 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
}
위젯을 한 줄로 원할 때는 즉시 사용 가능한 컴포넌트를 사용하고, 마크업을 완전히 제어해야 할 때는 노드 계층으로 내려가십시오.
89개의 TsgcHTMLComponent_* 위젯입니다. 속성을 구성하고, 선택적으로 데이터셋을 바인딩한 다음, HTML을 읽습니다. 많은 컴포넌트는 한 줄 인라인 사용을 위한 정적 Build(...) 헬퍼도 제공합니다.
TsgcHTMLContainer(자체 닫힘 태그를 위한 Void 플래그 포함), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton, TsgcHTMLTable 같은 기본 요소를 어떤 레이아웃으로든 구성한 다음 TsgcHTMLTemplate_Bootstrap으로 렌더링합니다. 노드 세트에는 TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode, TsgcHTMLImage와 같은 Bootstrap 빌딩 블록도 포함됩니다.
TsgcHTMLPageBuilder와 그 디자인 타임 편집기를 사용하면 IDE에서 페이지를 조립할 수 있으며, TsgcHTMLThemeController는 앱 전체에 걸쳐 라이트/다크 테마를 관리합니다.
sgcCustomization HTML을 사용하면 필요한 애플리케이션을 설명하기만 하면 eSeGeCe 팀이 sgcHTML + sgcWebSockets 컴포넌트로 대신 구축해 드립니다. €149부터 시작하는 세 가지 일회성 패키지가 있으며, 라이선스하신 컴포넌트로 컴파일, 확장 및 스타일 변경이 가능한 완전한 프로젝트를 받게 됩니다.
IntraWeb, uniGUI, TMS WEB Core, Elevate Web Builder 또는 D2Bridge로 구축한 웹 애플리케이션이 이미 있으신가요? 단계별 가이드가 각 프레임워크의 개념 매핑과 함께 sgcHTML로 이전하는 과정을 안내합니다. 저희 팀이 이전을 계획하거나 수행하는 데 도움을 드리길 원하시면 마이그레이션 지원 양식도 있습니다.
sgcHTML을 당사의 다른 Delphi, C++ Builder 및 .NET 컴포넌트 라이브러리와 함께 사용하십시오.
엔터프라이즈 WebSocket, HTTP/2, MQTT, AMQP, WebRTC 및 AI/LLM 컴포넌트입니다. sgcHTML은 동일한 고성능 HTTP 및 WebSocket 서버 위에서 제공됩니다.
자세히 보기 →Delphi, C++ Builder 및 .NET용 QUIC 및 HTTP/3 클라이언트 및 서버 컴포넌트입니다. 손실이 많은 네트워크에서도 더 빠른 페이지 로드를 위해 sgcHTML이 렌더링한 UI를 HTTP/3로 제공할 수 있습니다.
자세히 보기 →OpenAPI 3.0 파서 및 SDK 생성기입니다. 어떤 OpenAPI 사양이든 몇 초 만에 강력한 형식의 Delphi 클라이언트로 전환합니다.
자세히 보기 →Delphi 및 C++ Builder용 네이티브 Windows Hello, 지문 및 Windows Biometric Framework 컴포넌트입니다.
자세히 보기 →