sgcHTML in vijf minuten

sgcHTML zet Object Pascal om in HTML. Je bouwt een pagina als componentenboom, leest één stringeigenschap en schrijft die string naar een HTTP-respons. Deze pagina doet precies dat en wijst je daarna naar de onderdelen die je daarna wilt: formulieren, grids, grafieken en htmx.

Bootstrap 5 en htmx, aan de serverkant
Geen JavaScript om te schrijven
Windows, Linux en macOS

Wat de eerste pagina nodig heeft

Een paginacomponent die zichzelf naar een string rendert en een HTTP-server die die string aan een browser doorgeeft. Twee objecten.

De paginacomponent

TsgcHTMLComponent_Site, gedeclareerd in sgcHTML_Component_Site.pas en geregistreerd op de palettabpagina SGC HTML. Het rendert een complete shell: navigatie, zijbalk, thema en inhoud.

De ene eigenschap die ertoe doet

HTML, overgeërfd van TsgcHTMLComponent. De eigenschap is alleen-lezen en door haar te lezen wordt de huidige componentenboom gerenderd naar een compleet HTML-document.

De server

Alles wat een string naar een HTTP-respons kan schrijven. De meegeleverde demo gebruikt TsgcWSHTTPServer uit sgcWebSocket_Server.pas als een Professional-build beschikbaar is en valt anders terug op TIdHTTPServer.

Platforms

Alleen desktop en server. SGC_HTML wordt gedefinieerd binnen {$IFNDEF ANDROID} en {$IFNDEF IOS}, dus op mobiel compileert elke sgcHTML-unit tot niets. Windows, macOS en Linux zijn allemaal prima.

Vereisten en edities

De editiekolom noemt de define die de code afschermt, met het regelnummer in Source/sgcVer.inc.

Onderdeel Waarde
IDE Delphi 7 tot en met RAD Studio 13 en C++Builder 2007 tot en met 13. Lazarus wordt ook ondersteund en er zit een ERP-demo bij die op Linux is uitgevoerd.
Uses-clausule sgcHTML_Component_Site voor de paginashell, plus de node-units die je echt gebruikt, bijvoorbeeld sgcHTML_Nodes, sgcHTML_Nodes_Bootstrap, sgcHTML_Nodes_Table, sgcHTML_Nodes_Forms and sgcHTML_Nodes_Charts.
Packdefine SGC_PACK_HTML wordt gedefinieerd op regel 871, binnen het {$IFDEF SGC_EDT_ALL}-blok dat loopt van regel 870 tot regel 874. In de sgcWebSockets-broncode betekent dat dat de All-Access-editie het inschakelt. sgcHTML wordt ook als eigen product verkocht, met een eigen installatieprogramma en een eigen licentie.
Functiedefines Binnen het {$IFDEF SGC_PACK_HTML}-blok op regel 882 tot 892: SGC_HTML op regel 885 en SGC_HTMX op regel 886, beide binnen {$IFNDEF ANDROID} op 883 en {$IFNDEF IOS} op 884. SGC_HTML_CONTROL, het visuele designtime-oppervlak, staat op regel 888 binnen {$IFDEF MSWINDOWS} op 887.
Wat dat betekent op mobiel Elke sgcHTML-unit zet zijn interface in {$IFDEF SGC_HTML}, dus een Android- of iOS-build compileert ze tot lege units. Dit is een bibliotheek voor de serverkant en dat is juist de bedoeling: de telefoon krijgt HTML, geen Pascal.
Registratie De palettabpagina wordt alleen geregistreerd als zowel SGC_PACK_HTML als SGC_HTML zijn gedefinieerd.

Welke componenten zijn er? Ongeveer tachtig, van een grid en een planner tot grafieken, een rich editor, een QR-code en een camerascanner. De functiematrix groepeert ze per gebied en elk heeft een eigen pagina onder componenten.

Installeer en vind de palettabpagina

sgcHTML wordt geleverd als eigen package en ook binnen de All-Access-build van sgcWebSockets. De installatie verloopt op dezelfde manier.

1. Uitpakken

Pak de download uit in een map, hieronder {$DIR} genoemd.

2. Bibliotheekpad

Tools, Options, Library. Voeg {$DIR}\source toe en de libmap voor jouw IDE, bijvoorbeeld {$DIR}\libD13\$(Platform).

3. De packages bouwen

Open de packagegroep voor jouw IDE-versie onder {$DIR}\Packages\. Compileer eerst de runtime-.dpk en installeer daarna die van designtime (dcl). Lazarus gebruikt in plaats daarvan de .lpk.

4. Het palet controleren

Er verschijnt een pagina met de naam SGC HTML met ongeveer tachtig componenten. Als die ontbreekt op een Android- of iOS-doel is dat normaal, want SGC_HTML is daar uitgesloten.

5. Draai eerst een demo

Open {$DIR}\Demos\60.HTML\01.RunTime\07.Site, bouw het en draai het. Het is een consoleserver die zijn eigen URL afdrukt en de onderstaande code komt daaruit.

