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:

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, 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.

{
    "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

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

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

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:

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
    });
}

3.7 KiB Raw Blame History