A way to get the current page title

How-to Discussions
1

Hi,

I want to show the title of current page on the top bar. I couldn’t find a generic way to do this so I managed this manually through the DataContext that is passed to the clicked handler like this:

    exports.goToMainPage = function(args) {
      router.goto("homePage", {}, args.data.pageName, {} );
      exports.currentPageTitle.value = args.data.title;
    }

But when there is a goBack I can’t seem to do the same thing for sure.

Hoping to find a more solid solution to optain current page info, I’ve tried to use the HistoryChanged event of Router class like the following:

<Router ux:Name="appRouter" HistoryChanged="{routerHistoryChangedHandler}" />

by attaching the following basic handler:

exports.routerHistoryChangedHandler = function(args) {
}

But it didn’t work. I get the following error:

No methods matches the parameter list and return type of delegate type Fuse.Navigation.HistoryChangedHandler

How does this event work? Can it help me to solve my problem?

Thanks in advance,

Ipek

2

There is a Page binding that binds to the current page object of a navigation. This is used to create title bars, such as:

<Panel Navigation="yourNavigationObject">
   <Text Value="{Page Title}"/>
</Panel>

The Navigation= binds it to the desired navigation and the {Page Title} is the lookup of a resource in that page, where Title is mapped to the title.

This was tested primarily on PageControl, but I think it should work on Navigator as well (if not then we need to correct it).

From JS we have a pending issue to make the Active part of navigation 2-way bindable, which would give you some limited introspection into the current page.

HistoryChanged isn’t what you want. I’m not sure that is even meant to be public.

3

Thanks for the reply.

I’ll try out Page binding on Navigator and let you know if it works.

4

Hi,

It works with PageControl but it doesn’t work with Navigator. It gives the following error:

The node 'mainNav' can not be used here: The type must be compatible with 'Fuse.Navigation.IBaseNavigation' - /Users/ipek/Documents/workspace/fuse/_test-cases/PageTitleInNavigation/MainView.ux(6:1):E

Object reference not set to an instance of an object - (0:0):E

I wasn’t sure what I should write to the Navigation property of top StackPanel: I tried Router's name at first. It didn’t give error but it also didn’t work. Then I used PageControl's name and it worked for PageControl.
Here is the test App:

<App>
    <ClientPanel>
      <Router ux:Name="appRouter" />

        <DockLayout />
        <StackPanel Dock="Top" Navigation="mainNav" >
            <Panel Color="#2CAE3F" Height="45">
                <Text Value="{Page Title}" FontSize="22" Alignment="Center" TextColor="#fff" />
            </Panel>
        </StackPanel>

        <Page ux:Class="Page01">
          <string ux:Key="Title" ux:Value="Page01 Title" />

          <Text Value="Page01" />
        </Page>

        <Page ux:Class="Page02">
          <string ux:Key="Title" ux:Value="Page02 Title" />

          <Text Value="Page02" />
        </Page>

        <Page ux:Class="Page03">
          <string ux:Key="Title" ux:Value="Page03 Title" />

          <Text Value="Page03" />
        </Page>


<!--         
        <PageControl ux:Name="mainNav">
            <Page01 ux:Name="page01" />
            <Page02 ux:Name="page02" />
            <Page03 ux:Name="page03" />
        </PageControl> 
 -->

        <Navigator ux:Name="mainNav" DefaultTemplate="page01">
            <Page01 ux:Template="page01" />
            <Page02 ux:Template="page02" />
            <Page03 ux:Template="page03" />
        </Navigator>

    </ClientPanel>
</App>
5

I have the same issue. It doesn’t work with Navigator. Any suggestions?

6

Hi,

I’ve prepared this small app in order to explain my need more clearly. The navigated page names could have been more intuitive :slight_smile: Sorry that I couldn’t made them better.

I need to set the currentPageTitle Observable variable to show the current page’s title in the top panel.

I also need this information in order to know the state I’m in, for bussines logic wise (in that case I won’t use PageTitle of course :slight_smile: ).

I’m looking for a solution that has an event bound/ trigger callback handler kind of logic: Not something that I’ve to manually update currentPageTitle value in every function call.

Does Fuse have any mechanism like this in current version?

