Microsoft PT TechRefresh html win8.1
Download as PPTX, PDF1 like2,007 views
The document provides an overview of creating Windows 8.1 apps using HTML and JavaScript, detailing the necessary development tools, principles, and components of the Windows Store app model. It discusses various features of WinJS 2.0, including improved controls and the declarative and imperative ways to use them in app development. Additionally, it includes links to resources, tools, and references for further learning in Windows app development.
Microsoft PT TechRefresh html win8.1
- 1. Creating your Windows 8.1 App with HTML/JS Alexandre Marreiros
- 2. About What i do: CTO @ Innovagency Technical Trainer, Speaker & Consultant as Self Employee Teacher @ EDIT Software Developer & Architect as Consultant Tech Writer and Revier as Self Employee Digital business & UX Consultant Contacts: amarreiros@innovagency.com / amarreiros@gmail.com @alexmarreiros http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21 www.digitalmindignition.com Alexandre Marreiros
- 3. Agenda • Windows Store APPS that use HTMLShowCase • Basic Principles • Development tools • Development Model • WinJS • WinJS 2.0 Putting the hands on demos
- 5. • Calendar • People • Store • Reaing List • Mail • Finance • Sports • Weather • News • Travel • Skype • And More Native Microsoft APPS
- 6. • Caixa Directa • A Bola • ANA aeorportos • Eat o • Vodafone Quiosque • MyAuto • And More Local Portuguese Store APPS
- 9. Some Popular CSS 3 Features
- 10. Some Popular HTML 5 Features
- 11. Web vs APP development Feature Local context Web context Windows Run-time Yes No Windows Library for Javascript Yes No External script references No Yes Cross-domain XHR requests Yes No Automatic filtering for script injection on DOM Yes No
- 12. • Styling changes • Windows Runtime access • Single page model • App sizes and orientations Web vs APP development • Security context and innerHTML • Local and web context • IE11 DOCMODE • Network connectivity and offline experience
- 13. HTML development Review WinJS HTML5 Windows app WinRT
- 15. The new WINJS WinJS 1.0 Windows 8 app WinJS 2.0 Windows 8.1 app
- 17. Tools
- 19. Visual Studio Templates A single Page APP with the struture of a Windows Store APP, no Controls or Layout predefined
- 20. Visual Studio Templates A project with items grouped in a grid and the details of each item.
- 21. Visual Studio Templates A project to navigate between Grouped Items and get the detail from each item in a group
- 22. Visual Studio Templates A project for a Windows Store APP that implements the HUB navigation Pattern
- 23. Visual Studio Templates A project for a Windows Store APP that have a predefined Navigation controls
- 24. Windows Store HTML project Structure Explained WINRT library instaciated directly by the app
- 25. Windows Store HTML project Structure Explained CSS Libraries for the Windows store app Windows Store App Images JavaScript
- 26. Windows Store HTML project Structure Explained App certify App Manifest
- 28. • Style sheets • Core (promises, class, namespace, etc.) • App model • Data binding WIN JS • Controls • Animations • Utilities A collection of toolkits to make building Windows Store apps fast and easy
- 29. WIN JS
- 31. • Show how to use WinJS Controls in a declarative manner and a imperative manner Review Demo <div id="calendar" data-win-control="WinJS.UI.DatePicker"></div> Declarative Way WinJS controls are divs with atributtes that are processed when the processall method runs.
- 32. • Show how to use WinJS Controls in a declarative manner and a imperative manner Review Demo Imperative Way In the HTML File <div id="calendarDiv" ></div> In th JS file var calendarDiv = document.getElementById("calendar"); var calendarctrl = new WinJS.UI.DatePicker(calendarDiv);
- 34. What’s new on WinJS 2.0 Improved Controls • List view • App bar New Controls • Hub • Navigation bar • Search box • Back button Infrastructure • Scheduler • Dispose model • Async debugging Building Blocks • Binding template • Repeater • Item Container
- 35. • Native layout performance • Highly flexible presentation • Improved keyboarding • Drag-n-drop List View
- 36. • New Buil-in Layouts List View Highly flexible presentation
- 37. <div id=“myListView“ data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myData.dataSource , itemTemplate: myTemplate , layout: { type: WinJS.UI.GridLayout , orientation: WinJS.UI.Orientation.horizontal } }” itemsDraggable: true } “ </div> List View
- 38. • Scaling to Window Size • Keyboarding • Custom Content APP Bar
- 39. <div data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win- options="{…}"></button> <button data-win-control="WinJS.UI.AppBarCommand" data-win- options="{…}"></button> <div data-win-control="WinJS.UI.AppBarCommand“ data-win-options="{type: 'content'}"> <!– YOUR CONTENT HERE --> </div> </div> APP Bar
- 40. HUB Header Header Header Header
- 41. HUB <div data-win-control="WinJS.UI.Hub"> <div data-win-control="WinJS.UI.HubSection" data-win-options="{header: „Foo'}"> <!-- YOUR CONTENT HERE --> </div> <div data-win-control="WinJS.UI.HubSection" data-win-options="{header: „Bar'}"> <!-- YOUR CONTENT HERE --> </div> </div>
- 42. Navigation Bar
- 43. <div data-win-control="WinJS.UI.NavBar"> <div data-win-control="WinJS.UI.NavBarContainer"> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: „Foo', icon: 'url(foo.png)' }"></div> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Bar', icon: 'url(bar.png)„ }"></div> </div> </div> Navigation Bar
- 44. SearchBox
- 48. Scheduler setImmediate(foo); var S = WinJS.Utilities.Scheduler; S.schedule(foo, S.Priority.normal); or S.schedule(foo, S.Priority.high); or S.schedule(foo, S.Priority.idle);
- 49. <div data-win-control="WinJS.Binding.Template"> <img src="#" data-win-bind="src: imageUrl; alt: tile" /> <div data-win-bind="innerText: tile"></div> <div data-win-bind="innerText: text"></div> </div> Binding Template
- 50. Repeater HTML UI
- 51. var myBindingList = new WinJS.Binding.List(…); <div data-win-control="WinJS.UI.Repeater" data-win-options="{data: myBindingList}"> <label data-win-bind="textContent: description"></label> <progress data-win-bind="value: value" max="100"></progress> </div> Repeater
- 53. • Create a HUB based application that use Bind to get the rss feed values, show the network client, the DataBinding Power and the interaction with the APP Bar http://code.msdn.microsoft.com/windowsapps/Hub-template-sample-with- 4b70002d The base sample for the demo is • Show Blend being used to costumize HTML Windows Store APPS, another interesting sample would be http://www.codeproject.com/Articles/615819/Hub-Control-in-Blend Code for the demo in http://digitalmindignition/source/hubExample Review Demo
- 55. • Styling changes • Windows Runtime access • Single page model • App sizes and orientations Web vs APP development • Security context and innerHTML • Local and web context • IE11 DOCMODE • Network connectivity and offline experience
- 56. HTML development Review WinJS HTML5 Windows app WinRT
- 57. • Style sheets • Core (promises, class, namespace, etc.) • App model • Data binding WIN JS • Controls • Animations • Utilities A collection of toolkits to make building Windows Store apps fast and easy
- 58. Time to build your Windows apps
- 59. • Windows 8.1 • http://windows.microsoft.com/en-us/windows-8/preview • http://msdn.microsoft.com/en-us/windows/apps/bg182409 • http://channel9.msdn.com/Events/Build/2013/2-165 • http://channel9.msdn.com/Events/Build/2013/2-081 • http://channel9.msdn.com/Events/Build/2013/2-311 • http://channel9.msdn.com/Events/Build/2013/3-156 • http://msdn.microsoft.com/library/windows/apps/bg182410 • http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples • http://www.app-me-up.com/ • Windows 8 & HTML • Programming Windows 8 Apps with HTML, CSS, and JavaScript (http://go.microsoft.com/FWLink/?Linkid=254738) • Desenvolvimento em Windows 8, Luís Abreu, FCA • http://channel9.msdn.com/Series/HTML5-CSS3-Fundamentals-Development-for-Absolute- Beginners References
- 60. Questions Contacts: amarreiros@innovagency.com / amarreiros@gmail.com; @alexmarreiros; http://www.linkedin.com/pub/alexandre- marreiros/8/4b8/a21; www.digitalmindignition.com
- 61. Thanks
Editor's Notes
- #3: About me and feel free to contact if you have some questions, explain that this session is for the ones who never develop Windows store apps based on HTML and for the ones who had developed apps but want to see whats next on windows 8.1 HTML windows store apps development
- #4: For our goal we have create the following agendaAgendaBasic Princeples: showing the basics about Windows 8 model programming an development with HTML
- #5: Per Windows marketing: This statement was made by Antoine Leblond.. At the 12/6 store disclosure event. If you can work that into your closing please share it.
- #6: Give the example of some Windows 8.1 Windows Store APPS based on HTML / CSS development and show how this apps that came with the OS represent a clear investement off Microsoft in HTML.Show Store/ Finance / weather / Travel
- #7: Show that we are also doing something in Portugal using HTML and WhyShow CaixaDirecta, Ana aeroportos, ABola
- #9: Recap the Runtime engine of Windows 8
- #10: Windows 8 app model gives support for some of the most popular and used CSS 3 Features and make that fluid and beauthifull
- #14: Explain the WINJS development Model
- #16: Explain the difference between libraries and that WIN JS 2.0 is full compatible with WINJS 1.0
- #18: Talk about the tools, explain how they can be used together and the place of each one of them
- #28: Litle Demo of a Windows Store APP using just HTML and CSS3, Show lso the manifest
- #29: Explain what WIN JS give us
- #30: Some of the WinJS controls
- #31: Show the way we convert a Div in to a WINJS control, Make th edemo two ways using code behind and using HTML atributes
- #34: Show the way we convert a Div in to a WINJS control, Make th edemo two ways using code behind and using HTML atributes
- #35: What had change in Winjs 2.0
- #57: Explain the WINJS development Model
- #58: Explain what WIN JS give us
- #59: Now it’s your turn to star using all this Knowldge to build your apps, for the new OS, and to help you i will give you some study and hands on references...
- #60: Here you have some references, since as we had seen what has valid for WINJS stills valid for WINJS 2.0 i will give you also some references for Windows 8
- #61: Feel free to ask your questions if you don’t do it now you can always use my contacts, feel free to ask.
- #62: Thank you all for your time was a pleasure to spend this hour with you diging on Windows 8.1 HTML develop, still tuned with the rest of the session more nice things to see next