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

19
Hoons 닷넷 Windows 8 시삽 Byeong Geol Yun

Upload: joel-park

Post on 22-Dec-2014

674 views

Category:

Technology


7 download

DESCRIPTION

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

TRANSCRIPT

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

Hoons 닷넷

Windows 8 시삽

Byeong Geol Yun

Page 2: 윈도우 8의 새로운 컨트롤과 개발시 알아야 할 점들
Page 3: 윈도우 8의 새로운 컨트롤과 개발시 알아야 할 점들
Page 4: 윈도우 8의 새로운 컨트롤과 개발시 알아야 할 점들
Page 5: 윈도우 8의 새로운 컨트롤과 개발시 알아야 할 점들

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

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

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

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

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

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

<SemanticZoom ...><SemanticZoom.ZoomedOutView>

</SemanticZoom.ZoomedOutView><SemanticZoom.ZoomedInView>

</SemanticZoom.ZoomedInView> </SemanticZoom>

Page 11: 윈도우 8의 새로운 컨트롤과 개발시 알아야 할 점들
Page 12: 윈도우 8의 새로운 컨트롤과 개발시 알아야 할 점들
Page 13: 윈도우 8의 새로운 컨트롤과 개발시 알아야 할 점들
Page 14: 윈도우 8의 새로운 컨트롤과 개발시 알아야 할 점들

var data = DownloadData(...);

ProcessData(data);

var

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

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

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

community :Hoons.Net

blog : ryunad.tistory.com

Twitter : @Ryunad

Email : [email protected]