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

[Martin Leutelt]

Von:   Elvis Stansvik <elvstone at gmail.com> 
 An:   "interest at qt-project.org Interest" <interest at qt-project.org> 
 Gesendet:   22.03.2016 20:19 
 Betreff:   Re: [Interest] Structuring of QML app as set of interlinked screens for maximum code reuse 

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. 
Since you already know that every screen will have two NavBars and separators why don't you use your current QML structure as a skeleton for the whole application?The content area could then be a thing that loads the 'pages' of your application. Take alook at elements like StackView, TabView and ListView (in combination with Loader as a delegate) which already provide a mechanism to navigate between (dynamic) content...
> 
> 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)? 
> 
The content of your NavBars could be defined by models (maybe either ListModel or something more advanced), at least that's what I would suggest. Either each 'page' of your application defines a model for both the upper and the lower NavBar and these models are then used to dynamically create the appropriate content OR your application switches the content of the NavBars based on whatever state the application is currently in.
> 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 think your example fits QML rather fine. Your application seems to be the typicalpage-based mobile application, only limited to key interaction instead of touch/mouse.The initial conception of the architecture might require a bit of thinking but as soonas you have that figured out the actual content of the application can be added very easily.
> 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. 
> 
You might find several applications using the page-based approach for basically everymobile platform out there. For more code take a look at the examples that qt already provides,you'll be able to find bits and pieces that you can easily adapt to fit your needs (for example theqt quick controls gallery).
> Cheers, 
> Elvis 
_______________________________________________ 
Interest mailing list 
Interest at qt-project.org 
http://lists.qt-project.org/mailman/listinfo/interest 
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160322/5be5a3a0/attachment.html>