Skip to content

createElement

Jump to bottom
Zacharie edited this page Jul 19, 2023 · 5 revisions

createElement Class

The createElement class is a fundamental component of the PynamicUI library that enables dynamic creation and management of virtual elements. These virtual elements are seamlessly translated into corresponding tkinter widgets, forming the building blocks of user interfaces. With createElement, developers can define and manipulate UI components using a declarative syntax similar to HTML elements, simplifying the process of UI design and interaction.

Class Overview

The createElement class provides various functionalities for UI element creation and management:

  1. Element Creation: The class enables the creation of virtual elements with different properties, such as tags, names, properties, children, placements, visibility, hooks, and styles.

  2. Element Rendering: Virtual elements are efficiently rendered as tkinter widgets within the application window, allowing the UI to be visually displayed to users.

  3. Unmounting and Mounting: The class supports unmounting elements to remove them from the UI hierarchy, as well as mounting them back for display and interaction.

  4. Hooks and Effects: Developers can utilize hooks and effects to add custom logic and side effects to elements. Hooks allow actions to be performed when elements mount, unmount, or update, while effects enable responses to changes in state or other properties.

  5. State Management: Elements can be associated with states, and developers can manage state changes and triggers for automatic UI updates.

  6. Styling and Style Updates: The class supports the application of styles to elements, allowing developers to define and manage styles efficiently.

Methods and Functionality

  1. __init__(self, parent, tag, name=None, props=None, children=None, place=None, visible=True, hooks=None, style=None): Constructor method that initializes the createElement class. It sets up the virtual element with provided properties and configurations.

  2. render(self): Renders the virtual element as a tkinter widget within the parent element.

  3. unmount(self): Unmounts the element and its children, removing them from the UI hierarchy.

  4. mount(self): Mounts the element and its children, displaying them within the UI hierarchy.

  5. useEffect(self, props=[""], hook=None, unmount=None): Registers hooks and effects for the element, allowing developers to add custom logic and side effects.

  6. setProp(self, prop, value): Sets a new value for a property of the element and triggers any associated hooks.

  7. hide(self): Hides the element and unmounts it from the UI hierarchy.

  8. show(self): Displays the element and renders it within the parent element, also mounting it back.

  9. setStyle(self, style): Applies a new style to the element, updating its appearance.

  10. place(self, geometry): Sets the placement options for the element.

  11. updateStyle(self): Updates the element's style, applying the relevant changes to the associated tkinter widget.

  12. appendChild(self, child): Appends a child element to the current element's children list.

  13. setParent(self, parent): Appends the element to the parent element's children list and sets the element's parent.

  14. destroy(self): Destroys the element and all its children.

Example Usage

# Sample code demonstrating dynamic list creation
# (Please note that this is a simplified example for demonstration purposes)
from pynamicui import createDom, createElement

dom = createDom()

# Parent container
container = createElement(dom, "Frame", place={"relx": 0, "rely": 0, "relwidth": 1, "relheight": 1})

# Dynamic list items (using a loop to create multiple items)
num_items = 5
for i in range(num_items):
    item = createElement(container, "Button", props={"text": f"Item {i+1}"})
    item.place({"relx":0, "rely":(i / num_items), "relwidth":1, "relheight": (1 / num_items)})

# Render the virtual DOM
dom.render()

In this example, the createElement class is used to create a dynamic list of buttons. The buttons are placed within a parent container, and the place() method is used to position each button relative to the container. By adjusting the relx, rely, relwidth, and relheight parameters, you can easily control the layout of the buttons within the parent container.

By using the createElement class and its associated methods, developers can efficiently build and manage dynamic and responsive user interfaces in Python desktop applications. The class's support for hooks, state management, styling, and element rendering allows for the creation of elegant and interactive UIs with ease and efficiency. For further details and usage examples, refer to the PynamicUI Wiki.

Clone this wiki locally