Nativescript: Allow more flexible composition and navigation with Frame, Page and TabView

[enchev]

_From @PanayotCankov on April 17, 2015 10:38_

It would be nice if we had a way to declaratively describe some of the app properties that are currently set in the main page's onLoaded, such as the ios navBarVisibility, as well as the app type - single screen, tabbed or with navigation.

For example It would be nice if we could define app.xml as:

<!-- Displays the main-screen page for example in UINavigationController in iOS -->
<NavigationFrame
    xmlns="http://www.nativescript.org/tns.xsd"
    mainPage="app/main-screen">
</NavigationFrame>

<TabFrame
    xmlns="http://www.nativescript.org/tns.xsd">
    <!-- Eventually tab bar pages are specified here along with titles and images. -->
</TabFrame>

<!-- Displays a single page without navigation. -->
<SingleScreenFrame
    xmlns="http://www.nativescript.org/tns.xsd"
    mainPage="app/main-screen">
</SingleScreenFrame>

_Copied from original issue: NativeScript/cross-platform-modules#287_

[PanayotCankov]

This is a little bit extended version of the above proposal. We have agreed to stick with the main-page.xml, but the desire for support of larger variety of apps have increased. We will be working on allowing more flexible nesting of Frame, TabView and Page.

Performance wise several apps feature sidebars that share the same content. The current sidebar implementation require it to be defined in each page separately, which leads to the repetitive instantiation of the same UI. Being able to nest a "Frame" inside a regular "Page" would allow developers to use a root Page with sidebar, add a Frame inside the Page and perform the navigation within that frame, reusing the sidebar in each frame.

Similarly allowing TabView to be used for root element will collapse the view hierarchy and for example avoid the extra Frame with UINavigationController that is created for each app. Further it should be possible to place a Frame inside a TabViewItem, and allow navigation and action bar to be displayed for that particular tab item.

Implementation wise we should be able to clean up some code that manages layout for the Frame, Page and TabView and eventually get closer to the native look and feel, especially when it comes to ScrollView and ListView used in Frame, allowing their content to slide blurred under the ActionBar (Translucent UINavigationBar).

Once Frame, Page and TabView can be composed independently they should be able to work when opened as modal page.

[PanayotCankov]

iOS human interface guidelines regarding status bars:
https://developer.apple.com/ios/human-interface-guidelines/ui-bars/status-bars/

[tobydeh]

When are these changes going to be merged? Itching to try them out on a new project.

[vakrilov]

This feature is already merged in master and available in @next builds. Although there is still work to be done and some APIs might change during the next weeks the general implementation will remain the same.
Expect more updates with demos and example. In the mean time you can check a more detailed list with changes and explanations here. Your feedback is appreciated.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.