31회 HOONS닷넷 정기세미나 2세션 - 윈도우 8의 새로운 컨트롤과 개발시 알아야 할 점들

1. Hoons 닷넷
Windows 8 시삽
Byeong Geol Yun

5. <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>

6. <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>

9. <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: mediu
mListIconTextTemplate, groupHeaderTemplate: headerTemplate, groupDataSource: myDat
a.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', swipeBehavio
r: 'none' }"
></div>
</div>

10. <SemanticZoom ...>
<SemanticZoom.ZoomedOutView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
</SemanticZoom.ZoomedInView> </SemanticZoom>

14. var data = DownloadData(...);
ProcessData(data);
var

15. 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

18. community :Hoons.Net
blog : ryunad.tistory.com
Twitter : @Ryunad
Email : ryunad@hugeflow.com

19. http://stephenwalther.com/blog
http://msdn.microsoft.com/en-us/library/windows/apps
http://code.msdn.microsoft.com/windowsapps/