Use QT for Web and local hybrid application development-reprint

[T] using QT for Web and local hybrid application development

Qt features for Hybrid Web/native application development.
For more information, see http://www.qtsoftware.com/forms/whitepapers/reg-whitepaper-hybrid)

Qt provides seamless integration of local C ++ objects and JavaScript, and is an ideal platform for local and web hybrid application development.

(1) Qt WebKit Integration
　
Using the QT WebKit integration and qtnetwork module, you can fully develop local desktop and web hybrid applications. You can freely mix JavaScript, style sheets, web content, and QT components. WebKit is a very mature web browser engine. Qt integrates this well-known engine. With qtwebkit, You can execute Javascript in C ++, or integrate C ++ objects in webpages, and interact with these objects through JavaScript.
A modern HTML rendering engine only
Half of hybrid development, and the other half is the interaction between local applications and rendering objects. Qt's WebKit integration provides this solution:
1. Use the object tag to embed the QT widgets component. This allows the QT component using C ++ code to be included in the webpage as part of the webpage's appearance.
2. Access the C ++ object in JavaScript. You
You can insert a C ++ object in the Javascript environment to allow web scripts to directly access your data structure.
3. execute Javascript in QT. You can call JavaScript Functions in the webpage environment in C ++ to trigger webpage events.
4. Shared client storage. In JavaScript and C ++, you can access the database.
In this way, a large amount of data can be shared when it is offline.

(2) Interaction with embedded QT objects
Using the qwebview component, You can embed a C ++ object in a webpage in two ways. You can add a C ++ object to the Javascript of a webpage, or create a plug-in and embed the object tag in the webpage.
　　
The second method is easier to start. When a widget is added to a webpage, all its public slots are accessed by JavaScript Functions on the webpage just like common functions.
To add a widget to a Web page, first tell your qwebpage object that the widget is available. This is done by subclass qwebplugfactory. You need
Implement two methods again: plugs and create. The plugs method notifies the webpage that the widget is available, and the create method creates the widget according to the request.
In an HTML webpage, Widgets creates an object using the object tag. For example, the following tag tries to create an application/X-QT-colorlabel component.

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

To use this method, you must allow the use of the plug-in and notify the factory class of the qwebpage plug-in. In the following code, colorlabelfactory creates an instance based on the Application/X-QT-colorlabel request.

Qwebsettings: globalsettings ()-> setattribute (qwebsettings: pluginsenabled, true );
Webview-> page ()-> setpluginfactory (New colorlabelfactory (this ));

Colorlabel has a public slot: chagnecolor (), which is automatically available for JavaScript on the webpage. Insert a link to the element in the webpage to activate the C ++ function in a simple way.

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

　
　
To push events in the opposite direction, you must make your objects available in the context of JavaScript documents. Call the addtojavascriptwindowobject method for each qwebframe of qwebpage. This method allows you to add an object to the javascipt context by name.

Webview-> page ()-> mainframe ()-> addtojavascriptwindowobject ("eventsource", new eventsource (this ));

To connect the signal of the added eventsource object, add a javascript code and use the evaluatejavascript method. The following code connects the signalname signal of the eventsource object to a JavaScript function destfunction.

Webview-> page ()-> mainframe ()-> evaluatejavascript ("eventsource. signalname. Connect (destfunction );");

If you add an object to a javascript page viewed in a standard browser, you need to know the signal. Every time javascript content is cleared, frame releases the javascriptwindowobjectcleared signal. To keep your QT object available, connect to this signal and call the addtojavascriptwindowobject function.

 

(2) Use a client to store shared data

With HTML5, web standards are increasingly closer to the desktop, and desktop has begun to integrate web. The biggest change in this regard is client storage. This gives each party (for example, each page) A database engine that can use SQL on the client, which can cache local data, reduce traffic, and enable the page to be used offline. It can also be used to store a large amount of structured and searchable data.

Client storage can be used in Javascript. Search for databases from JavaScript code and generate pages from search results. Use the opendatabase and transaction functions.

Suppose there is a database, the Code is as follows:

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;
});
});

With qtwebkit, you can use the qtsql module to access the same database. This is a very useful feature in hybrid development. For example, when the web page of your application shares data with the local part, you can use the same mechanism to save the data.
To avoid security issues, the client database can only be accessed by the Party with the correct permissions in Javascript. The local C ++ code can also use the static qwebsecurityorigin: allorigins method, or use qwebframe: securityorigin to access all security objects.

Using the databases method, you can access a list of qwebdatabaew methods. Each web database object has a filename attribute that can be used to access the database in local code.

Qwebdatabase webdb = mysecurityorigin. Databases () [Index];
Qsqldatabase sqldb = qsqldatabase: adddatabase ("qsqlite", "webconnection ");
Sqldb. setdatabasename (webdb. filename ());
If (sqldb. open ()){
Qstringlist tables = sqldb. Tables ();

}

The ability to connect events between web applications and local applications, coupled with the mechanism of sharing data, makes it easier to blur the boundaries between web and desktop.

(3) Web Conversion

Many data obtained through the Web is not suitable for direct display. Such as Internet news, geographic data, and other applications with specific data formats. The Network Module of QT can download such data in a very simple way, parse the data, and convert it into a suitable format processed by your own code. You can also use the qtxmlpatterns module for processing. This is more convenient when the output format is XML or you want to display it on the xhmtl webpage.

Let's take a look at this interesting part through a small example. Download a news source, use XSLT to convert it from XML to XHTML, and then display it through qwebpage. (Figure omitted)
The qnetworkaccessmanager class makes it easy for you to process interactions between clients and web servers. It helps you deal with such details as proxy, Save settings, cookies, and SSL sessions. In short, it not only allows you to upload and download
Some common cases are easier. You can also process logon and authenticate these complex sessions.
To download the news source in 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.

{

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 )));
}

Not complete ....