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

Tuesday, February 14, 2012

Qt Is Broken

• Writing a unique UI is not easy

• Can’t reuse code from existing web apps

Tuesday, February 14, 2012

Hybrid is the new App

• Enjoy constant deployment - like a web site

• Enjoy unique UI

• Enjoy native code

Tuesday, February 14, 2012

Agenda

• Hybrid Architecture

• Choosing Hybrid

• Bridging The Gap

• Tips

Tuesday, February 14, 2012

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

Tuesday, February 14, 2012

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

Tuesday, February 14, 2012

Hybrid: When

• Flexible or unique UI

• Reuse existing web code

• Embed dynamic content from the net

• Thin Client

• An experienced FED on your team

Tuesday, February 14, 2012

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

Tuesday, February 14, 2012

DemoDisplay Web Content in a QWebView

Tuesday, February 14, 2012

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

Accessing QObjects

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

• Call QWebFrame’s addToJavaScriptWindowObject to add a QObject

Tuesday, February 14, 2012

Accessing QObjects

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

Tuesday, February 14, 2012

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

};

Tuesday, February 14, 2012

DemoCall C++ Code From JS

Tuesday, February 14, 2012

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

Tuesday, February 14, 2012

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

Tuesday, February 14, 2012

Passing Data

• Arguments are converted when passed between native & web

• Failure to match arguments may cause application to crash

• Test Everything

Tuesday, February 14, 2012

Data Types• Numbers

• Strings

• Date & Time

• Regular Expressions

• Lists

• JSON Objects

• QVariants

• QObjects

• Pixmaps & Images

• Web Elements

Tuesday, February 14, 2012

Numbers

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

• JavaScript only has Number

• Typedefed numbers are not automatically converted

Tuesday, February 14, 2012

Strings

• JavaScript’s String is easily translated to QString

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

Tuesday, February 14, 2012

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

Tuesday, February 14, 2012

Regular Expressions

• JavaScript RegEx objects are translated to QRegExp

• Can also pass a string

Tuesday, February 14, 2012

Lists

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

• Use QVariantList to play safe

Tuesday, February 14, 2012

JSON Objects

• A JSON Object translate well to QVariantMap

• Use for complex data structures

Tuesday, February 14, 2012

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

Tuesday, February 14, 2012

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) { ... } }

Tuesday, February 14, 2012

QWebElement

• Represents a DOM node inside Qt

• Used to write custom renderers or extensions to the environment

• Not thread-safe

Tuesday, February 14, 2012

DemoPassing Data from Qt to JS

Tuesday, February 14, 2012

Hybrid Tips

• Write as little logic as possible in the bridge object

• Consider a separate worker thread

• Get serious about JavaScript

Tuesday, February 14, 2012

Thanks For Listening

Ynon Perek

ynonperek@yahoo.com

http://ynonperek.com

Tuesday, February 14, 2012