Qt Hybrid Apps

Transcript

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 logic is coded in JS • Extra functionality is provided in C++ Qt C++ (Native Code) HTML/JS/CSS 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 • 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
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 • 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
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 • Strings • Date & Time • Regular Expressions • Lists • JSON Objects • QVariants • QObjects • Pixmaps & Images • Web Elements 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 object similar to the right • Can send img element from web to native { width: ..., height: ..., toDataURL: function() { ... }, assignToHTMLImageElement: function(element) { ... } } 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