Hybrid Apps with Qt

5,154
-1

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,154
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
62
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Hybrid Apps with Qt

  1. 1. Qt Hybrid Apps Ynon PerekTuesday, February 14, 2012
  2. 2. Native Is Broken • Deployment is pain • Change is complex for users • Managing versions is a pain for devsTuesday, February 14, 2012
  3. 3. Qt Is Broken • Writing a unique UI is not easy • Can’t reuse code from existing web appsTuesday, February 14, 2012
  4. 4. Hybrid is the new App • Enjoy constant deployment - like a web site • Enjoy unique UI • Enjoy native codeTuesday, February 14, 2012
  5. 5. Agenda • Hybrid Architecture • Choosing Hybrid • Bridging The Gap • TipsTuesday, February 14, 2012
  6. 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. 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-threadedTuesday, February 14, 2012
  8. 8. Hybrid: When • Flexible or unique UI • Reuse existing web code • Embed dynamic content from the net • Thin Client • An experienced FED on your teamTuesday, February 14, 2012
  9. 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 QWebPageTuesday, February 14, 2012
  10. 10. Demo Display Web Content in a QWebViewTuesday, February 14, 2012
  11. 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. 12. Accessing QObjects • By default, no QObject is accessible through the web environment • Call QWebFrame’s addToJavaScriptWindowObject to add a QObjectTuesday, February 14, 2012
  13. 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. 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 }; methodTuesday, February 14, 2012
  15. 15. Demo Call C++ Code From JSTuesday, February 14, 2012
  16. 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 functionTuesday, February 14, 2012
  17. 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 matchTuesday, February 14, 2012
  18. 18. Passing Data • Arguments are converted when passed between native & web • Failure to match arguments may cause application to crash • Test EverythingTuesday, February 14, 2012
  19. 19. Data Types • Numbers • QVariants • Strings • QObjects • Date & Time • Pixmaps & Images • Regular • Web Elements Expressions • Lists • JSON ObjectsTuesday, February 14, 2012
  20. 20. Numbers • Qt numeric types: int, short, float, double, qreal, qint • JavaScript only has Number • Typedefed numbers are not automatically convertedTuesday, February 14, 2012
  21. 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. 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 timestampTuesday, February 14, 2012
  23. 23. Regular Expressions • JavaScript RegEx objects are translated to QRegExp • Can also pass a stringTuesday, February 14, 2012
  24. 24. Lists • If a slot expects a list, and passed an Array, the bridge will try to convert each element. • Use QVariantList to play safeTuesday, February 14, 2012
  25. 25. JSON Objects • A JSON Object translate well to QVariantMap • Use for complex data structuresTuesday, February 14, 2012
  26. 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 derivedTuesday, February 14, 2012
  27. 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 nativeTuesday, February 14, 2012
  28. 28. QWebElement • Represents a DOM node inside Qt • Used to write custom renderers or extensions to the environment • Not thread-safeTuesday, February 14, 2012
  29. 29. Demo Passing Data from Qt to JSTuesday, February 14, 2012
  30. 30. Hybrid Tips • Write as little logic as possible in the bridge object • Consider a separate worker thread • Get serious about JavaScriptTuesday, February 14, 2012
  31. 31. Thanks For Listening Ynon Perek ynonperek@yahoo.com http://ynonperek.comTuesday, February 14, 2012

×