diff --git a/examples/SPAExample/README.md b/examples/SPAExample/README.md new file mode 100644 index 0000000..6f9687e --- /dev/null +++ b/examples/SPAExample/README.md @@ -0,0 +1,94 @@ +# SPAExample + +This example demonstrates how to create a Single Page Application (SPA) using Crafter.CppDOM with dynamic content updating and browser history management. + +## Features + +- Shows how to implement SPA navigation without page reloads +- Demonstrates usage of `PushState` and `PopState` events +- Illustrates dynamic content updating based on navigation +- Shows how to handle browser back/forward buttons +- Uses modern web techniques for seamless navigation + +## Usage + +```cpp +import Crafter.CppDOM; +import std; +using namespace Crafter; +using namespace Crafter::CppDOMBindings; + +HtmlElementView* body = new HtmlElementView("body", R"( + +
+)"); +HtmlElementView* home = new HtmlElementView("home"); +HtmlElementView* about = new HtmlElementView("about"); +HtmlElementView* contact = new HtmlElementView("contact"); +HtmlElementView* content = new HtmlElementView("content"); + +void UpdateContent(const std::string_view page) { + if (page == "home") { + content->SetInnerHTML("

Home Page

Welcome to the Home page of our Single Page Application!

This demo shows how to use the new history.pushState and popstate event handling features.

"); + } else if (page == "about") { + content->SetInnerHTML("

About Page

This is the About page.

Notice how the URL changes without reloading the page.

"); + } else if (page == "contact") { + content->SetInnerHTML("

Contact Page

This is the Contact page.

You can navigate back and forth using the browser's back/forward buttons.

"); + } +} + +int main() { + body->SetStyle("font-family: Arial, sans-serif; margin: 0; padding: 20px;"); + + // Add click handlers for navigation + home->AddClickListener([](Crafter::MouseEvent e) { + PushState("{\"page\": \"home\"}", "Home", "/"); + UpdateContent("home"); + }); + + about->AddClickListener([](Crafter::MouseEvent e) { + PushState("{\"page\": \"about\"}", "About", "/about"); + UpdateContent("about"); + }); + + contact->AddClickListener([](Crafter::MouseEvent e) { + PushState("{\"page\": \"contact\"}", "Contact", "/contact"); + UpdateContent("contact"); + }); + + // Add popstate listener to handle browser back/forward buttons + auto popStateId = AddPopStateListener([]() { + std::string path = GetPathNameString(); + if (path == "/") { + UpdateContent("home"); + } else if (path == "/about") { + UpdateContent("about"); + } else if (path == "/contact") { + UpdateContent("contact"); + } else { + UpdateContent("home"); + } + }); + + // Initialize with home page + UpdateContent("home"); + + return 0; +} +``` + +## Building and Running + +```bash +crafter-build build executable +run.sh +``` + +Then navigate to `http://localhost:8080/` in your browser. + +If caddy is not installed, you can use your favorite static file server instead. \ No newline at end of file