Archive for February, 2011

Templating HTML Applications with Grantlee

February 6, 2011

A lot of people are talking about using web technologies with Qt again.

Very well, I’ll throw my oar in too :).

The video shows a new example application I just added to Grantlee, which uses html/css/javascript/jQuery for its UI. The main window is simply a webkit widget, and the rest of the visuals are HTML. The video capture is not the best, but jQuery makes the slides in the flickr page very smooth.

The HTML is generated of course with Grantlee Templates, so the base template sets out a skeleton html page, which is inherited by the application html pages. The application html pages are also very simple. They just fill in some blanks in the base template in the same way that concrete classes in a c++ template pattern might implement virtual methods. They only need to specify what differentiates them from the base template, so there is almost no HTML repetition.

The applications just consume rss feeds so I wrote a simple Grantlee tag to process a generic rss feed, and it is used many times in the application. The Grantlee rss feed tag is actually modeled on the QML XmlListModel element in terms of API and flexibility, in that a delegate is implemented to lay out the data, and the data is made available through XQuery roles.

The actual rendering of the Grantlee templates and serving the result is done by a custom QNetworkAccessManager and QNetworkReply. Working in tandem, they make it very easy to serve content directly into a webkit powered QWebView. New applications are added by adding a new HTML page, and style and structure of the main application can be customized by using alternative HTML files.

I wrote this application to show how a template system like Grantlee could fit into a larger runtime for creating HTML based applications. The example of course doesn’t provide everything such a runtime would require such as an application authentication and distribution mechanism etc. Those things are provided by other html application frameworks already. I’m just showing how to achieve a consistent styling and structure without needing to repeat fragments of HTML markup.