Qt Hybrid Apps
Ynon Perek
Tuesday, February 14, 2012
Slide 2
Slide 2 text
Native Is Broken
• Deployment is pain
• Change is complex
for users
• Managing versions
is a pain for devs
Tuesday, February 14, 2012
Slide 3
Slide 3 text
Qt Is Broken
• Writing a unique UI
is not easy
• Can’t reuse code
from existing
web apps
Tuesday, February 14, 2012
Slide 4
Slide 4 text
Hybrid is the new App
• Enjoy constant
deployment - like a
web site
• Enjoy unique UI
• Enjoy native code
Tuesday, February 14, 2012
Slide 5
Slide 5 text
Agenda
• Hybrid Architecture
• Choosing Hybrid
• Bridging The Gap
• Tips
Tuesday, February 14, 2012
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Demo
Display Web Content in a QWebView
Tuesday, February 14, 2012
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Accessing QObjects
• By default, no QObject is accessible
through the web environment
• Call QWebFrame’s
addToJavaScriptWindowObject
to add a QObject
Tuesday, February 14, 2012
Slide 13
Slide 13 text
Accessing QObjects
// QWebView has a page() method to return
// the active QWebPage
QWebFrame *frame = myWebPage->mainFrame();
frame->addToJavaScriptWindowObject("someNameForMyObject",
myObject);
// ...
Tuesday, February 14, 2012
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Demo
Call C++ Code From JS
Tuesday, February 14, 2012
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
Data Types
• Numbers
• Strings
• Date & Time
• Regular
Expressions
• Lists
• JSON Objects
• QVariants
• QObjects
• Pixmaps & Images
• Web Elements
Tuesday, February 14, 2012
Slide 20
Slide 20 text
Numbers
• Qt numeric types:
int, short, float, double, qreal, qint
• JavaScript only has Number
• Typedefed numbers are not
automatically converted
Tuesday, February 14, 2012
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
Regular Expressions
• JavaScript RegEx objects are translated
to QRegExp
• Can also pass a string
Tuesday, February 14, 2012
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
JSON Objects
• A JSON Object translate well to
QVariantMap
• Use for complex data structures
Tuesday, February 14, 2012
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
QWebElement
• Represents a DOM node inside Qt
• Used to write custom renderers or
extensions to the environment
• Not thread-safe
Tuesday, February 14, 2012
Slide 29
Slide 29 text
Demo
Passing Data from Qt to JS
Tuesday, February 14, 2012
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
Thanks For Listening
Ynon Perek
ynonperek@yahoo.com
http://ynonperek.com
Tuesday, February 14, 2012