sgcHTML turns Object Pascal into HTML. You build a page as a component tree, read one string property, and write that string to an HTTP response. This page does exactly that, then points you at the parts you will want next: forms, grids, charts and htmx.
A page component that renders itself to a string, and an HTTP server to hand that string to a browser. Two objects.
TsgcHTMLComponent_Site, declared in sgcHTML_Component_Site.pas and registered on the SGC HTML palette page. It renders a whole shell: navigation, sidebar, theme and content.
HTML, inherited from TsgcHTMLComponent. It is read-only, and reading it renders the current component tree to a complete HTML document.
Anything that can write a string to an HTTP response. The shipped demo uses TsgcWSHTTPServer from sgcWebSocket_Server.pas when a Professional build is available, and falls back to TIdHTTPServer otherwise.
Desktop and server only. SGC_HTML is defined inside {$IFNDEF ANDROID} and {$IFNDEF IOS}, so on mobile every sgcHTML unit compiles to nothing. Windows, macOS and Linux are all fine.
The edition column is the define that gates the code, with the line it sits on in Source/sgcVer.inc.
| What | Value |
|---|---|
| IDE | Delphi 7 through RAD Studio 13, and C++Builder 2007 through 13. Lazarus is supported as well, and an ERP demo ships that has been run on Linux. |
| Uses clause | sgcHTML_Component_Site for the page shell, plus the node units you actually use, for example sgcHTML_Nodes, sgcHTML_Nodes_Bootstrap, sgcHTML_Nodes_Table, sgcHTML_Nodes_Forms and sgcHTML_Nodes_Charts. |
| Pack define | SGC_PACK_HTML is defined on line 871, inside the {$IFDEF SGC_EDT_ALL} block that runs from line 870 to line 874. In the sgcWebSockets source tree that means the All-Access edition turns it on. sgcHTML is also sold as its own product with its own installer and its own licence. |
| Feature defines | Inside the {$IFDEF SGC_PACK_HTML} block on lines 882 to 892: SGC_HTML on line 885 and SGC_HTMX on line 886, both inside {$IFNDEF ANDROID} at 883 and {$IFNDEF IOS} at 884. SGC_HTML_CONTROL, the design-time visual surface, is on line 888 inside {$IFDEF MSWINDOWS} at 887. |
| What that means on mobile | Every sgcHTML unit wraps its interface in {$IFDEF SGC_HTML}, so an Android or iOS build compiles them to empty units. This is a server-side library, which is the point: the phone gets HTML, not Pascal. |
| Registration | The palette page is registered only when both SGC_PACK_HTML and SGC_HTML are defined. |
Which components exist? Around eighty, from a grid and a scheduler to charts, a rich editor, a QR code and a camera scanner. The feature matrix groups them by area, and each has its own page under components.
sgcHTML ships as its own package and also inside the All-Access build of sgcWebSockets. The install is the same shape.
Unzip the download to a folder, called {$DIR} below.
Tools, Options, Library. Add {$DIR}\source and the lib folder for your IDE, for example {$DIR}\libD13\$(Platform).
Open the package group for your IDE version under {$DIR}\Packages\. Compile the runtime .dpk first, then install the design-time dcl one. Lazarus uses the .lpk instead.
A page called SGC HTML appears, holding around eighty components. If it is missing on an Android or iOS target that is expected, because SGC_HTML is excluded there.
Open {$DIR}\Demos\60.HTML\01.RunTime\07.Site, build it and run it. It is a console server, it prints its own URL, and it is where the code below comes from.
Build the page, read the HTML property, write it to the response. The first tab is the page, the second is the server, the third is the whole console program.
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 takes a TsgcHTMLSiteLayout: slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail or slOffcanvas. The default is slTopNavSidebarLeft, so the line above is only there to show the switch.
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;The Indy units are conditional because a build with the custom Indy library sees them as sgcIdContext and sgcIdCustomHTTPServer, and a build on stock Indy as IdContext and IdCustomHTTPServer. The shipped demo carries exactly that conditional. Any server that can write a string will do. The shipped demo picks TsgcWSHTTPServer when a Professional build is available and falls back to TIdHTTPServer otherwise, which is why the demo has a conditional there and this excerpt does not.
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.A console application, so there is no form and no VCL to set up. That is the shortest possible sgcHTML program, and it is what the shipped demo actually is.
All three tabs come from the shipped demo Demos\60.HTML\01.RunTime\07.Site, trimmed to the parts that matter. The full project also switches layout, theme and colour scheme from the query string, which is worth reading once the first page renders.
The program prints the URL it is listening on. Open it, and then try the switches.
The program writes http://localhost:8092 to the console on startup. Open it. A page with navigation, a sidebar and your content means the render and the server are both working.
ActiveFHTTP.Active := True either succeeds or raises. If something else already owns port 8092 you find out here.
A browser that shows raw markup instead of a page means the response went out without text/html. Set ContentType before assigning ContentText.
The shipped demo reads layout, theme and mode from the query string, so ?layout=topnav&mode=dark re-renders the same page a different way. That is the fastest way to see what the component does.
Six problems account for nearly every first attempt that does not render.
Registration needs both SGC_PACK_HTML and SGC_HTML. The first is defined on line 871 inside the All-Access block, the second on line 885 inside the pack block. On an Android or iOS target the second is deliberately absent.
You built the tree but never read HTML. That property is what runs the render. Reading it is the whole rendering step, and it returns a complete document, not a fragment.
The demo builds a fresh TsgcHTMLComponent_Site on every request and frees it afterwards. If you cache the object and reuse it, remember to clear its content with ClearContent before rebuilding.
The response content type was never set. The demo sets ContentType := 'text/html; charset=utf-8' before writing the body, and without it some clients will display the HTML as text.
You do not have to. There are node units for Bootstrap layout, tables, forms and charts, and the whole point of the library is that you compose those instead of concatenating markup.
The demo listens on 8092. If something else owns that port the server will not start, so change the port before you go looking for a deeper problem.
Four directions, all inside the same package.
The forms node unit builds inputs, selects, validation and layout, and htmx posts them without a page reload. Escaping is handled for you when you build nodes rather than strings.
A grid with sorting, filtering and paging, plus charts, stat cards, a scheduler, a Gantt chart and a diagram component.
Twelve runtime demos ship, from an ERP dashboard to a point of sale, a helpdesk, a warehouse and a field service app. They are the fastest way to see the library at real scale.
There are components for WebBroker and DataSnap, so an existing Delphi web application can render sgcHTML pages without being rewritten.
The catalogue lists every component with a preview. Demo projects ship inside the download, under Demos\60.HTML.
| TsgcHTMLComponent_Site page The page shell this quick start builds on, property by property. | Open | |
| Feature matrix Layout, forms, data, charts, auth, chat and the rest, grouped by area. | Open | |
| Demo gallery The shipped runtime demos, each with a short video. | Open | |
| WebBroker and DataSnap Rendering sgcHTML pages from an existing Delphi web tier. | Open | |
| Download the trial The same installer as production, time limited. | Open | |
| Online help The generated reference, always in step with the current release. | Open |
Related reading: the Site component, web UI components in Delphi, smarter forms and data tables. Every product has its own quick start, listed on the getting started page.
TsgcHTMLComponent_Site, from the unit sgcHTML_Component_Site.pas. It renders a complete page shell, so you get navigation, a sidebar, a theme and a content area without assembling them yourself. Build it, call AddMenu and AddContent or AddSection, then read the HTML property. The shipped Site demo does exactly that.
HTML is a plain string property, so any server will do. The shipped demo uses TsgcWSHTTPServer on a Professional build and falls back to TIdHTTPServer otherwise, sets ResponseNo := 200 and ContentType := 'text/html; charset=utf-8', and assigns the string to ContentText.
SGC_PACK_HTML, defined on line 871 of sgcVer.inc, inside the {$IFDEF SGC_EDT_ALL} block that runs from line 870 to line 874. In that source tree the All-Access edition is what defines it. sgcHTML is also sold as its own product with its own installer, so check the sgcHTML pricing page for the current bundles rather than inferring it from the define.
SGC_HTML is defined on line 885 inside {$IFNDEF ANDROID} at line 883 and {$IFNDEF IOS} at line 884, so on those targets every sgcHTML unit compiles to an empty unit. It is a server-side library: the phone receives HTML over the network, which is why the mobile target does not need the renderer. Windows, macOS and Linux are all supported.
CustomHead and BodyEndHTML.
Layout takes a TsgcHTMLSiteLayout, whose members are slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail and slOffcanvas, and it defaults to slTopNavSidebarLeft. Preset takes a TsgcHTMLSitePreset with members including spAdmin, spDashboard, spPortal, spDocs, spLanding and spApp. Colours and light or dark mode live on the Theme object.
AddContent with a string you built from user input. Prefer the node units for anything that carries user data.
Demos\60.HTML\01.RunTime, including an ERP dashboard, a helpdesk, a point of sale, a warehouse, a reports app and a field service app. The gallery has a short video of each.