Skip to content

Usage Examples

Jump to bottom
Zacharie edited this page Jul 18, 2023 · 2 revisions

Usage Examples with PynamicUI

PynamicUI is a lightweight Python library that provides a dynamic user interface (UI) framework for creating interactive and responsive applications. It simplifies the process of building user interfaces by abstracting away the complexities of working directly with a UI toolkit like Tkinter. With PynamicUI, you can create dynamic web-like UIs using a declarative syntax, making it easy to define and manage the UI components and their interactions.

Installation

Before you start using PynamicUI, make sure you have it installed. You can install it using pip:

pip install pynamicui

Basic Structure of a PynamicUI App

A PynamicUI app consists of three main components: the virtual DOM, UI elements, and the rendering process.

  1. Virtual DOM: The virtual DOM is a representation of the UI components and their hierarchy. It maintains a lightweight, in-memory representation of the UI components, allowing you to efficiently manage the UI's state and efficiently update the actual UI when changes occur.

  2. UI Elements: UI elements are the building blocks of your application's UI. You create UI elements using the createElement function, specifying their type (e.g., "Button", "Label", "Frame") and setting their properties (e.g., text, color, size). Elements can have parent-child relationships, forming a hierarchy that represents the UI layout.

  3. Rendering Process: Once you've defined the virtual DOM and UI elements, you render the virtual DOM to create the actual UI. The rendering process sets up the UI based on the virtual DOM's state and updates it whenever changes occur.

Example: Counter App with PynamicUI State Management

Let's start with a simple example of a counter application using PynamicUI's state management feature. This example demonstrates how to create a counter and update its value when a button is clicked.

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

# Create the virtual DOM
dom = createDom()

# Render the CounterApp component
counter_app = CounterApp(dom)

# Render the virtual DOM
dom.render()

More Examples

  1. Navigation Bar App: Build a navigation bar with buttons to switch between different pages of your application.

  2. Todo List App: Create a simple todo list application with the ability to add and remove items.

  3. Image Gallery App: Develop an image gallery that displays a grid of images with filtering and sorting options.

  4. Calculator App: Design a basic calculator with buttons for numbers and operations.

Event Handling in PynamicUI

PynamicUI provides a flexible event system to handle various interactions, such as button clicks, keypresses, and mouse movements. Event handling is done through props, allowing you to bind event handlers to UI elements. For more details, refer to the Event Handling in PynamicUI wiki page.

State Management in PynamicUI

PynamicUI offers a state management feature that allows you to track and manage variables within your application. You can use dom.useState to create and update states, and any changes to the states will trigger UI updates automatically. For more details, refer to the State Management in PynamicUI wiki page.

Styling with PynamicUI

Customize the appearance of your UI elements with PynamicUI's styling capabilities. You can define styles with custom properties and apply them to specific elements. For more details, refer to the Styling with PynamicUI wiki page.

Using Place with PynamicUI

Learn how to position and size your UI elements with the place method in PynamicUI. You can easily achieve responsive layouts and dynamic list creation with this robust geometry manager. For more details, refer to the Using Place with PynamicUI wiki page.

Conclusion

PynamicUI provides a powerful and user-friendly framework for creating dynamic and interactive UIs in Python. With its declarative syntax, event handling, state management, and styling capabilities, PynamicUI makes UI development a breeze. Whether you're building a simple counter app or a complex application, PynamicUI empowers you to create engaging and responsive user interfaces with ease.

Clone this wiki locally