Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Qt Hybrid Apps

ynonperek
August 06, 2012
170

Qt Hybrid Apps

ynonperek

August 06, 2012
Tweet

Transcript

  1. Qt Hybrid Apps
    Ynon Perek
    Tuesday, February 14, 2012

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 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

    View full-size slide

  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-threaded
    Tuesday, February 14, 2012

    View full-size slide

  8. 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

    View full-size slide

  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 QWebPage
    Tuesday, February 14, 2012

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  14. 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

    View full-size slide

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

    View full-size slide

  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
    function
    Tuesday, February 14, 2012

    View full-size slide

  17. 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

    View full-size slide

  18. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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
    timestamp
    Tuesday, February 14, 2012

    View full-size slide

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

    View full-size slide

  24. 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

    View full-size slide

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

    View full-size slide

  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 derived
    Tuesday, February 14, 2012

    View full-size slide

  27. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 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

    View full-size slide

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

    View full-size slide