Fuse-samples

Training-Samples.ux

<!-- Layout - Begin -->

<App>
	<!-- Panel -->
	<Panel Margin="10" Padding="20" Color="#444">
		<Rectangle Color="#000" Width="70px" Height="70px" />
		<Rectangle Color="#eee" Width="70" Height="70" />
		<Rectangle Color="#4bedea" Height="70%" Width="50%" />
		<Rectangle Color="#eee" />
	</Panel>

	<!-- StackPanel -->
	<!-- <StackPanel ItemSpacing="20" Orientation="Vertical" Padding="20">
		<Panel Width="100" Height="100" Background="Red" />
		<Panel Width="100" Height="100" Background="Green" />
		<Panel Width="100" Height="100" Background="Blue" />
	</StackPanel> -->

	<!-- DockPanel -->
	<!-- <DockPanel> 
		<Rectangle Dock="Left" Width="100" Color="Red" />
		<Rectangle Dock="Top" Height="100" Color="Green" />
		<Rectangle Dock="Right" Width="100" Color="Blue" />
		<Rectangle Dock="Bottom" Height="100" Color="Teal" />
		<Rectangle Color="Yellow" />
	</DockPanel> -->

	<!-- Grid RowCount, ColumnCount-->
	<!-- <Grid RowCount="2" ColumnCount="3" CellSpacing="10" ChildOrder="ColumnMajor">
		<Rectangle Color="Red" />
		<Rectangle Color="Green" />
		<Rectangle Color="Blue" />
		<Rectangle Color="Yellow" />
		<Rectangle Color="Black" />
		<Rectangle Color="Teal" />
	</Grid> -->

	<!-- Grid Rows, Columns, Row, Column -->
	<!-- <Grid Rows="1*, 2*" Columns="1*, 1*, 2*" CellSpacing="10">
		<Rectangle Color="Red" Row="1" Column="0" /> 
		<Rectangle Color="Green" Row="1" Column="1" />
		<Rectangle Color="Blue" Row="1" Column="2" />
		<Rectangle Color="Yellow" Row="0" Column="0" />
		<Rectangle Color="Black" Row="0" Column="1" />
		<Rectangle Color="Teal" Row="0" Column="2" />
	</Grid> -->

	<!-- Grid RowSpan, ColumnSpan-->
	<!-- <Grid Rows="1*, 2*" Columns="1*, 1*, 2*" CellSpacing="10">
		<Rectangle Color="Red" RowSpan="2"/> 
		<Rectangle Color="Green" ColumnSpan="2" />
		<Rectangle Color="Black" />
		<Rectangle Color="Teal" />
	</Grid> -->

	<!-- WrapPanel -->
	<!-- <Rectangle ux:Class="MyRec" Width="100" Height="100">
		<string ux:Property="TextValue" />
		<Text Alignment="Center" TextColor="White" FontSize="50" Value="{Property TextValue}" />
	</Rectangle>
	
	<WrapPanel FlowDirection="RightToLeft" Orientation="Vertical">
		<MyRec TextValue="1" Color="#112233" />
		<MyRec TextValue="2" Color="#112233" />
		<MyRec TextValue="3" Color="#112233" />
		<MyRec TextValue="4" Color="#112233" />
		<MyRec TextValue="5" Color="#112233" />
		<MyRec TextValue="6" Color="#112233" />
		<MyRec TextValue="7" Color="#112233" />
		<MyRec TextValue="8" Color="#112233" />
		<MyRec TextValue="9" Color="#112233" />
		<MyRec TextValue="10" Color="#112233" />
	</WrapPanel> -->

	<!-- ColumnLayout -->
	<!-- <Panel>
		<ColumnLayout Orientation="Vertical" ColumnCount="3" />
		<Each Count="9">
			<Circle Height="50" Width="50" Margin="5" Color="Blue" />
		</Each>
	</Panel> -->

	<!-- CicleLayout -->
	<!-- <Panel Color="#000000" Width="300" Height="300">
	    <CircleLayout ItemSpacingDegrees="0" StartAngleDegrees="0" Radius="1" />
	    <Circle Width="50" Height="50" Fill="#ff00ff" />
	    <Circle Width="50" Height="50" Fill="#7f7fff" />
	    <Circle Width="50" Height="50" Fill="#00ffff" />
	    <Circle Width="50" Height="50" Fill="#7fff7f" />
	    <Circle Width="50" Height="50" Fill="#ffff00" />
	    <Circle Width="50" Height="50" Fill="#ff7f7f" />
	    <Circle Width="50" Height="50" Fill="#ff7f7f" />
	    <Circle Width="50" Height="50" Fill="#ff7f7f" />
	    <Circle Width="50" Height="50" Fill="#ff7f7f" />
	    <Circle Width="50" Height="50" Fill="#ff7f7f" />
	</Panel> -->


