on_boarding.md

graph LR
    UI_Element_Management["UI Element Management"]
    Event_Handling_and_Data_Binding["Event Handling and Data Binding"]
    Client_Communication_and_Task_Management["Client Communication and Task Management"]
    Component_Library_and_Styling["Component Library and Styling"]
    App_and_Page_Management["App and Page Management"]
    Utilities_and_Storage["Utilities and Storage"]
    Native_Mode_Integration["Native Mode Integration"]
    UI_Element_Management -- "manages" --> UI_Element_Management
    Event_Handling_and_Data_Binding -- "uses" --> UI_Element_Management
    Client_Communication_and_Task_Management -- "sends updates to" --> UI_Element_Management
    Component_Library_and_Styling -- "uses" --> UI_Element_Management
    App_and_Page_Management -- "manages" --> UI_Element_Management
    Utilities_and_Storage -- "uses" --> App_and_Page_Management
    Native_Mode_Integration -- "uses" --> UI_Element_Management
    Event_Handling_and_Data_Binding -- "uses" --> Client_Communication_and_Task_Management
    Component_Library_and_Styling -- "uses" --> Event_Handling_and_Data_Binding
    Component_Library_and_Styling -- "uses" --> Component_Library_and_Styling
    Utilities_and_Storage -- "uses" --> Client_Communication_and_Task_Management
    Client_Communication_and_Task_Management -- "uses" --> App_and_Page_Management
    click UI_Element_Management href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/nicegui/UI Element Management.md" "Details"
    click Event_Handling_and_Data_Binding href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/nicegui/Event Handling and Data Binding.md" "Details"
    click Client_Communication_and_Task_Management href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/nicegui/Client Communication and Task Management.md" "Details"
    click Component_Library_and_Styling href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/nicegui/Component Library and Styling.md" "Details"
    click App_and_Page_Management href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/nicegui/App and Page Management.md" "Details"
    click Utilities_and_Storage href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/nicegui/Utilities and Storage.md" "Details"
    click Native_Mode_Integration href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/nicegui/Native Mode Integration.md" "Details"

Loading

Component Details

NiceGUI is a Python framework for creating web-based user interfaces. The framework is structured around several core components that handle UI element management, event handling, client-server communication, component libraries, application and page management, utilities, storage, and native mode integration. These components work together to provide a comprehensive and efficient way to build interactive web applications with Python.

UI Element Management

This component is responsible for defining, managing, and rendering UI elements. It provides the base Element class, mixins for common functionalities like visibility and content, and layout elements like Column, Row, and Grid. It handles the creation, modification, and deletion of UI elements, as well as their hierarchical organization within the UI.

Related Classes/Methods:

• nicegui.element.Element (40:562)
• nicegui.elements.mixins.visibility.Visibility (13:109)
• nicegui.elements.mixins.content_element.ContentElement (9:88)
• nicegui.elements.mixins.text_element.TextElement (9:88)
• nicegui.elements.column.Column (6:24)
• nicegui.elements.row.Row (6:25)
• nicegui.elements.grid.Grid (6:30)

Event Handling and Data Binding

This component manages user interactions and data synchronization. It handles events triggered by UI elements, dispatches them to registered handlers, and provides mechanisms for binding UI elements to Python variables, ensuring that changes in one are reflected in the other. It uses nicegui.events.handle_event to handle events and nicegui.binding for data binding.

Related Classes/Methods:

• nicegui.events.handle_event (410:453)
• nicegui.events.UiEventArguments (46:48)
• nicegui.element.Element.on (344:401)
• nicegui.binding.bind (162:178)
• nicegui.binding.bind_from (144:159)
• nicegui.binding.bind_to (126:141)
• nicegui.binding.BindableProperty (181:204)

Client Communication and Task Management

This component manages communication between the server and the client, as well as background tasks. It uses WebSockets to send updates to the client and manages background tasks using asyncio. The Client class handles the WebSocket connection, and the Outbox class queues messages for efficient delivery. The background_tasks module provides functions for creating and managing tasks, and the Timer class allows scheduling functions to be called periodically.

Related Classes/Methods:

• nicegui.client.Client (35:385)
• nicegui.outbox.Outbox (26:154)
• nicegui.background_tasks.create (17:30)
• nicegui.timer.Timer (11:116)

Component Library and Styling

This component provides a collection of pre-built UI components and styling mechanisms. It includes components like buttons, inputs, labels, and charts, built on top of the core UI definition and management component. It also provides classes for applying CSS styles (Style), using Tailwind CSS classes (Tailwind), and managing CSS classes on UI elements (Classes).

Related Classes/Methods:

• nicegui.elements.button.Button (13:53)
• nicegui.elements.input.Input (10:76)
• nicegui.elements.label.Label (4:13)
• nicegui.elements.chart.Chart (12:40)
• nicegui.elements.table.Table (29:453)
• nicegui.elements.select.Select (12:169)
• nicegui.style.Style (9:47)
• nicegui.tailwind.Tailwind (182:1022)
• nicegui.classes.Classes (9:56)

App and Page Management

This component handles the creation and management of the application and its pages. It includes the page decorator, which defines routes and associates them with UI content. It also manages page titles, metadata, static files, and media files. The App class is responsible for the overall application lifecycle.

Related Classes/Methods:

• nicegui.page.page (21:158)
• nicegui.app.app.App.add_static_file (180:218)
• nicegui.app.app.App.add_media_file (241:274)
• nicegui.app.range_response.get_range_response (13:58)

Utilities and Storage

This component provides utility functions and storage mechanisms. It includes functions for navigation, downloading files, refreshing parts of the UI, and accessing different storage types (browser, user, session). The Storage class manages access to these storage types, and the FilePersistentDict and RedisPersistentDict classes provide functionality for persisting data using files or Redis.

Related Classes/Methods:

• nicegui.functions.download.Download (9:89)
• nicegui.functions.navigate.Navigate (9:69)
• nicegui.functions.refreshable.refreshable (58:131)
• nicegui.storage.Storage (50:217)
• nicegui.persistence.file_persistent_dict.FilePersistentDict (12:60)
• nicegui.persistence.redis_persistent_dict.RedisPersistentDict (13:92)

Native Mode Integration

This component enables running NiceGUI applications in a native desktop window. It includes the native_mode module, which provides functions for creating and managing native windows. It allows users to deploy NiceGUI applications as standalone desktop applications.

Related Classes/Methods:

• nicegui.native.native_mode._open_window (29:52)