Templating HTML Applications with Grantlee

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.

One Response to “Templating HTML Applications with Grantlee”

  1. Grantlee v0.1.9 (Codename affengeil) now available « Steveire's Blog Says:

    […] release contains the usual round of bugfixes, features, documentation updates and a new example application. The use of funny german vernacular for codenames […]

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: