Qt features for Hybrid Web/native application development-reproduced

White Paper

Today's computer users live and work in an interconnected world. They always have a network

Hand keep CT their data to be available at all times wherever they are. The boundary

Desktop applications and the Web is closing and hybrid applications, mixing the best of both worlds,

Are starting to emerge.

With the QT WebKit integration and the qtnetwork module, you have all the tools that you need

Create your own hybrid applications by mixing JavaScript, style sheets, web content and QT compo-

Nents freely. Combined with the qtxmlpatterns module, you can download, transform and query XML

And present it in a hybrid Web environment. This paper presents the features provided in the QT

WebKit integration, and discusses how you can use them to develop hybrid applications.

 

Qt features for Hybrid Web/native

Application Development

 

Qt features for Hybrid Web/native application development

Today's computer users live and work in an interconnected world. They always have a network

Hand keep CT their data to be available at all times wherever they are. The boundary

Desktop applications and the Web is closing and hybrid applications, mixing the best of both worlds,

Are starting to emerge.

With the QT WebKit integration and the qtnetwork module, you have all the tools that you need

Create your own hybrid applications by mixing JavaScript, style sheets, web content and QT

Components freely. Combined with the qtxmlpatterns module, you can download, transform and

Query XML and present it in a hybrid Web environment.

 

Features of the QT WebKit Integration

One of the key components when mixing web and native applications is the web contents Rendering

Engine-qtwebkit. This module makes it easy to integrate the wide-spread WebKit engine

Your applications. The integration into des triggering JavaScript from C ++, as well as integrating

C ++ objects into a web page and interacting with those objects through JavaScript.

The WebKit engine can be seen as a fully fledged Web browser engine. The highlights of this engine

Are its modern rendering features:

Z acid3 compliance gives you proper standards-compliant rendering.

Z css-based transformations makes it possible to scale, rotate, skew and translate page

Elements through CSS.

Z css-based animations let you make smooth transitions between different States.

Instance, elements can be made to fade in and out as the mouse cursor hovers over them.

Z support for the video-tag allows for embedding video contents easily. The Video Player uses

Codecs available from the phonon Multimedia Framework (also a part of QT ).

Z full page zooming makes it possible to scale not only the font size, but the entire page

Including images.

Z npapi support to embed standard web browser plugins enabling third party media and

More.

Z The squirrelfish JavaScript engine offers one of the fastest JavaScript experiences

Available.

A modern, capable HTML Rendering Engine is only one half of a hybrid application. The other half

Is the interaction between the native application and the rendered contents. The QT WebKit

Integration offers all the pieces of such a puzzle.

Z embed QT widgets into a web page using the object-tag. This lets your web page contain QT

Widgets along with native C ++ Code as part of the visual appearance of the page.

Z access QT objects from the Javascript. This allows you to insert C ++ objects into

JavaScript context, leader the web page's script interact directly with your data structures.

 

 

Z trigger JavaScript from QT. You can call JavaScript Functions in their Web Page Context

From your c ++ code and trigger events in the web page.

Z shared client side storage. This gives you access to a database accessible both from

JavaScript and C ++, making it possible to share large amounts of data easily even when

Offline.

The QT WebKit integration forms the base of all hybrid applications, but the key factor is getting

Native code and web contents to interact. QT offers a number of techniques to interconnect the two

Worlds, sharing events and data while sharing the screen as one homogeneous interface to the user.

 

Interacting with embedded QT objects

There are two ways to embed QT objects into a web page using strated using the qwebview widget.

You can either add your objects to the JavaScript context of a page, or you can create a plugin that

Makes it possible to place QT widgets inside a Web page using the object tag.

The latter is an easy way to start creating a hybrid application: simply put your widgets inside a web

Page. When the widgets are in the page, their public slots will be exposed to JavaScript Functions

The page as ordinary functions.

To add a widget to a page, you need to tell your qwebpage object that the widget is available. This is

Done by subclassing the qwebpluginfactory class and reimplementing the methods plugins and

Create. The plugins method informs the web page of which plugins it makes available, while

Create method creates widgets on demand.

From the HTML making up the web page in question, the widgets are created using the object tag.

For instance, the following tag will attempt to create an instance of an application/X-QT-colorlabel

Widget.

 

<Object type = "application/X-QT-colorlabel" width = "50px" Height = "20px" id = "label"

/>

 

