The following is a full working stipped-out version of my app that you may copy/paste. Everything works fine but there’s still a issue I’m not able to solve. The app has three pages and a right side sidebar which can be opened by a hamburger icon. The problem is that the map is shown inside the sidebar after the back button is pressed. This happens only when the app is previewed on a Android device and not inside the Designer.
Fuse 1.3.0 (build 14520)
Window 10 Pro
How to reproduce: (Steps 1 to 4 test that the normal behaviour works fine)
-
Preview the app on a Android device
-
Open/close the sidebar by clicking the hamburger icon. OK.
-
Click
SecondPage. Open/close the sidebar. Click theback button. OK. -
Click
Map. Click theback button. OK. -
Now open the sidebar. The map is shown inside the sidebar. NOT OK.
-
Click
SecondPage. Open the sidebar. The map is still shown. The app must be closed to remove the map. NOT OK. -
Click again the
Map. Open the sidebar. The map is NOT shown. OK.
Notice that the map inside the sidebar does not fill it entirely. A space equal to the height of the header is left out.
MAINVIEW.UX
<App>
<Android.StatusBarConfig Color="#000000" IsVisible="True" />
<iOS.StatusBarConfig Style="Light" Animation="Slide" IsVisible="True" />
<JavaScript>
var Observable = require("FuseJS/Observable");
var sidebarOpen = Observable(false);
module.exports = {
sidebarOpen: sidebarOpen,
setSidebarOpen: setSidebarOpen,
setSidebarClosed: setSidebarClosed,
closeSidebar: closeSidebar,
clickMap: gotoMap,
clickSecondPage: gotoSecondPage,
}
function setSidebarOpen() {
sidebarOpen.value = true;
};
function setSidebarClosed() {
sidebarOpen.value = false;
};
function closeSidebar() {
EdgeNavigator.dismiss();
};
function gotoMap() {
EdgeNavigator.dismiss();
router.push("map");
};
function gotoSecondPage() {
EdgeNavigator.dismiss();
router.push("secondpage");
};
</JavaScript>
<Router ux:Name="router" />
<ClientPanel>
<EdgeNavigator ux:Name="EdgeNavigator">
<!-- SIDEBAR -->
<Sidebar Width="180" ux:Name="menu" Edge="Right">
<ActivatingAnimation>
<Change mainAppTranslation.X="-180" />
<Callback Handler="{setSidebarOpen}" />
</ActivatingAnimation>
<WhileInactive>
<Callback Handler="{setSidebarClosed}" />
</WhileInactive>
</Sidebar>
<!-- App content -->
<DockPanel ux:Name="content" >
<Translation ux:Name="mainAppTranslation" />
<!-- Header -->
<DockPanel Dock="Top" Height="56">
<!-- Hambuger icon -->
<Panel Height="32" Width="32" HitTestMode="LocalBounds" Alignment="Right">
<WhileTrue Value="{sidebarOpen}">
<Clicked>
<NavigateTo Target="content" />
</Clicked>
</WhileTrue>
<WhileFalse Value="{sidebarOpen}">
<Clicked>
<NavigateTo Target="menu" />
</Clicked>
</WhileFalse>
<!-- Draw Hamburger icon -->
<Rectangle ux:Name="topRectangle" Height="2" Width="22" Margin="0,0,12,0" Color="#FFFFFF">
<Translation Y="-5" ux:Name="topMenuTranslation" />
<Rotation ux:Name="topMenuRotation" />
</Rectangle>
<Rectangle ux:Name="middleRectangle" Height="2" Width="22" Margin="0,0,12,0" Color="#FFFFFF" />
<Rectangle ux:Name="bottomRectangle" Height="2" Width="22" Margin="0,0,12,0" Color="#FFFFFF">
<Translation Y="5" ux:Name="bottomMenuTranslation" />
<Rotation ux:Name="bottomMenuRotation" />
</Rectangle>
</Panel>
<!-- Draw Header -->
<StackPanel Color="#AC0000" >
<Shadow Size="3" Distance="2" />
<Text Value="myApp" Color="#ECEFF1" FontSize="13" Alignment="TopCenter" Margin="0,8,0,0" />
<Text ux:Name="pageName" Value="" Color="#ECEFF1" FontSize="20" Alignment="Center" Margin="0,0,0,8" />
</StackPanel>
</DockPanel>
<!-- Navigator -->
<Navigator DefaultPath="home">
<HomePage ux:Template="home" router="router">
<Activated>
<Set Target="pageName.Value" Value="HOME"/>
</Activated>
</HomePage>
<SecondPage ux:Template="secondpage" router="router">
<Activated>
<Set Target="pageName.Value" Value="SECOND PAGE"/>
</Activated>
</SecondPage>
<MapPage ux:Template="map" router="router">
<Activated>
<Set Target="pageName.Value" Value="MAP"/>
</Activated>
</MapPage>
</Navigator>
</DockPanel>
</EdgeNavigator>
</ClientPanel>
<StackPanel ux:Class="Sidebar" Color="#7092BE">
<Text Value="Sidebar" Color="#FFFFFF" TextAlignment="Center"/>
</StackPanel>
</App>
HOMEPAGE.UX
<Page ux:Class="HomePage">
<Router ux:Dependency="router" />
<StackPanel Alignment="Center">
<Button Text="Second page">
<Clicked Handler="{clickSecondPage}" />
</Button>
<Button Text="Map">
<Clicked Handler="{clickMap}" />
</Button>
</StackPanel>
</Page>
SECONDPAGE.UX
<Page ux:Class="SecondPage">
<Router ux:Dependency="router" />
<Text Value="Second page" Alignment="Center"/>
</Page>
MAPPAGE.UX
<Page ux:Class="MapPage">
<Router ux:Dependency="router" />
<DockPanel>
<NativeViewHost>
<MapView Latitude="59.911567" Longitude="10.741030" Zoom="15">
<MapMarker Latitude="59.911567" Longitude="10.741030" />
</MapView>
</NativeViewHost>
</DockPanel>
</Page>
The .unoproj file with a reference to Fuse.Maps and a Google Maps key is needed.