Microsoft PT TechRefresh html win8.1

1,757 views

Published on

A presentation that take place in a Microsoft Portugal Event,

The main propouse of this session was to show the development model of Windows 8.1 store apps in HTML for the ones who already know Windows 8 HTML dev and for the one who never had developed a HTML based Windows store app.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,757
On SlideShare
0
From Embeds
0
Number of Embeds
271
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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
  • For our goal we have create the following agendaAgendaBasic Princeples: showing the basics about Windows 8 model programming an development with HTML
  • 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.
  • 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
  • Show that we are also doing something in Portugal using HTML and WhyShow CaixaDirecta, Ana aeroportos, ABola
  • Recap the Runtime engine of Windows 8
  • Windows 8 app model gives support for some of the most popular and used CSS 3 Features and make that fluid and beauthifull
  • Explain the WINJS development Model
  • Explain the difference between libraries and that WIN JS 2.0 is full compatible with WINJS 1.0
  • Talk about the tools, explain how they can be used together and the place of each one of them
  • Litle Demo of a Windows Store APP using just HTML and CSS3, Show lso the manifest
  • Explain what WIN JS give us
  • Some of the WinJS controls
  • Show the way we convert a Div in to a WINJS control, Make th edemo two ways using code behind and using HTML atributes
  • Show the way we convert a Div in to a WINJS control, Make th edemo two ways using code behind and using HTML atributes
  • What had change in Winjs 2.0
  • Explain the WINJS development Model
  • Explain what WIN JS give us
  • 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...
  • 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
  • Feel free to ask your questions if you don’t do it now you can always use my contacts, feel free to ask.
  • 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
  • Microsoft PT TechRefresh html win8.1

    1. 1. Creating your Windows 8.1 App with HTML/JS Alexandre Marreiros
    2. 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. 3. Agenda • Windows Store APPS that use HTMLShowCase • Basic Principles • Development tools • Development Model • WinJS • WinJS 2.0 Putting the hands on demos
    4. 4. • Calendar • People • Store • Reaing List • Mail • Finance • Sports • Weather • News • Travel • Skype • And More Native Microsoft APPS
    5. 5. • Caixa Directa • A Bola • ANA aeorportos • Eat o • Vodafone Quiosque • MyAuto • And More Local Portuguese Store APPS
    6. 6. Runtime Recap
    7. 7. Some Popular CSS 3 Features
    8. 8. Some Popular HTML 5 Features
    9. 9. 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
    10. 10. • 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
    11. 11. HTML development Review WinJS HTML5 Windows app WinRT
    12. 12. HTML development Review Windows
    13. 13. The new WINJS WinJS 1.0 Windows 8 app WinJS 2.0 Windows 8.1 app
    14. 14. Tools
    15. 15. Visual Studio Templates
    16. 16. Visual Studio Templates A single Page APP with the struture of a Windows Store APP, no Controls or Layout predefined
    17. 17. Visual Studio Templates A project with items grouped in a grid and the details of each item.
    18. 18. Visual Studio Templates A project to navigate between Grouped Items and get the detail from each item in a group
    19. 19. Visual Studio Templates A project for a Windows Store APP that implements the HUB navigation Pattern
    20. 20. Visual Studio Templates A project for a Windows Store APP that have a predefined Navigation controls
    21. 21. Windows Store HTML project Structure Explained WINRT library instaciated directly by the app
    22. 22. Windows Store HTML project Structure Explained CSS Libraries for the Windows store app Windows Store App Images JavaScript
    23. 23. Windows Store HTML project Structure Explained App certify App Manifest
    24. 24. • 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
    25. 25. WIN JS
    26. 26. • 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.
    27. 27. • 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);
    28. 28. 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
    29. 29. • Native layout performance • Highly flexible presentation • Improved keyboarding • Drag-n-drop List View
    30. 30. • New Buil-in Layouts List View Highly flexible presentation
    31. 31. <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
    32. 32. • Scaling to Window Size • Keyboarding • Custom Content APP Bar
    33. 33. <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
    34. 34. HUB Header Header Header Header
    35. 35. 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>
    36. 36. Navigation Bar
    37. 37. <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
    38. 38. SearchBox
    39. 39. <div id=“mySearchBox" data-win-control="WinJS.UI.SearchBox“></div> mySearchBox.addEventListener("suggestionsrequested", suggestionsRequestedHandler); mySearchBox.addEventListener("querysubmitted", querySubmittedHandler); SearchBar
    40. 40. Scheduler Task Task Task Task Task Task Task
    41. 41. Scheduler Task Task Task Task Task Task Task Task schedule(func, pri); schedule(func, pri); schedule(func, pri);
    42. 42. 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);
    43. 43. <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
    44. 44. Repeater HTML UI
    45. 45. 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
    46. 46. • 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
    47. 47. • 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
    48. 48. HTML development Review WinJS HTML5 Windows app WinRT
    49. 49. • 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
    50. 50. Time to build your Windows apps
    51. 51. • 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
    52. 52. Questions Contacts: amarreiros@innovagency.com / amarreiros@gmail.com; @alexmarreiros; http://www.linkedin.com/pub/alexandre- marreiros/8/4b8/a21; www.digitalmindignition.com
    53. 53. Thanks

    ×