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.
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
4.
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
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
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
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);
33.
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
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);
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
52.
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
54.
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
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
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