Problem with smart app like layout


#1

Hi,
I’ve stared to code some app.
First, i was wondering, how can i code view that contain static header and footer navigation.
So i’ve end up this, which was . ok for the moment.

<Page class="page" loaded="loaded" xmlns:header="components/header" xmlns:footer="components/footer">

    <GridLayout rows="120,*,60">

        <StackLayout row="0">
            <!-- Common header -->
            <header:header/>
        </StackLayout>

        <ScrollView row="1" verticalAlignment="top" class="scrollview" tap="{{ loadPage }}">

            <StackLayout class="redeem">
                <Label text="Enter your code below to redeem your reward" class="info" textWrap="true"></Label>
                <Label text="Code" class="info code" textWrap="true"></Label>
                <TextField  />
                <Button text="Redeem" class="button blue"></Button>

            </StackLayout>

        </ScrollView>

        <StackLayout row="2">
            <!-- Common footer -->
            <footer:footer/>
        </StackLayout>

    </GridLayout>

</Page>

But i’ve noticed that app is working more than website than app. It’s beacuse, when you navigate to another view, header and (worst case) the footer is ‘reloaded’ - it’s animated with all the rest of page. So what i’m asking is - is there a way to do this smarter way ?
I saw many apps that have static footer, so if you navigate to another view, it stays the same, but only content is changed.
Thanks for any advices.


#2

This feature is coming soon in the {N} 4.0 release.


#3

Thank you @jogboms.
So can i assume that no app that is written in {N} don’t have this feature ? (so, fixed navigations etc) are always ‘reloaded’?


#4

Anybody knows if this plugin can help ? Will this load new pages while stays in place without reload ?


@henry.chavez can you please confirm if this will fit my needs ? I’m asking without tests, as i dont know angular and i want to know before i’ll attempt to recode this in plain javascript - Thanks!


#5

Until you do page navigation, anything inside the page will reload that includes any plugin or built-in components like TabView as of 3.4.x.

You may have to try some native code to add your tab-view / bottom bar plugin above page container, so it will retain throughout app. I haven’t tried this personally, but I’m sure it should work.


#6

Thank you @manojdcoder. My knowlage about native coding is very limited so i see no way to have this static navigation untill {N} 4.0 i think… :frowning:


#7

I think there are different ways of achieving this still with 3.4.x, but may not be as easy as simple page navigation.

  1. As I already mentioned, find the container of page and add your bottom bar to it. This may involve native code and requires decent knowledge on how frames and layouts work.
  2. If the above one feels like harder path to you, you may build your own navigation stack within page. Use a ContentView as parent, don’t use Page for your detail views but simple layouts / content views and keep replacing content when you want to navigate.

#8

Thank you, i’ll do some research based on Your tips.


#9

Sorry If I didn’t reach you before, I wasn’t active, tell me if you need any help with the plugin.

Another approach you can use is using ngSwitch from angular, you can find an example in the demo-ng folder of the repo.