Delphi, C++ Builder 및 .NET에서 바로 완전하고 현대적인 웹 UI를 구축하십시오. sgcHTML은 차트, 그리드, 폼, 대시보드, 채팅 등 93개의 즉시 사용 가능한 데이터 연동 위젯을 갖춘 서버 사이드 컴포넌트 프레임워크입니다 — 이들은 TDataSet에 바로 바인딩되고, Bootstrap 5 마크업으로 렌더링되며 htmx를 통해 인터랙티브하게 유지됩니다. 사용자가 Object Pascal 또는 C#을 작성하면 sgcHTML이 HTML, CSS 및 JavaScript를 작성합니다.
서버 사이드 컴포넌트와 Bootstrap 5 마크업, htmx로 Delphi에서 완전한 웹 UI를 만들어요. JavaScript 빌드 단계는 필요 없어요.
아래의 모든 화면은 sgcHTML을 통해 자체 HTML을 서비스하는 Delphi 애플리케이션입니다. JavaScript 빌드 단계도, 별도의 프런트엔드 프로젝트도 없습니다. 각 로그인 페이지에 이미 입력되어 있는 자격 증명으로 로그인하십시오.
Gantt 플래너, Chart.js 시리즈, 게이지, 스파크라인, 트리맵, 히트맵이 모두 사용자의 Pascal 또는 C# 코드에서 생성됩니다. 데이터만 지정하면 sgcHTML이 마크업과 클라이언트 측 연결 코드를 만들어 냅니다.
사용자가 차원, 측정값, 집계 방식을 고르면 교차표가 TFDQuery에서 다시 만들어집니다. 중간에 REST 계층이 없으며, 페이지가 프로세스 내에서 데이터베이스를 직접 읽습니다.
모든 컴포넌트가 반응형 Bootstrap 5 마크업을 렌더링하므로, 창고 단말 화면은 별도의 모바일 코드베이스가 아니라 휴대폰 너비에서 동작하는 같은 컴포넌트 라이브러리입니다.
모든 영상은 이 애플리케이션들이 실제로 실행되는 화면을 녹화한 것이며, 해설과 자막이 함께 제공돼요. 재생 버튼을 누르기 전에는 아무것도 내려받지 않아요.
7.7MB짜리 Delphi 실행 파일 하나가 옆에 DLL 없이 SQLite 기반의 완전한 웹 ERP를 제공해요.
그리드와 차트부터 Kanban 보드와 서명 패드까지 93개 컴포넌트를 둘러봐요.
정렬, 필터, 페이징, 인라인 편집, 선택, 데이터셋 바인딩을 모두 Pascal에서 제어해요.
프래그먼트 교체가 페이지 새로고침을 어떻게 대신하는지, 그리고 그 Delphi 코드가 어떤 모습인지 보여 줘요.
서버 지표를 out-of-band 프래그먼트로 밀어 넣어 카드와 차트를 바뀌는 대로 갱신해요.
POS 데모가 중간에 JSON API 없이 프로세스 안에서 데이터베이스를 바로 읽어요.
주문 라인 27,000건 위에서 대시보드와 피벗 빌더, 탐색 뷰를 돌려요.
창고 데모가 화면마다 어떤 컴포넌트를 쓰는지 하나씩 세어 봐요.
같은 애플리케이션이 데스크톱 보드와 휴대폰에서 서로 동기화된 채로 돌아가요.
바이너리 하나, 데이터베이스 하나로 테넌트별 엄격한 분리를 말이 아니라 화면으로 보여 줘요.
로그인 뒤에서 주문과 프로필, 지원 티켓을 셀프서비스로 처리해요.
입력과 동시에 검색하고, 인라인 추가와 수정, 삭제를 htmx 프래그먼트로 교체해요.
회원 가입, 티켓 스레드, 상태 변경까지 모두 서버에서 렌더링해요.
쇼핑 도우미가 답을 지어내지 않고 상품 카탈로그를 근거로 답해요.
내비게이션과 사이드바, 페이지 구성을 Site 컴포넌트로 만들어요.
기존 Delphi WebBroker 애플리케이션에 sgcHTML 출력을 더해요.
이미 갖추고 있는 서비스 계층 위에서 최신 프런트엔드를 제공해요.
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
}
위젯을 한 줄로 원할 때는 즉시 사용 가능한 컴포넌트를 사용하고, 마크업을 완전히 제어해야 할 때는 노드 계층으로 내려가십시오.
93개의 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로 제공할 수 있습니다.
자세히 보기 →Delphi, C++ Builder용 완전한 WebRTC 미디어 엔진입니다. 오디오/영상 통화, 데이터 채널, 화면 공유를 지원하며, sgcWebSockets Enterprise의 애드온입니다.
자세히 보기 →OpenAPI 3.0 파서 및 SDK 생성기입니다. 어떤 OpenAPI 사양이든 몇 초 만에 강력한 형식의 Delphi 클라이언트로 전환합니다.
자세히 보기 →Delphi 및 C++ Builder용 네이티브 Windows Hello, 지문 및 Windows Biometric Framework 컴포넌트입니다.
자세히 보기 →Delphi 및 C++ Builder용 15개의 AI, LLM 및 MCP 컴포넌트입니다. 채팅 컴포넌트 하나로 OpenAI, Anthropic, Gemini, DeepSeek, Ollama, Grok 및 Mistral에 연결됩니다. 단독으로 동작하며 sgcWebSockets Core 런타임이 함께 제공됩니다.
자세히 보기 →Delphi 및 C++ Builder용 MQTT 3.1.1 및 5.0, AMQP 0.9.1, AMQP 1.0, Apache Kafka 및 STOMP 클라이언트 컴포넌트입니다. 단독으로 동작하며 sgcWebSockets Core 런타임이 함께 제공됩니다.
자세히 보기 →Delphi, C++ Builder용 범용 암호화 라이브러리입니다. 대칭 및 비대칭 암호화, 해싱, 포스트 퀀텀 알고리즘을 지원하며, sgcWebSockets Standard 이상부터 무료로 제공됩니다.
자세히 보기 →WhatsApp Business Cloud API 및 Telegram TDLib 클라이언트입니다. 단독으로 동작하며 sgcWebSockets Core 런타임이 포함되어 있습니다.
자세히 보기 →