sgcHTML w pięć minut

sgcHTML zamienia Object Pascal w HTML. Budujesz stronę jako drzewo komponentów, odczytujesz jedną właściwość tekstową i zapisujesz ten tekst do odpowiedzi HTTP. Ta strona robi dokładnie to, a potem wskazuje części, których będziesz potrzebować dalej: formularze, siatki, wykresy i htmx.

Bootstrap 5 i htmx, po stronie serwera
Bez pisania JavaScriptu
Windows, Linux i macOS

Czego potrzebuje pierwsza strona

Komponent strony, który renderuje się do tekstu, i serwer HTTP, który przekazuje ten tekst do przeglądarki. Dwa obiekty.

Komponent strony

TsgcHTMLComponent_Site, zadeklarowany w sgcHTML_Component_Site.pas i zarejestrowany na stronie palety SGC HTML. Renderuje całą powłokę: nawigację, panel boczny, motyw i treść.

Jedna ważna właściwość

HTML, odziedziczona z TsgcHTMLComponent. Jest tylko do odczytu, a jej odczyt renderuje bieżące drzewo komponentów do kompletnego dokumentu HTML.

Serwer

Cokolwiek, co potrafi zapisać tekst do odpowiedzi HTTP. Dostarczane demo używa TsgcWSHTTPServer z sgcWebSocket_Server.pas, gdy dostępna jest kompilacja Professional, a w przeciwnym razie przechodzi na TIdHTTPServer.

Platformy

Wyłącznie komputery stacjonarne i serwery. SGC_HTML jest zdefiniowany wewnątrz {$IFNDEF ANDROID} i {$IFNDEF IOS}, więc na urządzeniach mobilnych każda jednostka sgcHTML kompiluje się do niczego. Windows, macOS i Linux działają bez problemu.

Wymagania i edycje

Kolumna edycji to define, który ogranicza kod, wraz z linią w Source/sgcVer.inc, w której się znajduje.

Co Wartość
IDE Od Delphi 7 do RAD Studio 13 oraz od C++Builder 2007 do 13. Obsługiwany jest także Lazarus, a w pakiecie jest demo ERP, które uruchomiono w systemie Linux.
Klauzula uses sgcHTML_Component_Site dla powłoki strony oraz jednostki węzłów, których faktycznie używasz, na przykład sgcHTML_Nodes, sgcHTML_Nodes_Bootstrap, sgcHTML_Nodes_Table, sgcHTML_Nodes_Forms i sgcHTML_Nodes_Charts.
Define pakietu SGC_PACK_HTML jest zdefiniowany w linii 871, wewnątrz bloku {$IFDEF SGC_EDT_ALL}, który biegnie od linii 870 do linii 874. W drzewie źródeł sgcWebSockets oznacza to, że włącza go edycja All-Access. sgcHTML jest też sprzedawany jako osobny produkt z własnym instalatorem i własną licencją.
Definy funkcji Wewnątrz bloku {$IFDEF SGC_PACK_HTML} w liniach 882 do 892: SGC_HTML w linii 885 i SGC_HTMX w linii 886, oba wewnątrz {$IFNDEF ANDROID} w 883 i {$IFNDEF IOS} w 884. SGC_HTML_CONTROL, wizualna powierzchnia czasu projektowania, jest w linii 888 wewnątrz {$IFDEF MSWINDOWS} w 887.
Co to oznacza na urządzeniach mobilnych Każda jednostka sgcHTML opakowuje swój interfejs w {$IFDEF SGC_HTML}, więc kompilacja dla Androida lub iOS zamienia je w puste jednostki. To biblioteka po stronie serwera i o to chodzi: telefon dostaje HTML, a nie Pascala.
Rejestracja Strona palety jest rejestrowana tylko wtedy, gdy zdefiniowane są oba: SGC_PACK_HTML i SGC_HTML.

