Have you ever tried to vertically center an element using CSS or wanted an element to just use the whole remaining space or similar things? Did you ever struggle with complex interfaces when writing a modern website? Did you ever use QML for a desktop-app and were in wonder how amazingly it just works? Then there probably was also the point where you thought “why can’t I just use QML for my webapp?”. So have I.
And in fact it is nearer to reality than you would think: Say hello to QmlWeb.
QmlWeb is a small project by Lauri Paimen that he’s already developing for a few years now. In the last months, I entered into the development refactoring parts of the library, so by now Lauri yielded the maintainance to me. The biggest part of the credits, though, are due to him.
As of today, I’m proud to announce that QmlWeb will be from now on a KDE-Project.
(A small prototype of a website for QmlWeb – of course written using QML 😉 )
QmlWeb of course doesn’t yet support everything Qt’s implementation of QML does, but it already supports a quite usable subset of it. It supports nearly all of the most basic QML syntax. The element types it supports, are
Moreover it has support for HTML input elements (Button, TextInput, TextArea are currently supported, more to come).
Positioning using anchors works like a charm, Components work too, so does the signal-slot system. Basic animations work nicely (Animations in QML are most probably far more powerful, but what works in QmlWeb is already quite nice ). Keyboard-control is missing as well as States. Layouts (Row, Column, etc.) are currently under development.
Of course there are many more little features missing, but the library is already quite usable. In fact I’m already using it for one webapp, I’m currently writing. There are some places where I’m still using direct html/css, but that’s another nice feature of QmlWeb. You can easily integrate it with normal html/css: QmlWeb exposes the element-id to css-classes, so you can easily include a stylesheet in your surrounding html-file and set all css-properties, you can’t control (yet) with QML, to your QML-element.
That’s soooo awesome! How can I use it?
Just grab the latest code from git://anongit.kde.org/qmlweb, put the qmlweb folder in the same directory like your webpage and put the following code into your index.html:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body style="margin: 0;">
var qmlEngine = new QMLEngine();
Then add a file main.qml containing your QML-coded website. (Tip: use “anchors.fill: parent” in your root element to use the whole size of the inner window)
But it can’t do XYZ!!
Well, QmlWeb is not finished, yet. And I’m looking for people willing to help.
Just grab the code, fix it and join our mailinglist <this project’s name>@kde.org, join us on #kde-qmlweb on Freenode/irc or get in touch with me, directly: <my nick>@web.de (btw. the project’s name is qmlweb and my nick is akreuzkamp 😉 )
Edit: I added information about how it renders QML to websites (QmlWeb is using normal HTML/DOM elements and absolute positions within CSS, translating the QML properties into CSS properties to paint elements).
Edit2: I corrected the code example, added a tip how to use the full window size and added information about the mailinglist and irc-channel.