Example Counter App

Example: Counter App with PynamicUI State Management

In this example, we will create a simple counter application using PynamicUI's state management feature. PynamicUI is a Python library that provides a dynamic user interface (UI) framework for building interactive and responsive applications.

Prerequisites

Before you start, make sure you have installed PynamicUI. If you haven't already installed it, you can do so using the following command:

pip install pynamicui

CounterApp Class

First, let's create the CounterApp class, which will handle the counter state and UI components:

from pynamicui import createDom, createElement

class CounterApp:
    def __init__(self, dom):
        self.dom = dom
        # Create the counter state using dom.useState
        self.dom.useState("counter", 0, self.update_counter_label)

        # Create a label to display the counter value
        self.counter_label = createElement(self.dom, "Label", props={"text": "Counter: 0"}, place={"relwidth": 1, "relheight": 0.5})

        # Create a button to increment the counter
        self.increment_button = createElement(self.dom, "Button", props={"text": "Increment", "command": self.increment_counter}, place={"relwidth": 1, "relheight": 0.5, "rely": 0.5})

    def increment_counter(self):
        # Get the current counter value
        counter = self.dom.getState("counter")
        # Increment the counter value
        counter += 1
        # Update the counter state
        self.dom.setState("counter", counter)

    def update_counter_label(self, prop, element, value):
        # Update the counter label text prop with the new counter value
        self.counter_label.setProp("text", f"Counter: {value}")

Render the Virtual DOM

Now, let's create the virtual DOM and render the CounterApp component:

# Create the virtual DOM
dom = createDom()

# Render the CounterApp component
counter_app = CounterApp(dom)

# Render the virtual DOM
dom.render()

In this example, we've defined the CounterApp class, which sets up the counter state and UI elements. The increment_counter method increments the counter state whenever the button is clicked, and the update_counter_label method updates the label to display the current counter value.

By using PynamicUI's state management with dom.useState, we can easily track and manage the counter value, and any changes to the state automatically trigger UI updates. This makes it effortless to create dynamic and interactive applications with PynamicUI.

Conclusion

This example showcases how to use PynamicUI's state management to create a simple counter application. PynamicUI simplifies the process of building user interfaces by abstracting away the complexities of working directly with a UI toolkit like Tkinter. With its declarative syntax and state management capabilities, PynamicUI provides a powerful framework for developing dynamic web-like UIs in Python.