Продолжение истории создания мобильного приложения NUMERO2 с помощью App Inventor.
Выбор данных из списка реализован в отдельном экране, в котором также предусмотрена операция удаления.
![](https://k245.ru/wp-content/uploads/2024/03/scrPerson.png)
В верхней части экрана расположены три кнопки:
- Отмена – закрыть экран без сохранения выбора
- Выбрать – закрыть экран и передать результат выбора
- Удалить – удалить выбранную запись
В центре – список, который не только отображает данные о людях, но и позволяет производить поиск (фильтрацию) по вхождению.
Также для работы понадобятся не визуальные компоненты:
- TinyDB1 – работа с локальным хранилищем данных
- Noifier1 – уведомление для подтверждения удаления записи
Переменные
Начинаем с декларации переменных для хранения данных. Они необходимы для промежуточного хранения выбранного результата, а также для хранения основного списка с данными.
Переменная | Тип | Назначение |
---|---|---|
BDate | Текст | Дата рождения в формате DD.MM.YYYY |
Name1 | Текст | Фамилия |
Name2 | Текст | Имя |
Name3 | Текст | Отчество |
NameList | Список | Список людей с указанием дня рождения |
NameIndex | Число | Индекс выбранного в списке человека |
Добавляем блоки глобальных переменных, инициализируем их пустышками.
![](https://k245.ru/wp-content/uploads/2024/02/obyavlenie-peremennoj.png)
А при запуске экрана заполняем данными из хранилища:
![](https://k245.ru/wp-content/uploads/2024/03/scrPersonInit-1024x808.png)
Так вот, принятый мной не совсем оптимальный формат хранения данных обусловлен соблазном выполнить загрузку данных в визуальный компонент списка одной командой:
![](https://k245.ru/wp-content/uploads/2024/03/ZagruzitElementy-1024x57.png)
В следующем проекте я более тщательно продумаю этот момент, при необходимости создав для загрузки данных процедуру.
Выбор из списка
При выборе срабатывает событие, в обработчике которого нужные данные (дата рождения, фамилия, имя и отчество) извлекаются и помещаются в переменные:
![](https://k245.ru/wp-content/uploads/2024/03/VyborElementa-1024x475.png)
До тех пор, пока пользователь не нажал кнопку “Выбрать”, данные никуда не уходят, а при нажатии они сохраняются в хранилище процедурой StoreData():
![](https://k245.ru/wp-content/uploads/2024/03/Select.png)
Сохранение данных немного отличается от того, которое используется в главной форме, так как необходимо записывать значение NameIndex – индекса выбранной записи. В любом случае на экране потребуется отдельный экземпляр этой процедуры, так как не существует “межэкранных” переменных или процедур.
![](https://k245.ru/wp-content/uploads/2024/03/StoreData2-1024x695.png)
Удаление
Для удаления необходимо сначала выбрать элемент (определить значение переменной NameIndex). Затем нажать кнопку “Удалить”, которая отображает уведомление с подтверждением:
![](https://k245.ru/wp-content/uploads/2024/03/DeleteReq-1024x293.png)
Если пользователь подтвердит действие нажатием кнопки “Удалить”, то данные удаляются из списка NameList, сохраняются в хранилище и выполняется обновление визуального компонента:
![](https://k245.ru/wp-content/uploads/2024/03/Delete-1024x682.png)
И тут мы наблюдаем очередной косяк локализации: вместо “удалить элемент списка” отображается “заменить элемент списка”, что может очень сильно подпортить настроение желающим разобраться, как работает данный блок.
Закрыть и простить
Для того, чтобы закрыть экран выбора без изменения текущего выбора нажимаем кнопку “Отмена”.
![](https://k245.ru/wp-content/uploads/2024/03/Close.png)
Задача выполнена. Я предлагаю простить разработчикам неточности русского перевода. И в дальнейшем пользовать английским интерфейсом, так как что-то мне подсказывает, что в обозримом будущем никаких исправлений локализации не ожидается.
Итоги
Пройдя по тропинке создания реального приложения в среде разработки App Inventor, вы познакомились с основными элементами, на которые нужно уделить внимание:
- Экраны
- Переменные
- Списки
- Локальное хранилище
- Данные обрабатывать отдельно от представления данных
- Создание, редактирование и удаление элементов списка
Представленное на суд публики решение не совсем стандартное, возможно я вскоре добавлю описание “классического” экрана, в котором одновременно будет и поля редактирования и табица список.
И конечно же меня, как и многих подписчиков, интересует, как записывать данные в удаленную базу для совместного использования? Я работаю над этим вопросом. Пока могу лишь добавить, что простого решения не будет. Пробовал подключать Google-таблицы, но не смог победить обновленную систему безопасности. Работа через API своего веб-сервера выглядит убедительно, но очень сложно, опять же сначала нужно создать этот самый сервер и его API. Остаётся FireBase – готовое решение от Google…
Продолжение следует…