sgcHTML Design Surface — twórz strony wizualnie, nie tylko w kodzie

sgcWebSockets 2026.9.0 wprowadza nowy sposób budowania stron sgcHTML: Design Surface. Do tej pory każda strona była komponowana w kodzie — tworzysz komponenty, ustawiasz ich właściwości, odczytujesz wynikowy HTML. To wciąż działa i pozostaje podstawowym sposobem budowania strony. Nowością jest druga, wizualna ścieżka: umieszczasz te same komponenty bezpośrednio na zwykłym formularzu VCL, rozmieszczasz je, dostrajasz ich właściwości w Object Inspector i renderujesz dokładnie taką samą stronę, jaką inaczej musiałbyś napisać ręcznie.

Dwa sposoby budowania strony

Podejście oparte na kodzie w czasie działania nie uległo zmianie. Twórz lub upuszczaj komponenty, ustawiaj ich właściwości i wiąż dane w kodzie Pascal, C# lub .NET, a następnie odczytaj właściwość HTML komponentu:

uses
  sgcHTML_Component_Grid;

var
  oGrid: TsgcHTMLComponent_Grid;
begin
  oGrid := TsgcHTMLComponent_Grid.Create(nil);
  try
    oGrid.Columns.Add.Title := 'Customer';
    oGrid.Columns.Add.Title := 'Total';
    oGrid.Clear;
    oGrid.AddRow(['Acme Corp', '1,240.00']);
    Response.Write(oGrid.HTML);
  finally
    oGrid.Free;
  end;
end;

Design Surface dodaje drugą opcję dla tych samych komponentów: upuść je na formularzu i pozwól, aby struktura strony wynikała z układu samego formularza, a nie z wywołań konstruktorów.

Design Surface

Pozycja i szerokość komponentu na formularzu wyznaczają jego wiersz i kolumnę Bootstrap, a jego właściwości published dostraja się w Object Inspector zamiast w kodzie. Komponent TsgcHTMLDesignSurface dodany do formularza odczytuje ten układ. Wywołaj raz sgcHTMLDesignBuildFromControls, zazwyczaj przy starcie, aby przejść przez komponenty upuszczone na formularzu i zbudować z nich drzewo węzłów powierzchni, a następnie odczytaj Surface.GetBodyHTML, aby je wyrenderować:

uses
  sgcHTMLDesign_Surface;

procedure TfrmDashboard.Build;
begin
  sgcHTMLDesignBuildFromControls(Surface, Self);
end;

function TfrmDashboard.BodyHTML: string;
begin
  Surface.Invalidate;
  Result := Surface.GetBodyHTML;
end;

Dla znaczników, których nie obejmuje paleta komponentów, Surface.AddHTML dodaje do tego samego drzewa stały węzeł HTML, pozycjonowany za pomocą właściwości Order węzła, albo umieszczany wewnątrz treści upuszczonego komponentu przy użyciu Slot := 'Body'.

Te same komponenty, ten sam wynik

Design Surface zmienia jedynie sposób wyrażania struktury strony, a nie same komponenty ani ich zachowanie. Komponent upuszczony na zaprojektowanym formularzu jest zwykłą instancją komponentu — Grid1.LoadFromDataSet(qry) działa dokładnie tak samo, jak na stronie zbudowanej w całości w kodzie. Oba style tworzenia można też dowolnie mieszać na tej samej stronie, a po zbudowaniu oba dają komponenty, które kompilują się i działają identycznie.

Kiedy używać którego podejścia

Kompozycja w czasie działania nadal sprawdza się najlepiej, gdy struktura strony sama w sobie jest dynamiczna lub zależna od danych — wiersze generowane w pętli, sekcje warunkowe, treść zależna od stanu znanego dopiero w trakcie działania — oraz dla jednego źródła współdzielonego między Delphi 7–13 bez zależności od IDE. Design Surface sprawdza się najlepiej przy wizualnym układaniu w większości statycznej struktury strony, gdy chcesz widzieć kształt strony w trakcie jej budowania i dostrajać właściwości przez Object Inspector zamiast w kodzie. Żadna z tych różnic nie dotyczy możliwości w czasie działania: wybór jednego podejścia zamiast drugiego to czysto kwestia preferencji na etapie tworzenia.

Wciąż się rozwija

Paleta komponentów Design Surface jest wciąż aktywnie rozbudowywana i obecnie pozostaje kilka luk. Własny znacznik-otoczka niektórych komponentów, na przykład otoczka karty w TsgcHTMLComponent_Panel, nie ma jeszcze właściwości pozwalającej go pominąć. Pola TsgcHTMLComponent_Form obecnie nie stosują klas ani rozpiętości kolumn tak, jak może to zrobić ręcznie napisany znacznik. Nie każda właściwość istnieje na każdym pokrewnym komponencie — UseColorClass, na przykład, istnieje w Panel, ale nie w Login ani StatCard. A TsgcHTMLComponent_Grid nie udostępnia jeszcze sortowalnych nagłówków kolumn jako właściwości projektowej. Nic z tego nie wpływa na ścieżkę w czasie działania, a paleta z każdym wydaniem domyka te luki.

Zobacz to w działaniu

Najwyraźniej widać oba podejścia obok siebie w folderze Demos\60.HTML dołączonym do sgcWebSockets. 01.RunTime zawiera oryginalne demonstracje zbudowane w kodzie; 02.DesignTime zawiera każdą z nich — AdminCRUD, LiveMonitor, Portal, HTMX, Grid, Site, Components, Helpdesk, ShopAssistant, WebBroker i WebBrokerHTML, obok demonstracji ERP, od której zaczął się ten wzorzec — odbudowaną w całości na formularzach za pomocą Design Surface. Porównaj oba foldery dla tej samej demonstracji, a otrzymasz tę samą stronę powstałą w dwóch różnych stylach tworzenia.

Aktualizacja

Design Surface jest dostarczany jako część pakietu sgcHTML w sgcWebSockets 2026.9.0, bez potrzeby migracji dla istniejących stron zbudowanych w czasie działania. Pobierz bezpłatną wersję próbną, aby ją wypróbować, i przejrzyj pełny zestaw komponentów w centrum komponentów.

Masz pytania, uwagi albo potrzebujesz pomocy z migracją? Skontaktuj się z nami — odpowiedzą Ci ludzie, którzy napisali ten kod.