WebApps written in QML: Not far from Reality anymore

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 JavaScript library that is able to parse QML-code and create a website out of it using normal HTML/DOM elements and absolute positions within CSS, translating the QML properties into CSS properties. Currently it’s also able to paint into a canvas but as canvas is far less powerful, that’s probably going to be dropped. So using the DOM-backend there is no need for HTML5. The webbrowser needs to support ECMAScript5 for now, though.
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.

QmlWeb-Demopage
(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

  • Item
  • Rectangle
  • Text
  • Image
  • BorderImage
  • MouseArea
  • Repeater
  • ListModel
  • NumberAnimation
  • SequentialAnimation

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:

<!DOCTYPE html>
<html>
    <head>
        <title>QmlWeb Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../qmlweb/src/parser.js"></script>
        <script type="text/javascript" src="../qmlweb/src/process.js"></script>
        <script type="text/javascript" src="../qmlweb/src/import.js"></script>
        <script type="text/javascript" src="../qmlweb/src/qtcore.js"></script>
    </head>
    <body style="margin: 0;">
        <script type="text/javascript">
            var qmlEngine = new QMLEngine();
            qmlEngine.loadFile("main.qml");
            qmlEngine.start();
        </script>
    </body>
</html>

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 ;) )

Btw.:
I'm going to Akademy 2013! :)

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.

34 thoughts on “WebApps written in QML: Not far from Reality anymore

  1. lucas

    Cool idea.
    Is there also something like GTKs Broadway for Qt in development?
    (Using Qt apps in browser, display through HTTP instead of X11/Wayland/..)

    1. Anton Kreuzkamp Post author

      QmlWeb creates a DOM element for each QML element and does the positioning using position: absolute. All QML properties are translated into CSS properties. (Also edited the post, accordingly)
      WebGL would be possible for opengl-animations in the context of css shaders (http://www.adobe.com/devnet/html5/articles/css-shaders.html) but definitely not needed.
      So the webbrowser doesn’t need any HTML5 (it currently needs ECMAScript 5, though).

  2. Benoit

    That looks great, thanks! I could not help trying it and making a few tests and it works perfectly, congrats! In my opinion, simple web components (like buttons, slide bars and comboboxes) as well as a dynamic layout (also based on the current browser width) would be great additions, probably more important than advanced animation capabilities.

    Keep up the good work!

    1. Anton Kreuzkamp Post author

      Thank you! :)
      Yes that are the things that my focus currently lies on. Buttons are btw. supported already. ;)
      Dynamic layout based on the browser size is what I’m actually currently working on.

  3. Lilian

    I think Digia should help with this project.
    I was actually hopping for a long time that the maintainers of Qt will make something like ASP.NET, Ruby on Rails or Java Servlets for Qt.

  4. Rsh

    Very interesting. Where is the demo page where we can run your example? What about OpenGL shaders and generally WebGL?

  5. Stefan

    I’d love to see a version numbered, cdn hosted single file, minified library – as in https://developers.google.com/speed/libraries/devguide – this would make it a whole lot easier for people to try it out. Getting a start with such would be useful even at this early stage, I feel. Your example could be reduced to something like:


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    QmlWeb Demo

    var qmlEngine = new QMLEngine(document.body, {});
    qmlEngine.loadFile("main.qml");
    qmlEngine.start();

    Also, a preview comment button would be great. For my post.

    1. Anton Kreuzkamp Post author

      I was already looking for a way to do this, but so far I didn’t find any popular tool that is able to compile multiple javascript files into one.. If you know one, let me know :)
      Btw. I added a live-preview for comments. ;)

  6. Pingback: Представлен QmlWeb, позволяющий использовать QML для разработки web-приложений | AllUNIX.ru — Всероссийский портал о UNIX-системах

  7. Tony

    Check Out rappidjs.com, I think beside that we are using different languages, the approach is in some parts the same.

  8. Pingback: Recurre a QML para crear aplicaciones web con QmlWeb | LaTeXian

  9. Pingback: Представлен QmlWeb, позволяющий использовать QML для разработки web-приложений | Информационная лаборатория mediakomanda.com

  10. Pingback: Qmlweb: Mit QML nun auch Webseiten möglich | darksidersForge

    1. Anton Kreuzkamp Post author

      Thank you! :)
      Nice Blogpost, just a few hints: First of all my name is Kreuzkamp not Kreuzberg ;)
      Then it’s Repeater not Repeator and last but not least:
      What exactly is the problem you have with MouseAreas? I’ve tried again with testpad.html and I don’t need a double click…
      Are you/will you be in Bilbao?

      And what kind of tutorial do you mean? A tutorial to QML or to QmlWeb?

      1. Leon Giesenkämper

        Oh sorry!
        I have changed it …My Problem was in Firefox 22. But after cache-deletion, it works fine!(Changed too).

        If there Support for the listened Features, then i need only a QML Tutorial(if there is no really QMLweb Tutorial); I dont know what Bilbao is…^^
        Hope, i have viewed correctly the examples from Testpad..
        I dont can write Javascript, i dont like that – but with QMLweb i do think that i have found the alternate for me.. :) I think, i can help in the feature with testing, but with developing(JS) i cant help… Sorry.

        Greetz

        1. Anton Kreuzkamp Post author

          OK, I’m happy, it’s not a bug in QmlWeb. :)

          The only QML tutorial I know is this one, I haven’t found a good one in german, yet.
          So you’re not in Bilbao ;) Bilbao is a city in Spain and the venue for this years Akademy, KDE’s yearly community conference, that’s currently going on.

          And by the way, even if the name suggests something different, currently viewer.html is better suited for testing than testpad.html, because testpad.html just uses the canvas-backend, while viewer.html has the possibility to switch the backend and in fact the canvas-backend will probably be dropped in the long-term.

  11. Muhammad Bashir Al-Noimi

    Which is best QML example from Qt examples we can test?

    P.S. I tested presentation.qml but just for fun I need more.

  12. Pingback: Links 14/7/2013: Akademy 2013, GNOME 3.9.4 | Techrights

  13. Pingback: Links & reads for 2013 Week 28 | Martin's Weekly Curations

  14. Kevin

    Have you considered submitting a talk proposal for this year’s Qt DevDays?
    http://www.qtdeveloperdays.com/call-for-papers-2013

    While it doesn’t use Qt directly it might be very useful for hybrid Qt/Web applications, i.e. when a web view is embedded into a Qt application, because it would allow developers to use the same skills on both sides of the integration point

Comments are closed.