Qt Hybrid Apps                                 Ynon PerekTuesday, February 14, 2012
Native Is Broken                    • Deployment is pain                    • Change is complex                      for u...
Qt Is Broken                    • Writing a unique UI                      is not easy                    • Can’t reuse co...
Hybrid is the new App                    • Enjoy constant                      deployment - like a                      we...
Agenda                    • Hybrid Architecture                    • Choosing Hybrid                    • Bridging The Gap...
Hybrid Arch                    • Native Qt wrapper                      acts as a browser                    • All User In...
Hybrid Code                    • A special object is inserted to JS from                      the Qt wrapper application  ...
Hybrid: When                    • Flexible or unique UI                    • Reuse existing web code                    • ...
Hybrid: Code                    • QWebPage is a QObject designed to                      view and edit web documents      ...
Demo                        Display Web Content in a QWebViewTuesday, February 14, 2012
Bridging The            Gap            Use Qt Webkit Bridge to           connect web content with                 native c...
Accessing QObjects                    • By default, no QObject is accessible                      through the web environm...
Accessing QObjects         // QWebView has a page() method to return         // the active QWebPage         QWebFrame *fra...
Invokable Methods   class Zombie : public QObject   {                                        • All slots in the        Q_O...
Demo                             Call C++ Code From JSTuesday, February 14, 2012
Signal & Slots                    • Signals & Slots are used to call JS Code                      from C++                ...
Signals & Slots  class Zombie : public QObject  {       Q_OBJECT                             • Assume                     ...
Passing Data                    • Arguments are converted when passed                      between native & web           ...
Data Types                    • Numbers         • QVariants                    • Strings         • QObjects               ...
Numbers                    • Qt numeric types:                      int, short, float, double, qreal, qint                 ...
Strings                    • JavaScript’s String is easily translated to                      QString                    •...
Date & Time                    • Qt has: QDate, QTime & QDateTime                    • JS has: Date                    • I...
Regular Expressions                    • JavaScript RegEx objects are translated                      to QRegExp          ...
Lists                    • If a slot expects a list, and passed an                      Array, the bridge will try to conv...
JSON Objects                    • A JSON Object translate well to                      QVariantMap                    • Us...
QVariants & QObjects                    • It’s possible but not recommended to                      pass QVariants & QObje...
Pixmaps & Images                    • A QImage or                      QPixmap is              {                      conv...
QWebElement                    • Represents a DOM node inside Qt                    • Used to write custom renderers or   ...
Demo                             Passing Data from Qt to JSTuesday, February 14, 2012
Hybrid Tips                    • Write as little logic as possible in the                      bridge object              ...
Thanks For Listening                       Ynon Perek                       ynonperek@yahoo.com                       http...
Upcoming SlideShare
Loading in...5
×

Hybrid Apps with Qt

4,572

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
4,572
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
58
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×