Hybrid Apps with Qt
Upcoming SlideShare
Loading in...5
×
 

Hybrid Apps with Qt

on

  • 3,602 views

Qt makes it really easy to write Hybrid applications: Native wrapper + HTML5/JavaScript. ...

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

Statistics

Views

Total Views
3,602
Views on SlideShare
3,602
Embed Views
0

Actions

Likes
0
Downloads
34
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Hybrid Apps with Qt Hybrid Apps with Qt Presentation Transcript

  • Qt Hybrid Apps Ynon PerekTuesday, February 14, 2012
  • Native Is Broken • Deployment is pain • Change is complex for users • Managing versions is a pain for devsTuesday, February 14, 2012
  • Qt Is Broken • Writing a unique UI is not easy • Can’t reuse code from existing web appsTuesday, February 14, 2012
  • Hybrid is the new App • Enjoy constant deployment - like a web site • Enjoy unique UI • Enjoy native codeTuesday, February 14, 2012
  • Agenda • Hybrid Architecture • Choosing Hybrid • Bridging The Gap • TipsTuesday, February 14, 2012
  • 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
  • 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
  • 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
  • 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
  • Demo Display Web Content in a QWebViewTuesday, February 14, 2012
  • 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
  • Accessing QObjects • By default, no QObject is accessible through the web environment • Call QWebFrame’s addToJavaScriptWindowObject to add a QObjectTuesday, February 14, 2012
  • Accessing QObjects // QWebView has a page() method to return // the active QWebPage QWebFrame *frame = myWebPage->mainFrame(); frame->addToJavaScriptWindowObject("someNameForMyObject", myObject); // ...Tuesday, February 14, 2012
  • 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
  • Demo Call C++ Code From JSTuesday, February 14, 2012
  • 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
  • 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
  • Passing Data • Arguments are converted when passed between native & web • Failure to match arguments may cause application to crash • Test EverythingTuesday, February 14, 2012
  • Data Types • Numbers • QVariants • Strings • QObjects • Date & Time • Pixmaps & Images • Regular • Web Elements Expressions • Lists • JSON ObjectsTuesday, February 14, 2012
  • Numbers • Qt numeric types: int, short, float, double, qreal, qint • JavaScript only has Number • Typedefed numbers are not automatically convertedTuesday, February 14, 2012
  • 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
  • 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
  • Regular Expressions • JavaScript RegEx objects are translated to QRegExp • Can also pass a stringTuesday, February 14, 2012
  • 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
  • JSON Objects • A JSON Object translate well to QVariantMap • Use for complex data structuresTuesday, February 14, 2012
  • 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
  • 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
  • QWebElement • Represents a DOM node inside Qt • Used to write custom renderers or extensions to the environment • Not thread-safeTuesday, February 14, 2012
  • Demo Passing Data from Qt to JSTuesday, February 14, 2012
  • Hybrid Tips • Write as little logic as possible in the bridge object • Consider a separate worker thread • Get serious about JavaScriptTuesday, February 14, 2012
  • Thanks For Listening Ynon Perek ynonperek@yahoo.com http://ynonperek.comTuesday, February 14, 2012