sgcHTML은 Object Pascal을 HTML로 바꿔 줘요. 컴포넌트 트리로 페이지를 만들고, 문자열 속성 하나를 읽어서, 그 문자열을 HTTP 응답에 쓰면 돼요. 이 페이지에서 바로 그 과정을 따라 해 보고, 이어서 폼, 그리드, 차트, htmx 같은 다음 단계도 안내해요.
스스로 문자열로 렌더링하는 페이지 컴포넌트와, 그 문자열을 브라우저에 전달할 HTTP 서버가 필요해요. 객체는 두 개예요.
TsgcHTMLComponent_Site는 sgcHTML_Component_Site.pas에 선언되어 있고 SGC HTML 팔레트 페이지에 등록돼요. 내비게이션, 사이드바, 테마, 콘텐츠까지 전체 셸을 렌더링해요.
HTML은 TsgcHTMLComponent에서 상속받아요. 읽기 전용이며, 이 속성을 읽으면 현재 컴포넌트 트리가 완전한 HTML 문서로 렌더링돼요.
HTTP 응답에 문자열을 쓸 수 있는 것이면 무엇이든 괜찮아요. 포함된 데모는 Professional 빌드를 사용할 수 있으면 sgcWebSocket_Server.pas의 TsgcWSHTTPServer를 쓰고, 그렇지 않으면 TIdHTTPServer로 대체해요.
데스크톱과 서버 전용이에요. SGC_HTML은 {$IFNDEF ANDROID}와 {$IFNDEF IOS} 안에서 정의되므로 모바일에서는 모든 sgcHTML 유닛이 빈 코드로 컴파일돼요. Windows, macOS, Linux는 모두 괜찮아요.
에디션 열은 코드를 제어하는 define이며, Source/sgcVer.inc에서 그 define이 있는 줄 번호도 함께 적었어요.
| 항목 | 값 |
|---|---|
| IDE | Delphi 7부터 RAD Studio 13까지, 그리고 C++Builder 2007부터 13까지. Lazarus도 지원하며, Linux에서 실행해 본 ERP 데모가 포함되어 있어요. |
| Uses 절 | 페이지 셸에는 sgcHTML_Component_Site, 그리고 실제로 쓰는 노드 유닛을 추가하세요. 예를 들면 sgcHTML_Nodes, sgcHTML_Nodes_Bootstrap, sgcHTML_Nodes_Table, sgcHTML_Nodes_Forms, sgcHTML_Nodes_Charts가 있어요. |
| 팩 define | SGC_PACK_HTML은 871번째 줄에 정의되어 있으며, 870번째 줄부터 874번째 줄까지 이어지는 {$IFDEF SGC_EDT_ALL} 블록 안에 있어요. sgcWebSockets 소스 트리에서는 All-Access 에디션이 이를 켠다는 뜻이에요. sgcHTML은 자체 설치 프로그램과 자체 라이선스를 가진 독립 제품으로도 판매돼요. |
| 기능 define | 882번째 줄부터 892번째 줄까지의 {$IFDEF SGC_PACK_HTML} 블록 안에 있어요. 885번째 줄의 SGC_HTML과 886번째 줄의 SGC_HTMX는 모두 883번째 줄의 {$IFNDEF ANDROID}와 884번째 줄의 {$IFNDEF IOS} 안에 있어요. 디자인 타임 비주얼 화면인 SGC_HTML_CONTROL은 887번째 줄의 {$IFDEF MSWINDOWS} 안, 888번째 줄에 있어요. |
| 모바일에서는 어떻게 되나요 | 모든 sgcHTML 유닛은 인터페이스를 {$IFDEF SGC_HTML}로 감싸고 있어서 Android나 iOS 빌드에서는 빈 유닛으로 컴파일돼요. 서버 측 라이브러리이기 때문이에요. 휴대폰은 Pascal이 아니라 HTML을 받아요. |
| 등록 | 팔레트 페이지는 SGC_PACK_HTML과 SGC_HTML이 모두 정의된 경우에만 등록돼요. |
어떤 컴포넌트가 있을까요? 그리드와 스케줄러부터 차트, 리치 에디터, QR 코드, 카메라 스캐너까지 약 팔십 개가 있어요. 기능 매트릭스가 영역별로 묶어 보여 주고, 각 컴포넌트는 컴포넌트 아래에 자체 페이지가 있어요.
sgcHTML은 독립 패키지로 제공되며 sgcWebSockets의 All-Access 빌드에도 들어 있어요. 설치 방식은 같아요.
다운로드한 파일을 폴더에 압축 해제하세요. 아래에서는 이 폴더를 {$DIR}이라고 불러요.
Tools, Options, Library로 이동해요. {$DIR}\source와 사용하는 IDE의 lib 폴더를 추가하세요. 예를 들면 {$DIR}\libD13\$(Platform)이에요.
{$DIR}\Packages\ 아래에서 IDE 버전에 맞는 패키지 그룹을 여세요. 런타임 .dpk를 먼저 컴파일하고 그다음 디자인 타임 dcl 패키지를 설치해요. Lazarus는 대신 .lpk를 사용해요.
약 팔십 개의 컴포넌트가 들어 있는 SGC HTML 페이지가 나타나요. Android나 iOS 대상에서 보이지 않는 것은 정상이에요. 그곳에서는 SGC_HTML이 제외되기 때문이에요.
{$DIR}\Demos\60.HTML\01.RunTime\07.Site를 열어 빌드하고 실행해 보세요. 콘솔 서버이며 자체 URL을 출력해요. 아래 코드도 여기서 가져온 거예요.
페이지를 만들고, HTML 속성을 읽고, 응답에 써요. 첫 번째 탭은 페이지, 두 번째 탭은 서버, 세 번째 탭은 전체 콘솔 프로그램이에요.
uses
SysUtils, Classes,
// sgc
sgcHTML_Component_Site;
class function TsgcSiteDemoPages.BuildPage: string;
var
oSite: TsgcHTMLComponent_Site;
begin
oSite := TsgcHTMLComponent_Site.Create(nil);
try
oSite.Title := 'sgcHTML Site Layouts';
oSite.Layout := slSidebarLeft;
oSite.AddMenu('Dashboard', '/');
oSite.AddMenu('Customers', '/?page=customers');
oSite.AddSection('Welcome', '<p>Served from Delphi.</p>');
// reading HTML is what runs the render
Result := oSite.HTML;
finally
oSite.Free;
end;
end;Layout은 TsgcHTMLSiteLayout을 받아요. slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail, slOffcanvas 중 하나예요. 기본값은 slTopNavSidebarLeft이므로 위의 줄은 전환 방법을 보여 주려고 넣은 거예요.
uses
SysUtils, Classes,
// sgc
sgcWebSocket_Server,
{$IFDEF SGC_INDY}
sgcIdContext, sgcIdCustomHTTPServer;
{$ELSE}
IdContext, IdCustomHTTPServer;
{$ENDIF}
constructor TsgcSiteDemoServer.Create;
begin
inherited Create;
FPort := 8092;
FHTTP := TsgcWSHTTPServer.Create(nil);
FHTTP.Port := FPort;
FHTTP.OnCommandGet := HandleCommandGet;
end;
procedure TsgcSiteDemoServer.Start;
begin
FHTTP.Active := True;
end;
procedure TsgcSiteDemoServer.SendHTML(AResponseInfo: TIdHTTPResponseInfo;
const aHTML: string);
begin
AResponseInfo.ResponseNo := 200;
AResponseInfo.ContentType := 'text/html; charset=utf-8';
AResponseInfo.ContentText := aHTML;
end;Indy 유닛이 조건부인 이유는, 커스텀 Indy 라이브러리로 빌드하면 sgcIdContext와 sgcIdCustomHTTPServer로 보이고 기본 Indy로 빌드하면 IdContext와 IdCustomHTTPServer로 보이기 때문이에요. 포함된 데모에도 정확히 그 조건문이 들어 있어요. 문자열을 쓸 수 있는 서버라면 무엇이든 괜찮아요. 포함된 데모는 Professional 빌드를 사용할 수 있으면 TsgcWSHTTPServer를 고르고 그렇지 않으면 TIdHTTPServer로 대체해요. 그래서 데모에는 조건문이 있고 이 발췌에는 없어요.
program sgcSiteDemoServer;
{$APPTYPE CONSOLE}
uses
SysUtils,
sgcSiteDemo_Server in 'sgcSiteDemo_Server.pas',
sgcSiteDemo_Pages in 'sgcSiteDemo_Pages.pas';
var
oServer: TsgcSiteDemoServer;
begin
oServer := TsgcSiteDemoServer.Create;
try
oServer.Start;
WriteLn('sgcHTML Site Layouts Demo - http://localhost:' +
IntToStr(oServer.Port));
WriteLn('Press Enter to stop.');
ReadLn;
oServer.Stop;
finally
oServer.Free;
end;
end.콘솔 애플리케이션이라서 폼도 VCL 설정도 필요 없어요. 가능한 가장 짧은 sgcHTML 프로그램이고, 포함된 데모가 실제로 이런 모습이에요.
세 탭 모두 포함된 데모 Demos\60.HTML\01.RunTime\07.Site에서 핵심 부분만 추린 거예요. 전체 프로젝트는 쿼리 문자열로 레이아웃, 테마, 색상 구성도 전환해요. 첫 페이지가 렌더링되고 나면 한 번 읽어 볼 만해요.
프로그램이 수신 대기 중인 URL을 출력해요. 그 URL을 열고, 이어서 전환 옵션을 써 보세요.
프로그램은 시작할 때 콘솔에 http://localhost:8092를 써요. 열어 보세요. 내비게이션, 사이드바, 여러분의 콘텐츠가 있는 페이지가 보이면 렌더링과 서버가 모두 동작하는 거예요.
ActiveFHTTP.Active := True는 성공하거나 예외를 발생시켜요. 다른 프로그램이 이미 8092 포트를 쓰고 있다면 여기서 알 수 있어요.
브라우저가 페이지 대신 원시 마크업을 보여 준다면 응답이 text/html 없이 나간 거예요. ContentText를 할당하기 전에 ContentType을 설정하세요.
포함된 데모는 쿼리 문자열에서 layout, theme, mode를 읽기 때문에 ?layout=topnav&mode=dark로 같은 페이지를 다르게 다시 렌더링할 수 있어요. 컴포넌트가 하는 일을 가장 빨리 확인하는 방법이에요.
렌더링되지 않는 첫 시도는 거의 다 여섯 가지 문제 중 하나가 원인이에요.
등록하려면 SGC_PACK_HTML과 SGC_HTML이 모두 필요해요. 첫 번째는 All-Access 블록 안의 871번째 줄에, 두 번째는 팩 블록 안의 885번째 줄에 정의되어 있어요. Android나 iOS 대상에서는 두 번째가 의도적으로 빠져 있어요.
트리는 만들었지만 HTML을 한 번도 읽지 않았을 거예요. 렌더링을 실행하는 것이 바로 그 속성이에요. 읽는 것 자체가 렌더링 단계 전체이며, 조각이 아니라 완전한 문서를 반환해요.
데모는 요청마다 새 TsgcHTMLComponent_Site를 만들고 끝나면 해제해요. 객체를 캐시해서 재사용한다면 다시 만들기 전에 ClearContent로 내용을 비우는 것을 잊지 마세요.
응답의 콘텐츠 타입을 설정하지 않았어요. 데모는 본문을 쓰기 전에 ContentType := 'text/html; charset=utf-8'을 설정하며, 이게 없으면 일부 클라이언트가 HTML을 텍스트로 표시해요.
그럴 필요가 없어요. Bootstrap 레이아웃, 테이블, 폼, 차트를 위한 노드 유닛이 있고, 마크업을 이어 붙이는 대신 그것들을 조합하는 것이 이 라이브러리의 핵심이에요.
데모는 8092 포트에서 수신해요. 다른 프로그램이 그 포트를 쓰고 있으면 서버가 시작되지 않으니, 더 깊은 문제를 찾기 전에 먼저 포트를 바꿔 보세요.
네 가지 방향이 있고, 모두 같은 패키지 안에 있어요.
폼 노드 유닛이 입력, 선택, 유효성 검사, 레이아웃을 만들고, htmx가 페이지 새로 고침 없이 전송해요. 문자열이 아니라 노드로 만들면 이스케이프 처리도 자동으로 해 줘요.
ERP 대시보드부터 판매 시점 관리, 헬프데스크, 창고, 현장 서비스 앱까지 열두 개의 런타임 데모가 포함되어 있어요. 이 라이브러리를 실제 규모로 보는 가장 빠른 방법이에요.
WebBroker와 DataSnap용 컴포넌트가 있어서 기존 Delphi 웹 애플리케이션을 다시 작성하지 않고도 sgcHTML 페이지를 렌더링할 수 있어요.
카탈로그에는 모든 컴포넌트가 미리 보기와 함께 나와 있어요. 데모 프로젝트는 다운로드 안의 Demos\60.HTML 아래에 있어요.
| TsgcHTMLComponent_Site 페이지 이 빠른 시작이 바탕으로 삼는 페이지 셸을 속성별로 설명해요. | 열기 | |
| 기능 매트릭스 레이아웃, 폼, 데이터, 차트, 인증, 채팅 등을 영역별로 묶었어요. | 열기 | |
| 데모 갤러리 포함된 런타임 데모와 각각의 짧은 동영상. | 열기 | |
| WebBroker와 DataSnap 기존 Delphi 웹 계층에서 sgcHTML 페이지를 렌더링하는 방법. | 열기 | |
| 체험판 다운로드 정식 버전과 같은 설치 프로그램이며 기간 제한이 있어요. | 열기 | |
| 온라인 도움말 자동 생성된 레퍼런스로, 항상 최신 릴리스와 일치해요. | 열기 |
함께 읽어 보세요. Site 컴포넌트, Delphi의 웹 UI 컴포넌트, 더 똑똑한 폼, 데이터 테이블. 모든 제품에는 각자의 빠른 시작이 있으며, 시작하기 페이지에서 모아 볼 수 있어요.
sgcHTML_Component_Site.pas 유닛의 TsgcHTMLComponent_Site예요. 완전한 페이지 셸을 렌더링하므로 내비게이션, 사이드바, 테마, 콘텐츠 영역을 직접 조립하지 않아도 돼요. 컴포넌트를 만들고 AddMenu와 AddContent 또는 AddSection을 호출한 다음 HTML 속성을 읽으세요. 포함된 Site 데모가 정확히 그렇게 해요.
HTML은 일반 string 속성이라 어떤 서버든 사용할 수 있어요. 포함된 데모는 Professional 빌드에서는 TsgcWSHTTPServer를, 그렇지 않으면 TIdHTTPServer를 사용해요. ResponseNo := 200과 ContentType := 'text/html; charset=utf-8'을 설정하고 그 문자열을 ContentText에 할당해요.
sgcVer.inc의 871번째 줄에 정의된 SGC_PACK_HTML이며, 870번째 줄부터 874번째 줄까지 이어지는 {$IFDEF SGC_EDT_ALL} 블록 안에 있어요. 그 소스 트리에서는 All-Access 에디션이 이를 정의해요. sgcHTML은 자체 설치 프로그램이 있는 독립 제품으로도 판매되므로, define으로 추측하지 말고 sgcHTML 가격 페이지에서 현재 라이선스를 확인하세요.
SGC_HTML은 883번째 줄의 {$IFNDEF ANDROID}와 884번째 줄의 {$IFNDEF IOS} 안인 885번째 줄에 정의되므로 그 대상에서는 모든 sgcHTML 유닛이 빈 유닛으로 컴파일돼요. 서버 측 라이브러리라서 휴대폰은 네트워크로 HTML을 받아요. 그래서 모바일 대상에는 렌더러가 필요하지 않아요. Windows, macOS, Linux는 모두 지원해요.
CustomHead와 BodyEndHTML을 통해 직접 만든 스크립트를 추가할 수도 있어요.
Layout은 TsgcHTMLSiteLayout을 받으며 멤버는 slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail, slOffcanvas이고 기본값은 slTopNavSidebarLeft예요. Preset은 TsgcHTMLSitePreset을 받으며 spAdmin, spDashboard, spPortal, spDocs, spLanding, spApp 등의 멤버가 있어요. 색상과 라이트 또는 다크 모드는 Theme 객체에 있어요.
AddContent에 넘기는 경우예요. 사용자 데이터가 들어가는 것에는 노드 유닛을 사용하세요.
Demos\60.HTML\01.RunTime 아래에 열일곱 개의 런타임 데모가 들어 있어요. ERP 대시보드, 헬프데스크, 판매 시점 관리, 창고, 보고서 앱, 현장 서비스 앱 등이 있어요. 갤러리에 각 데모의 짧은 동영상이 있어요.