Hey guys does this make sense:
The code move in a webview when a card is clicked. It was written when live previewing on android and it worked. But when I try to create a new preview anywhere it says the action is used out of scope. If I comment those line, I can again generate the previews and then if I uncomment the action lines it works again on those previews.
As a designer I’m impressed by fuse, with a few days I learned a lot. But I’m just getting a hard time with few things like this one. Really thanks for all the support.
here is the code.
<App Theme="Basic">
<Font File="assets/Roboto-Black.ttf" ux:Global="Black" />
<Font File="assets/Roboto-Bold.ttf" ux:Global="Bold" />
<Font File="assets/Roboto-Medium.ttf" ux:Global="Medium" />
<Font File="assets/Roboto-Light.ttf" ux:Global="Light" />
<Font File="assets/Roboto-Regular.ttf" ux:Global="Regular" />
<FileImageSource ux:Global="back" File="assets/icn-back.png" />
<FileImageSource ux:Global="logo" File="assets/logo-newsmonitor-white.png" />
<JavaScript File="MainView.js" />
<WhileTrue ux:Name="showWEB">
<Move Target="webView" X="-1500" Duration="1" Easing="ExponentialInOut" DurationBack="0.80" EasingBack="ExponentialInOut" />
<Change webView.Alignment="Center" />
</WhileTrue>
<Text TextColor="#a94442" Value="{errorMessage}" Alignment="Center" />
<DockPanel>
<Page ux:Name="webView" X="1500" Height="100%" Width="100%" Alignment="Default">
<DockPanel>
<StatusBarBackground Dock="Top" />
<DockPanel Dock="Top" Height="56" Color="#222">
<Rectangle Height="24" Width="24" Dock="Left" Margin="16, 0, 0, 0" Alignment="CenterLeft">
<Image Source="back" Color="#fff" />
<Clicked>
<Toggle Target="showWEB" />
</Clicked>
</Rectangle>
<Text Value="Newsmonitor" Font="Medium" FontSize="20" Alignment="CenterLeft" TextAlignment="Center" Padding="0" Margin="32, 0, 0, 0" TextColor="#FFF" />
</DockPanel>
<NativeViewHost>
<WebView ux:Name="web" Dock="Fill" Alignment="Default" Opacity="1" />
</NativeViewHost>
<BottomBarBackground Dock="Bottom" />
</DockPanel>
</Page>
<Page ux:Name="newsList">
<DockPanel>
<StatusBarBackground Dock="Top" />
<DockPanel Dock="Top" Height="56" Color="#222">
<Rectangle Height="18" Dock="Left" Margin="16, 0, 0, 0" Alignment="CenterLeft">
<Image Source="logo" Color="#fff" />
</Rectangle>
<DropShadow />
</DockPanel>
<ScrollView ClipToBounds="true" Background="#222" Padding="8, 0, 0, 8">
<StackPanel>
<ColumnLayout ColumnCount="2" />
<!-- json root = news clusters -->
<Each Items="{news}">
<StackPanel ux:Name="cards" Margin="0, 8, 8, 0" Width="100%" Opacity="1">
<!-- articles array -->
<Each Items="{articles}">
<DockPanel Alignment="Bottom">
<Clicked>
<LoadUrl TargetNode="web" Url="{url}" />
<Toggle Target="showWEB" />
</Clicked>
<!-- image array -->
<Each Items="{images}">
<Rectangle Height="168" Width="100%" Dock="Left" Margin="0" Alignment="TopLeft" Color="#f4f4f4" CornerRadius="4, 4, 0, 0" ClipToBounds="true">
<ImageFill Url="{full_url.300x}" StretchMode="UniformToFill" StretchDirection="Both" />
</Rectangle>
</Each>
</DockPanel>
<!-- title -->
<Panel Alignment="Bottom" Color="#fff">
<Text Value="{title}" TextWrapping="Wrap" TextAlignment="Left" FontSize="15" Margin="8, 8, 8, 0" Opacity="0.87" Alignment="Default" Dock="Fill" />
</Panel>
</Each>
<!-- Cluster size = # publications-->
<Rectangle Color="#fff" CornerRadius="0, 0, 4, 4">
<WrapPanel Margin="8, 8, 0, 8">
<Text Value="{clusterSize}" TextAlignment="Left" FontSize="11" Opacity="0.38" Alignment="BottomLeft" Dock="Fill" />
<Text Value="Publicações" TextAlignment="Left" FontSize="11" Margin="4, 0, 0, 0" Opacity="0.38" Alignment="BottomLeft" Dock="Fill" />
</WrapPanel>
</Rectangle>
</StackPanel>
</Each>
</StackPanel>
</ScrollView>
</DockPanel>
</Page>
</DockPanel>
</App>