microsoft pt techrefresh html win8.1
DESCRIPTION
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.TRANSCRIPT
Creating your Windows 8.1 App with HTML/JSAlexandre Marreiros
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 ConsultantContacts:[email protected] / [email protected]@alexmarreiroshttp://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21www.digitalmindignition.com
Alexandre Marreiros
Agenda
• Windows Store APPS that use HTMLShowCase
• Basic Principles
• Development tools
• Development Model
• WinJS
• WinJS 2.0
Putting the hands on demos
HTML Based Windows Store Showcase(NATIVE and Portuguese Market)
• Calendar• People• Store• Reaing List• Mail• Finance• Sports• Weather• News• Travel• Skype• And More
Native Microsoft APPS
DEMO
• Caixa Directa
• A Bola
• ANA aeorportos
• Eat o
• Vodafone Quiosque
• MyAuto
• And More
Local Portuguese Store APPS
DEMO
Basic Principles (Lap around HTML 5 Windows Support)
Runtime Recap
Some Popular CSS 3 Features
2D & 3D transforms
Transforms Animations
Transitions
MotionGrid
Flexbox
LayoutGradients
Filter Effects
Text-shadow
GraphicsMulti-column, hyphenation
Pagination
Position float
Content flow
Some Popular HTML 5 Features
Web Sockets Web Workers IndexedDB
Ecmascript 5 File API & Blobs Geolocation
Audio tag Video tag
Touch & keyboard/Mouse SupportPointer events
Zoom regions
Snap Points
Forms
Validation
Input types
Spell checking
Drag & Drop
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
• 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
HTML development Review
WinJS HTML5
Windows app
WinRT
HTML development Review
Windows app
IE rendering engine “Trident”
WinRT
Windows
WinJS
HTML/CSS/JS
The new WINJS
WinJS 1.0
Windows 8 app
WinJS 2.0
Windows 8.1 app
Development Tools
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 StoreHTML project Structure Explained
WINRT library instaciated directly by the app
Windows StoreHTML project Structure Explained
CSS Libraries for the Windows store app
Windows Store App Images
JavaScript
Windows StoreHTML project Structure Explained
App certify
App Manifest
Demo HML/CSS3
• 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
WIN JS
WIN JS Basic Demo
• 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.
• 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 filevar calendarDiv = document.getElementById("calendar");var calendarctrl = new WinJS.UI.DatePicker(calendarDiv);
WIN JS in Detail
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
• 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 ,
itemTemplate: myTemplate ,
layout: { type: WinJS.UI.GridLayout ,
orientation: WinJS.UI.Orientation.horizontal } }”
itemsDraggable: true } “
</div>
List View
• 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="{…}"></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
HUB
Section
Header
Section
Header
Section
Header
Section
Header
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>
Navigation Bar
Place 1 Place 2 Place 3 Place 4 Place 5
<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
SearchBox
<div id=“mySearchBox" data-win-control="WinJS.UI.SearchBox“></div>
mySearchBox.addEventListener("suggestionsrequested", suggestionsRequestedHandler);
mySearchBox.addEventListener("querysubmitted", querySubmittedHandler);
SearchBar
Scheduler
Task
Task
Task
Task
Task
Task
Task
AppCode
WinJSCode
SystemCode
?
Scheduler
Task
Task
Task
Task
Task
Task
Task
Task
AppCode
WinJSCode
SystemCode
schedule(func, pri);
schedule(func, pri);
schedule(func, pri);
Scheduler
setImmediate(foo);var S = WinJS.Utilities.Scheduler;S.schedule(foo, S.Priority.normal);orS.schedule(foo, S.Priority.high);orS.schedule(foo, S.Priority.idle);
<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
Repeater
HTML UI
Binding.List
{color:”red”,size:2}
{color:”green”,size:1}
{color:”orange”,size:2}
{color:”red”,size:3}
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
WinJS Demo
• 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
Recap
• 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
HTML development Review
WinJS HTML5
Windows app
WinRT
• 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
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/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
Questions
Contacts:[email protected] / [email protected]; @alexmarreiros; http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21; www.digitalmindignition.com
Thanks