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.

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

8. Runtime Recap

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

14. HTML development Review
Windows

15. The new WINJS
WinJS 1.0
Windows 8 app
WinJS 2.0
Windows 8.1 app

17. Tools

18. Visual Studio Templates

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

45. <div id=“mySearchBox" data-win-control="WinJS.UI.SearchBox“></div>
mySearchBox.addEventListener("suggestionsrequested",
suggestionsRequestedHandler);
mySearchBox.addEventListener("querysubmitted",
querySubmittedHandler);
SearchBar

46. Scheduler
Task
Task
Task
Task
Task
Task
Task

47. Scheduler
Task
Task
Task
Task
Task
Task
Task
Task
schedule(func, pri);
schedule(func, pri);
schedule(func, pri);

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