Een pagina in Pascal, geserveerd via HTTP

Bouw de pagina, lees de eigenschap HTML, schrijf die naar de respons. Het eerste tabblad is de pagina, het tweede is de server, het derde is het hele consoleprogramma.

sgcSiteDemo_Pages.pas
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 accepteert een TsgcHTMLSiteLayout: slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail of slOffcanvas. De standaardwaarde is slTopNavSidebarLeft, dus de regel hierboven staat er alleen om het omschakelen te laten zien.

sgcSiteDemo_Server.pas
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;

De Indy-units zijn voorwaardelijk omdat een build met de aangepaste Indy-bibliotheek ze ziet als sgcIdContext en sgcIdCustomHTTPServer, en een build met standaard Indy als IdContext en IdCustomHTTPServer. De meegeleverde demo bevat precies die voorwaarde. Elke server die een string kan schrijven volstaat. De meegeleverde demo kiest TsgcWSHTTPServer als een Professional-build beschikbaar is en valt anders terug op TIdHTTPServer. Daarom heeft de demo daar een voorwaarde en dit fragment niet.

sgcSiteDemoServer.dpr
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.

Een consoletoepassing, dus er is geen formulier en geen VCL om in te stellen. Dat is het kortst mogelijke sgcHTML-programma en het is wat de meegeleverde demo in werkelijkheid is.

Alle drie de tabbladen komen uit de meegeleverde demo Demos\60.HTML\01.RunTime\07.Site, ingekort tot de onderdelen die ertoe doen. Het volledige project schakelt ook layout, thema en kleurenschema om via de querystring. Dat is de moeite waard om te lezen zodra de eerste pagina wordt gerenderd.

Controleer of de pagina is gerenderd

Het programma drukt de URL af waarop het luistert. Open die en probeer daarna de schakelaars.

De URL die wordt afgedrukt

Het programma schrijft bij het opstarten http://localhost:8092 naar de console. Open die URL. Een pagina met navigatie, een zijbalk en jouw inhoud betekent dat zowel het renderen als de server werkt.

Active

FHTTP.Active := True slaagt of veroorzaakt een exception. Als iets anders al poort 8092 gebruikt, merk je dat hier.

Het contenttype

Als een browser ruwe markup toont in plaats van een pagina, is de respons zonder text/html verstuurd. Stel ContentType in voordat je ContentText toewijst.

Een layout wisselen

De meegeleverde demo leest layout, theme en mode uit de querystring, dus ?layout=topnav&mode=dark rendert dezelfde pagina op een andere manier. Dat is de snelste manier om te zien wat het component doet.

Wat er de eerste keer meestal misgaat

Zes problemen verklaren bijna elke eerste poging die niet rendert.

De palettabpagina verschijnt nooit

Voor de registratie zijn zowel SGC_PACK_HTML als SGC_HTML nodig. De eerste wordt gedefinieerd op regel 871 binnen het All-Access-blok, de tweede op regel 885 binnen het packblok. Op een Android- of iOS-doel ontbreekt de tweede bewust.

De pagina is leeg

Je hebt de boom gebouwd maar HTML nooit gelezen. Die eigenschap voert het renderen uit. Het lezen ervan is de hele renderstap en levert een compleet document op, geen fragment.

Er verandert niets als je de pagina bewerkt

De demo bouwt bij elk verzoek een nieuwe TsgcHTMLComponent_Site en geeft die daarna vrij. Als je het object cachet en hergebruikt, vergeet dan niet de inhoud te wissen met ClearContent voordat je opnieuw bouwt.

De browser toont ruwe markup

Het contenttype van de respons is nooit ingesteld. De demo stelt ContentType := 'text/html; charset=utf-8' in voordat de body wordt geschreven en zonder dat tonen sommige clients de HTML als tekst.

Je schrijft HTML-strings met de hand

Dat hoeft niet. Er zijn node-units voor Bootstrap-layout, tabellen, formulieren en grafieken en het hele doel van de bibliotheek is dat je die samenstelt in plaats van markup aan elkaar te plakken.

De poort is al bezet

De demo luistert op 8092. Als iets anders die poort gebruikt, start de server niet. Wijzig dus de poort voordat je naar een dieper probleem zoekt.

Wat mensen bouwen na de eerste pagina

Vier richtingen, allemaal binnen hetzelfde package.

Formulieren die terugposten

De formulier-nodeunit bouwt invoervelden, selects, validatie en layout en htmx post ze zonder dat de pagina opnieuw wordt geladen. Escaping wordt voor je afgehandeld als je nodes bouwt in plaats van strings.

Formuliercomponenten

Gegevens op de pagina

Een grid met sorteren, filteren en pagineren, plus grafieken, statistiekkaarten, een planner, een Gantt-diagram en een diagramcomponent.

Functiematrix

Complete toepassingen

