diff --git a/examples/CompleteEventHandling/README.md b/examples/CompleteEventHandling/README.md new file mode 100644 index 0000000..175741a --- /dev/null +++ b/examples/CompleteEventHandling/README.md @@ -0,0 +1,84 @@ +# Complete Event Handling Example + +This example demonstrates comprehensive event handling capabilities in Crafter.CppDOM. + +## Features + +- Shows how to handle various types of DOM events using C++ +- Demonstrates mouse, keyboard, form, and window events +- Illustrates proper event listener attachment and callback handling +- Shows real-time interaction with UI elements + +## Event Types Demonstrated + +### Mouse Events +- Click events +- Mouse over/out events +- Mouse move events + +### Focus Events +- Focus and blur events + +### Keyboard Events +- Key down, up, and press events + +### Form Events +- Change, submit, and input events + +### Window Events +- Load, error, resize, and scroll events + +### Context Menu Events +- Context menu events + +### Drag and Drop Events +- Drag start, end, and drop events + +## Usage + +```cpp +import Crafter.CppDOM; +using namespace Crafter::CppDOM; + +int main(){ + // Create UI elements + HtmlElement body("body"); + body.SetInnerHTML("

Complete Event Handling Demo

" + "" + "" + "

Events will appear here

"); + + // Handle click event + HtmlElement button("myButton"); + button.AddClickListener([]() { + HtmlElement output("output"); + output.SetInnerHTML("Button was clicked!"); + }); + + // Handle keyboard events + HtmlElement input("textInput"); + input.AddInputListener([]() { + HtmlElement output("output"); + output.SetInnerHTML("Input changed!"); + }); + + // Handle form events + input.AddChangeListener([]() { + HtmlElement output("output"); + output.SetInnerHTML("Form value changed!"); + }); + + 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 diff --git a/examples/HelloElement/README.md b/examples/HelloElement/README.md index cee586e..52b9dde 100644 --- a/examples/HelloElement/README.md +++ b/examples/HelloElement/README.md @@ -1,12 +1,32 @@ -![alt text](https://github.com/Catcrafts/Crafter.Web/blob/master/samples/HelloWorld/HelloWorld.png?raw=true) +# HelloElement Example -This sample demonstrates how to use the element class +This sample demonstrates how to use the HtmlElement class in Crafter.CppDOM. + +## Features + +- Shows how to create and manipulate HTML elements +- Demonstrates basic DOM manipulation techniques +- Illustrates element creation and content setting + +## Usage + +```cpp +import Crafter.CppDOM; +using namespace Crafter::CppDOM; + +int main(){ + HtmlElement body("body"); + body.SetInnerHTML("Hello World!"); +} +``` + +## Building and Running ```bash crafter-build build executable run.sh ``` -and go to `http://localhost:8080/` +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 +If caddy is not installed, you can use your favorite static file server instead. \ No newline at end of file diff --git a/examples/HelloWorld/README.md b/examples/HelloWorld/README.md index 1d6bd26..34004ee 100644 --- a/examples/HelloWorld/README.md +++ b/examples/HelloWorld/README.md @@ -1,12 +1,26 @@ -![alt text](https://github.com/Catcrafts/Crafter.Web/blob/master/samples/HelloWorld/HelloWorld.png?raw=true) +# HelloWorld Example -This sample demonstrates a simple hello world. +This sample demonstrates a simple hello world application using Crafter.CppDOM. + +## Usage + +```cpp +import Crafter.CppDOM; +using namespace Crafter::CppDOM; + +int main(){ + HtmlElement body("body"); + body.SetInnerHTML("Hello World!"); +} +``` + +## Building and Running ```bash crafter-build build executable run.sh ``` -and go to `http://localhost:8080/` +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 +If caddy is not installed, you can use your favorite static file server instead. \ No newline at end of file diff --git a/examples/InteractiveElement/README.md b/examples/InteractiveElement/README.md index 972191e..a4eaa6e 100644 --- a/examples/InteractiveElement/README.md +++ b/examples/InteractiveElement/README.md @@ -5,13 +5,11 @@ This example demonstrates how to use DOM event handling with Crafter.CppDOM. ## Features - Shows how to create interactive UI elements using C++ -- Demonstrates the framework for attaching event listeners -- Illustrates the planned callback mechanism for event handling +- Demonstrates the event listener framework for attaching callbacks +- Illustrates how to respond to user interactions ## Usage -The library now provides the foundation for interactive web applications: - ```cpp import Crafter.CppDOM; using namespace Crafter::CppDOM; @@ -25,15 +23,22 @@ int main(){ // Attach event listener HtmlElement button("myButton"); - button.AddEventListener("click"); - - // Future: button.OnClick([]() { - // HtmlElement output("output"); - // output.SetInnerHTML("Button was clicked!"); - // }); + button.AddClickListener([]() { + HtmlElement output("output"); + output.SetInnerHTML("Button was clicked!"); + }); return 0; } ``` -Note: The full callback mechanism requires additional infrastructure to properly bridge between JavaScript events and C++ callbacks. This implementation provides the framework for future development. \ No newline at end of file +## 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