- PVSM.RU - https://www.pvsm.ru -
Как можно создать web приложение без использования HTML? Для этого нам понадобится: новый браузер, QML и back-end на Java.
HTML создавался учеными в CERN как способ делиться научными статьями. Затем он превратился в удобный способ размещения информации в сети. Стало ясно, что функциональности гиперссылок мало, и тогда начали добавлять компоненты, формы, CSS. Но и этого было мало, нужна была динамика, добавили JavaScript. Но на всем этом не очень удобно разрабатывать, по этому в дальнейшем появились js-фреймворки. Они пытаются устранить недостатки HTML. Но я думаю, что лучше лечить саму болезнь, чем симптомы. В этом нам поможет QML.
Сразу хочу отметить, что это решение не является production-ready. Это "Hello World!" приложение, которое показывает что можно достичь используя данные инструменты.
Поскольку нам не нужен разбор HTML, по этому браузер мы напишем свой, на Qt5, QML и C++. Наш браузер должен взаимодействовать с back-end приложением и показывать информацию на экране.
Схема работы браузера:
enter
TabComponent.qml
...
TextInput {
onAccepted: {
var result = siteLoader.loadSite(addressIpt.text)
if (result === LoadResultType.SUCCESS) {
var props = siteLoader.loadProperties(addressIpt.text)
var qmlPath = siteLoader.getMainQmlPath(addressIpt.text)
pageLoader.setSource(qmlPath, props)
} else {
...
}
}
}
...
Loader {
id: pageLoader
}
Здесь siteLoader
это экземпляр C++ класса, который импортируются в qml. В нем реализована логика браузера.
TextInput
это компонент адресной строки в браузере. При нажатии enter
вызывается метод onAccepted
и выполняется логика загрузки сайта.
В QML есть возможность отображать файл по сети, но я не думаю что это хороший способ. В будущем можно прикрутить версионность, и если версии совпадают вообще не скачивать файл, а использовать тот что есть.
Вот собственно и весь браузер. Давайте перейдем к back-end и UI.
Back-end и UI это непосредственно наше web приложение. UI часть мы напишем на QML, a back-end у нас будет написан на spring boot
, поскольку я Java программист. Первое что нам нужно это qml-файл с описанием нашего интерфейса.
main.qml
import QtQuick 2.0
Rectangle {
color: "lightgray"
property alias textValue: helloText.text
Text {
id: helloText
anchors.horizontalCenter: parent.horizontalCenter
font.pointSize: 24
}
}
Тут все довольно просто.
property alias textValue: helloText.text
Эта строчка нужна чтобы вытащить свойство text
наверх, чтобы можно было его проставить в Loader
.
Теперь добавим два эндпоинта:
@RestController
public class HelloController {
@GetMapping(
value = "/main.qml",
produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
public byte[] mainQml() throws IOException {
ClassPathResource resource = new ClassPathResource("main.qml");
return IOUtils.toByteArray(resource.getInputStream());
}
@GetMapping(
value = "/getProperties",
produces = MediaType.APPLICATION_JSON_VALUE)
public Object getProperties() {
return "{"textValue": "Hello World!"}";
}
}
Первый end-point вернет qml-файл, а второй — необходимые данные. Хранить файл в classpath не самое удачное решение. Тем более что в QML приложениях может быть много qml
и js
файлов. Но мы это сделали для простоты.
В итоге мы получим:
Давайте теперь рассмотрим плюсы и минусы данного подхода
Пока что минусов гораздо больше, чем плюсов. Ну это и понятно, это всего лишь прототип, который написан за пару дней, на коленках. Но все проблемы решаемы, по крайней мере я не вижу серьезных блокеров.
Тогда зачем эта статья, спросите вы.
На просторах интернета ничего похожего я не нашел, возможно я плохо искал, и уже существует что-то подобное. Либо это просто никому не нужно. В любом случае я хочу услышать от вас отзывы, и по ним понять, стоит ли заниматься этим делом.
P.S. Хочу заметить что данный способ в корне отличается от QmlWeb [5]. В QmlWeb
из qml-файла создается HTML+JS код и рендерится в браузере.
Автор: pohius
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/java/334624
Ссылки в тексте:
[1] Loader: https://doc.qt.io/qt-5/qml-qtquick-loader.html
[2] высоты: https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-divs-the-same-height
[3] Drako Web browser: https://bitbucket.org/max_selivanov/drako/src/master/
[4] Java Hello App : https://bitbucket.org/max_selivanov/hello-app/src/master/
[5] QmlWeb: https://qmlweb.github.io/
[6] Источник: https://habr.com/ru/post/473302/?utm_source=habrahabr&utm_medium=rss&utm_campaign=473302
Нажмите здесь для печати.