HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction:...

35
HOW TO BREATHE A NEW QML LIFE into a QWidget-based app from 2000s

Transcript of HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction:...

Page 1: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

HOW TO BREATHE A NEW QML LIFE

into a QWidget-based app from 2000s

Page 2: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 3: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 4: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 5: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 6: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 7: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 8: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 9: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

● FULL QML (100%)

● Mix of QWidgets + QML (10 - 40%)

● Mix of QML + QWidgets (50 - 99%)

THE BASIC STRATEGIES

Page 11: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

qmlRegisterType<YourType>(..., …)

Page 12: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

MIX OF QML + QWIDGETS

Page 13: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 14: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 15: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

MIX OF QWIDGETS + QML

Page 16: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 17: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

MuseScore editor example

- Do we need a QML?

- YES

Page 18: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

MuseScore editor example

- Are we building a project from scratch?

- NO

Page 19: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

MuseScore editor example- Do we have things that we would like to keep on

QWidgets?- YES

Page 20: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

MuseScore editor example- Are there things we need to keep in design that are

nearly impossible to implement in QtQuick?- YES

Page 21: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 22: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 23: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

THE PITFALLS1. DOCKABLE SYSTEM

- Implement your mechanism using QDockWidgets in QML

- Wait for the 1.1 release of the impressive KDDockWidgets library with QtQuick support from our friends at KDAB

Page 24: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

Our approach example

Page 25: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

Our approach example

Page 26: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

THE PITFALLS2. Focus handling

- Cyclic transfer of focus within one container

Page 27: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

- *Pressed TAB key*

Page 28: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

- *Pressed TAB key*

Page 29: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

- *Pressed TAB key*

Page 30: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

- *Pressed TAB key*

Page 31: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

- *Pressed TAB key*

Page 32: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

THE PITFALLS3. Popups overlapping

- QML content cannot be rendered outside the QWidget container it belongs to

Page 33: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search
Page 34: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

ToolTip example

Page 35: HOW TO BREATHE A NEW QML LIFE · 2020. 9. 21. · Chord X: o.DDsp Y: o.DDsp Small Stem direction: Auto Feed bac k Stem less 4 Tuplet Normal mode Palettes Add Palettes Clefs Search

THANKS!