fixes
This commit is contained in:
parent
6210e9c99b
commit
2254ad53c5
11 changed files with 300 additions and 466 deletions
|
|
@ -1,84 +0,0 @@
|
|||
# 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("<h1>Complete Event Handling Demo</h1>"
|
||||
"<button id='myButton'>Click Me!</button>"
|
||||
"<input type='text' id='textInput' placeholder='Type something...'>"
|
||||
"<p id='output'>Events will appear here</p>");
|
||||
|
||||
// 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.
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
import Crafter.CppDOM;
|
||||
using namespace Crafter;
|
||||
|
||||
HtmlElement* body = new HtmlElement("body", "<div id='container'><button id='myButton'>Click Me!</button><input type='text' id='textInput' placeholder='Type something'><div id='output'></div></div>");
|
||||
HtmlElement* button = new HtmlElement("myButton");
|
||||
HtmlElement* input = new HtmlElement("textInput");
|
||||
HtmlElement* output = new HtmlElement("output");
|
||||
|
||||
int main(){
|
||||
// Click event
|
||||
button->AddClickListener([&]() {
|
||||
output->SetInnerHTML("Button was clicked!");
|
||||
});
|
||||
|
||||
// Mouse events
|
||||
button->AddMouseOverListener([&]() {
|
||||
output->SetInnerHTML("Mouse over button!");
|
||||
});
|
||||
|
||||
button->AddMouseOutListener([&]() {
|
||||
output->SetInnerHTML("Mouse left button!");
|
||||
});
|
||||
|
||||
// Focus/Blur events
|
||||
input->AddFocusListener([&]() {
|
||||
output->SetInnerHTML("Input focused!");
|
||||
});
|
||||
|
||||
input->AddBlurListener([&]() {
|
||||
output->SetInnerHTML("Input blurred!");
|
||||
});
|
||||
|
||||
// Keyboard events
|
||||
input->AddKeyDownListener([&]() {
|
||||
output->SetInnerHTML("Key pressed in input!");
|
||||
});
|
||||
|
||||
input->AddKeyUpListener([&]() {
|
||||
output->SetInnerHTML("Key released in input!");
|
||||
});
|
||||
|
||||
// Input/change events
|
||||
input->AddInputListener([&]() {
|
||||
output->SetInnerHTML("Input value changed!");
|
||||
});
|
||||
|
||||
input->AddChangeListener([&]() {
|
||||
output->SetInnerHTML("Input value changed and lost focus!");
|
||||
});
|
||||
|
||||
// Context menu
|
||||
button->AddContextMenuListener([&]() {
|
||||
output->SetInnerHTML("Context menu opened!");
|
||||
});
|
||||
|
||||
// Scroll event on body
|
||||
body->AddScrollListener([&]() {
|
||||
output->SetInnerHTML("Page scrolled!");
|
||||
});
|
||||
|
||||
// Resize event
|
||||
body->AddResizeListener([&]() {
|
||||
output->SetInnerHTML("Window resized!");
|
||||
});
|
||||
|
||||
// Load event
|
||||
body->AddLoadListener([&]() {
|
||||
output->SetInnerHTML("Page loaded!");
|
||||
});
|
||||
|
||||
// Error event
|
||||
body->AddErrorListener([&]() {
|
||||
output->SetInnerHTML("An error occurred!");
|
||||
});
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
{
|
||||
"name": "main",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "executable",
|
||||
"implementations": ["main"],
|
||||
"target": "wasm32-wasi",
|
||||
"debug" : true,
|
||||
"dependencies": [
|
||||
{
|
||||
"path":"../../project.json",
|
||||
"configuration":"lib-debug"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
caddy file-server --listen :8080 --root bin/executable
|
||||
|
|
@ -4,30 +4,13 @@ import std;
|
|||
|
||||
HtmlElement* body = new HtmlElement("body", "<div id='container'>"
|
||||
"<h1>Enhanced Event Handling Demo</h1>"
|
||||
"<button id='clickButton'>Click Me!</button>"
|
||||
"<button id='mouseButton'>Mouse Events</button>"
|
||||
"<input type='text' id='keyInput' placeholder='Press keys here'>"
|
||||
"<input type='text' id='changeInput' placeholder='Change me'>"
|
||||
"<div id='output'></div>"
|
||||
"</div>");
|
||||
HtmlElement* clickButton = new HtmlElement("clickButton");
|
||||
HtmlElement* mouseButton = new HtmlElement("mouseButton");
|
||||
HtmlElement* keyInput = new HtmlElement("keyInput");
|
||||
HtmlElement* changeInput = new HtmlElement("changeInput");
|
||||
HtmlElement* output = new HtmlElement("output");
|
||||
|
||||
int main(){
|
||||
// Click event - simple handler
|
||||
clickButton->AddClickListener([&]() {
|
||||
output->SetInnerHTML("<p>Simple click event triggered!</p>");
|
||||
});
|
||||
|
||||
// Mouse events with position data
|
||||
// mouseButton->AddMouseMoveListener([&](MouseEvent event) {
|
||||
// output->SetInnerHTML("<p>Mouse moved to: (" + std::to_string(event.clientX) + ", " + std::to_string(event.clientY) + ")</p>");
|
||||
// });
|
||||
|
||||
// Keyboard events with rich data
|
||||
keyInput->AddKeyDownListener([&](KeyboardEvent event) {
|
||||
std::string keyInfo = std::format("<p>Key pressed: {}</p>", event.key);
|
||||
if (event.ctrlKey) keyInfo += "<p>Ctrl key pressed</p>";
|
||||
|
|
@ -35,29 +18,4 @@ int main(){
|
|||
if (event.altKey) keyInfo += "<p>Alt key pressed</p>";
|
||||
output->SetInnerHTML(keyInfo);
|
||||
});
|
||||
|
||||
// // Input event with data
|
||||
// keyInput->AddInputListener([&](InputEvent event) {
|
||||
// output->SetInnerHTML(std::format("<p>Input data: {} (composing: {})</p>", event.data, event.isComposing));
|
||||
// });
|
||||
|
||||
// Change event with value
|
||||
changeInput->AddChangeListener([&](ChangeEvent event) {
|
||||
output->SetInnerHTML("<p>Input value changed to: '" + event.value + "'</p>");
|
||||
});
|
||||
|
||||
// Context menu with position
|
||||
mouseButton->AddContextMenuListener([&](MouseEvent event) {
|
||||
output->SetInnerHTML("<p>Context menu at: (" + std::to_string(event.clientX) + ", " + std::to_string(event.clientY) + ")</p>");
|
||||
});
|
||||
|
||||
// Resize event
|
||||
body->AddResizeListener([&](ResizeEvent event) {
|
||||
output->SetInnerHTML("<p>Window resized to: " + std::to_string(event.width) + "x" + std::to_string(event.height) + "</p>");
|
||||
});
|
||||
|
||||
// Scroll event
|
||||
body->AddScrollListener([&](ScrollEvent event) {
|
||||
output->SetInnerHTML("<p>Scrolled to: (" + std::to_string(event.scrollX) + ", " + std::to_string(event.scrollY) + ")</p>");
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue