sgcHTML

Delphi, C++ Builder 및 .NET에서 바로 완전하고 현대적인 웹 UI를 구축하십시오. sgcHTML은 차트, 그리드, 폼, 대시보드, 채팅 등 60개 이상의 즉시 사용 가능한 위젯을 갖춘 서버 사이드 컴포넌트 프레임워크입니다 — 이들은 Bootstrap 5 마크업으로 렌더링되며 htmx를 통해 인터랙티브하게 유지됩니다. 사용자가 Object Pascal 또는 C#을 작성하면 sgcHTML이 HTML, CSS 및 JavaScript를 작성합니다.

60개 이상의 UI 컴포넌트
Bootstrap 5 + htmx
Delphi / C++ Builder / .NET
JavaScript 불필요

사용자는 Pascal 또는 C#을 작성하고, sgcHTML은 프런트엔드를 작성합니다.

sgcHTML은 기존 Delphi, C++ Builder 또는 .NET 백엔드를 웹 애플리케이션 서버로 전환합니다. 모든 컴포넌트는 Bootstrap 5 HTML을 내보내는 네이티브 클래스입니다. htmx는 손으로 작성한 JavaScript 한 줄 없이도 페이지를 인터랙티브하고 실시간으로 유지합니다.

HTML을 렌더링하는 컴포넌트

모든 위젯은 클래스입니다 — TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form 및 60개 이상이 있습니다. 속성을 설정한 다음 HTML 속성을 읽으면 즉시 제공할 수 있는 깔끔한 Bootstrap 5 마크업을 얻을 수 있습니다.

사용자 자신의 서버로 제공

TsgcHTMLEngine_Server를 배치하거나(또는 HTML을 기존 TsgcWebSocketHTTPServer에 연결하십시오). 요청은 OnCommandGet 핸들러에 도착하며, 사용자는 컴포넌트로 구성한 페이지로 응답합니다. 외부 웹 스택이 필요 없습니다.

htmx를 통한 인터랙티브 기능

TsgcHTMX_Engine_Server를 추가하면 클릭, 폼 전송 및 실시간 업데이트가 사용자의 Pascal/C# 이벤트 핸들러로 왕복합니다. 서버가 HTML 조각을 제자리에서 교체합니다 — SPA 같은 느낌을 주면서 JavaScript 빌드 체인은 전혀 필요 없습니다.

WebSocket을 통한 실시간 처리

htmx가 sgcWebSockets 서버 위에서 실행되기 때문에, 연결된 모든 브라우저에 실시간 HTML을 푸시할 수 있습니다. 대시보드, 모니터 및 채팅 창은 데이터가 변경되는 즉시 업데이트됩니다 — 서버 주도 방식이며 폴링이 없습니다.

테마 및 템플릿

TsgcHTMLTemplate_Bootstrap은 콘텐츠를 완전한 반응형 문서로 감쌉니다. TsgcHTMLThemeControllerTsgcHTMLThemeBuilder는 라이트/다크 테마와 공유 스타일시트를 제공합니다. Bootstrap 5.3과 htmx는 내장되어 제공됩니다 — 런타임에 CDN이 필요 없습니다.

직접 데이터베이스 바인딩

Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline 및 Form은 LoadFromDataSet / DataSource를 통해 TDataSet에 바로 바인딩됩니다. 컴포넌트를 쿼리에 연결하면 행이 렌더링됩니다.

60개 이상의 컴포넌트, 8개 패밀리

내비게이션 크롬에서 데이터 그리드, 차트, 폼, 오버레이 및 AI 채팅까지 — 전체 Bootstrap 5 어휘를 네이티브 컴포넌트로 제공합니다. 각각은 Delphi, C++ Builder 및 .NET 예제가 포함된 자체 페이지로 연결됩니다.

내비게이션 및 구조

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

컴포넌트 보기 →

데이터 및 표

Grid, DataTable, Calendar, Scheduler, Timeline, KanbanBoard, Gantt — 정렬, 필터링, 내보내기 가능하며 데이터셋에 바인딩됩니다.

컴포넌트 보기 →

차트 및 시각화