Jakie komponenty są dostępne? Około osiemdziesięciu, od siatki i harmonogramu po wykresy, rozbudowany edytor, kod QR i skaner z kamery. Macierz funkcji grupuje je według obszarów, a każdy ma własną stronę w sekcji komponenty.

Zainstaluj i znajdź stronę palety

sgcHTML jest dostarczany jako osobny pakiet, a także w kompilacji All-Access sgcWebSockets. Instalacja wygląda tak samo.

1. Rozpakuj

Rozpakuj pobrany plik do folderu, który poniżej nazywamy {$DIR}.

2. Ścieżka biblioteki

Tools, Options, Library. Dodaj {$DIR}\source oraz folder lib dla swojego IDE, na przykład {$DIR}\libD13\$(Platform).

3. Zbuduj pakiety

Otwórz grupę pakietów dla swojej wersji IDE w {$DIR}\Packages\. Najpierw skompiluj uruchomieniowy .dpk, a potem zainstaluj ten czasu projektowania z prefiksem dcl. Lazarus używa zamiast tego .lpk.

4. Sprawdź paletę

Pojawia się strona o nazwie SGC HTML, zawierająca około osiemdziesięciu komponentów. Jeśli brakuje jej w środowisku docelowym Android lub iOS, jest to oczekiwane, ponieważ SGC_HTML jest tam wykluczony.

5. Najpierw uruchom demo

Otwórz {$DIR}\Demos\60.HTML\01.RunTime\07.Site, zbuduj je i uruchom. To serwer konsolowy, który wypisuje własny adres URL, i stąd pochodzi poniższy kod.

Strona w Pascalu, udostępniona przez HTTP

Zbuduj stronę, odczytaj właściwość HTML, zapisz ją do odpowiedzi. Pierwsza karta to strona, druga to serwer, trzecia to cały program konsolowy.

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 przyjmuje TsgcHTMLSiteLayout: slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail lub slOffcanvas. Wartością domyślną jest slTopNavSidebarLeft, więc powyższa linia służy tylko pokazaniu przełącznika.

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;

Jednostki Indy są warunkowe, ponieważ kompilacja z własną biblioteką Indy widzi je jako sgcIdContext i sgcIdCustomHTTPServer, a kompilacja ze standardowym Indy jako IdContext i IdCustomHTTPServer. Dostarczane demo zawiera dokładnie taki warunek. Wystarczy dowolny serwer, który potrafi zapisać tekst. Dostarczane demo wybiera TsgcWSHTTPServer, gdy dostępna jest kompilacja Professional, a w przeciwnym razie przechodzi na TIdHTTPServer, dlatego demo ma tam warunek, a ten fragment go nie ma.

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.

Aplikacja konsolowa, więc nie ma formularza ani VCL do skonfigurowania. To najkrótszy możliwy program sgcHTML i dokładnie tym jest dostarczane demo.

Wszystkie trzy karty pochodzą z dostarczanego dema Demos\60.HTML\01.RunTime\07.Site, przyciętego do istotnych części. Pełny projekt przełącza także układ, motyw i schemat kolorów na podstawie ciągu zapytania, co warto przeczytać, gdy pierwsza strona już się wyrenderuje.

Potwierdź, że strona się wyrenderowała

Program wypisuje adres URL, na którym nasłuchuje. Otwórz go, a potem wypróbuj przełączniki.

Wypisywany adres URL

Program zapisuje http://localhost:8092 w konsoli przy uruchomieniu. Otwórz go. Strona z nawigacją, panelem bocznym i twoją treścią oznacza, że renderowanie i serwer działają.

Active

FHTTP.Active := True albo się powiedzie, albo zgłosi wyjątek. Jeśli coś innego już zajmuje port 8092, dowiesz się o tym tutaj.

Typ zawartości

Przeglądarka pokazująca surowy kod zamiast strony oznacza, że odpowiedź wyszła bez text/html. Ustaw ContentType przed przypisaniem ContentText.

Przełącz układ

