Pages modularization

Author: Daemo00

src/TryNiceGUI/home_page.py

@@ -0,0 +1,8 @@
+"""Home Page."""
+
+from nicegui import ui
+
+
+def content() -> None:
+    """Home Page Content."""
+    ui.label('Hello NiceGUI!').classes('text-h4 font-bold text-grey-8')

src/TryNiceGUI/main.py

@@ -1,11 +1,28 @@
 """Main file."""
 
-from nicegui import ui
+
+from nicegui import app, ui
+
+from . import home_page, theme
+from .pages import with_router, delay_creation
+
+
+def populate_ui():
+    """Insert everything in the UI."""
+
+    @ui.page('/')
+    def index_page() -> None:
+        """Index."""
+        with theme.frame('Homepage'):
+            home_page.content()
+
+    delay_creation.create()
+    app.include_router(with_router.router)
 
 
 def run():
     """Run the application."""
-    ui.label('Hello NiceGUI!')
+    populate_ui()
     ui.run(
         reload=False,
         dark=True,

src/TryNiceGUI/menu.py

@@ -0,0 +1,10 @@
+"""Menu for all the pages."""
+from nicegui import ui
+
+
+def menu() -> None:
+    """Create Menu."""
+    ui.link('Home', '/').classes(replace='text-white')
+    ui.link('A', '/a').classes(replace='text-white')
+    ui.link('B', '/b').classes(replace='text-white')
+    ui.link('C', '/c').classes(replace='text-white')

src/TryNiceGUI/pages/delay_creation.py

@@ -0,0 +1,18 @@
+"""Pages created when `create` is called."""
+from .. import theme
+
+from nicegui import ui
+
+
+def create() -> None:
+    """Create Pages."""
+
+    @ui.page('/a')
+    def example_page_a():
+        with theme.frame('- Example A -'):
+            ui.label('Example A').classes('text-h4 text-grey-8')
+
+    @ui.page('/b')
+    def example_page_b():
+        with theme.frame('- Example B -'):
+            ui.label('Example B').classes('text-h4 text-grey-8')

src/TryNiceGUI/pages/with_router.py

@@ -0,0 +1,27 @@
+"""Pages added to route dynamically."""
+
+from .. import theme
+
+from nicegui import APIRouter, ui
+
+router = APIRouter(prefix='/c')
+
+
+@router.page('/')
+def example_page():
+    """List Items."""
+    with theme.frame('- Example C -'):
+        ui.label('Example C').classes('text-h4 text-grey-8')
+        for i in range(1, 4):
+            ui.link(
+                f'Item {i}',
+                f'/c/items/{i}',
+            ).classes('text-xl text-grey-8')
+
+
+@router.page('/items/{id}', dark=True)
+def item(id: str):
+    """Display Item Page."""
+    with theme.frame(f'- Example C{id} -'):
+        ui.label(f'Item  #{id}').classes('text-h4 text-grey-8')
+        ui.link('go back', router.prefix).classes('text-xl text-grey-8')

src/TryNiceGUI/theme.py

@@ -0,0 +1,19 @@
+"""Common Theme for all the pages."""
+
+from contextlib import contextmanager
+
+from .menu import menu
+
+from nicegui import ui
+
+
+@contextmanager
+def frame(navtitle: str):
+    """Share the same styling and behavior across all pages."""
+    with ui.header().classes('justify-between text-white'):
+        ui.label("Theme Header")
+        ui.label(navtitle)
+        with ui.row():
+            menu()
+    with ui.column().classes('absolute-center items-center'):
+        yield