QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood...
Transcript of QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood...
![Page 1: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/1.jpg)
QML across all UI StacksSupport for Widgets
Kevin Krammerand
Tobias KönigKDAB
![Page 2: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/2.jpg)
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
![Page 3: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/3.jpg)
Motivation
![Page 4: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/4.jpg)
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
![Page 5: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/5.jpg)
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
![Page 6: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/6.jpg)
Declarative Widgets
Demo
![Page 7: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/7.jpg)
WaterLevel
![Page 8: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/8.jpg)
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
![Page 9: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/9.jpg)
Step 1
Demo
![Page 10: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/10.jpg)
Step 1
Final Result
![Page 11: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/11.jpg)
Step 2
Demo
![Page 12: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/12.jpg)
Step 2
Final Result
![Page 13: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/13.jpg)
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
![Page 14: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/14.jpg)
QML across all UI StacksSupport for Widgets
Kevin Krammerand
Tobias KönigKDAB
![Page 15: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/15.jpg)
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
![Page 16: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/16.jpg)
Motivation
![Page 17: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/17.jpg)
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
![Page 18: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/18.jpg)
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
![Page 19: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/19.jpg)
Declarative Widgets
Demo
![Page 20: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/20.jpg)
WaterLevel
![Page 21: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/21.jpg)
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
![Page 22: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/22.jpg)
Step 1
Demo
![Page 23: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/23.jpg)
Step 1
Final Result
![Page 24: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/24.jpg)
Step 2
Demo
![Page 25: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/25.jpg)
Step 2
Final Result
![Page 26: QML across all UI Stacks Support for Widgets · Situation Widgets – Widely used, well understood – Static UI, compiled code – Often tightly coupled with core logic QML – Relatively](https://reader034.fdocuments.us/reader034/viewer/2022050409/5f868b868ed46b5bd0652705/html5/thumbnails/26.jpg)
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