Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Browsing QML instead of HTML

DZone's Guide to

Browsing QML instead of HTML

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

HTML’s a mess, I think. A SAX form handing off to a YACC form that can be escaped within the former. CSS has turned out to be a whole PhD subject on its own.

What if we could start over? What would that look like?

QML pages instead of HTML pages

Shantanu Tushar took on another challenge I set him – make a browser to show QML pages. I’ve been here before with Ruby (Swing, WxWindows) and Groovy (Swing), and I totally love the idea that pages could be something other than HTML + JavaScript.

Anyway, this is his achievement not mine

The page is what you’d want it to be – a pseudo-declarative form:

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.1
import QtQuick.XmlListModel 2.0

Item {
  ColumnLayout {
    anchors { 
        fill: parent; margins: 10 
    }

    TextField {
      Layout.fillWidth: true
      placeholderText: "What needs to be done?"
      onAccepted: {
        todoModel.append({ 
            "display" 
            text, "done": false
        })
        text = "";
      }
    }

    ListView {
      clip: true
      Layout.fillWidth: true
      Layout.fillHeight: true

      model: ListModel {
        id: todoModel
      }
      delegate: RowLayout {
        width: parent.width

        CheckBox { 
            onCheckedChanged: 
            todoModel.get(index).done = checked 
        }
        Label { 
            Layout.fillWidth: true
            text: display
            font.strikeout: done
            wrapMode: Text.WordWrap
        }
        ToolButton { 
            text: 'X'
            onClicked: todoModel.remove(index) 
        }
      }
    }
  }
}

It’s for a TODO app. Perhaps quite cut down from the HTML/JS ones popularized on TODOMVC.com, but there’s a clue as to how much terser the code is for this version, even if it is not perfectly feature comparable.

The Qweb rather than The Web, maybe? OK, I’ll get my coat.

Does this have a future?

This being the browser idea…

I’m pretty sure that someone could push the concept to a level of completeness, and even use it within corporate environments for “quick and dirty” apps. It’d work over the wire like HTML browsers do (speaking to web servers and restful endpoints as we have them today, as well as being composable from web-frameworks). The trouble is that the sandbox and all the security stuff is a huge undertaking. Plus browsers in order to fit Web 2.0 as well as 1.0 have a bunch of services that’d need to be recreated. That’s if you didn’t do this as a plugin.

QML and Qt per se.

QML (and Qt) are incredible cross-platform widgeting technologies that have much life ahead of them. I’d certainly much prefer to be developing for them if I needed to target cross platform than anything else. Because the technologies have changed ownership and patronage a few times, we’re faced with a problem that not unique, but still annoying. Namely googling for canonical/lasting information/examples on QML and Qt is really hard. The community historically lacks centralized and organized leadership. Often tutorials/examples they give themselves are weak. We bumped into the folks at V-Play and liked how cohesive their materials were, and from that saw a glimmer of hope for the Qt world.

Detailing the Google/doco problem

Googling for QML Example drives you to the doco for release 4.7 (not the latest release of Qt). At least it does at the time of writing.

I know there’s a calc example, so let’s try Googling for that specifically: https://www.google.com/search?q=qml+calculator+example&oq=qml. The top google hit is for https://qt-project.org/doc/qt-4.7/demos-declarative-calculator-calculator-qml.html which is a single sub-page of http://qt-project.org/doc/qt-4.7/demos-declarative-calculator.html which would have been a much better search result hit. Try changing the 4.7 part of the URL to 5.0, 5.1, 5.2 for redirect and ‘404’ fun. 4.8 is there, but 4.7 remains the one in the google search results. Why have 4.7 in the URL at all? It is not a decent synonym for ‘current’. How can a Google rank grow for an item that’s going to get a new URL for each release?

Also, note the range of choices of site where the QML calculator example is located. qt-project.org, doc.qt.digia.com. In the past there have been other owners of QT. Specifically Nokia and Trolltech, and that meant lots of domain name changes to the same resources, and a cost to that in google search historically. While qt-project appears to have leaped into being in 2011 it is not curated enough, and with that version number in URL problem is going to mildly hinder people finding Qt related answers to questions.

Now, I happen to know the calculator example did get better with 5, but it’s a new URL architecture and decent tutorial page: http://qt-project.org/doc/qt-5/qtquick-demos-calqlatr-example.html. The 4.7 stuff is still higher in google rank though!

That calculator.qml page is a crude cut/paste of source, with an allusion only to Gitorious: “Find this file on Gitorious”, (not a link). At least that’s true for the 4.7 doco. For the 5.x doco, there’s a suggestion to open QtCreator (that you should have installed) and navigate to it using a Qt Creator ‘open’ dialog. This isn’t good enough. Homebrew (mac) can install ‘qt’ or ‘qt5’, with the former being 4.x implicitly. That comes with a qml executable, and I’d like to be able to point that at the calculator.qml example after checking that out with Git (Gitorious). That’s a standard workflow for the modern era developer-experimenter.

Missing too, is how to install that calculator to Android and iOS (which is perfectly possible). Why leave that out? World domination not your plan, QT community?

Cross Platform?

The Ubuntu Mobile platform promotes QML, so Canonical and Mark Shuttleworth could be patrons of a browser capability. It’d be a way to catch up, and pull in developers. The Firefox Mobile platform doesn’t though, so there’s no panacea here (iOS and Android can already do QML/Qt). By the way, Swift isn’t the solution – it’s not cross platform for now. It could be I guess, apart from the iOS specific libraries and base Objective-C foundation.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Paul Hammant, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}