<App>
  <Router ux:Name="router" />

    <Page ux:Class="BasePage" HitTestMode="LocalBoundsAndChildren" HeaderColor="#595FFF" HeaderTextColor="#fff">
        <string ux:Property="PageName" />
        <float4 ux:Property="HeaderColor" />
        <float4 ux:Property="HeaderTextColor" />

        <JavaScript>
          var self = this;

          exports.showPageName = function() {
              debug_log('showPageName.PageName: ' +  self.PageName.value);
          }

          exports.showPageName();
        </JavaScript>

        <DockLayout />

        <StackPanel Dock="Top">
            <Panel Color="{Property this.HeaderColor}" Height="45">
                <Text Value="{Property this.Title}" FontSize="22"
                      Alignment="Center" TextColor="{Property this.HeaderTextColor}"/>
            </Panel>
        </StackPanel>
    </Page>

    <BasePage ux:Class="MainPage" HeaderColor="#595FFF">
        <Router ux:Dependency="router" />
    </BasePage>        

    <BasePage ux:Class="SubPage" HeaderColor="#F68FD7">
        <Router ux:Dependency="router" />
    </BasePage>

    <BasePage ux:Class="PushedPage" HeaderColor="#2CAE3F">
        <Router ux:Dependency="router" />

        <DockLayout />
        <Panel Dock="Top" Navigation="router">
            <WhileCanGoBack>
                <Button Text="Go Back" Clicked="{goBack}" />
            </WhileCanGoBack>
        </Panel>
    </BasePage>

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

    exports.currentPageTitle = Observable("");

    exports.goBack = function() {
        router.goBack();
    };

    exports.gotoHomePage = function() {
        router.goto('homePage');
    };

    exports.gotoLoginPage = function() {
        router.goto('loginPage');
    };

    exports.gotoHomeSubPage01 = function() {
        router.goto('homePage', {}, 'homeSubPage01', {});
    }

    exports.gotoHomeSubPage02 = function() {
        router.push('homePage', {}, 'homeSubPage02');
    }

        exports.gotoHomeSubPage02PushedPage02 = function() {
            router.push('homePage', {}, 'homeSubPage02', {}, "homeSubPage02_Pushed02", {});
        }

        exports.gotoHomeSubPage02PushedPage03 = function() {
            router.push('homePage', {}, 'homeSubPage02', {}, "homeSubPage02_Pushed03", {});
        }

    exports.gotoHomeSubPage03 = function() {
        router.goto('homePage', {}, 'homeSubPage03', {});
    }

  </JavaScript>

    <ClientPanel>
        <DockLayout />

        <StackPanel Dock="Top">
            <Panel Color="#000" Height="45">
                <Text Value="Top bar that will show the value of currentPageTitle" FontSize="16"
                      Alignment="Center" TextColor="#FFF"/>
            </Panel>
        </StackPanel>

        <Navigator DefaultTemplate="loginPage">
            <MainPage ux:Template="loginPage" PageName="loginPage" router="router" Title="Login Page">
                <Button Text="Goto Home Page" Clicked="{gotoHomePage}" Alignment="Top" />
            </MainPage>
            <MainPage ux:Template="homePage" PageName="homePage" router="router" Title="Home Page">
                <DockLayout />
                <Button Text="Goto Login Page" Clicked="{gotoLoginPage}" Dock="Top" />

                <Navigator DefaultTemplate="homeSubPage01">
                    <SubPage ux:Template="homeSubPage01" PageName="homeSubPage01" router="router" Title="HSP 01" />
                    <SubPage ux:Template="homeSubPage02" PageName="homeSubPage02" router="router" Title="HSP 02" >
                        <Navigator DefaultTemplate="homeSubPage02_Pushed01">
                            <PushedPage ux:Template="homeSubPage02_Pushed01" router="router" Title="HSP 02 - PP 01">
                                <DockLayout />
                                <Button Text="Goto HSP 02 - PP 02" Clicked="{gotoHomeSubPage02PushedPage02}" Dock="Top" />
                            </PushedPage>
                            <PushedPage ux:Template="homeSubPage02_Pushed02" router="router" Title="HSP 02 - PP 02">
                                <DockLayout />
                                <Button Text="Goto HSP 02 - PP 03" Clicked="{gotoHomeSubPage02PushedPage03}" Dock="Top" />
                            </PushedPage>
                            <PushedPage ux:Template="homeSubPage02_Pushed03" router="router" Title="HSP 02 - PP 03">
                            </PushedPage>
                        </Navigator>
                    </SubPage>
                    <SubPage ux:Template="homeSubPage03" PageName="homeSubPage03" router="router" Title="HSP 03"/>
                </Navigator>

                <StackPanel Dock="Bottom" Background="#F68FD7">
                    <Button Text="Goto HSP 01" Clicked="{gotoHomeSubPage01}" />
                    <Button Text="Goto HSP 02" Clicked="{gotoHomeSubPage02}" />
                    <Button Text="Goto HSP 03" Clicked="{gotoHomeSubPage03}" />
                </StackPanel>
            </MainPage>
        </Navigator>
    </ClientPanel>
</App>

Thanks in advance,

Ipek

7

I’ll add a feature request to get the binding working on Navigator. In the meantime you can try using something like:

<WhileActive>
   <Change ...>
</WhileActive>

On each page in the navigator to modify something else in the display. It isn’t as nice, but it can work for some use-cases.

8

Thanks a lot edA-qa mort-ora-y!

The binding will really be useful. I’ll also try the workaround you suggested.

9

The way I worked around this limitation was to create a separate component for top bar, and this component has a Title property. On each page, I simply add the component with a custom title. It will be nice if this actually starts working with the Navigator.