File: examples/case-studies/ui/ui_event_binding/ui_event_binding.md

Recommend this page to a friend!

examples/case-studies/ui/ui_event_binding/ui_event_binding.md

File:	`examples/case-studies/ui/ui_event_binding/ui_event_binding.md`
Role:	Auxiliary data
Content type:	`text/markdown`
Description:	Auxiliary data
Class:	Ascoos OS A PHP Web 5.0 Kernel for decentralized web and IoT
Author:	By Christos Drogidis
Last change:	Update of examples/case-studies/ui/ui_event_binding/ui_event_binding.md
Date:	9 months ago
Size:	`2,744 bytes`

Download

UI Event Binding with TEventHandler

This case study demonstrates how Ascoos OS can bind client-side UI events to server-side logic using the TEventHandler class. It enables modular event registration, logging, and execution ? ideal for integrating with BootLib UI components, Ajax flows, or DSL macros.

Purpose

This example uses the following Ascoos OS class: - TEventHandler: Registers and triggers events, logs activity, and executes logic via callbacks or functions.

Structure

The case study is implemented in a single PHP file: - ui_event_binding.php: Includes event registration, triggering, logging, and callback execution.

Prerequisites

Install Ascoos OS (main repository).
Ensure write permissions for `$AOS_LOGS_PATH/tmp/logs/`.

Getting Started

Run the script via web server:
https://localhost/aos/examples/case-studies/ui/ui_event_binding/ui_event_binding.php

Trigger the event using JavaScript:
fetch('/aos/examples/case-studies/ui/ui_event_binding/ui_event_binding.php', {
  method: 'POST',
  body: JSON.stringify({ event: 'ui.onClick', elementId: 'submitButton' }),
  headers: { 'Content-Type': 'application/json' }
});

Or use jQuery for form submission:
<button id="submitButton">Submit</button>
<script>
  $('#submitButton').on('click', function() {
    $.ajax({
      url: 'server.php',
      type: 'POST',
      data: {
        target: 'ui',
        eventType: 'onClick',
        elementId: 'submitButton',
        formData: { name: 'User', email: 'user@example.com' }
      },
      success: function(response) {
        console.log(response);
      }
    });
  });
</script>

Example Usage

$eventHandler->register('ui', 'onClick', fn($params) => processForm($params));
$eventHandler->trigger('ui', 'onClick', $data);

Expected Output

The script logs the event and returns:

Received data: Name = User, Email = user@example.com

Resources

Contributing

Want to contribute to this case study? Fork the repository, modify or extend ui_event_binding.php, and submit a pull request. See CONTRIBUTING.md for guidelines.