HTML+CSS+JavaScriptなMetro style apps 開発 (MetroStyleDeveloper #3)

HTML+CSS+JavaScriptなMetro style apps 開発 (MetroStyleDeveloper #3)

PowerPointのスライドファイル: http://sdrv.ms/KAvp6j

Transcript

2. : @mayuki http:// /
4. Internet Explorer Windows Runtime (WinRT) WinJS
5. Web
6. 1. 1 HTML/CSS 2. HTML+CSS WinJS CSS+Blend 3. HTML Blend
7. WinJS Blend for Visual Studio (HTML) Windows Runtime (WinRT)
11. ?
12. A. JavaScript var anim = WinJS.UI.Animation; anim.enterPage(element.querySelectorAll('.fragment > *'));
13. ? (ListView )
14. A. HTML+CSS ! <section class="main" aria-label="Main content" role="main"> <div class="panel">Content goes here.</div> <div class="panel">Content goes here.</div> <div class="panel">Content goes here.</div> </section> .main .panel { width: 120px; height: 120px; background-color: #ffa500; margin-bottom: 10px; }
16. A. JavaScript !!1 var targetElements = element.querySelectorAll('.main .panel'); Array.prototype.forEach.call(targets, function (elem, i) { elem.addEventListener('MSPointerDown', function (e) { anim.pointerDown(e.srcElement); }); elem.addEventListener('MSPointerUp', function (e) { anim.pointerUp(e.srcElement); }); });
17. WinJS.UI.ListView
19. A. HTML CSS JavaScript !!1 var listView = element.querySelector('.listView').winControl; WinJS.UI.setOptions(listView, { itemTemplate: element.querySelector('.listViewItemTemplate'), itemDataSource: items.dataSource, layout: new WinJS.UI.GridLayout({ groupInfo: { multiSize: true, slotWidth: 0, slotHeight: 0, } }), }); .pagecontrol2 .win-listview .win-container .win-item .item-content { width: 150px; height: 150px; background-size: 150px 150px; } .pagecontrol2 .win-listview .win-container:nth-of-type(2) .win-item .item-content { width: 310px; height: 310px; background-size: 310px 310px; } .pagecontrol2 .win-listview .win-container .win-item .item-content .item-label { display: none; } .pagecontrol2 .win-listview .win-container:nth-of-type(2) .win-item .item-content .item-label { display: block; background-color: rgba(0, 0, 0, 0.5); padding: 5px; } <div class="listView" data-win-control="WinJS.UI.ListView"></div> <div class="listViewItemTemplate" data-win-control="WinJS.Binding.Template"> <div class="item-content" data-win-bind="style.backgroundImage: src"> <span class="item-label" data-win-bind="textContent: title">Title</span> </div> </div> HTML ListView item templating sample
20. HTML CSS JavaScript …
21. IntelliSense( ) ?
23. Visual Studio 11 Hack
24. WinJS
25. HTML
27. Visual Studio Blend WinJS JavaScript,CSS,DOM
28. WinJS WinRT Windows 8 Consumer Preview Metro style app samples - C#, VB.NET, C++, JavaScript
29. ( )