Qt makes it really easy to write Hybrid applications: Native wrapper + HTML5/JavaScript. This keynote covers why and how you should use Qt to write hybrid applications. Visit me at http://ynonperek.com for more info

1. Qt Hybrid Apps
Ynon Perek
Tuesday, February 14, 2012

2. Native Is Broken
• Deployment is pain
• Change is complex
for users
• Managing versions
is a pain for devs
Tuesday, February 14, 2012

3. Qt Is Broken
• Writing a unique UI
is not easy
• Can’t reuse code
from existing
web apps
Tuesday, February 14, 2012

4. Hybrid is the new App
• Enjoy constant
deployment - like a
web site
• Enjoy unique UI
• Enjoy native code
Tuesday, February 14, 2012

5. Agenda
• Hybrid Architecture
• Choosing Hybrid
• Bridging The Gap
• Tips
Tuesday, February 14, 2012

6. Hybrid Arch
• Native Qt wrapper
acts as a browser
• All User Interface
and Application HTML/JS/CSS
logic is coded in JS
• Extra functionality
is provided in C++ Qt C++ (Native Code)
Tuesday, February 14, 2012

7. 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

8. 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

9. 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

10. Demo
Display Web Content in a QWebView
Tuesday, February 14, 2012

11. 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

12. Accessing QObjects
• By default, no QObject is accessible
through the web environment
• Call QWebFrame’s
addToJavaScriptWindowObject
to add a QObject
Tuesday, February 14, 2012

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

14. Invokable Methods
class Zombie : public QObject
{
• All slots in the
Q_OBJECT QObject can
public: be invoked
Q_INVOKABLE void eatBrain(); from JS
Q_INVOKABLE int attack();
void rest(); • Can use
public slots: Q_INVOKABLE
void walk(QString where); to define an
invokable
};
method
Tuesday, February 14, 2012

15. Demo
Call C++ Code From JS
Tuesday, February 14, 2012

16. 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

17. Signals & Slots
class Zombie : public QObject
{
Q_OBJECT • Assume
Zombie was
signals:
void scream(int volume); added to the
}; page and
named
function freeze_in_panic(volume) {
// Oh no it’s the end-of-the-world
Zombie
}
• Arguments
Zombie.scream.connect(freeze_in_panic);
must match
Tuesday, February 14, 2012

18. 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

19. Data Types
• Numbers • QVariants
• Strings • QObjects
• Date & Time • Pixmaps & Images
• Regular • Web Elements
Expressions
• Lists
• JSON Objects
Tuesday, February 14, 2012

20. Numbers
• Qt numeric types:
int, short, float, double, qreal, qint
• JavaScript only has Number
• Typedefed numbers are not
automatically converted
Tuesday, February 14, 2012

21. 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

22. 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

23. Regular Expressions
• JavaScript RegEx objects are translated
to QRegExp
• Can also pass a string
Tuesday, February 14, 2012

24. 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

25. JSON Objects
• A JSON Object translate well to
QVariantMap
• Use for complex data structures
Tuesday, February 14, 2012

26. 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

27. Pixmaps & Images
• A QImage or
QPixmap is {
converted to a JS width: ...,
height: ...,
object similar to the toDataURL:
right function() { ... },
assignToHTMLImageElement:
function(element) { ... }
• Can send img }
element from web
to native
Tuesday, February 14, 2012

28. QWebElement
• Represents a DOM node inside Qt
• Used to write custom renderers or
extensions to the environment
• Not thread-safe
Tuesday, February 14, 2012

29. Demo
Passing Data from Qt to JS
Tuesday, February 14, 2012

30. 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

31. Thanks For Listening
Ynon Perek
ynonperek@yahoo.com
http://ynonperek.com
Tuesday, February 14, 2012