I have modified the Swipe-Places example (https://www.fusetools.com/examples/swipe-places) so that the content resides inside a page class as follows and then I simply use a navigator to call the page from the main view.
Pages\One.ux
<Page ux:Class="One">
<Router ux:Dependency="router" />
<Panel>
<JavaScript>
var Observable = require("FuseJS/Observable");
var resetting = Observable(false);
function City(name, imageKey, country, visitors, nonVisitors)
{
this.name = name;
this.imageKey = imageKey;
this.country = country;
this.visitors = Observable(visitors);
this.nonVisitors = Observable(nonVisitors);
this.degrees = -4 + (8 * Math.random());
}
function reset(x) {
resetting.value = true;
setTimeout(backToNormal, 300);
}
function backToNormal() {
resetting.value = false;
}
module.exports = {
cities : [
new City("Oslo", "../Assets/Cities/Oslo.jpg", "NORWAY", 3127, 3943),
new City("Paris", "../Assets/Cities/Paris.jpg", "FRANCE", 10250, 400),
new City("San Francisco", "../Assets/Cities/San Francisco.jpg", "USA", 6700, 5421),
new City("Seoul", "../Assets/Cities/Seoul.jpg", "KOREA", 5713, 4702),
new City("Tokyo", "../Assets/Cities/Tokyo.jpg", "JAPAN", 4512, 657)
],
visited: function(x)
{
debug_log("Visited " + x.data.name);
},
notVisited: function(x)
{
debug_log("Not visited " + x.data.name);
},
addVisitor: function(x)
{
x.data.visitors.value = x.data.visitors.value + 1;
},
removeVisitor: function(x)
{
x.data.visitors.value = x.data.visitors.value - 1;
},
addNonVisitor: function(x)
{
x.data.nonVisitors.value = x.data.nonVisitors.value + 1;
},
removeNonVisitor: function(x) {
x.data.nonVisitors.value = x.data.nonVisitors.value - 1;
},
reset: reset,
resetting: resetting
};
reset();
</JavaScript>
<Panel>
<Fuse.iOS.StatusBarConfig Style="Dark" />
<Font File="../Assets/Fonts/Roboto-Regular.ttf" ux:Global="RobotoRegular" />
<Font File="../Assets/Fonts/Roboto-Medium.ttf" ux:Global="RobotoMedium" />
<Each Items="{cities}">
<Panel Margin="0" Height="400" Width="293">
<Rotation Degrees="{degrees}" />
<DockPanel Margin="0" Height="100%" Width="100%">
<Grid Columns="auto,1*,auto" Margin="0,14,0,5" Dock="Top">
<Image ux:Name="visited" File="../Assets/Emblems/visited.png" Margin="10,0,10,0" Opacity="0" Height="40" Alignment="VerticalCenter" />
<StackPanel Alignment="VerticalCenter">
<Text Value="{name}" FontSize="18" Alignment="Center" Font="RobotoRegular" Color="#434343" />
<Text Value="{country}" FontSize="12" Alignment="Center" Font="RobotoMedium" Color="#c4c4c4" Margin="0,-3,0,10" />
</StackPanel>
<Image ux:Name="notVisited" File="../Assets/Emblems/notvisited.png" Margin="10,0,10,0" Opacity="0" Height="40" Alignment="VerticalCenter" />
</Grid>
<Image ux:Name="visitedOverlay" StretchMode="UniformToFill" File="../Assets/Emblems/VisitedOverlay.png" Opacity="0" Dock="Fill" />
<Image ux:Name="notVisitedOverlay" StretchMode="UniformToFill" File="../Assets/Emblems/NotVisitedOverlay.png" Opacity="0" Dock="Fill" />
<Rectangle Dock="Fill">
<ImageFill File="{imageKey}" StretchMode="UniformToFill" WrapMode="ClampToEdge" />
</Rectangle>
<Grid Columns="1*,1,1*" Margin="0,0,0,0" Dock="Bottom" Height="55">
<StackPanel Padding="0,5,1,5" Margin="0,0,1,0">
<Text FontSize="22" Alignment="Center" Font="RobotoMedium" Value="{visitors}" />
<Text FontSize="12" Alignment="Center" Font="RobotoRegular" Color="#c4c4c4">HAVE BEEN HERE</Text>
</StackPanel>
<Rectangle Color="#e5e5e5" />
<StackPanel Padding="0,5,0,5">
<Text FontSize="22" Alignment="Center" Font="RobotoMedium" Value="{nonVisitors}" />
<Text FontSize="12" Alignment="Center" Font="RobotoRegular" Color="#c4c4c4">HAVEN'T VISITED</Text>
</StackPanel>
</Grid>
</DockPanel>
<Rectangle Color="White" Margin="0" Height="100%" Width="100%">
<Shadow Distance="0" Size="2" ux:Name="shadow" />
</Rectangle>
<InForceFieldAnimation ForceField="visitedAttractor" From="0.1" To="0.3">
<Change visited.Opacity="1" Duration="1" />
<Change visitedOverlay.Opacity="1" Duration="1" />
</InForceFieldAnimation>
<InForceFieldAnimation ForceField="visitedAttractor">
<Rotate Degrees="-8" />
</InForceFieldAnimation>
<InForceFieldAnimation ForceField="notVisitedAttractor" From="0.1" To="0.3">
<Change notVisited.Opacity="1" Duration="1" />
<Change notVisitedOverlay.Opacity="1" Duration="1" />
</InForceFieldAnimation>
<InForceFieldAnimation ForceField="notVisitedAttractor">
<Rotate Degrees="8" />
</InForceFieldAnimation>
<EnteredForceField ForceField="visitedAttractor" Threshold="0.9" Handler="{visited}" />
<EnteredForceField ForceField="notVisitedAttractor" Threshold="0.9" Handler="{notVisited}" />
<EnteredForceField ForceField="visitedAttractor" Threshold="0.05" Handler="{addVisitor}" />
<ExitedForceField ForceField="visitedAttractor" Threshold="0.05" Handler="{removeVisitor}" />
<EnteredForceField ForceField="notVisitedAttractor" Threshold="0.05" Handler="{addNonVisitor}" />
<ExitedForceField ForceField="notVisitedAttractor" Threshold="0.05" Handler="{removeNonVisitor}" />
<Draggable />
<WhileDragging>
<BringToFront />
<Scale Factor="1.1" Duration="0.5" Easing="BackOut" />
<Change shadow.Distance="20" Duration="0.5" Easing="BackOut" />
<Change shadow.Size="20" Duration="0.5" Easing="BackOut" />
</WhileDragging>
</Panel>
</Each>
<PointAttractor ux:Name="centerAttractor" Radius="800" Strength="250" />
<PointAttractor ux:Name="notVisitedAttractor" Offset="-400,0,0" Radius="380" Strength="600" />
<PointAttractor ux:Name="visitedAttractor" Offset="400,0,0" Radius="380" Strength="600" />
<WhileTrue Value="{resetting}">
<Change centerAttractor.Radius="8000" />
<Change centerAttractor.Strength="10000" />
</WhileTrue>
</Panel>
<Panel>
<Image Clicked="{reset}" Height="64" Width="64" File="../Assets/Icons/Refresh.png" />
</Panel>
</Panel>
</Page>
MainView.ux
<App Background="#CCC">
<Router ux:Name="router" />
<ClientPanel>
<Navigator DefaultPath="one">
<One ux:Template="one" router="router" />
</Navigator>
</ClientPanel>
</App>
However, there’s a ImageSource error: ‘BundleFileImageSource-failed-conversion’ error. This is exactly the same problem that I am facing in my project because the image tags are all inside page classes. From the examples I have seen so far, the image tags are located inside the mainview and it works. Is there a reason why it does not work within a class/component?