How to get proper object oriented approach in NiceGUI

[TomaszSzyborski]

Hi guys and gals,
we have nice example here https://github.com/zauberzeug/nicegui/blob/main/examples/search_as_you_type/main.py how to utilize external APIs, but there is search_field and results from outer scope of the function.
First - I'd like it to be in a function decorated with @page
Second - I have two columns, one with input data and second with the results - and I want to treat them as different objects to have everything modular and separated.
I want to input some data in fields in first column, POST it by clicking the button and pass received data to second column.
Could you provide an example how-to?

[TomaszSzyborski]

Ok, got it, I think I'll create a PR for that in examples

import asyncio
import httpx

from nicegui import events, ui
from nicegui.page import page
from typing import Optional

class Search:
    def __init__(self, results):
        self.results = results
        self.search_field = ui.input(on_change=self.search) \
            .props('autofocus outlined rounded item-aligned input-class="ml-3"') \
            .classes('w-96 self-center mt-24 transition-all')
        self.api = httpx.AsyncClient()
        self.running_query: Optional[asyncio.Task] = None

    async def search(self, e: events.ValueChangeEventArguments) -> None:
        '''Search for cocktails as you type.'''
        if self.running_query:
            self.running_query.cancel()  # cancel the previous query; happens when you type fast
        self.search_field.classes('mt-2', remove='mt-24')  # move the search field up
        self.results.clear()
        # store the http coroutine in a task so we can cancel it later if needed
        self.running_query = asyncio.create_task(
            self.api.get(f'https://www.thecocktaildb.com/api/json/v1/1/search.php?s={e.value}'))
        response = await self.running_query
        if response.text == '':
            return
        with self.results:  # enter the context of the the results row
            for drink in response.json()['drinks'] or []:  # iterate over the response data of the api
                with ui.image(drink['strDrinkThumb']).classes('w-64'):
                    ui.label(drink['strDrink']).classes('absolute-bottom text-subtitle2 text-center')
        self.running_query = None


@page("/")
async def my_page():
    results = ui.row()
    Search(results)


if __name__ in {"__main__", "__mp_main__"}:
    ui.run()

[frankhuurman]

I had the exact same question about the search-as-you-type example since wrapping it up in a main function led to the scope issue of the results/search_field variables and I couldn't figure out how to pass them to the on_change callback.

But when I run this answer example the search bar disappears to the bottom of the results when searching, any idea why that happens? doesn't seem to stick to the top of the page, or perhaps the line self.search_field.classes('mt-2', remove='mt-24') # move the search field up isn't properly executed during search.

[falkoschindler]

@frankhuurman That's because in @TomaszSzyborski's code in my_page the results row is created before the search field Search because the latter needs the results row as an argument. A possible fix might be:

    top = ui.row()
    results = ui.row()
    with top:
        Search(results)

[frankhuurman]

Thanks @falkoschindler 😄
Was kind of missing the flow of UI components in the example.

Only thing with your fix is that the search bar isn't centered horizontally anymore but that's something to figure out!

[rodja]

Thanks for the effort and suggestions. Have you looked at the modularization demo? We try to make each demo about one concept and try not to pack it to full with to much unneeded complexity. I'll go in a bit more detail in you pull-request #482.

[TomaszSzyborski]

Sure, I read the modularization demo, but there are standalone objects. And I'd like to create bindings between two (or more) different objects.
I understand the simplicity of the demos - they are great :)
I tried to create cross-reference between objects, and separate UI logic from UI creation. But I understand your cincerns that it might be a bit too much for the demos.

[jeremy886]

Hi, I am a teacher, and my use case is for teaching. I was amazed at how simple NiceGUI is and plan to use it to teach Software Development as a high school course next year. OOP is a major emphasis in the curriculum, so I tried integrating NiceGUI with OOP. With the help of ChatGPT, I managed to recreate the modularisation example. Is this the correct approach? I’m new to NiceGUI, so I’m not quite sure.

I believe I at least showed: Abstraction and Encapsulation (attributes and methods) but did not show inheritance and I will take care of Polymorphism later.

from nicegui import ui

class App:
    def __init__(self):
        self.pages = [
            {"label": "Home", "path": "/", "content": "Welcome to the Home Page"},
            {"label": "Page A", "path": "/a", "content": "This is Page A."},
            {"label": "Page B", "path": "/b", "content": "This page is defined in a class."},
            {"label": "Page C", "path": "/c", "content": "This is Page C."},
        ]
        self.register_pages()

    def create_menu(self):
        """Creates the navigation menu."""
        for page in self.pages:
            ui.link(page["label"], page["path"]).classes(replace="text-white")

    def register_pages(self):
        """Registers all pages dynamically."""
        for page in self.pages:
            self.create_page(page["path"], page["label"], page["content"])

    def create_page(self, path: str, title: str, content: str):
        """Creates a page with a common layout."""
        @ui.page(path)
        def page():
            ui.colors(primary="#6E93D6", secondary="#53B689", accent="#111B1E")
            with ui.header():
                ui.label("Modularization Example").classes("font-bold")
                ui.space()
                ui.label(title)
                ui.space()
                self.create_menu()
            with ui.column().classes("absolute-center items-center"):
                ui.label(content).classes("text-h4 text-grey-8")

# Run the application
app = App()
ui.run(title="Simplified NiceGUI OOP Example")
app.pages += [ {"label": "Page D", "path": "/d", "content": "This is a New Page."}]
app.register_pages()

[rodja]

@jeremy886 It would have been better to create a new discussion for this. If you have follow ups to my answer please consider doing so (or asking further on Reddit / Descope).

In general the code looks ok. Here are two observations:

• the last line app.register_pages() seems to be obsolete, you call the method already in the conctructor
• I would not name the object app. There is an app object in NiceGUI which is needed to create routes, access infos about serving etc. The potential name clash could be confusing for students which want to go further from your example