Chart (Chart.js), Gauge, Diagram (SVG 흐름도), Map (Leaflet) — 사용자 자신의 데이터셋에서 데이터 기반 시각 자료를 만듭니다.

컴포넌트 보기 →

폼 및 입력

Form, Edit, Memo, CheckBox, RadioGroup, Select, InputGroup, AutoComplete, DatePicker, FileUpload, RichEditor, Rating.

컴포넌트 보기 →

콘텐츠 및 레이아웃

Panel, StatCard, Accordion, Carousel, Image, Avatar, Video — 대시보드용 카드, 미디어 및 KPI 타일.

컴포넌트 보기 →

오버레이 및 피드백

Modal, Offcanvas, Popover, Toast, Snackbar, Notification, Spinner, Placeholder — 대화 상자 및 상태 표시 영역.

컴포넌트 보기 →

채팅 및 AI

ChatBox, Chat (WhatsApp 스타일), 제공자 선택기, 토큰 스트리밍 및 RAG 출처 인용 기능을 갖춘 AIChat.

컴포넌트 보기 →

인증

Login, SocialLogin (OAuth), OAuthCallback, WebAuthnLogin (패스키) — 즉시 사용 가능한 로그인 흐름.

컴포넌트 보기 →

전체 기능 매트릭스 보기 →

몇 줄로 만드는 웹 대시보드

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
}

고수준 컴포넌트 또는 저수준 노드

위젯을 한 줄로 원할 때는 즉시 사용 가능한 컴포넌트를 사용하고, 마크업을 완전히 제어해야 할 때는 노드 계층으로 내려가십시오.

컴포넌트 계층

60개 이상의 TsgcHTMLComponent_* 위젯입니다. 속성을 구성하고, 선택적으로 데이터셋을 바인딩한 다음, HTML을 읽습니다. 많은 컴포넌트는 한 줄 인라인 사용을 위한 정적 Build(...) 헬퍼도 제공합니다.

노드 / 구성 계층

TsgcHTMLContainer, TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton, TsgcHTMLTable 같은 기본 요소를 어떤 레이아웃으로든 구성한 다음 TsgcHTMLTemplate_Bootstrap으로 렌더링합니다.

비주얼 페이지 빌더

TsgcHTMLPageBuilder와 그 디자인 타임 편집기를 사용하면 IDE에서 페이지를 조립할 수 있으며, TsgcHTMLThemeController는 앱 전체에 걸쳐 라이트/다크 테마를 관리합니다.

3,000+Developers
20+Years
761+Components
30+API Integrations
5Platforms
30일 환불 보장만족하지 않으세요? 구매 후 30일 이내에 전액 환불을 요청하세요. 환불 정책 보기

IDE를 벗어나지 않고 웹 UI를 배포하십시오

이미 사용 중인 언어로 Delphi, C++ Builder 또는 .NET 애플리케이션에 차트, 그리드, 폼, 대시보드 및 실시간 페이지를 추가하십시오.

eSeGeCe의 다른 제품

sgcHTML을 당사의 다른 Delphi, C++ Builder 및 .NET 컴포넌트 라이브러리와 함께 사용하십시오.

sgcWebSockets

엔터프라이즈 WebSocket, HTTP/2/3, MQTT, AMQP, WebRTC 및 AI/LLM 컴포넌트입니다. sgcHTML은 동일한 고성능 HTTP 및 WebSocket 서버 위에서 제공됩니다.

자세히 보기 →

sgcSign

엔터프라이즈 디지털 서명 — 10개 키 제공자와 21개 EU 국가 프로필을 갖춘 XAdES, PAdES, CAdES 및 ASiC.

자세히 보기 →

sgcOpenAPI

OpenAPI 3.0 파서 및 SDK 생성기입니다. 어떤 OpenAPI 사양이든 몇 초 만에 강력한 형식의 Delphi 클라이언트로 전환합니다.

자세히 보기 →

sgcBiometrics

Delphi 및 C++ Builder용 네이티브 Windows Hello, 지문 및 Windows Biometric Framework 컴포넌트입니다.

자세히 보기 →