Skip to content

Commit

Permalink
Updated HTMX samples to HTMX 2.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@danieleteti
danieleteti committed Jun 19, 2024
1 parent 66f7fcb commit 06bfe22
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 86 deletions.
1 change: 1 addition & 0 deletions samples/htmx/Classes/uData.Model.pas
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ TGenre = class(TBaseBO)
property Selected: Boolean read FSelected write FSelected;
end;

[MVCNameCase(ncAsIs)]
TMovie = class(TBaseBO)
private
FMovieID: Integer;
Expand Down
22 changes: 8 additions & 14 deletions samples/htmx/HTMX_Sample.dpr
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,24 +27,15 @@ procedure RunServer(APort: Integer);
var
LServer: TIdHTTPWebBrokerBridge;
begin
Writeln('** DMVCFramework Server ** build ' + DMVCFRAMEWORK_VERSION);
LogI('** DMVCFramework Server ** build ' + DMVCFRAMEWORK_VERSION);
LServer := TIdHTTPWebBrokerBridge.Create(nil);
try
LServer.OnParseAuthentication := TMVCParseAuthentication.OnParseAuthentication;
LServer.DefaultPort := APort;
LServer.KeepAlive := True;

{ more info about MaxConnections
http://ww2.indyproject.org/docsite/html/frames.html?frmname=topic&frmfile=index.html }
LServer.MaxConnections := 0;

{ more info about ListenQueue
http://ww2.indyproject.org/docsite/html/frames.html?frmname=topic&frmfile=index.html }
LServer.ListenQueue := 200;

LServer.Active := True;
WriteLn('Listening on port ', APort);
Write('CTRL+C to shutdown the server');
LogI('Listening on port ' + APort.ToString);
LogI('CTRL+C to shutdown the server');
WaitForTerminationSignal;
EnterInShutdownState;
LServer.Active := False;
Expand All @@ -60,13 +51,16 @@ begin
// When MVCSerializeNulls = True empty nullables and nil are serialized as json null.
// When MVCSerializeNulls = False empty nullables and nil are not serialized at all.
MVCSerializeNulls := True;
UseConsoleLogger := True;
try
if WebRequestHandler <> nil then
WebRequestHandler.WebModuleClass := WebModuleClass;
WebRequestHandlerProc.MaxConnections := 1024;
RunServer(8080);
RunServer(dotEnv.Env('dmvc.server.port', 8080));
except
on E: Exception do
Writeln(E.ClassName, ': ', E.Message);
begin
LogI(E.ClassName + ': ' + E.Message);
end;
end;
end.
145 changes: 74 additions & 71 deletions samples/htmx/bin/htmx_templates/header.htmx
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,104 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>&lt;/&gt; htmx ~ Demo App</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/htmx/1.9.5/htmx.min.js" integrity="sha512-2NwoAICmYEIEuayBZdfd/cEvYGevbb1jezvQli/Iw052KfAA3NGrXAH2AY02cjt3gMdui5Q8nKauPYgVOE+pmg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/htmx/1.9.5/ext/json-enc.min.js" integrity="sha512-jcH0sr76CPbMe+4E23BWif6BgftQK43X6TwEWE8X7Sz7wB4mT8Nx6PO0DE7C7810tIV7OeCZ0MQ3oKL/61W+Hg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/htmx/1.9.5/ext/class-tools.min.js" integrity="sha512-kLoAa40K9dbRblV4kXb6Yda2NDMb4m+iNj1rvRYjwTfHKYrPG/TpExrXY95YT2QAVz6TuVEVmTKBfG2D+OrKsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/htmx/1.9.5/ext/preload.min.js" integrity="sha512-2lqd++ZVVmZg5LU//IabHHKQBV3qL6kPMjXvtzLfd+Fn99uOw7MmWLlVQhF2uVzH0yOuVzV3/BIC5w5QUP6uTw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>&lt;/&gt; htmx ~ Demo App</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://unpkg.com/[email protected]"></script>

<script src="https://unpkg.com/[email protected]/json-enc.js"></script>

<script src="https://unpkg.com/[email protected]/class-tools.js"></script>

<script src="https://unpkg.com/[email protected]/preload.js"></script>

<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
</head>

<body hx-ext="class-tools, preload, json-enc, event-header" style="overflow-x:hidden; width:100%; height:auto">


{{! styles should be in separate css file }}
<style>

footer.page-footer {
position: absolute;
bottom: 0;
width: 100%;
}

{{! styles for html 5 validation }}
input:invalid {
border: 2px dashed red;
}

input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
border: 2px solid black;
}

input:read-only {
background-color: grey;

}
footer.page-footer {
position: absolute;
bottom: 0;
width: 100%;
}

{
{
! styles for html 5 validation
}
}

input:invalid {
border: 2px dashed red;
}

input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
border: 2px solid black;
}

input:read-only {
background-color: grey;

}
</style>

<script>
// example scripts - would normally be in a js file
// example scripts - would normally be in a js file

// example of an error handling script
document.body.addEventListener("htmx:responseError", function(e) {
error = e.detail.xhr.response;
alert(error);
});
// example of an error handling script
document.body.addEventListener("htmx:responseError", function (e) {
error = e.detail.xhr.response;
alert(error);
});

// simple event handler, no params
document.body.addEventListener("myEvent", function(evt){
// simple event handler, no params
document.body.addEventListener("myEvent", function (evt) {
alert("myEvent was triggered!");
})
})

// another simple event handler, no params
document.body.addEventListener("savedEvent", function(evt){
// another simple event handler, no params
document.body.addEventListener("savedEvent", function (evt) {
alert(evt.detail.value);
})
})

// event handler with simple params
document.body.addEventListener("myEventObject", function(evt){
// we're sending back a Movie object, so show some property here
alert(evt.detail.MovieID);
})
// event handler with simple params
document.body.addEventListener("myEventObject", function (evt) {
// we're sending back a Movie object, so show some property here
alert(evt.detail.MovieID);
})

document.body.addEventListener("setFocus", function(evt){
// we're looking for a CSS selector to get an element to focus
document.body.addEventListener("setFocus", function (evt) {
// we're looking for a CSS selector to get an element to focus
let element = document.querySelector(evt.detail.value);
if (element !== null) {
element.focus();
}
})
</script>
})
</script>

<div class="jumbotron text-center">
<h1><a href="/">&lt;/&gt; HTMX/DMVC Demo App</a></h1>
<p>Welcome to the demo app. Click a tab to continue.</p>
</div>
<div class="jumbotron text-center">
<h1><a href="/">&lt;/&gt; HTMX/DMVC Demo App</a></h1>
<p>Welcome to the demo app. Click a tab to continue.</p>
</div>

<div class="row">
<div class="column left" style="background-color:#aaa;">
<div>
{{> Navigation}}
</div>
</div>
<div class="column right" style="background-color:#bbb;">
<!-- content starts here -->
<div id="movieDemoContent-div">

<div class="column right" style="background-color:#bbb;">
<!-- content starts here -->
<div id="movieDemoContent-div">
3 changes: 2 additions & 1 deletion samples/htmx_mustache/bin/templates/header.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
<header>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]" integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]"></script>

<style>
h1 a:hover {
text-decoration: none;
Expand Down

0 comments on commit 06bfe22

Please sign in to comment.