To facilitate the creation of such a widget, we must enable plugins and tell qwebpage about

Plugin factory class. In the code below, the colorlabelfactory creates instances of colorlabel

Widgets in response to application/X-QT-colorlabel requests.

 

{

...

Qwebsettings: globalsettings ()->

Setattribute (qwebsettings: pluginsenabled, true );

Webview-> page ()-> setpluginfactory (New colorlabelfactory (this ));

...

}

 

The colorlabel widget exposes a public slot called changecolor (). This is automatically made

Available to Javascript in the web page. Adding a link to the HTML referring to the element makes

It possible to activate C ++ functions in a simple way.

 

<A href = 'javascript: Document. getelementbyid ("label"). changecolor (); '> change color! </A>

 

To make it possible to push events in the other direction, you need to make your objects available

Through the JavaScript document contexts. Using the addtow.criptwindowobject Method

Available from each qwebframe of your qwebpage. This method allows you to add an object to

JavaScript context with a name:

 

Webview-> page ()-> mainframe ()->

Addtojavascriptwindowobject ("eventsource", new eventsource (this ));

 

To connect a signal from the object you have just added, You need to inject a piece of JavaScript

Into the web page context. This is done using the evaluatejavascript method. The code below

Connects the signal signalname from the eventsource object to the JavaScript function

Destfunction. You can even pass arguments from the signal to the connected JavaScript function.

 

Webview-> page ()-> mainframe ()->

Evaluatejavascript ("eventsource. signalname. Connect (destfunction );");

 

If you want to add a QT object to the Javascript contents of pages viewed through a standard

Browser, there is a signal to be aware of. Each time the JavaScript context is cleared, the frame

Emits the specified criptwindowobjectcleared signal. To ensure that your QT object is available

All times, you need to connect to this signal and make your addtow.criptwindowobject CILS

There.

The QT WebKit integration lets you create applications where the native C ++ interacts with

JavaScript context in a seamless manner. This is the foundation of powerful hybrid applications, and

Qt makes it easy.

 

 

Using the client side storage to share data

With HTML 5, the Web Standard moves closer to the desktop in the same way as the desktop has

Started to integrate the Web. one of the bigger changes in this direction is the introduction of client

Side storage. This gives each origin (I. e. Each web page context) a SQL capable database engine on

The client machine. This can be used to cache data locally, to reduce traffic and make the page

Available off-line. It can also be used to store large quantities of data in a structured, searchable way.

The client side storage is available from Javascript. The idea is to search the database from your

JavaScript code and generate the HTML from the search result. This is done using

Opendatabase and transaction functions. Assuming the database is present and filled,

Following snippet shows the idea.

 

DB = opendatabase ("testdb", "1.0", "client side storage test", 200000 );

