윈도우 8의 새로운 컨트롤과 개발시 알아야 할 점들

Hoons 닷넷

Windows 8 시삽

Byeong Geol Yun

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template"> <div class="overlaidItemTemplate"> <img class="image" src="#" data-win-bind="src: picture; alt: title" /> <div class="overlay"> <h2 class="ItemTitle" data-win-bind="innerText: title"></h2> </div> </div> </div> <div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }" ></div>

<FlipView x:Name="FlipView1" Width="250" Height="250"> <FlipViewItem Width="248" Height="248"> <Border Background="Orange"> <TextBlock Text="Item 1" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/> </Border> </FlipViewItem> <FlipViewItem Width="248" Height="248"> <Border Background="LightBlue"> <TextBlock Text="Item 2" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/> </Border> </FlipViewItem> <FlipViewItem Width="248" Height="248"> <Image Source="Images/image1.jpg" Stretch="UniformToFill"/> </FlipViewItem> <FlipViewItem Width="248" Height="248"> <Border Background="LightGreen"> <TextBlock Text="Item 4" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource DescriptionTextStyle}"/> </Border> </FlipViewItem> </FlipView>

<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom"> <!-- The zoomed-in view. --> <div id="zoomedInListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: mediumListIconTextTemplate, groupHeaderTemplate: headerTemplate, groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }" ></div> <!--- The zoomed-out view. --> <div id="zoomedOutListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: semanticZoomTemplate, selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }" ></div> </div>

<SemanticZoom ...><SemanticZoom.ZoomedOutView>

</SemanticZoom.ZoomedOutView><SemanticZoom.ZoomedInView>

</SemanticZoom.ZoomedInView> </SemanticZoom>

var data = DownloadData(...);

ProcessData(data);

var

Windows Runtime: IAsyncOperation<T>

.NET Framework: Task<T>

Javascript: Promises

All are objects representing “ongoing operations”

All use callbacks to signal completion of operation

Callbacks turn your code inside out

community :Hoons.Net

blog : ryunad.tistory.com

Twitter : @Ryunad

Email : ryunad@hugeflow.com

http://stephenwalther.com/blog

http://msdn.microsoft.com/en-us/library/windows/apps

http://code.msdn.microsoft.com/windowsapps/