[Interest] Structuring of QML app as set of interlinked screens for maximum code reuse

[Elvis Stansvik]

2016-03-22 20:13 GMT+01:00 Elvis Stansvik <elvstone at gmail.com>:
> Hi all,
>
> I'm working on a fullscreen Qt Quick/QML app (for machine control)
> which will consist of a set of interlinked screens, with key presses
> as the only interaction method.
>
> Each screen will have roughly the following QML structure:
>
> Rectangle {
>
>     NavBar {
>         id: topBar
>         ...
>         controls for navigation and information stuff,
>         different depending on which screen
>         ...
>     }
>
>     Rectangle {
>         id: topSeparator
>         ...
>         aesthetic divider rectangle between top nav bar and content.
>         ...
>     }
>
>     Rectangle {
>         id: content
>         ...
>         main content here, different depending on which screen.
>         ...
>     }
>
>     Rectangle {
>         id: bottomSeparator
>         ...
>         aesthetic divider rectangle between top nav bar and content.
>         ...
>     }
>
>     NavBar {
>         id: bottomBar
>         ...
>         controls for navigation and information stuff,
>         different depending on which screen
>         ...
>     }
> }

To clarify, think of NavBar as just another Rectangle in the example
above. It's just a custom item with some common visual properties.

Elvis

>
> And I'm now trying to find a good structure that will minimize
> repetition of QML code.
>
> I understand that QMLs main model for code reuse is composition, but
> that it also has a form of "inheritance": by defining a new Item in a
> separate file using another Item as the top level item and redefining
> some of its properties, I'm sort of inheriting that item.
>
> I could save the above general structure in a Screen.qml, and in
> FooScreen.qml, BarScreen et.c. do:
>
> Screen {
>     ...
>     override some properties
>     ...
> }
>
> But this will only allow me to redefine properties, and add new child
> items. How would I then be able to define both which content goes in
> the main area (the content Rectangle in the "base" item) and in the
> two navigation bars (topBar and bottomBar Rectangles)?
>
> It seems QML is not really meant to be used this way, and I'd have to
> essentially redefine these things in each of my screens, even if
> they'll all have the same general structure? There's no "template"
> mechanism so to speak?
>
> I'm very thankful for any tips from people more experienced with Quick / QML.
>
> And if you know of a well designed full screen QML app modeled as a
> set of interlinked screens with keyboard navigation, I'm idle ears.
>
> Cheers,
> Elvis