Er worden twaalf runtime-demo's meegeleverd, van een ERP-dashboard tot een kassasysteem, een helpdesk, een magazijn en een app voor buitendienst. Ze zijn de snelste manier om de bibliotheek op echte schaal te zien.

Demogalerij

Neem je bestaande weblaag mee

Er zijn componenten voor WebBroker en DataSnap, zodat een bestaande Delphi-webtoepassing sgcHTML-pagina's kan renderen zonder te worden herschreven.

WebBroker and DataSnap

Referentie, demo's en documentatie

De catalogus toont elk component met een voorbeeld. Demoprojecten zitten in de download, onder Demos\60.HTML.

Pagina TsgcHTMLComponent_Site De paginashell waarop deze snelstart voortbouwt, eigenschap voor eigenschap.
Functiematrix Layout, formulieren, gegevens, grafieken, authenticatie, chat en de rest, gegroepeerd per gebied.
Demogalerij De meegeleverde runtime-demo's, elk met een korte video.
WebBroker and DataSnap sgcHTML-pagina's renderen vanuit een bestaande Delphi-weblaag.
Download de proefversie Hetzelfde installatieprogramma als de productieversie, beperkt in tijd.
Online help De gegenereerde referentie, altijd in lijn met de huidige release.

Verder lezen: het Site-component, web-UI-componenten in Delphi, slimmere formulieren en datatabellen. Elk product heeft zijn eigen snelstart, te vinden op de pagina Aan de slag.

Vragen over de sgcHTML-snelstart

TsgcHTMLComponent_Site, uit de unit sgcHTML_Component_Site.pas. Het rendert een complete paginashell, dus je krijgt navigatie, een zijbalk, een thema en een inhoudsgebied zonder ze zelf in elkaar te zetten. Bouw het, roep AddMenu en AddContent of AddSection aan en lees daarna de eigenschap HTML. De meegeleverde Site-demo doet precies dat.
Je schrijft die zelf naar een HTTP-respons. HTML is een gewone string-eigenschap, dus elke server volstaat. De meegeleverde demo gebruikt TsgcWSHTTPServer op een Professional-build en valt anders terug op TIdHTTPServer, stelt ResponseNo := 200 en ContentType := 'text/html; charset=utf-8' in en wijst de string toe aan ContentText.
De poort is SGC_PACK_HTML, gedefinieerd op regel 871 van sgcVer.inc, binnen het {$IFDEF SGC_EDT_ALL}-blok dat loopt van regel 870 tot regel 874. In die broncode is de All-Access-editie degene die het definieert. sgcHTML wordt ook als eigen product verkocht, met een eigen installatieprogramma. Bekijk dus de prijzenpagina van sgcHTML voor de actuele licenties in plaats van het af te leiden uit de define.
Nee, en dat is bewust. SGC_HTML wordt gedefinieerd op regel 885 binnen {$IFNDEF ANDROID} op regel 883 en {$IFNDEF IOS} op regel 884, dus op die doelplatforms compileert elke sgcHTML-unit tot een lege unit. Het is een bibliotheek voor de serverkant: de telefoon ontvangt HTML via het netwerk, en daarom heeft het mobiele doel de renderer niet nodig. Windows, macOS en Linux worden allemaal ondersteund.
Nee. De bibliotheek genereert Bootstrap 5-markup en htmx-attributen en htmx zorgt ervoor dat een knop terugpost en een deel van de pagina vervangt zonder herladen. Je beschrijft de interactie in Pascal en de attributen worden voor je gegenereerd. Je kunt nog steeds je eigen script toevoegen als je dat wilt, via CustomHead en BodyEndHTML.
Ja. Layout accepteert een TsgcHTMLSiteLayout, met als leden slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail and slOffcanvas, en de standaardwaarde is slTopNavSidebarLeft. Preset accepteert een TsgcHTMLSitePreset met onder meer de leden spAdmin, spDashboard, spPortal, spDocs, spLanding and spApp. Kleuren en de lichte of donkere modus staan op het object Theme.
Als je de pagina met nodes bouwt, ja, want de node schrijft de tekst en escapet die. Het risico ontstaat wanneer je de nodes omzeilt en zelf markup aan elkaar plakt, bijvoorbeeld via AddContent met een string die je uit gebruikersinvoer hebt opgebouwd. Gebruik bij voorkeur de node-units voor alles wat gebruikersgegevens bevat.
De download bevat zeventien runtime-demo's onder Demos\60.HTML\01.RunTime, waaronder een ERP-dashboard, een helpdesk, een kassasysteem, een magazijn, een rapportage-app en een app voor buitendienst. De galerij heeft van elk een korte video.
De beste deal: All-AccessElk eSeGeCe-product, inclusief Premium-ondersteuning, vanaf €1,059 per jaar.
Bekijk de All-Access-prijzen

Klaar om een web-UI in Pascal te bouwen?

Download de proefversie en draai de Site-demo voordat je zelf een regel markup schrijft.