HTMX Fragment & Router

TsgcHTMX_Fragment / TsgcHTMX_Router — build out-of-band htmx swap payloads for targeted DOM updates and route URL patterns to Delphi handler procedures.

TsgcHTMX_Fragment & TsgcHTMX_Router

TsgcHTMX_Fragment constructs the correctly formed out-of-band htmx swap string for a given DOM element id and swap strategy. TsgcHTMX_Router dispatches incoming HTTP requests to registered Delphi handler methods, eliminating manual URL parsing.

Component classes

TsgcHTMX_Fragment, TsgcHTMX_Router

Role

OOB swaps & request routing

Languages

Delphi, C++ Builder, .NET

Build a fragment, route a request

Use TsgcHTMX_Fragment to construct an out-of-band htmx swap string targeting a specific DOM element id. Use TsgcHTMX_Router to dispatch incoming HTTP requests to registered handler methods without writing if/else chains.

uses
  sgcHTMX_Fragment, sgcHTMX_Router;

// Build and broadcast an OOB fragment:
var
  oFrag: TsgcHTMX_Fragment;
begin
  oFrag := TsgcHTMX_Fragment.Create(nil);
  try
    oFrag.TargetID   := 'kpi-revenue';
    oFrag.SwapMethod := 'innerHTML';
    oFrag.Content    := FormatFloat('#,##0', FRevenue);
    oHTMX.BroadcastFragment(oFrag.Fragment);
  finally
    oFrag.Free;
  end;
end;

// Route requests with TsgcHTMX_Router:
var
  oRouter: TsgcHTMX_Router;
begin
  oRouter := TsgcHTMX_Router.Create(nil);
  oRouter.AddRoute('GET',  '/customers',     HandleCustomers);
  oRouter.AddRoute('POST', '/customer/save', HandleCustomerSave);
  oRouter.HandleRequest(AContext, ARequest, AResponse);
end;
TsgcHTMX_Fragment *oFrag = new TsgcHTMX_Fragment(NULL);
try
{
  oFrag->TargetID   = "kpi-revenue";
  oFrag->SwapMethod = "innerHTML";
  oFrag->Content    = FormatFloat("#,##0", FRevenue);
  oHTMX->BroadcastFragment(oFrag->Fragment);
}
__finally { delete oFrag; }

TsgcHTMX_Router *oRouter = new TsgcHTMX_Router(NULL);
oRouter->AddRoute("GET",  "/customers",     HandleCustomers);
oRouter->AddRoute("POST", "/customer/save", HandleCustomerSave);
oRouter->HandleRequest(AContext, ARequest, AResponse);
var frag = new TsgcHTMX_Fragment();
frag.TargetID   = "kpi-revenue";
frag.SwapMethod = "innerHTML";
frag.Content    = revenue.ToString("N0");
htmxEngine.BroadcastFragment(frag.Fragment);

var router = new TsgcHTMX_Router();
router.AddRoute("GET",  "/customers",     HandleCustomers);
router.AddRoute("POST", "/customer/save", HandleCustomerSave);
router.HandleRequest(context, request, response);

Key properties & methods

The members you reach for most often.

TsgcHTMX_Fragment.TargetID

id of the DOM element to replace; corresponds to htmx's hx-swap-oob target.

TsgcHTMX_Fragment.SwapMethod

htmx swap strategy: innerHTML, outerHTML, beforebegin, afterend, etc.

TsgcHTMX_Fragment.Content

The new HTML to inject into the target; can be a simple string or the output of any sgcHTML component.

TsgcHTMX_Fragment.Fragment

Read-only; returns the fully formed OOB swap string ready to pass to BroadcastFragment or return as an HTTP response body.

TsgcHTMX_Router.AddRoute

Registers a URL pattern and HTTP method combination with a Delphi handler procedure or method.

TsgcHTMX_Router.HandleRequest

Checks the incoming request against all registered routes and calls the matching handler; returns False if no route matched.

Keep exploring

Online HelpFull API reference and usage guide for this component.
All sgcHTML ComponentsBrowse the full feature matrix of 60+ components.
Download Free TrialThe 30-day trial ships the 60.HTML demo projects.
PricingSingle, Team and Site licenses with full source code.

Ready to Get Started?

Download the free trial and start building web UIs in Delphi, C++ Builder and .NET.