DB. Transaction (function (TX ){

Tx.exe cutesql ("select ID, text from texts ",

[], Function (TX, result ){

For (VAR I = 0; I <result. Rows. length; ++ I ){

VaR ROW = result. Rows. item (I );

Processtext (row ['id'], row ['text']);

}

}, Function (TX, error ){

Alert ('failed' to retrieve texts from the database-'+ error. Message );

Return;

});

});

 

Using the QT WebKit integration, you can access the same databases through qt's SQL module. This

Can be a very useful feature in a hybrid application. For example, the web page half of you

Application can use exactly the same mechanic for keeping data as when sharing data with your

Native application half.

To avoid security breaches, the client side databases are only accessible through javascript from

Right Security origin. From your native C ++ code you can access all security origins through

Static qwebsecurityorigin: allorigins method, or via the qwebframe: securityorigin

Method.

Given an origin object, you can get access to a list of qwebdatabase objects through the Databases

Method. Each web database object has a filename property that can be used to open the database

For access from the native code.

Qwebdatabase webdb = mysecurityorigin. Databases () [Index];

Qsqldatabase sqldb = qsqldatabase: adddatabase ("qsqlite", "webconnection ");

Sqldb. setdatabasename (webdb. filename ());

If (sqldb. open ()){

Qstringlist tables = sqldb. Tables ();

...

}

 

Combining this data sharing mechanic with the ability to connect events between the web and

Your native application, makes it easy to blur the border between web and desktop.

 

Transforming the Web

Much of the data available through the web is not suitable for direct presentation. Examples are

News feeds, GEO data and other application specific data formats. qt's networking module makes it

Possible to download such data in an easy manner. parsing the data and converting it into a suitable

Format can then be handled by your custom code or, for instance, by the qtxmlpatterns module.

The latter is handy when the output format is expected to be XML, or if you want to display it in

Web page, XHTML.

In this section we will walk through the interesting parts of a small example downloading a news

Feed, converting it from XML to XHTML using an XSL transform, before presenting it through

Qwebview as shown in Figure 1.

 

Figure 1: A news feed from arstechnica shown

XHTML using a qwebview.

 

 

The qnetworkaccessmanager class allows you to easily handle the interaction between a client

And a Web server. It helps you handle details such as proxy and cache settings, but also cookies and

SSL/TSL sessions. All in all, it makes it easy for the average case-to upload or download data --

But allows you to handle complex sessions with logins, certificates, Etc ..

To download the news feed for our example, all we need to do is create a qnetworkaccessmanager

And call its get method. The result is returned through the finished (qnetworkreply *) signal.

However, as you can tell from the source code below, the reply object is available from the moment

You make the request. This allows us to monitor the progress of the request by listening to

Downloadprogress (qint64, qint64) signal.

 

{

...

 

Qnetworkaccessmanager * manager = new qnetworkaccessmanager (this );

 

Connect (Manager, signal (finished (qnetworkreply *)),

This, slot (handlereply (qnetworkreply *)));

Connect (Manager, signal (finished (qnetworkreply *)),

M_progressbar, slot (hide ()));

 

Qnetworkreply * reply = Manager-> get (qnetworkrequest (qurl (feedurl )));

 

Connect (reply, signal (downloadprogress (qint64, qint64 )),

This, slot (updateprogress (qint64, qint64 )));

}

 

When the request is finished, the qnetworkreply object holds the entire reply. This reply needs

Further processing before it can be presented to users. In the case of an XML news feed such as RSS

Or atom, the processing can be done using an XSL transformation. In the case of this

Transformation, we use convert each item-node into a XHTML table row, populating the columns

With the contents of the tags pubdate and title. This XSL template is part of a larger file containing

More rules and the rest of the XHTML tags surrounding the table data.

<XSL: template match = "item">

<Tr>

<TD> <XSL: value-of select = "pubdate"/> </TD>

<TD> <XSL: value-of select = "title"/> </TD>

</Tr>

</XSL: Template>

 

 

 

The XSL query is combined with the reply given from the qnetworkreply object using

Qxmlquery object. This objects lets us perform xqueries on our XML data, transforming it from

The news feed into XHTML. In the code below, the replybuffer contains the reply from

Qnetworkreply. The queryfile is a qfile object with the XSL query and the resultbuffer is

A qiodevice wrapping the qbytearray result into an interface suitable for qxmlquery.

Result is then displayed through the qwebview m_webview using the sethtml method.

 

{

...

 

Qxmlquery qry (qxmlquery: xslt20 );

Qry. setfocus (& replybuffer );

Qry. setquery (& queryfile );

Qry. evaluateto (& resultbuffer );

 

M_webview-> sethtml (qstring (result ));

}

 

As you can see, QT gives you all the tools that you need to easily download, process and display

Data from the Web. The combination of qnetworkaccessmanager, qxmlquery and qwebview

Forms a flexible flow from unformatted XML to data displayed on the screen. If your data is not

XML, you can still use the qxmlquery by providing a q1_actxmlnodemodel, modeling non-

XML data into XML nodes.

 

 

 

Summary

By providing the means for seamless integration between native C ++ objects and JavaScript, QT is

The ideal platform for hybrid application development. The interaction between these two worlds is

Not limited to sharing data. Just like data, events can be passed both ways too.

Hybrid applications have a number of attractive features. For instance, the user knows the Web

Metaphor and is used to working with it. As parts of the application is deployed over the web, it can

Be updated without having to install anything on each user's machine. Another benefit is

Separation of style from content using style sheets. creating hybrid applications using QT takes this

One step further-parts of your application are scripted, other parts consist of native code. The user

Interface can comprise of code, generated widgets, HTML or CSS.

The combination of the QT WebKit integration, qtnetwork and qtxmlpatterns lets you harness

Power of native code and the flexibility of HTML, CSS and Javascript. These are the tools

Building the next generation of applications.

 

For more information on the qt WebKit integration, visit http://qt.nokia.com./products

Or browse the QT technical documentation at http://doc.trolltech.com/qtwebkit.html.