Hi I have a strange problem. When I trigger a function that navigate to other page and load a WebView the app goes to a blank a screen but only when I test it with the apk file on my device. When I test it with dinamic preview on my device work fine.
(Only I test it on Android)
I reproduce the error in this code:
The UX:
<App Theme="Basic" Background="#fff">
<JavaScript File="MainView.js" />
<DockPanel>
<StatusBarBackground Background="#000" Dock="Top"/>
<BottomFrameBackground Dock="Bottom"/>
<DirectNavigation ux:Name="_nav" Active="Menu" />
<Style>
<Page>
<ExitingAnimation>
<Move Y="2" RelativeTo="Size" Duration="1" Easing="ExponentialInOut" />
</ExitingAnimation>
</Page>
</Style>
<Page ux:Name="Menu">
<StackPanel>
<Each Items="{OfertaE}">
<Rectangle Height="100." Margin="0,0,0,8" Background="#eee" >
<Clicked Handler="{irOfertaEspecial}">
<NavigateTo NavigationContext="_nav" Target="Webview" Delay="0.5" />
<Toggle Target="ColorHeaderWebView" />
</Clicked>
<DockPanel>
<Image StretchMode="UniformToFill" Url="{Imagen}" Height="100." Width="100." Dock="Left" />
<Panel Margin="20,0,20,0">
<StackPanel Alignment="VerticalCenter">
<Text TextWrapping="Wrap" TextAlignment="Left" TextColor="#616161" Alignment="VerticalCenter" FontSize="18" Value="{Titulo}" />
<Text TextWrapping="Wrap" TextAlignment="Left" TextColor="#616161" Alignment="VerticalCenter" FontSize="12" Value="{Texto}" />
</StackPanel>
</Panel>
</DockPanel>
</Rectangle>
</Each>
</StackPanel>
</Page>
<!-- WEBVIEW -->
<Page ClipToBounds="true" ux:Name="Webview" Background="#000">
<WhileTrue ux:Name="ColorHeaderWebView" >
<Change circuloTopWebview.Width="800" Duration="1" DurationBack="0.5" Delay="1.2" DelayBack="1" Easing="ExponentialInOut" />
<Change circuloTopWebview.Height="800" Duration="1" DurationBack="0.5" Delay="1.2" DelayBack="1" Easing="ExponentialInOut" />
<Move Target="SubMenuWebView" Y="10" RelativeTo="Size" Delay="1.3" DelayBack="0" Duration="1" Easing="ExponentialInOut" />
<Move Target="PanelWebview" Y="-8" RelativeTo="Size" Delay="2" DelayBack="0" Duration="1" Easing="ExponentialInOut" />
</WhileTrue>
<DockPanel>
<Panel ClipToBounds="true" Dock="Top" Height="50.">
<Image Height="45%" Alignment="Right" Margin="0,0,12,0" File="Assets/close.png">
<Clicked>
<NavigateTo NavigationContext="_nav" Target="Menu" Delay="0.5" />
<Toggle Target="ColorHeaderWebView" />
</Clicked>
</Image>
<Text Value="{TituloHeaderWebView}" TextColor="#fff" TextAlignment="Center" Alignment="VerticalCenter" />
<Circle MaxWidth="1000%" Width="0%" Fill="{ColorHeaderWV}" ux:Name="circuloTopWebview" />
</Panel>
<Panel Background="#888" Dock="Top" ux:Name="SubMenuWebView" Height="40.">
<Translation Y="-10" RelativeTo="Size" />
<Image Height="25." Alignment="Left" Margin="12,0,0,0" File="Assets/back.png">
<Clicked Handler="{IrLinkActivo}" />
</Image>
</Panel>
<Panel ux:Name="Loading" Visibility="Collapsed" >
<Circle Alignment="VerticalCenter" Height="40." Width="40." StartAngleDegrees="0" LengthAngleDegrees="0" Margin="10" ux:Name="LoadingCircle">
<Stroke Width="4">
<SolidColor Color="#2b6572" />
</Stroke>
</Circle>
<WhileTrue Value="{ActivarLoading}">
<Cycle Target="LoadingCircle.LengthAngleDegrees" Low="0" High="359.99" Frequency="0.8" />
<Spin Target="LoadingCircle" Frequency="-1.8" />
<Change Target="Loading.Opacity" Value="1" Duration="0.5" Easing="CircularOut" />
<Change Target="Loading.Visibility" Value="Visible" />
</WhileTrue>
</Panel>
<Panel ux:Name="PanelWebview" Visibility="Collapsed">
<Translation Y="8" RelativeTo="Size" />
<NativeViewHost>
<PageLoaded>
<Callback Handler="{DesactivarLoadingWV}" />
</PageLoaded>
<WebView ux:Name="Webview" Url="{urlWV}">
<PageLoaded>
<Set PanelWebview.Visibility="Visible" />
</PageLoaded>
</WebView>
</NativeViewHost>
</Panel>
</DockPanel>
</Page>
</DockPanel>
</App>
The JS:
var Observable = require('FuseJS/Observable');
var storage = require('FuseJS/Storage');
var ColorHeaderWV = Observable("#ff6400");
var TituloHeaderWebView = Observable("");
var urlWV = Observable("http://");
var ActivarLoading = Observable(false);
var LinkActivo = "";
var data = Observable();
var OfertaE = Observable();
function Oferta(Titulo, Texto, Imagen, Url) {
this.Titulo = Titulo;
this.Texto = Texto;
this.Imagen = Imagen;
this.Url = Url;
}
var status = 0;
var response_ok = false;
fetch('http://goodfactory.cl/bticino/ofertas.json', {
method: 'POST',
headers: { "Content-type": "application/json"},
}).then(function(response) {
status = response.status; // Get the HTTP status code
response_ok = response.ok; // Is response.status in the 200-range?
return response.json(); // This returns a promise
}).then(function(responseObject) {
debug_log(JSON.stringify(responseObject));
data.value = responseObject;
debug_log("DEBUG IMAGEN-----------: " + data.value.OFERTA_ESPECIAL_1[0].img);
if(data.value.OFERTA_ESPECIAL_1[0].url != ""){
OfertaE.add(new Oferta(data.value.OFERTA_ESPECIAL_1[0].tit, data.value.OFERTA_ESPECIAL_1[0].txt, data.value.OFERTA_ESPECIAL_1[0].img, data.value.OFERTA_ESPECIAL_1[0].url));
}
if(data.value.OFERTA_ESPECIAL_2[0].url != ""){
OfertaE.add(new Oferta(data.value.OFERTA_ESPECIAL_2[0].tit, data.value.OFERTA_ESPECIAL_2[0].txt, data.value.OFERTA_ESPECIAL_2[0].img, data.value.OFERTA_ESPECIAL_2[0].url));
}
if(data.value.OFERTA_ESPECIAL_3[0].url != ""){
OfertaE.add(new Oferta(data.value.OFERTA_ESPECIAL_3[0].tit, data.value.OFERTA_ESPECIAL_3[0].txt, data.value.OFERTA_ESPECIAL_3[0].img, data.value.OFERTA_ESPECIAL_3[0].url));
}
if(data.value.OFERTA_ESPECIAL_4[0].url != ""){
OfertaE.add(new Oferta(data.value.OFERTA_ESPECIAL_4[0].tit, data.value.OFERTA_ESPECIAL_4[0].txt, data.value.OFERTA_ESPECIAL_4[0].img, data.value.OFERTA_ESPECIAL_4[0].url));
}
storage.write("json.txt", JSON.stringify(responseObject));
}).catch(function(err) {
debug_log("ERROR" + err);
storage.read("json.txt").then(function(content) {
//poner aca copia
}, function(error) {
console.log(error);
});
});
//OFERTA ESPECIAL
function irOfertaEspecial(args){
var url = args.data.Url;
var titulo = args.data.Titulo;
TituloHeaderWebView.value = titulo;
ColorHeaderWV.value = "#555";
LinkActivo = url;
urlWV.value = LinkActivo;
ActivarLoading.value = true;
}
function DesactivarLoadingWV(){
ActivarLoading.value = false;
}
module.exports = {
irOfertaEspecial: irOfertaEspecial,
ColorHeaderWV: ColorHeaderWV,
urlWV: urlWV,
ActivarLoading: ActivarLoading,
DesactivarLoadingWV: DesactivarLoadingWV,
TituloHeaderWebView: TituloHeaderWebView,
data: data,
OfertaE: OfertaE
};