MainView.ux

<App Theme="Basic">

	<JavaScript File="fuse-resource/fuse-resource.js" ux:Global="fuseResource" />

	<DockPanel>

		<JavaScript>

			var Observable = require("FuseJS/Observable");

			var status = Observable('Loading...');
			var photos = Observable();

			var fuseResourcesModule = require('fuseResource');
			var Photos = new fuseResourcesModule.fuseResources.ResourceClass('http://jsonplaceholder.typicode.com/photos');

			var photosRequest = Photos.get();
			photosRequest
				.$promise
				.then(function(result) {
					if (result.status !== 200) {
						debug_log("Something went wrong, status code: " + result.status);
						status.value = "Oh noes! :(";
						return;
					}
					return result.json();
				})
				.then(function(newPhotos) {
					for (var i = 0; i < 10; i++) {
						var item = newPhotos[i];
						photos.add(item);
					}
					status.value = '';
				})
				.catch(function(err) {
					status.value = err.toString();
				});

			module.exports = {
				photos: photos,
				status: status
			}

		</JavaScript>

		<StatusBarBackground DockPanel.Dock="Top" />

		<Text TextColor="#a94442" Value="{status}" Alignment="Center" />

		<ScrollView ClipToBounds="true">
			<StackPanel>
				<Each Items="{photos}">
					<DockPanel Margin="0,0,0,10">
						<Image Url="{thumbnailUrl}" Dock="Left" />
						<Text Value="{title}" TextWrapping="Wrap" Alignment="CenterLeft" Margin="10" />
					</DockPanel>
				</Each>
			</StackPanel>
		</ScrollView>
	</DockPanel>

</App>