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.
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)-
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-
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:
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/
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?