</App>

<!-- Layout - End -->


<!-- Animation - Begin -->
<!-- Note: You need to add "Fuse.BasicTheme" in your .unoproj file -->
<!--    => FYI: https://github.com/fuse-factory/training-samples/blob/master/04.Animation/04.Animation.unoproj -->

<App>
	<DockPanel>

	<Rectangle ux:Name="rect" X="50%" Y="30%" Width="100" Height="100" Fill="#f93" CornerRadius="0">
		<Text ux:Name="Anim" Value="Anim" Color="#fff" Alignment="Center" FontSize="30" TextWrapping="Wrap" />
	</Rectangle>

	<ScrollView>
		<StackPanel>
			<Panel Background="#06F">
				<Text Value="Transform" Color="#fff" Margin="10" />
			</Panel>
			<StackPanel Padding="20" Alignment="Left">
				<Basic.Button Text="Rotate">
					<Clicked>
						<Rotate Target="rect" Degrees="90" Duration="0.5" Easing="QuadraticInOut" EasingBack="QuadraticInOut" />
						<Change Anim.Value="Rotate" Duration="0.5" />
					</Clicked>
				</Basic.Button>
				<Basic.Button Text="Scale">
					<Clicked>
						<Scale Target="rect" Factor="0.2" Duration="0.5" Easing="CircularIn" EasingBack="CircularIn" />
						<Change Anim.Value="Scale" Duration="0.5" />
					</Clicked>
				</Basic.Button>
				<Basic.Button Text="Move">
					<Clicked>
						<Move Target="rect" Y="1.5" RelativeTo="Size" Duration="0.5" Easing="ElasticIn" EasingBack="ElasticIn" />
						<Change Anim.Value="Move" Duration="1" />
					</Clicked>
				</Basic.Button>
				<Basic.Button Text="Skew">
					<Clicked>
						<Skew Target="rect" DegreesX="30" Duration="0.5" Easing="QuinticIn" EasingBack="QuinticOut" />
						<Change Anim.Value="Skew" Duration="0.5" />
					</Clicked>
				</Basic.Button>
				<Basic.Button Text="Spin">
					<Clicked>
						<Spin Target="rect" Frequency="2" Duration="0.5" />
						<Change Anim.Value="Spin" Duration="0.5" />
					</Clicked>
				</Basic.Button>
			</StackPanel>
			<Panel Background="#06F">
				<Text Value="Others" Color="#fff" Margin="10" />
			</Panel>
			<StackPanel Padding="20" Alignment="Left">
				<Basic.Button Text="Color">
					<Clicked>
						<Change rect.Color="#f07" Duration="0.5" />
						<Change Anim.Value="Color" Duration="0.5" />
					</Clicked>
				</Basic.Button>
				<Basic.Button Text="Opacity">
					<Clicked>
						<Change rect.Opacity="0.1" Duration="0.5" />
						<Change Anim.Value="Opacity" Duration="0.5" />
					</Clicked>
				</Basic.Button>
				<Basic.Button Text="CornerRadius">
					<Clicked>
						<Change rect.CornerRadius="30" Duration="0.5" />
						<Change Anim.Value="CornerRadius" Duration="0.5" />
					</Clicked>
				</Basic.Button>

				<Basic.Button Text="Complex">
					<WhilePressed>
						<Rotate Target="rect" Degrees="90" Duration="0.5" />
						<Scale Target="rect" Factor="2" Duration="0.5" />
						<Move Target="rect" Y="1.5" RelativeTo="Size" Duration="0.5" />
						<Skew Target="rect" DegreesX="30" Duration="0.5" />
						<!-- <Spin Target="rect" Frequency="2" Duration="0.5" /> -->
						<Change rect.Color="#f07" Duration="0.5" />
						<Change rect.Opacity="0.1" Duration="0.5" />
						<Change rect.CornerRadius="30" Duration="0.5" />
						<Change Anim.Value="Complex" Duration="0.5" />
					</WhilePressed>
				</Basic.Button>
			</StackPanel>
		</StackPanel>
	</ScrollView>
