Реализация навигации и проверка многоэкранного прототипа мобильного приложения

Экранная форма

Форма объединяет элементы, которыми пользователь сообщает приложению свой выбор. Label поясняет, что нужно указать; TextBox предоставляет место для ввода; CheckBox обозначает независимую возможность; Slider показывает выбор значения в диапазоне.

Подпись поля должна оставаться понятной после ввода текста. Поэтому важную подпись размещают отдельным Label, а Hint используют для примера. Например, над полем написано «Название маршрута», внутри пустого поля — «Например, Лесная тропа».

Для короткого значения достаточно обычного TextBox. Для пожеланий используют поле с MultiLine: true и достаточной высотой. Кнопки основного действия и возврата различаются назначением и оформлением.

Элементы формы показывают предполагаемые функции приложения. Значения остаются демонстрационными: проверка ввода, обработка событий и отправка формы в работу не входят.

Согласованность экранов

Прототип воспринимается как единое приложение, когда повторяются основные цвета, стиль заголовков и обозначения действий. Название одного объекта не должно меняться между каталогом и формой.

На каждом экране должна быть ясна задача. Каталог отвечает на вопрос «что доступно?», форма — «что нужно указать?». Не добавляйте компоненты только для увеличения объёма: каждый должен иметь понятное назначение.

Подключение переходов

Это типовое задание для всех индивидуальных вариантов. Индивидуальными остаются экраны, собранные на первой паре: тематика, состав элементов, расположение, тексты и оформление. Создавать второй набор индивидуальных заданий на навигацию не нужно.

Во всех проектах используется одна схема из пяти обработчиков:

1. Кнопка раздела на Screen1 открывает второй, информационный экран.
2. Кнопка формы на Screen1 открывает третий экран.
3. Кнопка формы на втором экране открывает третий экран.
4. Кнопка возврата на втором экране закрывает его и возвращает на Screen1.
5. Кнопка «Назад» на третьем экране закрывает его и возвращает туда, откуда была открыта форма.

Имена второго и третьего экранов, кнопок и их надписи берутся из своего варианта. Различие этих имён не меняет общую схему. Завершение третьего экрана и проверка оформления тоже выполняются по единым критериям.

В Designer создаётся внешний вид кнопки; в Blocks задаётся её действие при нажатии. Для перехода достаточно события when ButtonName.Click do и блока open another screen из Built-in → Control. Укажите существующий экран в присоединённом блоке выбора имени экрана. Регистр и написание должны совпадать с Designer.

Пример для кнопки каталога на Screen1:

when ButtonRoutes.Click do
    open another screen screenName RoutesScreen

Это схема соединения блоков, а не текст программы для вставки. В Blocks выберите компонент ButtonRoutes, перетащите его событие Click, вложите в область do блок open another screen, а в его вход screenName присоедините блок имени экрана и выберите RoutesScreen.

Кнопка возврата закрывает дополнительный экран блоком close screen:

when ButtonBookingBack.Click do
    close screen

Найдите ButtonBookingBack на BookingScreen, добавьте событие Click и вложите close screen из Control. Приложение вернётся на экран, из которого открывалась форма. Если форма открыта из каталога, возврат ведёт в каталог; если с главного экрана — на главный.

Не открывайте заново Screen1 для возврата и не закрывайте сам Screen1. Дополнительный экран закрывается, а предыдущий остаётся доступен. Такая схема не накапливает новые экземпляры экранов при повторных переходах.

Переходы в варианте 01

Кнопка ButtonBookingSubmit — «Отправить» остаётся частью визуальной формы; её обработчик в этой работе не создаётся. Передача введённых значений между экранами тоже не требуется.

Открытие и закрытие экранов сверено с официальной документацией MIT App Inventor 13.10.2026.

Практическая работа: второй этап

1. Откройте проект VariantNN и проверьте сохранность двух готовых экранов.
2. Соберите третий экран по своему варианту: подписи, поля ввода, элементы выбора и кнопки.
3. Настройте английские имена, Text, Hint, размеры и выравнивание.
4. Согласуйте оформление трёх экранов; добавьте номер варианта на третий экран.
5. Подключите пять обработчиков переходов и возврата по общей схеме, подставив имена экранов и кнопок своего варианта.
6. Проверьте приложение в доступной среде запуска: из главного экрана откройте каталог и форму; из каталога откройте форму; вернитесь тем же путём. Повторите переходы трижды. Затем сравните внешний вид с макетами.
7. Исправьте найденные дефекты. Экспортируйте проект как VariantNN.aia и подготовьте три снимка экранов.
8. Покажите проект преподавателю и измените свойство указанного им компонента.

В образце варианта 01 на BookingScreen размещаются три TextBox: маршрут, количество участников и пожелания; два CheckBox: сопровождающий и остановка для фотографий; один Slider: темп прогулки; две кнопки в одном ряду: «Назад» и «Отправить». Имена: TextBoxRoute, TextBoxCount, TextBoxComment, CheckBoxGuide, CheckBoxPhoto, SliderPace и соответствующие Label. Фамилии и персональные сведения не нужны.

Проверка качества

Одинаковая последовательность проверки для каждого варианта: главный экран → информационный экран → форма → назад в информационный экран → назад на главный; затем главный экран → форма → назад на главный. Повторите оба маршрута трижды. Кнопка возврата формы должна правильно работать при обоих способах открытия.

Проверяйте экранную форму, а не работу предполагаемой функции. У кнопок перехода и возврата действие обязательно. Отсутствие отправки данных кнопкой «Отправить» не является дефектом этой работы.

Вопросы для объяснения работы

1. Чем имя компонента отличается от Text?
2. Какие контейнеры располагают элементы рядом и друг под другом?
3. Почему возле поля оставлена отдельная подпись?
4. Какие элементы показывают предполагаемые функции приложения?
5. Чем open another screen отличается от close screen?
6. Куда вернёт кнопка «Назад», если форма открыта из каталога?
7. Какой дефект вы обнаружили и исправили?