123 lines
No EOL
3.7 KiB
Markdown
123 lines
No EOL
3.7 KiB
Markdown
# About
|
|
|
|
|
|
|
|
Crafter.CppDOM is a C++ library that exposes the browser DOM api's to C++ WebAssembly.
|
|
|
|
# How to use
|
|
Please view the examples folder, this is a snippit from the HelloElement example:
|
|
|
|
```cpp
|
|
import Crafter.CppDOM;
|
|
using namespace Crafter::CppDOM;
|
|
|
|
int main(){
|
|
HtmlElement body("body");
|
|
body.SetInnerHTML("Hello World!");
|
|
}
|
|
```
|
|
You can also view the wiki for more detailed information.
|
|
|
|
It is highly recommended to use this with [Crafter.Build](https://forgejo.catcrafts.net/Catcrafts/Crafter.Build), but it is not strictly required if the same way of injecting the env is followed. The following instructions will be for Crafter.Build.
|
|
|
|
## Quickstart
|
|
create a ``project.json`` in an empty folder, open it in your preferred text editor.
|
|
Create a basic project file, that describes your web project.
|
|
```JSON
|
|
{
|
|
"name": "main",
|
|
"configurations": [
|
|
{
|
|
"name": "executable",
|
|
"implementations": ["main"],
|
|
"target": "wasm32-wasi",
|
|
"debug" : true,
|
|
"dependencies": [
|
|
{
|
|
"path":"https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM.git",
|
|
"configuration":"lib-debug"
|
|
}
|
|
],
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
Save and close the file, create a ``main.cpp``
|
|
```cpp
|
|
import Crafter.CppDOM;
|
|
using namespace Crafter::CppDOM;
|
|
|
|
int main(){
|
|
HtmlElement body("body");
|
|
body.SetInnerHTML("Hello World!");
|
|
}
|
|
```
|
|
|
|
Save and close, then run ``crafter-build build executable && caddy file-server --listen :8080 --root bin/executable``. if you have caddy installed, if not use your favorite static file server instead. Now you can open the browser at ``http://localhost:8080`` and ``Hello World!`` will appear in the browser.
|
|
|
|
This sample can also be viewed in the [HelloElement example](https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM/src/branch/master/examples)
|
|
|
|
## New Event Handling Capabilities
|
|
|
|
The library now supports comprehensive event handling for modern web applications:
|
|
|
|
### Mouse Events
|
|
- `AddClickListener()` - Handles click events
|
|
- `AddMouseOverListener()` - Handles mouse over events
|
|
- `AddMouseOutListener()` - Handles mouse out events
|
|
- `AddMouseMoveListener()` - Handles mouse move events
|
|
|
|
### Focus Events
|
|
- `AddFocusListener()` - Handles focus events
|
|
- `AddBlurListener()` - Handles blur events
|
|
|
|
### Keyboard Events
|
|
- `AddKeyDownListener()` - Handles key down events
|
|
- `AddKeyUpListener()` - Handles key up events
|
|
- `AddKeyPressListener()` - Handles key press events
|
|
|
|
### Form Events
|
|
- `AddChangeListener()` - Handles change events
|
|
- `AddSubmitListener()` - Handles form submit events
|
|
- `AddInputListener()` - Handles input events
|
|
|
|
### Window Events
|
|
- `AddLoadListener()` - Handles page load events
|
|
- `AddErrorListener()` - Handles error events
|
|
- `AddResizeListener()` - Handles window resize events
|
|
- `AddScrollListener()` - Handles scroll events
|
|
|
|
### Context Menu Events
|
|
- `AddContextMenuListener()` - Handles context menu events
|
|
|
|
### Drag and Drop Events
|
|
- `AddDragStartListener()` - Handles drag start events
|
|
- `AddDragEndListener()` - Handles drag end events
|
|
- `AddDropListener()` - Handles drop events
|
|
|
|
Example usage:
|
|
```cpp
|
|
import Crafter.CppDOM;
|
|
using namespace Crafter::CppDOM;
|
|
|
|
int main(){
|
|
HtmlElement button("myButton");
|
|
HtmlElement input("textInput");
|
|
|
|
// Handle click event
|
|
button.AddClickListener([]() {
|
|
// Handle button click
|
|
});
|
|
|
|
// Handle keyboard events
|
|
input.AddKeyDownListener([]() {
|
|
// Handle key press
|
|
});
|
|
|
|
// Handle input changes
|
|
input.AddInputListener([]() {
|
|
// Handle input changes
|
|
});
|
|
}
|
|
``` |