Paul Hammant's Blog:
Browsing QML instead of HTML
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.
Comments formerly in Disqus, but exported and mounted statically ...
Thu, 10 Jul 2014 | shaan7 |
I find the take on documentation/examples interesting. Imo, Qt's documentation and examples are one of the best I've ever encountered (among MSDN, docs.python.org etc). Add the number of click-and-run examples that Qt Creator ships with, and you get a very easy learning experience http://i.imgur.com/U7lCJT6.png (and I just noticed, there is already a TODO app in that as well :P) | |
Thu, 10 Jul 2014 | paul_hammant |
Replied inline with a <h2> "Detailing the Google/doco problem". I'll keep adding to that, Shantanu :) | |
Thu, 10 Jul 2014 | shaan7 |
Sweet, that is quite some detail ;) tl;dr: Just use Qt Creator, and enjoy! Its fun that Google actually ranks 4.7 higher than the 5 documentation, now I am not really a search expert to say how they'd fix that. DuckDuckGo performs even worse there :( 4.x documentation does have rough edges in the QML bits because it was very new when 4.7 was released (and 4.8 it just got a bit better). Everything else had clear-cut documentation in 4.x as QML wasn't the-way to write UI in 4.x. Qt5 however, recommends QML as the primary way to do UI and the documentation reflects that. Finally on the web results part, I never had to Google anything about Qt as I could find everything I needed in Qt Creator's help section. A normal workflow to find answers would be Qt Creator's help first, and then specific questions to Google. Also, on Ubuntu I just run qmlviewer foo.qml and everything magically works. I don't know why the Homebrew one doesn't work (I'm not surprised though, and trying not to rant about Homebrew/OSX here :P). For Android, googling "Qt on Android" will take you to http://qt-project.org/doc/q... , I'm not sure about iOS as I don't work with it. | |
Wed, 02 Sep 2015 | trusktr |
I absolutely love this idea. I opened similar topics of discussion on the Qt forums. How can this become reality? Could we somehow get Qt to team up with Firefox to adopt Qt QML into their engine? Dear Universe, if Google would adopt it into Chrome.... | |
Wed, 02 Sep 2015 | paul_hammant |
Most likely the Qt people need to make the Chrome plugin. https://developer.chrome.co... is the way forward, and it doesn't need Gogolers to do the work. |