HTMX Fragment & Router — sgcHTML | eSeGeCe

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 80+ components.
Download Free TrialThe 30-day trial ships the 60.HTML demo projects.
PricingSingle, Team and Site licenses with full source code.
Best value: All-AccessEvery eSeGeCe product, Premium Support included, from €1,059/year.
See All-Access pricing

Ready to Get Started?

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