PyUI: интерфейсы в браузере

Содержание и основные понятия

PyUI в этой главе не маскируется под Tkinter или PyQt. Python-код выполняется отдельно и возвращает безопасное дерево данных, а браузер создаёт из него реальные HTML-элементы. События страницы остаются событиями браузера, а не поддельной оконной библиотекой.
проектирование
8-11 класс
browser-native
01
Маршрут главы
Здесь нет практикума и экзамена: четыре страницы образуют короткую творческую лабораторию.
43.1 · модель интерфейса
Компоненты и дерево DOM
Разделим экран на маленькие самостоятельные части: заголовок, карточку, поле и действие.
43.2 · поведение
Состояние и события
Проследим точный цикл: пользовательское событие меняет данные, а отрисовка отражает новое состояние.
43.3 · творческая среда
PyUI Studio
Напиши Python-команды, запусти их в изолированном Worker и собери работающий браузерный экран.
02
Граница между Python и браузером
01 · Python
Описывает намерение
ui.column(...)
,
ui.card(...)
и
ui.text(...)
создают безопасное дерево компонентов. Код не получает доступ к странице напрямую.
02 · мост
Передаёт данные
Изолированный Worker возвращает структурированное дерево. В этом месте нет оконной библиотеки и нет нарисованной имитации виджетов.
03 · DOM
Живёт в браузере
Host создаёт настоящие HTML-узлы для текста, заголовков, карточек и уведомлений. События интерактивной страницы остаются обычными событиями браузера.
Важное различие
PyUI не является портом desktop-интерфейса: это учебный декларативный API для HTML DOM. Дерево данных строится Python-кодом, а браузер отвечает за семантику и поведение страницы.
03
Собери дерево компонентов
Добавляй узлы. Последняя кнопка получит настоящий обработчик
click
в этом браузере.
DOM-компоновщик
компоненты → дерево
04
Alt-журнал состояний
Событие не исчезает после отрисовки: журнал хранит снимки состояния, поэтому его можно перематывать назад и вперёд.
ALT · STATE LOG
Снимки интерфейса
СОСТОЯНИЕ