sgcWebSockets 2026.9.0 añade una nueva forma de crear páginas de sgcHTML: el Design Surface. Hasta ahora, cada página se componía en código — crear los componentes, establecer sus propiedades, leer el HTML resultante. Eso sigue funcionando, y sigue siendo la forma principal de construir una página. Lo nuevo es una segunda vía, visual: colocar los mismos componentes directamente en un formulario VCL normal, organizarlos, ajustar sus propiedades en el Object Inspector y generar la página idéntica a la que habrías escrito a mano.
Dos formas de construir una página
El enfoque en tiempo de ejecución no ha cambiado. Crea o coloca los componentes, establece sus propiedades y vincula los datos en código Pascal, C# o .NET, y luego lee la propiedad HTML del componente:
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;El Design Surface añade una segunda opción para los mismos componentes: colocarlos en un formulario y dejar que la estructura de la página surja de la propia disposición del formulario en lugar de las llamadas al constructor.
El Design Surface
La posición y el ancho de un componente en el formulario determinan su fila y columna de Bootstrap, y sus propiedades publicadas se ajustan en el Object Inspector en lugar de en código. Un componente TsgcHTMLDesignSurface añadido al formulario lee esa disposición. Llama a sgcHTMLDesignBuildFromControls una vez, normalmente al arrancar, para recorrer los componentes colocados en el formulario hacia el árbol de nodos del surface, y luego lee Surface.GetBodyHTML para generarlo:
uses
sgcHTMLDesign_Surface;
procedure TfrmDashboard.Build;
begin
sgcHTMLDesignBuildFromControls(Surface, Self);
end;
function TfrmDashboard.BodyHTML: string;
begin
Surface.Invalidate;
Result := Surface.GetBodyHTML;
end;Para el marcado que la paleta de componentes no cubre, Surface.AddHTML añade un nodo HTML fijo al mismo árbol, posicionado mediante la propiedad Order del nodo, o insertado dentro del propio cuerpo de un componente colocado con Slot := 'Body'.
Los mismos componentes, la misma salida
El Design Surface solo cambia cómo se expresa la estructura de una página, no los componentes en sí ni su comportamiento. Un componente colocado en un formulario diseñado es una instancia de componente normal — Grid1.LoadFromDataSet(qry) funciona exactamente igual que en una página construida por completo en código. Los dos estilos de creación también se pueden combinar libremente en la misma página, y ambos producen componentes que compilan y funcionan de forma idéntica una vez generados.
Cuándo usar cada uno
La composición en tiempo de ejecución sigue siendo la mejor opción cuando la estructura de una página es en sí misma dinámica o depende de los datos — filas generadas en bucle, secciones condicionales, contenido que depende de un estado que solo se conoce en tiempo de ejecución —, y para una única fuente compartida entre Delphi 7–13 sin depender del IDE. El Design Surface es la mejor opción para disponer visualmente una estructura de página mayormente estática, ver la forma de la página mientras se construye, y ajustar propiedades desde el Object Inspector en lugar de en código. Ninguna de las dos supone una diferencia en las capacidades en tiempo de ejecución: elegir una u otra es puramente una preferencia a la hora de crear la página.
Todavía en crecimiento
La paleta de componentes del Design Surface se está ampliando activamente, y hoy quedan algunos huecos. El marcado propio de algunos componentes, como el contenedor de tarjeta de TsgcHTMLComponent_Panel, todavía no tiene una propiedad para suprimirlo. Los campos de TsgcHTMLComponent_Form actualmente no aplican clases de columna ni anchos como sí puede hacerlo el marcado escrito a mano. No todas las propiedades existen en todos los componentes hermanos — UseColorClass, por ejemplo, existe en Panel pero no en Login ni en StatCard. Y TsgcHTMLComponent_Grid todavía no expone los encabezados de columna ordenables como propiedad en tiempo de diseño. Nada de esto afecta a la vía en tiempo de ejecución, y la paleta va cerrando estos huecos con cada versión.
Míralo en acción
La forma más clara de ver ambos enfoques uno junto al otro es la carpeta Demos\60.HTML que se incluye con sgcWebSockets. 01.RunTime contiene las demos originales, construidas en código; 02.DesignTime contiene cada una de ellas — AdminCRUD, LiveMonitor, Portal, HTMX, Grid, Site, Components, Helpdesk, ShopAssistant, WebBroker y WebBrokerHTML, junto con la demo ERP que dio origen al patrón — reconstruida por completo sobre formularios con el Design Surface. Compara las dos carpetas para la misma demo y obtendrás la misma página desde dos estilos de creación distintos.
Actualización
El Design Surface se incluye como parte del pack sgcHTML en sgcWebSockets 2026.9.0, sin necesidad de migración para las páginas existentes construidas en tiempo de ejecución. Consigue la prueba gratuita para probarlo, y explora el conjunto completo de componentes en el catálogo de componentes.
¿Preguntas, comentarios o ayuda con la migración? Ponte en contacto — recibirás respuesta de las mismas personas que escribieron el código.