Dostarczane demo odczytuje layout, theme i mode z ciągu zapytania, więc ?layout=topnav&mode=dark renderuje tę samą stronę inaczej. To najszybszy sposób, by zobaczyć, co robi komponent.

Co zwykle idzie nie tak za pierwszym razem

Sześć problemów odpowiada za niemal każdą pierwszą próbę, która się nie renderuje.

Strona palety się nie pojawia

Rejestracja wymaga obu: SGC_PACK_HTML i SGC_HTML. Pierwszy jest zdefiniowany w linii 871 wewnątrz bloku All-Access, drugi w linii 885 wewnątrz bloku pakietu. W środowisku docelowym Android lub iOS drugi celowo nie występuje.

Strona jest pusta

Zbudowałeś drzewo, ale nigdy nie odczytałeś HTML. Ta właściwość uruchamia renderowanie. Jej odczyt to cały krok renderowania i zwraca kompletny dokument, a nie fragment.

Nic się nie zmienia po edycji strony

Demo buduje nowy TsgcHTMLComponent_Site przy każdym żądaniu i zwalnia go później. Jeśli buforujesz obiekt i używasz go ponownie, pamiętaj o wyczyszczeniu jego zawartości przez ClearContent przed ponowną budową.

Przeglądarka pokazuje surowy kod

Typ zawartości odpowiedzi nigdy nie został ustawiony. Demo ustawia ContentType := 'text/html; charset=utf-8' przed zapisaniem treści, a bez tego niektórzy klienci wyświetlą HTML jako tekst.

Piszesz ciągi HTML ręcznie

Nie musisz. Istnieją jednostki węzłów dla układu Bootstrap, tabel, formularzy i wykresów, a sens biblioteki polega na tym, że je komponujesz zamiast łączyć znaczniki.

Port jest już zajęty

Demo nasłuchuje na 8092. Jeśli ten port zajmuje coś innego, serwer się nie uruchomi, więc zmień port, zanim zaczniesz szukać głębszego problemu.

Co ludzie budują po pierwszej stronie

Cztery kierunki, wszystkie w tym samym pakiecie.

Formularze wysyłające dane zwrotnie

Jednostka węzłów formularzy buduje pola, listy wyboru, walidację i układ, a htmx wysyła je bez przeładowania strony. Zabezpieczanie znaków jest obsługiwane za ciebie, gdy budujesz węzły, a nie ciągi znaków.

Komponenty formularzy

Dane na stronie

Siatka z sortowaniem, filtrowaniem i stronicowaniem, a także wykresy, karty statystyk, harmonogram, wykres Gantta i komponent diagramów.

Macierz funkcji

Całe aplikacje

W pakiecie jest dwanaście dem uruchomieniowych, od panelu ERP po punkt sprzedaży, helpdesk, magazyn i aplikację serwisu terenowego. To najszybszy sposób, by zobaczyć bibliotekę w prawdziwej skali.

Galeria dem

Wykorzystaj istniejącą warstwę webową

Dostępne są komponenty dla WebBroker i DataSnap, więc istniejąca aplikacja webowa Delphi może renderować strony sgcHTML bez przepisywania.

WebBroker i DataSnap

Dokumentacja, dema i materiały

Katalog zawiera listę każdego komponentu z podglądem. Projekty demo znajdują się w pobranym pakiecie, w Demos\60.HTML.

Strona TsgcHTMLComponent_Site Powłoka strony, na której opiera się ten szybki start, właściwość po właściwości.
Macierz funkcji Układ, formularze, dane, wykresy, uwierzytelnianie, czat i reszta, pogrupowane według obszarów.
Galeria dem Dostarczane dema uruchomieniowe, każde z krótkim filmem.
WebBroker i DataSnap Renderowanie stron sgcHTML z istniejącej warstwy webowej Delphi.
Pobierz wersję próbną Ten sam instalator co w wersji produkcyjnej, z ograniczeniem czasowym.
Pomoc online Generowana dokumentacja, zawsze zgodna z bieżącym wydaniem.

