Slide 1

Slide 1 text

Qt Hybrid Apps Ynon Perek Tuesday, February 14, 2012

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Thanks For Listening Ynon Perek [email protected] http://ynonperek.com Tuesday, February 14, 2012