Hybrid Apps with Qt
-
Upload
ynon-perek -
Category
Technology
-
view
4.197 -
download
2
description
Transcript of Hybrid Apps with Qt
Qt Hybrid AppsYnon Perek
Tuesday, February 14, 2012
Native Is Broken
• Deployment is pain
• Change is complex for users
• Managing versions is a pain for devs
Tuesday, February 14, 2012
Qt Is Broken
• Writing a unique UI is not easy
• Can’t reuse code from existing web apps
Tuesday, February 14, 2012
Hybrid is the new App
• Enjoy constant deployment - like a web site
• Enjoy unique UI
• Enjoy native code
Tuesday, February 14, 2012
Agenda
• Hybrid Architecture
• Choosing Hybrid
• Bridging The Gap
• Tips
Tuesday, February 14, 2012
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
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
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
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
DemoDisplay Web Content in a QWebView
Tuesday, 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 QObject
Tuesday, 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• 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
DemoCall C++ Code From JS
Tuesday, 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 function
Tuesday, February 14, 2012
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
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
Data Types• Numbers
• Strings
• Date & Time
• Regular Expressions
• Lists
• JSON Objects
• QVariants
• QObjects
• Pixmaps & Images
• Web Elements
Tuesday, February 14, 2012
Numbers
• Qt numeric types:int, short, float, double, qreal, qint
• JavaScript only has Number
• Typedefed numbers are not automatically converted
Tuesday, 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 timestamp
Tuesday, February 14, 2012
Regular Expressions
• JavaScript RegEx objects are translated to QRegExp
• Can also pass a string
Tuesday, 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 safe
Tuesday, February 14, 2012
JSON Objects
• A JSON Object translate well to QVariantMap
• Use for complex data structures
Tuesday, 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 derived
Tuesday, February 14, 2012
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
QWebElement
• Represents a DOM node inside Qt
• Used to write custom renderers or extensions to the environment
• Not thread-safe
Tuesday, February 14, 2012
DemoPassing Data from Qt to JS
Tuesday, February 14, 2012
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
Thanks For Listening
Ynon Perek
http://ynonperek.com
Tuesday, February 14, 2012