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

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

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

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

1fe26e11357f3ba7250b6668ca61309f?s=128

Mayuki Sawatari

May 19, 2012
Tweet

Transcript

  1. None
  2. : @mayuki http:// /

  3. None
  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)

  8. None
  9. None
  10. None
  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; }
  15. None
  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

  18. None
  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( ) ?

  22. None
  23. Visual Studio 11 Hack

  24. WinJS

  25. HTML

  26. None
  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. ( )

  30. None