The Web on QML – Part 2

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.

l5N1k2o

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-

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

Ah5MPN7 aiF6InA

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?
Advertisements

One thought on “The Web on QML – Part 2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s