Why does the Property of a class, sometimes doesn't output the expected value to the console?

Hi,

In the below sample app, I don’t understand why the property PageName of the BasePage class (which is the root class of all pages in the app) sometimes output undefined in the build console.

All the pages have their PageName property assigned during UX declaration.

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

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

        <JavaScript>
          var self = this;

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

          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');

    var currentPageTitle = Observable("");

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

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

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

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

    var gotoHomeSubPage02 = function() {
        router.goto('homePage', {}, 'homeSubPage02');
    }

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

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

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

    module.exports = {
        currentPageTitle: currentPageTitle,
        goBack: goBack,
        gotoHomePage: gotoHomePage,
        gotoLoginPage: gotoLoginPage,
        gotoHomeSubPage01: gotoHomeSubPage01,
        gotoHomeSubPage02: gotoHomeSubPage02,
        gotoHomeSubPage02PushedPage02: gotoHomeSubPage02PushedPage02,
        gotoHomeSubPage02PushedPage03: gotoHomeSubPage02PushedPage03,
        gotoHomeSubPage03: gotoHomeSubPage03
    } 

  </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_Menu">

              <PushedPage ux:Template="homeSubPage02_Menu" router="router" Title="HSP 02 - PP 01 - MENU">
                                <DockLayout />
                                <Button Text="Goto HSP 02 - PP 02" Clicked="{gotoHomeSubPage02PushedPage02}" Dock="Top" />
                <Button Text="Goto HSP 02 - PP 03" Clicked="{gotoHomeSubPage02PushedPage03}" Dock="Top" />
                            </PushedPage>

              <PushedPage ux:Template="homeSubPage02_Pushed02" router="router" Title="HSP 02 - PP 02" />

                            <PushedPage ux:Template="homeSubPage02_Pushed03" router="router" Title="HSP 02 - PP 03" />

                        </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

Hi!

There is one error in your code; you have defined the PageName as a ux:Dependency, but it should be a ux:Property <string ux:Property="PageName" />

When a component defined using ux:Class is instantiated, there is no guarantee that its properties have been set before its JavaScript is evaluated. Since you try to console.log the value of PageName as soon as the page loads, you end up seeing it being ‘undefined’. If you however add a clicked handler to your pages and print the value of PageName there, you will see that it is always correct.

I hope this helps :slight_smile:

PS:

Add a clicked handler like so:

<Clicked>
    <Callback Handler="{showPageName}"/>
</Clicked>

Thanks for the reply Kristian.

I was trying every possible way to make it work and when the Property didn’t work I tried Dependency and pasted the code as is. Sorry for the mistake.

I understand what you are saying but I kind of need a way to assign some properties to my UX elements and use them in JS for business logic. The properties nicely work\bind to UX elements, there is no problem. But sometimes we need to assign a business logic to UX elements and use them in JS (for example passing them to a function which will return a result that will feed the UX, etc.) before moving on to next step views.

Click needs a user interaction: Therefore it’s not a solution to my problem. I need to use the property before the user :slight_smile: I need an event saying sth like “PropsReady” :slight_smile:

Actually, what I need is an event\trigger that will notify me that when routing is done (eiher with goto, push or goBack) to a new page. When user navigates to a new page and everything is ready, I need to perform some actions, use properties safely.

I didn’t understand very well but I tried to use WhileActive for that purpose but couldn’t make it work: couldn’t call a callback from WhileActive.

you can add a handler to this.onParameterChanged to react to a page being navigated to with new parameters.

You should check out this page: https://www.fusetools.com/docs/navigation/navigation

Specifically the “Passing parameters to pages” section.

It be usefull in your case. Let me know if you get stuck :slight_smile:

Thanks Kristian,

I’ve already read the page you mentioned, but will read it again and also the part that you mention, in case I might be missing something.

I’ll bother you one more time If I still can’t figure out :slight_smile:

Ipek