better README
This commit is contained in:
parent
a9667d38fd
commit
7350ce0bea
4 changed files with 142 additions and 19 deletions
84
examples/CompleteEventHandling/README.md
Normal file
84
examples/CompleteEventHandling/README.md
Normal file
|
|
@ -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("<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,12 +1,32 @@
|
||||||

|
# 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
|
```bash
|
||||||
crafter-build build executable
|
crafter-build build executable
|
||||||
run.sh
|
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
|
If caddy is not installed, you can use your favorite static file server instead.
|
||||||
|
|
@ -1,12 +1,26 @@
|
||||||

|
# 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
|
```bash
|
||||||
crafter-build build executable
|
crafter-build build executable
|
||||||
run.sh
|
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
|
If caddy is not installed, you can use your favorite static file server instead.
|
||||||
|
|
@ -5,13 +5,11 @@ This example demonstrates how to use DOM event handling with Crafter.CppDOM.
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- Shows how to create interactive UI elements using C++
|
- Shows how to create interactive UI elements using C++
|
||||||
- Demonstrates the framework for attaching event listeners
|
- Demonstrates the event listener framework for attaching callbacks
|
||||||
- Illustrates the planned callback mechanism for event handling
|
- Illustrates how to respond to user interactions
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
The library now provides the foundation for interactive web applications:
|
|
||||||
|
|
||||||
```cpp
|
```cpp
|
||||||
import Crafter.CppDOM;
|
import Crafter.CppDOM;
|
||||||
using namespace Crafter::CppDOM;
|
using namespace Crafter::CppDOM;
|
||||||
|
|
@ -25,15 +23,22 @@ int main(){
|
||||||
|
|
||||||
// Attach event listener
|
// Attach event listener
|
||||||
HtmlElement button("myButton");
|
HtmlElement button("myButton");
|
||||||
button.AddEventListener("click");
|
button.AddClickListener([]() {
|
||||||
|
HtmlElement output("output");
|
||||||
// Future: button.OnClick([]() {
|
output.SetInnerHTML("Button was clicked!");
|
||||||
// HtmlElement output("output");
|
});
|
||||||
// output.SetInnerHTML("Button was clicked!");
|
|
||||||
// });
|
|
||||||
|
|
||||||
return 0;
|
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.
|
## 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.
|
||||||
Loading…
Add table
Add a link
Reference in a new issue