Hybrid Apps with Qt

Qt Hybrid AppsYnon Perek

Tuesday, February 14, 2012

Native Is Broken

• Deployment is pain

• Change is complex for users

• Managing versions is a pain for devs


Qt Is Broken

• Writing a unique UI is not easy

• Can’t reuse code from existing web apps


Hybrid is the new App

• Enjoy constant deployment - like a web site

• Enjoy unique UI

• Enjoy native code


Agenda

• Hybrid Architecture

• Choosing Hybrid

• Bridging The Gap

• Tips


Hybrid Arch

• Native Qt wrapper acts as a browser

• All User Interface and Application logic is coded in JS

• Extra functionality is provided in C++ Qt C++ (Native Code)

HTML/JS/CSS


Hybrid Code

• A special object is inserted to JS from the Qt wrapper application

• Calling methods on this object leads to execution of code in C++

• Defaults to single-threaded


Hybrid: When

• Flexible or unique UI

• Reuse existing web code

• Embed dynamic content from the net

• Thin Client

• An experienced FED on your team


Hybrid: Code

• QWebPage is a QObject designed to view and edit web documents

• QWebFrame is a QObject representing a frame or iframe in a page

• QWebView is a QWidget capable of displaying QWebPage


DemoDisplay Web Content in a QWebView


Bridging The Gap

Use Qt Webkit Bridge to connect web content with

native code

http://www.flickr.com/photos/groundzero/73471268/Tuesday, February 14, 2012

http://www.flickr.com/photos/groundzero/73471268/

http://www.flickr.com/photos/groundzero/73471268/

Accessing QObjects

• By default, no QObject is accessible through the web environment

• Call QWebFrame’s addToJavaScriptWindowObject to add a QObject


Accessing QObjects

// QWebView has a page() method to return // the active QWebPage QWebFrame *frame = myWebPage->mainFrame(); frame->addToJavaScriptWindowObject("someNameForMyObject", myObject); // ...


http://doc.qt.nokia.com/4.7-snapshot/qwebframe.html

http://doc.qt.nokia.com/4.7-snapshot/qwebframe.html

Invokable Methods• All slots in the

QObject can be invoked from JS

• Can use Q_INVOKABLE to define an invokable method

class Zombie : public QObject{ Q_OBJECT

public: Q_INVOKABLE void eatBrain(); Q_INVOKABLE int attack();

void rest();

public slots: void walk(QString where);

};


DemoCall C++ Code From JS


Signal & Slots

• Signals & Slots are used to call JS Code from C++

• Define a signal in the QObject

• Use connect to bind that signal to a JS function


Signals & Slots

• Assume Zombie was added to the page and named Zombie

• Arguments must match

class Zombie : public QObject{ Q_OBJECT

signals: void scream(int volume);

};

function freeze_in_panic(volume) { // Oh no it’s the end-of-the-world}

Zombie.scream.connect(freeze_in_panic);


Passing Data

• Arguments are converted when passed between native & web

• Failure to match arguments may cause application to crash

• Test Everything


Data Types• Numbers

• Strings

• Date & Time

• Regular Expressions

• Lists

• JSON Objects

• QVariants

• QObjects

• Pixmaps & Images

• Web Elements


Numbers

• Qt numeric types:int, short, float, double, qreal, qint

• JavaScript only has Number

• Typedefed numbers are not automatically converted


Strings

• JavaScript’s String is easily translated to QString

• Using other types in JS will cause the bridge to attempt conversion by calling toString()


Date & Time

• Qt has: QDate, QTime & QDateTime

• JS has: Date

• If JS passed a number to a slot that expected a date, it will be treated as a timestamp


Regular Expressions

• JavaScript RegEx objects are translated to QRegExp

• Can also pass a string


Lists

• If a slot expects a list, and passed an Array, the bridge will try to convert each element.

• Use QVariantList to play safe


JSON Objects

• A JSON Object translate well to QVariantMap

• Use for complex data structures


QVariants & QObjects

• It’s possible but not recommended to pass QVariants & QObjects as is

• For QObject, pass a pointer to expose functionality

• Cannot pass any QObject derived


Pixmaps & Images

• A QImage or QPixmap is converted to a JS object similar to the right

• Can send img element from web to native

{ width: ..., height: ...,

toDataURL: function() { ... }, assignToHTMLImageElement: function(element) { ... } }


QWebElement

• Represents a DOM node inside Qt

• Used to write custom renderers or extensions to the environment

• Not thread-safe


DemoPassing Data from Qt to JS


Hybrid Tips

• Write as little logic as possible in the bridge object

• Consider a separate worker thread

• Get serious about JavaScript


Thanks For Listening

Ynon Perek

[email protected]

http://ynonperek.com


mailto:[email protected]

mailto:[email protected]



Technology

Hybrid Apps with Qt