0
Creating your Windows 8.1
App with HTML/JS
Alexandre Marreiros
About
What i do:
CTO @ Innovagency
Technical Trainer, Speaker & Consultant as Self Employee
Teacher @ EDIT
Software Develo...
Agenda
• Windows Store APPS that use HTMLShowCase
• Basic Principles
• Development tools
• Development Model
• WinJS
• Win...
• Calendar
• People
• Store
• Reaing List
• Mail
• Finance
• Sports
• Weather
• News
• Travel
• Skype
• And More
Native Mi...
• Caixa Directa
• A Bola
• ANA aeorportos
• Eat o
• Vodafone Quiosque
• MyAuto
• And More
Local Portuguese Store APPS
Runtime Recap
Some Popular CSS 3 Features
Some Popular HTML 5
Features
Web vs APP development
Feature Local context Web context
Windows Run-time Yes No
Windows Library for Javascript Yes No
Ext...
• Styling changes
• Windows Runtime access
• Single page model
• App sizes and orientations
Web vs APP development
• Secur...
HTML development Review
WinJS HTML5
Windows app
WinRT
HTML development Review
Windows
The new WINJS
WinJS 1.0
Windows 8 app
WinJS 2.0
Windows 8.1 app
Tools
Visual Studio Templates
Visual Studio Templates
A single Page APP with the struture of a Windows Store APP, no Controls or
Layout predefined
Visual Studio Templates
A project with items grouped in a grid and the details of each item.
Visual Studio Templates
A project to navigate between Grouped Items and get the detail from each
item in a group
Visual Studio Templates
A project for a Windows Store APP that implements the HUB navigation
Pattern
Visual Studio Templates
A project for a Windows Store APP that have a predefined Navigation
controls
Windows Store
HTML project Structure
Explained
WINRT library instaciated directly by
the app
Windows Store
HTML project Structure
Explained
CSS Libraries for the Windows store
app
Windows Store App Images
JavaScript
Windows Store
HTML project Structure
Explained
App certify
App Manifest
• Style sheets
• Core (promises, class, namespace,
etc.)
• App model
• Data binding
WIN JS
• Controls
• Animations
• Utili...
WIN JS
• Show how to use WinJS Controls in a declarative manner and a
imperative manner
Review Demo
<div id="calendar" data-win-c...
• Show how to use WinJS Controls in a declarative manner and a
imperative manner
Review Demo
 Imperative Way
In the HTML ...
What’s new on WinJS 2.0
Improved Controls
• List view
• App bar
New Controls
• Hub
• Navigation bar
• Search box
• Back bu...
• Native layout performance
• Highly flexible presentation
• Improved keyboarding
• Drag-n-drop
List View
• New Buil-in Layouts
List View Highly flexible
presentation
<div id=“myListView“
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: myData.dataSource ,
itemTemp...
• Scaling to Window Size
• Keyboarding
• Custom Content
APP Bar
<div data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-
options="{…}"></butto...
HUB
Header Header Header Header
HUB
<div data-win-control="WinJS.UI.Hub">
<div data-win-control="WinJS.UI.HubSection" data-win-options="{header: „Foo'}">
...
Navigation Bar
<div data-win-control="WinJS.UI.NavBar">
<div data-win-control="WinJS.UI.NavBarContainer">
<div data-win-control="WinJS.UI...
SearchBox
<div id=“mySearchBox" data-win-control="WinJS.UI.SearchBox“></div>
mySearchBox.addEventListener("suggestionsrequested",
su...
Scheduler
Task
Task
Task
Task
Task
Task
Task
Scheduler
Task
Task
Task
Task
Task
Task
Task
Task
schedule(func, pri);
schedule(func, pri);
schedule(func, pri);
Scheduler
setImmediate(foo);
var S = WinJS.Utilities.Scheduler;
S.schedule(foo, S.Priority.normal);
or
S.schedule(foo, S.P...
<div data-win-control="WinJS.Binding.Template">
<img src="#" data-win-bind="src: imageUrl; alt: tile" />
<div data-win-bin...
Repeater
HTML UI
var myBindingList = new WinJS.Binding.List(…);
<div data-win-control="WinJS.UI.Repeater" data-win-options="{data:
myBindin...
• Create a HUB based application that use Bind to get the rss feed values,
show the network client, the DataBinding Power ...
• Styling changes
• Windows Runtime access
• Single page model
• App sizes and orientations
Web vs APP development
• Secur...
HTML development Review
WinJS HTML5
Windows app
WinRT
• Style sheets
• Core (promises, class, namespace,
etc.)
• App model
• Data binding
WIN JS
• Controls
• Animations
• Utili...
Time to build your Windows
apps
• Windows 8.1
• http://windows.microsoft.com/en-us/windows-8/preview
• http://msdn.microsoft.com/en-us/windows/apps/bg1824...
Questions
Contacts:
amarreiros@innovagency.com / amarreiros@gmail.com; @alexmarreiros; http://www.linkedin.com/pub/alexand...
Thanks
Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1
Upcoming SlideShare
Loading in...5
×

Microsoft PT TechRefresh html win8.1

1,471

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,471
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
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
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×