Коммит 23edb605 создал по автору OMP Education's avatar OMP Education
Просмотр файлов

Add module: Models and Views. #11

владелец a2e895ac
......@@ -46,7 +46,13 @@ Copyright © 2016–2023 ООО «Открытая мобильн
[cлайды](./components/lecture.fodp),
[конспект](./components/lecture.md)
* [Тесты](./components/tests.md)
* Модели и представления
* [Модели и представления](./models_and_views)
* Лекция:
[cлайды](./models_and_views/lecture.fodp),
[конспект](./models_and_views/lecture.md)
* [Примеры](./models_and_views/examples.md)
* [Задания](./models_and_views/tasks.md)
* [Тесты](./models_and_views/tests.md)
* JavaScript
* Silica
* Qt Quick Controls 2
......
# Примеры по теме «Модели и представления»
Copyright © 2016–2023 ООО «Открытая мобильная платформа».
Этот документ предоставляется в соответствии
с [Публичной лицензией Creative Commons с указанием авторства версии 4.0 Международная](../../LICENSE.CC-BY-4.0.ru.md).
* [Пример работы с моделями и представлениями для Qt Creator](../../projects/planet_names_qtcreator)
* [Пример работы с моделями и представлениями для Аврора IDE](../../projects/planet_names_aurora)
Это отличие свёрнуто
Это отличие свёрнуто
# Задания по теме «Модели и представления»
Copyright © 2016–2023 ООО «Открытая мобильная платформа».
Этот документ предоставляется в соответствии
с [Публичной лицензией Creative Commons с указанием авторства версии 4.0 Международная](../../LICENSE.CC-BY-4.0.ru.md).
## Задание 1
Создать приложение, которое позволяет отображать список (ListView) из прямоугольников (Rectangle)
с использованием компонента ListModel в качестве модели.
Модель должна содержать информацию о цвете фона прямоугольника, тексте, отображаемом
в прямоугольнике и цвете текста.
Текст должен содержать название цвета фона прямоугольника.
## Задание 2
Создать приложение, которое отображает кнопку и список из прямоугольников.
По нажатию на кнопку происходит добавление нового элемента в список.
По нажатию на элемент списка происходит удаление данного элемента.
В прямоугольниках должен отображаться текст с порядковым номером элемента в списке.
При удалении элементов порядковые номера у добавленных прямоугольников остаются неизменными.
## Задание 3
Получить и отобразить курсы валют в виде списка из ресурса ЦБ РФ
по адресу http://www.cbr.ru/scripts/XML_daily.asp.
Используйте для решения данной задачи XmlListModel.
# Тесты по теме «Модели и представления»
Copyright © 2016–2023 ООО «Открытая мобильная платформа».
Этот документ предоставляется в соответствии
с [Публичной лицензией Creative Commons с указанием авторства версии 4.0 Международная](../../LICENSE.CC-BY-4.0.ru.md).
## Multiple choice
Какие из перечисленных моделей являются редактируемыми?
---
* **JavaScript-модель**
* **ListModel**
* XmlListModel
## Single choice
Какое из полей XmlListModel служит для указания ссылки на ресурс для получения данных?
---
* url
* query
* **source**
## Text
Какой сигнал у Repeater испускается после добавления элемента модели?
---
itemAdded
## Single choice
Элементы какого типа может содержать ListModel?
---
* **ListElement**
* JS-примитивы
* QML-компоненты
## Text
Через какое свойство модели можно получить доступ к данным, если они заданы как примитивы?
---
modelData
## Single choice
Сколько элементов модели можно переместить при помощи ObjectModel.move()?
---
* у ObjectModel нет такого метода
* один
* два
* три
* **от 1 до ObjectModel.count**
// SPDX-FileCopyrightText: 2023 Open Mobile Platform LLC <edu@omp.ru>
// SPDX-License-Identifier: BSD-3-Clause
import QtQuick 2.1
import "components"
Item {
objectName: "PlanetNames"
Grid {
id: layout
objectName: "layout"
columns: 2
anchors.fill: parent
Repeater {
model: ListModel {
ListElement { name: "Меркурий"; surfaceColor: "gray" }
ListElement { name: "Венера"; surfaceColor: "yellow" }
ListElement { name: "Земля"; surfaceColor: "blue" }
ListElement { name: "Марс"; surfaceColor: "orange" }
ListElement { name: "Юпитер"; surfaceColor: "orange" }
ListElement { name: "Сатурн"; surfaceColor: "yellow" }
ListElement { name: "Уран"; surfaceColor: "lightBlue" }
ListElement { name: "Нептун"; surfaceColor: "lightBlue" }
}
PlanetItem {
planetName: name
planetColor: surfaceColor
width: layout.width / layout.columns
}
}
}
}
// SPDX-FileCopyrightText: 2023 Open Mobile Platform LLC <edu@omp.ru>
// SPDX-License-Identifier: BSD-3-Clause
import QtQuick 2.0
Item {
id: root
objectName: "PlanetItem"
property alias planetName: text.text
property alias planetColor: planetCircle.color
height: width / 3
Rectangle {
id: planetCircle
objectName: "planetCircle"
width: parent.height * 0.8
height: width
radius: width / 2
anchors {
left: parent.left
leftMargin: width / 8
verticalCenter: parent.verticalCenter
}
}
Text {
id: text
objectName: "text"
font.pixelSize: root.width / 8
anchors {
left: planetCircle.right
leftMargin: planetCircle.width / 8
verticalCenter: parent.verticalCenter
}
}
}
Name: ru.auroraos.PlanetNames
Summary: Planet Names
Version: 1.0
Release: 1
Group: Qt/Qt
License: BSD-3-Clause
URL: https://auroraos.ru
Source0: %{name}-%{version}.tar.bz2
Requires: sailfishsilica-qt5 >= 0.10.9
BuildRequires: pkgconfig(auroraapp)
BuildRequires: pkgconfig(Qt5Core)
BuildRequires: pkgconfig(Qt5Qml)
BuildRequires: pkgconfig(Qt5Quick)
BuildRequires: desktop-file-utils
%description
List model example
%prep
%setup -q -n %{name}-%{version}
%build
%qmake5
%make_build
%install
rm -rf %{buildroot}
%qmake5_install
desktop-file-install --delete-original --dir %{buildroot}%{_datadir}/applications %{buildroot}%{_datadir}/applications/*.desktop
%files
%defattr(-,root,root,-)
%{_bindir}/%{name}
%defattr(644,root,root,-)
%{_datadir}/%{name}
%{_datadir}/applications/%{name}.desktop
%{_datadir}/icons/hicolor/*/apps/%{name}.png
[Desktop Entry]
Type=Application
X-Nemo-Application-Type=silica-qt5
Icon=ru.auroraos.PlanetNames
Exec=/usr/bin/ru.auroraos.PlanetNames
Name=Planet Names
Name[ru]=Имена планет
[X-Application]
Permissions=
OrganizationName=ru.auroraos
ApplicationName=PlanetNames
ExecDBus=/usr/bin/ru.auroraos.PlanetNames
# SPDX-FileCopyrightText: 2023 Open Mobile Platform LLC <edu@omp.ru>
# SPDX-License-Identifier: BSD-3-Clause
TARGET = ru.auroraos.PlanetNames
CONFIG += \
auroraapp \
SOURCES += \
src/main.cpp \
DISTFILES += \
rpm/$${TARGET}.spec \
AURORAAPP_ICONS = 86x86 108x108 128x128 172x172
// SPDX-FileCopyrightText: 2023 Open Mobile Platform LLC <edu@omp.ru>
// SPDX-License-Identifier: BSD-3-Clause
#include <auroraapp.h>
#include <QtQuick>
int main(int argc, char *argv[])
{
QScopedPointer<QGuiApplication> application(Aurora::Application::application(argc, argv));
application->setOrganizationName(QStringLiteral("ru.auroraos"));
application->setApplicationName(QStringLiteral("PlanetNames"));
QScopedPointer<QQuickView> view(Aurora::Application::createView());
view->setSource(Aurora::Application::pathTo(QStringLiteral("qml/PlanetNames.qml")));
view->show();
return application->exec();
}
# SPDX-FileCopyrightText: 2023 Open Mobile Platform LLC <edu@omp.ru>
# SPDX-License-Identifier: BSD-3-Clause
QT += \
quick\
CONFIG += \
c++17 \
DEFINES += \
QT_DEPRECATED_WARNINGS \
SOURCES += \
src/main.cpp \
RESOURCES += \
qml.qrc \
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
<RCC>
<qresource prefix="/">
<file>qml/components/PlanetItem.qml</file>
<file>qml/main.qml</file>
<file>qml/PlanetNames.qml</file>
</qresource>
</RCC>
// SPDX-FileCopyrightText: 2023 Open Mobile Platform LLC <edu@omp.ru>
// SPDX-License-Identifier: BSD-3-Clause
import QtQuick 2.1
import "components"
Item {
objectName: "PlanetNames"
Grid {
id: layout
objectName: "layout"
columns: 2
anchors.fill: parent
Repeater {
model: ListModel {
ListElement { name: "Меркурий"; surfaceColor: "gray" }
ListElement { name: "Венера"; surfaceColor: "yellow" }
ListElement { name: "Земля"; surfaceColor: "blue" }
ListElement { name: "Марс"; surfaceColor: "orange" }
ListElement { name: "Юпитер"; surfaceColor: "orange" }
ListElement { name: "Сатурн"; surfaceColor: "yellow" }
ListElement { name: "Уран"; surfaceColor: "lightBlue" }
ListElement { name: "Нептун"; surfaceColor: "lightBlue" }
}
PlanetItem {
planetName: name
planetColor: surfaceColor
width: layout.width / layout.columns
}
}
}
}
// SPDX-FileCopyrightText: 2023 Open Mobile Platform LLC <edu@omp.ru>
// SPDX-License-Identifier: BSD-3-Clause
import QtQuick 2.0
Item {
id: root
objectName: "PlanetItem"
property alias planetName: text.text
property alias planetColor: planetCircle.color
height: width / 3
Rectangle {
id: planetCircle
objectName: "planetCircle"
width: parent.height * 0.8
height: width
radius: width / 2
anchors {
left: parent.left
leftMargin: width / 8
verticalCenter: parent.verticalCenter
}
}
Text {
id: text
objectName: "text"
font.pixelSize: root.width / 8
anchors {
left: planetCircle.right
leftMargin: planetCircle.width / 8
verticalCenter: parent.verticalCenter
}
}
}
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать