QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood...

QML across all UI StacksSupport for Widgets

Kevin Krammerand

Tobias KönigKDAB

Agenda

● Motivation for DeclarativeWidgets

● Demo of pure QML Widget UI

● Porting

– From designer/C++ UI to QML– Adding a BB10/Cascades UI

● Q&A

● Resources

Motivation

Situation

● Widgets– Widely used, well understood– Static UI, compiled code– Often tightly coupled with core logic

● QML– Relatively new, misunderstood as QtQuick– Runtime loadable, adjustable– Encourages separation core/UI

Goal

● Widgets with QML– No user-visible change– Apply existing developer knowledge– Core independent of UI– UI replaceable

● QtWidgets -> QtWidgets (update/customize)● QtWidgets -> QtQuick● QtWidgets -> Cascades

Declarative Widgets

Demo

WaterLevel

Porting

● Step 1: Declarative Widgets– Create QML files for windows/dialogs– Make core API exposable

● Step 2: Mobile UI– Create QML files for target platform– Re-use core API from Step 1

Step 1

Demo

Step 1

Final Result

Step 2

Demo

Step 2

Final Result

Q&A

Thank you for your attention!

Any Questions?

● https://github.com/KDAB/DeclarativeWidgets

● Free Software / Open Source Software● Works with Qt4

● Work in progress

kevin.krammer@kdab.com, tobias.koenig@kdab.com

QML across all UI StacksSupport for Widgets

Kevin Krammerand

Tobias KönigKDAB

Agenda

● Motivation for DeclarativeWidgets● Demo of pure QML Widget UI

● Porting

– From designer/C++ UI to QML– Adding a BB10/Cascades UI

● Q&A

● Resources

Motivation

Situation

● Widgets– Widely used, well understood– Static UI, compiled code– Often tightly coupled with core logic

● QML– Relatively new, misunderstood as QtQuick– Runtime loadable, adjustable– Encourages separation core/UI

Goal

● Widgets with QML– No user-visible change– Apply existing developer knowledge– Core independent of UI– UI replaceable

● QtWidgets -> QtWidgets (update/customize)● QtWidgets -> QtQuick● QtWidgets -> Cascades

Declarative Widgets

Demo

WaterLevel

Porting

● Step 1: Declarative Widgets– Create QML files for windows/dialogs– Make core API exposable

● Step 2: Mobile UI– Create QML files for target platform– Re-use core API from Step 1

Step 1

Demo

Step 1

Final Result

Step 2

Demo

Step 2

Final Result

Q&A

Thank you for your attention!

Any Questions?

● https://github.com/KDAB/DeclarativeWidgets

● Free Software / Open Source Software● Works with Qt4● Work in progress

kevin.krammer@kdab.com, tobias.koenig@kdab.com