Event Handling

Event Handling in PynamicUI

PynamicUI provides a flexible and powerful event handling system that allows developers to manage various events, such as button clicks, keypresses, mouse movements, and more. Event handling in PynamicUI is achieved through the use of the useEffect hook, which allows you to register event handlers and execute custom logic based on events.

Basic Event Handling Example

Let's start with a basic example of event handling using a button element and a click event:

from pynamicui import createDom, createElement

def button_click_handler(event):
    print("Button clicked!")

dom = createDom()

# Create a button element with a click event handler
button = createElement(dom, "Button", props={"text": "Click Me"}, place={"relwidth": 1, "relheight": 1})

def bind_click_event(prop, element, success):
    print("Mounted")
    # Bind the click event handler to the button widget
    button.widget.bind("<Button-1>", button_click_handler)

def unbind_click_event(prop, element, success):
    print("Unmounted")
    # Unbind the click event handler from the button widget
    button.widget.unbind("<Button-1>", button_click_handler)

# Bind the click event when the button mounts
button.useEffect(props=[""], hook=bind_click_event, unmount=unbind_click_event)

# Render the virtual DOM
dom.render()

In this example, we create a button element using createElement, and we pass a click event handler function, button_click_handler, as a callback. When the button is clicked, the button_click_handler function will be executed, and it will print "Button clicked!" to the console.

We use the useEffect hook with the prop [""] to specify that we want to bind the click event handler when the button mounts and unbind it when the button unmounts. The bind_click_event function is the hook callback that binds the click event to the button's widget, and the unbind_click_event function unbinds the click event.

Additional Event Handling Examples

PynamicUI's event handling system can be used to manage various other events as well. Here are a few more examples:

Prop Changed Event

# Create a button element
button = createElement(dom, "Button", props={"text": "Double Click Me"})

# attach a useEffect to the "text" prop
button.useEffect(props=["text"], hook=lambda prop, element, value: print("Text prop changed to " + value))

Key Press Event

def key_press_handler(event):
    print(f"Key pressed: {event.char}")

# Create an Entry element with a key press event handler
entry = createElement(dom, "Entry", props={"placeholder": "Type here"})

# Bind the key press event when the Entry mounts
entry.useEffect(props=[""], hook=lambda prop, element, success: entry.widget.bind("<Key>", key_press_handler), unmount=lambda prop, element, success: entry.widget.unbind("<Key>", key_press_handler))

Mouse Movement Event

def mouse_move_handler(event):
    print(f"Mouse moved to: ({event.x}, {event.y})")

# Create a Frame element with a mouse movement event handler
frame = createElement(dom, "Frame", place={"relwidth": 1, "relheight": 1})

# Bind the mouse movement event when the Frame mounts
frame.useEffect(props=[""], hook=lambda prop, element, success: frame.widget.bind("<Motion>", mouse_move_handler), unmount=lambda prop, element, success: frame.widget.unbind("<Motion>", mouse_move_handler))

Button Double-Click Event

def button_double_click_handler(event):
    print("Button double-clicked!")

# Create a button element with a double-click event handler
button = createElement(dom, "Button", props={"text": "Double Click Me"})

# Bind the double-click event when the button mounts
button.useEffect(props=[""], hook=lambda prop, element, success: button.widget.bind("<Double-Button-1>", button_double_click_handler), unmount=lambda prop, element, success: button.widget.unbind("<Double-Button-1>", button_double_click_handler))

Note on Changing Parent Widget During Rendering

It's important to note that while it is possible to change the parent widget of an element during rendering, it is not recommended to do so. Changing the parent widget dynamically can lead to unnecessary slowdowns and create design approach problems. Instead, consider using containers and the place method to achieve the desired layout and positioning of elements within the parent widget. This approach provides better control over the element hierarchy and reduces potential performance issues.

By leveraging the power of PynamicUI's event handling system, you can create interactive and responsive applications with ease. The useEffect hook allows you to bind and unbind event handlers, giving you full control over how events are managed within your user interface. Whether you're handling button clicks, keypresses, mouse movements, or other events, PynamicUI provides a simple and effective way to manage event-driven interactions in your applications.