This is a follow up on my first post about QML instead of HTML for a web experience, if you haven’t read it, I recommend you do so here.

After the demo showing the possibility to load QML files from the web, now it is time to see how we can actually build something useful out of this. I picked an example of a Flickr public gallery browser.

A Flickr photo browser app

The app basically lets you browse the latest few hundred public photos uploaded to flickr (accessing Flickr images over HTTP). You can find the demo’s code at github, which I am hosting at http://flickr.shaan7.info/ in order to serve ‘pages’ over HTTP to the QML browser.

Index Page

On the index page you can select between either a grid based view of the photos or a list based one where you can see the full titles of the photos.

The implementation of the index page looks uses the hyperlink element, you can either set a text or use custom QML items (in this case Image)-

import “http://qmlweb.shaan7.info/qmlweb”

Hyperlink {
url: ‘http://flickr.shaan7.info/List.qml’
Image {
anchors.fill: parent
source: ‘http://www.niscode.com/listicon.png’
}
}

Code reuse across List and Grid

While the List and Grid views look different in the presentation, they share couple of things-

• The data model http://flickr.shaan7.info/FlickrModel.qml
• The element that shows the thumbnails and shows full images when clicked http://flickr.shaan7.info/Thumbnail.qml

Note: Normally if you have Foo.qml in the same directory, you can use it in another QML file by simple saying-

Foo {
}

The QML runtime automatically figures as its in the same directory. However, for remote URIs, QML does not do that and you need to provide a special file called qmldir with contents such as:

Foo Foo.qml
Magic MagicComponent.qml
ExtraMagic extras/Magic.qml

It is essentially hidden of course. For more info, see http://qt-project.org/doc/qt-5/qtqml-modules-qmldir.html

Reuse is handled the same way regular web browsers do it – caching resources that have been downloaded already.

The Flickr viewer app in use

And a video..

Code for flickr app

The code for the app is at https://github.com/shaan7/flickr-qmlweb

Additions to the library

This application also served to show us what features to implement. It now supports-

• MouseCursor element – this lets you assign different mouse pointers to items. The app uses it to assign a Hand cursor on the thumbnails.
• Hyperlink element – creates a text or custom hyperlink. Right now it only works with absolute URIs. This uses MouseCursor internally.

Additions to the browser

The browser now supports navigation, you can browse to custom URIs and go back in the history when required.
The code for the browser is at https://github.com/shaan7/qmlweb/

What Next?

Functional things to do for the browser and library

• CSS equivalents?
• Firefox/ Chrome plugins
• Non functional issues (security, sandbox, etc).
• Where do people help out / sign up?