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