Web GUI — twarz Pytigon w przeglądarce

Webowe GUI Pytigon to, co użytkownicy widzą, gdy otworzą przeglądarkę. Zbudowane jest na Bootstrap dla responsywnych układów, wzbogacone o niestandardowe Web Components dla złożonych interakcji i zasilane lekką biblioteką JavaScript, która obsługuje renderowanie tabel, przesyłanie formularzy i aktualizacje w czasie rzeczywistym.

Stos technologiczny

Warstwa Technologia Przeznaczenie
Struktura HTML5 szkielet strony, generowany z szablonów .ihtml
Styl Bootstrap 5 + własny CSS responsywna siatka, komponenty, motywy Pytigon
Interakcja Niestandardowy JavaScript + jQuery AJAX, obsługa formularzy, aktualizacje w czasie rzeczywistym
Komponenty Web Components wielokrotnego użytku widgety UI (tabele, drzewa, formularze)
Czas rzeczywisty WebSockets (Django Channels) żywe aktualizacje bez odpytywania

Struktura strony

Każda webowa strona Pytigon podąża za tą hierarchią szablonów:

base.ihtml (bazowy szablon Django)
  → theme/[device]_base.ihtml (oprawa specyficzna dla urządzenia)
    → [app]/templates/[model]_list.ihtml (treść aplikacji)

Bazowy szablon

Bazowy szablon zapewnia: - Strukturę dokumentu HTML5 z właściwymi meta tagami - Framework CSS Bootstrap - Bibliotekę JavaScript Pytigon - Menu nawigacyjne (renderowane przez tag %% menu) - Okruszki (breadcrumbs) - Pasek narzędzi użytkownika (logowanie/wylogowanie, przełącznik języka, powiadomienia) - Obszar treści (gdzie renderują się szablony specyficzne dla aplikacji)

Motywy specyficzne dla urządzenia

Szablony dostosowują się do wykrytego urządzenia w czasie renderowania:

standard_web_browser = 1  →  motyw desktopowy
standard_web_browser = 2  →  motyw hybrydowy (osadzona przeglądarka)

browser_type = 'tablet_standard'  →  motyw tabletu
browser_type = 'smartfon_standard' →  motyw smartfona

Biblioteka JavaScript frontendu

Zobacz Frontend script library dla szczegółowej dokumentacji. Kluczowe możliwości: - Komponent tabeli — stronicowane, sortowalne, przeszukiwalne tabele z ładowaniem AJAX - Obsługa formularzy — walidacja, przesyłanie, przesyłanie plików z postępem - Komponent drzewa — dane hierarchiczne z rozwijaniem/zwijaniem - WebSockets — aktualizacje tabel w czasie rzeczywistym, powiadomienia - Menu kontekstowe — akcje na wierszach tabeli po kliknięciu prawym przyciskiem - Przeciąganie i upuszczanie — zmiana kolejności wierszy tabeli, przenoszenie elementów w drzewach - Okna modalne — okna potwierdzenia, edycja-w-modalu

Web Components

Zobacz Components dla szczegółowej dokumentacji. Web Components Pytigon zapewniają: - <ptig-table> — w pełni funkcjonalna tabela danych - <ptig-form> — dynamiczny formularz z walidacją - <ptig-tree> — widok drzewa hierarchicznego - <ptig-menu> — menu nawigacyjne - <ptig-calendar> — kalendarz/wybór daty - <ptig-chart> — renderowanie wykresów (integracja Plotly)

Integracja z Bootstrap

Pytigon używa klas Bootstrap 5 do układu i stylowania. Domyślny motyw zawiera:

  • klasę btn-raised — przyciski wypukłe inspirowane Material Design
  • klasę table-ptig — style tabel danych Pytigon
  • responsywną siatkę — pełny 12-kolumnowy system układu
  • komponenty kart — do grupowania powiązanej treści
  • pływające etykiety formularzy — nowoczesny styl formularzy

Obsługa offline

Webowy klient Pytigon wspiera tryb offline, gdy jest skonfigurowany. Zmienna kontekstu pyodide ma wartość True, gdy renderowanie odbywa się w środowisku Pyodide (Python w przeglądarce), co umożliwia wykonywanie Pythona po stronie klienta dla przetwarzania danych offline.

?: IntroducToWebGUI ?: IntroducToWebGUI