Architektura GUI — oblicza Pytigona

Graficzny interfejs użytkownika to miejsce, w którym Pytigon spotyka się ze swoimi użytkownikami. W przeciwieństwie do wielu frameworków, które stawiają wszystko na jedną technologię renderowania, Pytigon celebruje różnorodność: ta sama logika aplikacji może zaprezentować się przez natywne okno desktopowe, kartę przeglądarki WWW albo ekran urządzenia mobilnego. Magia tkwi w abstrakcji.

Trzy oblicza

[row]

Potok renderowania

Niezależnie od oblicza klienta potok renderowania podąża tą samą ścieżką:

.ihtml Template → Preprocessor → .html Django Template → Context Rendering → HTML Output
                                                                                    ↓
                                              ┌─────────────────────────────────────┤
                                              ↓                     ↓               ↓
                                         wxPython             Web Browser      schhtml
                                         (native)             (browser)       (PDF/print)

Preprocesor szablonów (.ihtml)

Format .ihtml to sekretny składnik Pytigona. Wykorzystuje składnię opartą na wcięciach, która kompiluje się do standardowych szablonów Django. Kluczowe zasady:

  • Wiersze zaczynające się od % wprowadzają znaczniki szablonu Django; zakończone znakiem : automatycznie zamykają bloki
  • Wiersze zaczynające się od litery stają się znacznikami HTML; wcięcie steruje zagnieżdżeniem
  • Wiersze zaczynające się od %% definiują bloki Django
  • Wiersze zaczynające się od . to zwykły tekst (wiodąca kropka jest usuwana)

Oznacza to, że szablon formularza, który w czystym Django miałby 200 wierszy pełnych zaszumionych {% i %}, staje się przejrzystym, czytelnym plikiem .ihtml o objętości 60 wierszy.

Format schhtml

Do generowania plików PDF i natywnego renderowania w wxPython Pytigon używa formatu schhtml — uproszczonego formatu przypominającego HTML, zoptymalizowanego pod renderowanie stronicowe. Obsługuje:

  • Nagłówki, stopki i podziały stron
  • Uproszczony CSS z pozycjonowaniem co do piksela
  • Renderowanie tabel z automatyczną paginacją
  • Obrazy tła z inteligentnymi trybami skalowania

Format celowo nie jest zgodny z HTML. Poświęca standardy webowe na rzecz wydajności i prostoty renderowania. Pomyśl o nim jak o HTML-u, który przeszedł kurs minimalizmu.

Tryb hybrydowy — to, co najlepsze z obu światów

Klient desktopowy osadza przeglądarkę WebKit. Oznacza to, że:

  1. Złożone formularze mogą korzystać z natywnych kontrolek wxPython dla szybkości
  2. Bogata treść (wykresy, sformatowany tekst) renderuje się we wbudowanej przeglądarce
  3. JavaScript działa we wbudowanej przeglądarce, komunikując się z hostem wxPython

Komunikacja między natywną powłoką a wbudowaną przeglądarką odbywa się przez niestandardowy pomost, który pozwala JavaScriptowi wyzwalać natywne okna dialogowe, a natywnemu kodowi — wstrzykiwać treść do DOM.

Strategia responsywnego projektowania

Pytigon wykrywa urządzenie klienta i serwuje odpowiednio ostylowane szablony:

Klasa urządzenia Motyw szablonu Cechy
Desktop desktop Pełne menu, panele boczne, układy wielokolumnowe
Tablet tablet Uproszczona nawigacja, odstępy przyjazne dotykowi
Smartfon smartfon Jedna kolumna, menu typu hamburger, minimum obramowania
Osadzony schweb Okrojony, zoptymalizowany pod tryb hybrydowy

Dziedziczenie szablonów rozwiązuje się automatycznie: jeśli theme/smartfon nie definiuje danego bloku, następuje przejście do theme/tablet, potem theme/desktop, a na końcu do szablonów bazowych.

Biblioteka skryptów front-endowych

Klient webowy zawiera niestandardową bibliotekę JavaScript, która obsługuje:

  • Ładowanie tabel przez AJAX z nieskończonym przewijaniem
  • Walidację formularzy z informacją zwrotną po stronie serwera
  • Aktualizacje w czasie rzeczywistym przez WebSockets
  • Interfejs oparty na komponentach z użyciem Web Components
  • Zmianę kolejności metodą przeciągnij i upuść
  • Menu kontekstowe i skróty klawiszowe

Biblioteka została zaprojektowana tak, by działać bez ciężkich frameworków — jQuery jest dołączone dla wygody manipulacji DOM, ale własne komponenty Pytigona to czysty JavaScript opakowany w Web Components.

Kontekst konfiguracji

Procesor kontekstu wstrzykuje do każdego szablonu zmienne wykrywania klienta:

standard_web_browser: 0=wxPython, 1=standard browser, 2=hybrid, 3=webkit frame
browser_type: 'desktop_standard', 'tablet_standard', 'smartfon_standard', 'schweb'
client_type: 'desktop', 'tablet', 'smartfon', 'schweb'

Używaj ich w szablonach do warunkowego renderowania różnych elementów interfejsu dla różnych klientów.

?: GUI ?: GUI