</DockPanel>
</App>

<!-- Animation - End -->

<!-- PageControl - Begin -->

<App>
	<PageControl ux:Name="pagecontrol" Active="Page1">
	    <Page ux:Name="Page1" Background="Red">
	    	<Text Value="Page1" Color="White" Alignment="Center" />
	    	<Clicked>
	    		<Set pagecontrol.Active="Page2" />
	    	</Clicked>
	    </Page>
	    <Page ux:Name="Page2" Background="Blue">
	    	<Text Value="Page2" Color="White" Alignment="Center"  />
	    	<Clicked>
	    		<Set pagecontrol.Active="Page1" />
	    	</Clicked>
	    </Page>
	</PageControl>
</App>

<!-- PageConttol - End -->

<!-- Navigation - Begin -->

<App>
	<JavaScript>
    module.exports = {
        gotoFirst: function() { router.push("Page1"); },
        gotoSecond: function() { router.push("Page2"); }
    };
	</JavaScript>

	<Router ux:Name="router" />

	<DockPanel>
	    <Navigator DefaultPath="Page1">
	        <Page ux:Template="Page1" Background="Red">
	            <Text Alignment="Center" Color="White">Page1</Text>
	        </Page>
	        <Page ux:Template="Page2" Background="Blue">
	            <Text Alignment="Center" Color="White">Page2</Text>
	        </Page>
	    </Navigator>

	    <Grid Dock="Bottom" Columns="1*,1*">
	        <Basic.Button Text="First page" Clicked="{gotoFirst}" />
	        <Basic.Button Text="Second page" Clicked="{gotoSecond}" />
	    </Grid>
	</DockPanel>
</App>

<!-- Navigation - End -->

<!-- Rest API Sample - Begin -->

<JavaScript>
var Observable = require("FuseJS/Observable");

var baseUrl = "https://api.nytimes.com/svc/search/v2/articlesearch.json"
		+ "?api_key=f6ec33a5029c47aaa8d9e6f8fd5cdfae";

var searchTerm = Observable("sweden");

var articles = Observable();

function showArticle(arg){
	var article = arg.data;
	router.push("articlePage", article);
}

function search() {
	fetch(baseUrl + "&q=" + searchTerm)
		.then(function(response){
			return response.json();
		}).then(function(result){
			articles.replaceAll(result.response.docs);
		});
}

search();

module.exports = {
	searchTerm,
	search,
	articles,
	showArticle
};
</JavaScript>

<!-- Rest API Sample - End -->

<!-- Integration - Begin -->

<App>
        <DockPanel Margin="0,0" Background="#eee">
            <JavaScript>
                var Observable = require("FuseJS/Observable");
                var items = Observable();

                function addItem() {
                    items.add({ text: "이것은 Fuse 목록 입니다." });
                }

                function removeItem(sender) {
                    items.remove(sender.data);
                }

                module.exports = {
                    items: items,
                    addItem: addItem,
                    removeItem: removeItem
                };
            </JavaScript>
            <Basic.Button Text="추 가" Clicked="{addItem}" Dock="Top" />
            <ScrollView>
                <StackPanel>
                    <Each Items="{items}">
                        <DockPanel Padding="10" Margin="0,1" Background="#fff">
                            <Text Value="{text}" Alignment="CenterLeft" />
                            <Basic.Button Text="삭 제" Clicked="{removeItem}" Dock="Right" />

                            <LayoutAnimation>
                                <Move RelativeTo="LayoutChange" Y="1" Duration="0.8" Easing="ElasticIn" />
                            </LayoutAnimation>

                            <AddingAnimation>
                                <Move RelativeTo="Size" X="1" Duration="0.3" Easing="CircularIn" />
                            </AddingAnimation>

                            <RemovingAnimation>
                                <Move RelativeTo="Size" X="-1" Duration="0.4" Easing="CircularOut" />
                            </RemovingAnimation>
                        </DockPanel>
                    </Each>
                </StackPanel>
            </ScrollView>
        </DockPanel>
</App>

<!-- Integration - End -->