Download as PDF, PPTX
Uploaded byDoris Chen
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
The document features a developer evangelist at Microsoft based in Silicon Valley, CA, providing information about their experience, resources, and tools for developers focusing on web technologies. It highlights various topics including labs, development tools, and features for building apps using Windows 8, as well as links to further resources and training. Additionally, it includes code snippets and setup information for developing with WinJS controls.
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
- 2. Who am I? Developer Evangelist at Microsoft based in Silicon Valley, CA Blog: http://blogs.msdn.com/b/dorischen/ Twitter @doristchen Email: doris.chen@microsoft.com Has over 15 years of experience in the software industry focusing on web technologies Spoke and published widely at JavaOne, O'Reilly, Silicon Valley Code Camp, SD West, SD Forum and worldwide User Groups meetings Doris received her Ph.D. from the University of California at Los Angeles (UCLA) PAGE 2 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 5. As of March2012, IDC
- 8. PAGE 9 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 9. PAGE 10 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 10. Internet Explorer TAB HTML host process App code Web platform App code Web Windows platform runtime App container PAGE 12 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 11.
- 13. Internet Explorer Internet Explorer for the desktop
- 14. PAGE 17 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 15. PAGE 18 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 18. /* Re-arrange andhide/show content */ Full screen Portrait Snap Fill PAGE 21 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 21. 1,1 2,1 1,2 2,2 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 22.
- 23. PAGE 26 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 24.
- 26. The development toolsare FREE! If you use a higher SKU, it just works!
- 28. PAGE 33 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 29. PAGE 34 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 31. PAGE 36 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 32. PAGE 38 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 33. PAGE 39 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 34. http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 35. Feature Local context Web context Windows Run-time Yes No Windows Library for Yes Yes* Javascript External script No Yes references Cross-domain XHR Yes No requests Automatic filtering for Yes No script injection on DOM There are ways to communicate across contexts, ways to give websites access to some web standards features and ways #devcamp automatic filtering within a function. http://blogs.msdn.com/dorischen twitter to skip lab setup: http://bit.ly/html5setup Blog
- 36.
- 39. "Code for touch,get mouse and pen for free!"
- 40. API surface CSS Properties DOM Attributes DOM Events overflow -ms-scroll-rails -ms-scroll-snap-x scrollLeft Scrolling scroll -ms-scroll-snap-y scrollTop -ms-scroll-chaining -ms-scroll-boundary -ms-content-zooming -ms-content-zoom- Zooming msContentZoomFactor MSContentZoom boundary -ms-content-zoom-snap Both MSManipulationStateChanged -ms-scroll-snap-type Snap-points -ms-scroll-snap-point-x
- 48. <div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display:none"> <div class="smallListIconTextItem"> <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" /> <div class="smallListIconTextItem-Detail"> </div> </div> </div> <!-- Call WinJS.UI.processAll() in your initialization code --> <div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myData.dataSource, itemTemplate: smallListIconTextTemplate, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none', layout: { type: WinJS.UI.GridLayout } }" ></div>
- 49. <!– Step1: declarecontrol --> <div id=“list” data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div> /* Step 2: Call WinJS.UI.processAll() */ /* Step 3: Use the control */ document.getElementById(‘list’).winControl.addEvent Listener (‘selectionchanged’, onSelChanged );
- 50. DatePicker SettingsFlyout Listview SemanticZoom Semantic Zoom Flipview Menu Flyout Rating Appbar twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
- 51. <div id="appbar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win- options="{id:'brag', label:'Brag', icon:'emoji2', section:'selection', type:'flyout', flyout:'bragFlyout'}"></button> </div> <div id="bragFlyout" data-win-control="WinJS.UI.Menu"> <button data-win-control="WinJS.UI.MenuCommand" data-win- options="{id:'photo', label:'Photo'}"></button> <button data-win-control="WinJS.UI.MenuCommand" data-win- options="{id:'video', label:'Video' }"></button> </div>
- 52.
- 54. // Handle clickevents from the Photo command capture.CameraCaptureUI() // Capture a photo and display the share UI
- 56.
- 60.
- 64. Windows 8Cheat Sheet http://bit.ly/wins8cheatsheet http://bit.ly/Win8GenApp http:/dev.windows.com PAGE 80 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 65. Launch your Windows8 App in 30 days Generation App Online training and tips from insiders Tele-support with a Windows 8 architect Exclusive one-on-one Metro style design consultation Virtual Labs- 90 min labs http://aka.ms/vLabsWin8 Sign up at http://bit.ly/Win8GenApp
- 66. http://ie.microsoft.com/testdrive/Views/SiteMap/ http://www.ietestdrive.com/Links/DevGuide9.html http://www.ietestdrive.com/Links/DevGuide10.html http://blogs.msdn.com/b/ie/archive/2011/09/20/touch- input-for-ie10-and-metro-style-apps.aspx PAGE 82 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen