Лабораторная работа № 1. Визитная карточка
Студент: Кривошеин Максим Константинович, группа ИС-2301
Дисциплина: Разработка мобильных приложений, СПбГЭУ
Платформа: ОС Аврора 5.2 (Aurora SDK 5.2.0.180), Qt 5.6, QML / Sailfish Silica
Задание
Разработать приложение «Визитная карточка».
- Отобразить вводимые поля Фамилия, Имя, Отчество, Телефон, e-mail.
- Для полей Телефон и e-mail использовать маски ввода.
- Отобразить фото произвольным изображением в виде
Image. Изображение добавить в файл ресурсов (qrc), путь к файлу —qrc:/.... - Создать одну кнопку «Сохранить». При нажатии выводить на консоль при помощи
console.logвведённые ФИО, телефон и e-mail. - Разработку вести в отдельной ветке, создать MR.
Реализация
| Требование | Где реализовано |
|---|---|
| Поля ФИО, телефона и e-mail |
qml/pages/MainPage.qml — пять TextField, переход между полями по Enter |
Маска телефона +7 (999) 999-99-99
|
qml/components/MaskedTextField.qml — компонент поля с маской: 9 — цифра, остальные символы маски подставляются автоматически, поле подсвечивается ошибкой, пока номер не введён полностью |
| Маска e-mail |
RegExpValidator в поле e-mail: недопустимые символы не вводятся, адрес считается корректным только в формате имя@домен.зона
|
| Фото из ресурсов |
resources.qrc → images/avatar.png, в QML: Image { source: "qrc:/images/avatar.png" }
|
Кнопка «Сохранить» и console.log
|
функция save() в MainPage.qml; кнопка активна, когда все поля заполнены и прошли проверку масок |
Дополнительно над формой показывается превью визитки, которое обновляется при вводе. Пункт вытягиваемого меню «Очистить форму» сбрасывает все поля.
Почему маска телефона сделана своим компонентом, а не через TextInput.inputMask:
Silica TextField не публикует inputMask, а если задать его внутреннему редактору,
экранная клавиатура ОС Аврора теряет цифры, введённые рядом с литералами маски (), -).
Компонент MaskedTextField форматирует номер сам и работает с любой клавиатурой.
Пример вывода в консоль после нажатия «Сохранить»:
[D] save:30 - Визитка: ФИО: Кривошеин Максим Константинович; Телефон: +7 (912) 345-67-89; E-mail: krivoshein.m@example.ruСтруктура проекта
ru.krivoshein.BusinessCard.pro проект qmake
resources.qrc файл ресурсов с фотографией
images/avatar.png фото для визитки
src/main.cpp точка входа приложения
qml/BusinessCard.qml ApplicationWindow
qml/pages/MainPage.qml экран визитки и формы
qml/pages/AboutPage.qml «О приложении»
qml/components/MaskedTextField.qml поле ввода с маской
qml/cover/DefaultCoverPage.qml обложка приложения
rpm/ru.krivoshein.BusinessCard.spec описание RPM-пакетаСборка
Проект открывается в Аврора IDE (Qt Creator из Aurora SDK) и собирается для
armv7hl, aarch64 или x86_64. Пакет проходит подпись и валидацию
rpm-validator с профилем regular.
Скриншоты
| Пустая форма | Заполненная форма |
|---|---|
 |
 |
Лицензия
MIT, см. LICENSE.