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

[Ben Lau]

If I understand your question correctly, you may use alias property to
point to children of main / navigation bar. In Angular JS, they call this
feature as "transclude".

For example,

Screen.qml:

Item {
 property alias main : mainContainer.children
}

CustomScreen.qml:

Screen {
  main: Item {
  }
}

A working example:
https://github.com/benlau/quickandroid/blob/master/QuickAndroid/Page.qml#L23



On 23 March 2016 at 03:19, Elvis Stansvik <elvstone at gmail.com> wrote:

> 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
> _______________________________________________
> 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/20160323/6f60d552/attachment.html>