Hybrid Apps with Qt
3 likes7,497 views
The document discusses the challenges and benefits of hybrid app development using Qt, highlighting issues like complex deployment and version management for native applications. It introduces a hybrid architecture that combines web technologies with native code using Qt's framework, detailing how user interfaces can be coded in JavaScript while utilizing C++ for additional functionality. Additionally, it covers communication between JavaScript and C++ through signals and slots, data types, and best practices for optimal hybrid app performance.
Hybrid Apps with Qt
- 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