Top bar desappear on next page

How-to Discussions
1

Hello community,

I am about to build a little app that fetch news from my remote server :

<App Theme="Basic" Background="#eee">
    <DockPanel>

        <JavaScript>
        var Observable = require("FuseJS/Observable");

        var data         = Observable();
        var currentPage = Observable("home");
        var id             = Observable('');
        var postImage     = Observable('');
        var content     = Observable('');


        fetch('http://www.mydomain.com/?get=videos&#39;)
        .then(function(response) { return response.json(); })
        .then(function(responseObject) { 
            data.value = responseObject;
            data.replaceAll(responseObject);
            console.log('++------++');

        });

        getId = function(e){
            id.value         = e.data.post_id;
            postImage.value = e.data.img;
            content.value     = e.data.content;
            console.log(e.data.content)
        }

        module.exports = {
            dataSource: data,
            getId: getId, // Observer cette fonction
            id:id,
            postImage: postImage,
            content: content,
            currentPage : currentPage
        };

        </JavaScript>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />
        <StackPanel Dock="Top">
            <Text FontSize="28" Alignment="VerticalCenter" Height="40" TextAlignment="Center" Padding="2" Value="{Page title}" />
            <Rectangle Height="1" Margin="0,3,0,0" Fill="#333c48" />
        </StackPanel>
        <Text ux:Class="Header" Margin="10,10,0,0" TextWrapping="Wrap" FontSize="14" />
        <Text ux:Class="Type" TextColor="#999" Margin="10,10,0,0" TextWrapping="Wrap" FontSize="18" />
        <HierarchicalNavigation ux:Name="nav" Active="mainPage" />

        <Page ux:Class="MyPage">
            <EnteringAnimation>
                <Move X="1" RelativeTo="ParentSize" />
            </EnteringAnimation>
            <ExitingAnimation>
                <Move X="-1" RelativeTo="ParentSize" />
            </ExitingAnimation>
        </Page>

        <MyPage Name="mainPage">
            <string ux:Key="title" ux:Value="Videos"/>
            <ScrollView ClipToBounds="true">
                <StackPanel Alignment="Top"> 
                    <Circle ux:Name="loadingCircle" Width="70%" Height="70%" Opacity="0" StartAngleDegrees="0" LengthAngleDegrees="90">
                        <Stroke Width="1" Brush="#fff" />
                    </Circle>

                    <Each Items="{dataSource}">
                        <Grid Clicked="{getId}" ColumnCount="2" Columns="auto,1*">
                            <Clicked>
                                <NavigateTo Target="subPage" />
                            </Clicked>
                            <Rectangle Margin="10,10,10,10" Width="80" Height="80" Fill="#ffffff" CornerRadius="80" >
                                <ImageFill Url="{img}" StretchMode="UniformToFill"/>
                            </Rectangle>
                            <Rectangle Margin="10,10,10,10">
                                <StackPanel>
                                    <Type Value="{type}" />
                                    <Header Value="{post_title}" />
                                </StackPanel>
                            </Rectangle>
                        </Grid>
                        <Rectangle Height="1" Background="#bbb" />
                    </Each>
                </StackPanel>
            </ScrollView>
        </MyPage>

        <MyPage ux:Name="subPage" ux:AutoBind="false">
            <StackPanel>
                <Panel>
                    <Rectangle>
                        <Image Url="{postImage}" />
                    </Rectangle>
                    <Header Value="{content}" />
                </Panel>
                <Button Text="Go Back">
                    <Clicked>
                        <GoBack />
                    </Clicked>
                </Button>
            </StackPanel>
        </MyPage>

    </DockPanel>
</App>

```

As you can see i want to implement a top bar for each page :

```ux
<StackPanel Dock="Top">
    <Text FontSize="28" Alignment="VerticalCenter" Height="40" TextAlignment="Center" Padding="2" Value="{Page title}" />
    <Rectangle Height="1" Margin="0,3,0,0" Fill="#333c48" />
</StackPanel>

```

And to render the title :

```ux
<string ux:Key="title" ux:Value="Videos"/>

```

The top bar appear when i open the application, but when i go to page 2 he desappear and when i go back he is not displayed also.

My question is how to implement a top bar (with go back) that i can display for each page i want?

Thank you very very much.
2

Hi!

This is because your top bars are siblings of the pages, with a HeirarchicalNavigation in the same panel. This means you will “navigate away” from your top bar.

Make sure you put a panel around the pages and navigation, like this:

<Top bar and other decoration goes here>

<Panel>
    <HeirarchicalNavigation />
    <Page />
    <Page />
    <Page />
    ...
3

Hey Thank you, it works nickel chrome.