Powiązane lektury: komponent Site, komponenty interfejsu webowego w Delphi, inteligentniejsze formularze i tabele danych. Każdy produkt ma własny szybki start, wymieniony na stronie pierwszych kroków.

Pytania o szybki start sgcHTML

TsgcHTMLComponent_Site, z jednostki sgcHTML_Component_Site.pas. Renderuje kompletną powłokę strony, więc dostajesz nawigację, panel boczny, motyw i obszar treści bez składania ich samodzielnie. Zbuduj go, wywołaj AddMenu oraz AddContent lub AddSection, a następnie odczytaj właściwość HTML. Dostarczane demo Site robi dokładnie to.
Sam zapisujesz go do odpowiedzi HTTP. HTML to zwykła właściwość typu string, więc wystarczy dowolny serwer. Dostarczane demo używa TsgcWSHTTPServer w kompilacji Professional, a w przeciwnym razie TIdHTTPServer, ustawia ResponseNo := 200 i ContentType := 'text/html; charset=utf-8' i przypisuje tekst do ContentText.
Bramką jest SGC_PACK_HTML, zdefiniowany w linii 871 pliku sgcVer.inc, wewnątrz bloku {$IFDEF SGC_EDT_ALL}, który biegnie od linii 870 do linii 874. W tym drzewie źródeł definiuje go edycja All-Access. sgcHTML jest też sprzedawany jako osobny produkt z własnym instalatorem, więc aktualne licencje sprawdź na stronie cennika sgcHTML, zamiast wnioskować je z definu.
Nie, i jest to celowe. SGC_HTML jest zdefiniowany w linii 885 wewnątrz {$IFNDEF ANDROID} w linii 883 i {$IFNDEF IOS} w linii 884, więc w tych środowiskach każda jednostka sgcHTML kompiluje się do pustej jednostki. To biblioteka po stronie serwera: telefon otrzymuje HTML przez sieć, dlatego cel mobilny nie potrzebuje renderera. Obsługiwane są Windows, macOS i Linux.
Nie. Biblioteka generuje znaczniki Bootstrap 5 i atrybuty htmx, a htmx sprawia, że przycisk wysyła dane zwrotnie i podmienia część strony bez przeładowania. Opisujesz interakcję w Pascalu, a atrybuty są generowane za ciebie. Nadal możesz dodać własny skrypt, gdy chcesz, przez CustomHead i BodyEndHTML.
Tak. Layout przyjmuje TsgcHTMLSiteLayout, którego elementami są slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail i slOffcanvas, a wartością domyślną jest slTopNavSidebarLeft. Preset przyjmuje TsgcHTMLSitePreset z elementami takimi jak spAdmin, spDashboard, spPortal, spDocs, spLanding i spApp. Kolory oraz tryb jasny lub ciemny znajdują się w obiekcie Theme.
Gdy budujesz stronę z węzłów, tak, ponieważ węzeł zapisuje tekst i go zabezpiecza. Ryzyko pojawia się, gdy omijasz węzły i sam łączysz znaczniki, na przykład przez AddContent z ciągiem zbudowanym z danych użytkownika. Dla wszystkiego, co niesie dane użytkownika, preferuj jednostki węzłów.
Pobrany pakiet zawiera siedemnaście dem uruchomieniowych w Demos\60.HTML\01.RunTime, w tym panel ERP, helpdesk, punkt sprzedaży, magazyn, aplikację raportów i aplikację serwisu terenowego. Galeria zawiera krótki film każdego z nich.
Najkorzystniejsza oferta: All-AccessWszystkie produkty eSeGeCe, ze wsparciem Premium w cenie, już od €1,059 rocznie.
Zobacz cennik All-Access

Gotowy, by zbudować interfejs webowy w Pascalu?

Pobierz wersję próbną i uruchom demo Site, zanim napiszesz linijkę znaczników.