WinJS today and tomorrow
Big picture of what’s new
Deep dive on new features
The road ahead
Getting started and next steps
WinJS today and tomorrow
Big picture of what’s new
Deep dive on new features
The road ahead
Getting started and next steps
Phone
WinJS 2.1WinJS 2.0
New!
Phone
WinJS 2.1WinJS 2.0
New!
WinJS
HTML5
Windows app
WinRT
Windows app and/or Windows Phone app
WinJS HTML5 WinRT
Windows 8.1 Windows Phone 8.1Windows app Phone app
WinJS 2.0 Phone WinJS 2.1
http://
Building apps in HTML/JS
Big picture of what’s new
Deep dive on new features
The road ahead
Getting started and next steps
Enable true Phone experiences.
Enable true Phone experiences.
Built with native performance.
Enable true Phone experiences.
Built with native performance.
Share common resources across form factors.
Building apps in HTML/JS
Big picture of what’s new
Deep dive on new features
The road ahead
Getting started and next steps
New controls Improved controls Building blocks
<div data-win-control="WinJS.UI.Pivot"
data-win-options="{ title: 'Page title', selectedIndex: 0 }">
<div data-win-control...
<div id="createAppBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-opti...
<div id="createAppBar" data-win-control="WinJS.UI.AppBar"
data-win-options="{closedDisplayMode:'minimal'}">
<button data-w...
<div id="createAppBar" data-win-control="WinJS.UI.AppBar"
data-win-options="{closedDisplayMode:'minimal'}">
<button data-w...
<div data-win-control="WinJS.UI.ListView" data-win-options="{
itemDataSource: myDataSource,
layout: { type: WinJS.UI.ListL...
<div id="inGroupTemplate" data-win-control="WinJS.Binding.Template" style="display:none">
<div class="groupHeader" data-wi...
var groups = [
{ title: "#", count: 0 }, { title: "A", count: 2 }, // ...
{ title: "Z", count: 0 }
];
for (var i = 0; i < ...
Turnstile Slide
Continuum backward in
Continuum backward out
Continuum forward in
Continuum forward out
Slide down
Slide left in
Slide lef...
var incoming; // A single element or an array of elements
WinJS.UI.Animation.turnstileForwardIn(incoming);
WinJS.UI.Animat...
var listview = document.getElementById("listview").winControl;
var items = [];
for (var i = listview.indexOfFirstVisible; ...
<!—
At runtime, ui-themed.css resolves to ui-themed.light.css or ui-
themed.dark.css based on the user’s theme setting.
Th...


var currentFontStyle = null;
var uiSettings = new Windows.UI.ViewManagement.UISettings();
uiSettings.addEventListener("tex...
Building apps in HTML/JS
Big picture of what’s new
Deep dive on new features
The road ahead
Getting started and next steps
Phone
PC
2012 2013 2014 2015
WinJS1.0 WinJS2.0
Phone.WinJS2.1
WinJS3.0
WinJS UI Modules:
ListView, FlipView, Flyout, Tooltip, etc..
WinJS SPA
Modules:
Promises, Data
binding,
Scheduler,
Fragmen...




<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="app" ng-controller="AppController">
<head>
<meta...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Knockout-WinJS</title>
<!-- WinJS references omitted -->
<sc...






WinJS 1.0 WinJS 2.0
WinJS Xbox
1.0
WinJS Phone
2.1
//build/
S1
• Desktop/Mobile
Browsers
• Modularization
• Minification
S...
Building apps in HTML/JS
Big picture of what’s new
Deep dive on new features
The road ahead
Getting started and next steps
New controls Improved controls Building blocks
 Microsoft.Phone.WinJS.2.1






Add talks
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
Próxima SlideShare
Cargando en…5
×

What’s new in WinJS? Windows Phone 8.1 and the road ahead

1.196 visualizaciones

Publicado el

Publicado en: Tecnología
  • Please give simple full Semantic zoom jump lists.
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Sé el primero en recomendar esto

What’s new in WinJS? Windows Phone 8.1 and the road ahead

  1. 1. WinJS today and tomorrow Big picture of what’s new Deep dive on new features The road ahead Getting started and next steps
  2. 2. WinJS today and tomorrow Big picture of what’s new Deep dive on new features The road ahead Getting started and next steps
  3. 3. Phone WinJS 2.1WinJS 2.0 New!
  4. 4. Phone WinJS 2.1WinJS 2.0 New!
  5. 5. WinJS HTML5 Windows app WinRT Windows app and/or Windows Phone app
  6. 6. WinJS HTML5 WinRT Windows 8.1 Windows Phone 8.1Windows app Phone app WinJS 2.0 Phone WinJS 2.1
  7. 7. http://
  8. 8. Building apps in HTML/JS Big picture of what’s new Deep dive on new features The road ahead Getting started and next steps
  9. 9. Enable true Phone experiences.
  10. 10. Enable true Phone experiences. Built with native performance.
  11. 11. Enable true Phone experiences. Built with native performance. Share common resources across form factors.
  12. 12. Building apps in HTML/JS Big picture of what’s new Deep dive on new features The road ahead Getting started and next steps
  13. 13. New controls Improved controls Building blocks
  14. 14. <div data-win-control="WinJS.UI.Pivot" data-win-options="{ title: 'Page title', selectedIndex: 0 }"> <div data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'First section' }"> <p> Content - Item One </p> </div> <div data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Second section' }"> <p> Content - Item Two </p> </div> <div data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Third section' }"> <p> Content - Item Three </p> </div> </div>
  15. 15. <div id="createAppBar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd', label:'Add', icon:'add'}"> </button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove'}"> </button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'selection'}"> </button> </div>
  16. 16. <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{closedDisplayMode:'minimal'}"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd', label:'Add', icon:'add'}"> </button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove'}"> </button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'selection'}"> </button> </div>
  17. 17. <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{closedDisplayMode:'minimal'}"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd', label:'Add', icon:'add'}"> </button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove'}"> </button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'selection'}"> </button> </div>
  18. 18. <div data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myDataSource, layout: { type: WinJS.UI.ListLayout }, itemTemplate: myItemTemplate, selectionMode: 'multi', tapBehavior: 'toggleSelect' }"> </div>
  19. 19. <div id="inGroupTemplate" data-win-control="WinJS.Binding.Template" style="display:none"> <div class="groupHeader" data-win-bind="innerText: title"></div> </div> <div id="outItemTemplate" data-win-control="WinJS.Binding.Template" style="display:none"> <div class="groupHeader" data-win-bind="style.backgroundColor: color; innerText: title"></div> </div> <div style="width: 480px; height: 640px" id="sezoRoot" data-win-control="WinJS.UI.SemanticZoom"> <div style="width: 480px; height: 640px" id="zoomedInLV" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate: inItemTemplate, groupHeaderTemplate: inGroupTemplate, layout: {type: WinJS.UI.ListLayout}}"> </div> <div style="width: 480px; height: 640px; padding-top: 60px“ id="zoomedOutLV" data-win-control="WinJS.UI.ListView“ data-win-options=" {itemTemplate: outItemTemplate, layout: {type: WinJS.UI.GridLayout}}"> </div> </div>
  20. 20. var groups = [ { title: "#", count: 0 }, { title: "A", count: 2 }, // ... { title: "Z", count: 0 } ]; for (var i = 0; i < groups.length; i++) { outItems.push({ title: groups[i].title, color: (groups[i].count ? "#0094ff" : "#AAAAAA"), mapsTo: (groups[i].count ? inItems.length : -1) }); function inToOutMappingFunction(item) { return { groupIndexHint: item.data.mapsTo }; } function outToInMappingFunction(item) { return { firstItemIndexHint: item.data.mapsTo }; } outLV.addEventListener("iteminvoked", function (e) { var item = data.zoomedOut.getItem(e.detail.itemIndex); if (item.data.mapsTo === -1) e.preventDefault(); });
  21. 21. Turnstile Slide
  22. 22. Continuum backward in Continuum backward out Continuum forward in Continuum forward out Slide down Slide left in Slide left out Slide right in Slide right out Slide up Turnstile backward in Turnstile backward out Turnstile forward in Turnstile forward out
  23. 23. var incoming; // A single element or an array of elements WinJS.UI.Animation.turnstileForwardIn(incoming); WinJS.UI.Animation.turnstileForwardOut(incoming); WinJS.UI.Animation.turnstileBackwardIn(incoming); WinJS.UI.Animation.turnstileBackwardOut(incoming); WinJS.UI.Animation.slideUp(incoming); WinJS.UI.Animation.slideDown(incoming);
  24. 24. var listview = document.getElementById("listview").winControl; var items = []; for (var i = listview.indexOfFirstVisible; i < listview.indexOfLastVisible + 1; i++) { items.push(listview.elementFromIndex(i).parentNode.parentNode); } WinJS.UI.Animation.turnstileForwardIn(items);
  25. 25. <!— At runtime, ui-themed.css resolves to ui-themed.light.css or ui- themed.dark.css based on the user’s theme setting. This is part of the MRT resource loading functionality. --> <link href="/css/ui-themed.css" rel="stylesheet" /> <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script> <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
  26. 26.  
  27. 27. var currentFontStyle = null; var uiSettings = new Windows.UI.ViewManagement.UISettings(); uiSettings.addEventListener("textscalefactorchanged", function () { if (!currentFontStyle) { currentFontStyle = document.createElement("style"); currentFontStyle.type = "text/css"; document.head.appendChild(currentFontStyle); } function getFontSize(oldSize) { return oldSize + Math.max(-Math.E * Math.log(oldSize) + 18, 0) * (uiSettings.textScaleFactor - 1); } currentFontStyle.innerHTML = ".title {font-size: " + getFontSize(15) + "pt;}" + ".contents {font-size: " + getFontSize(12) + "pt;}"; });
  28. 28. Building apps in HTML/JS Big picture of what’s new Deep dive on new features The road ahead Getting started and next steps
  29. 29. Phone PC 2012 2013 2014 2015 WinJS1.0 WinJS2.0 Phone.WinJS2.1 WinJS3.0
  30. 30. WinJS UI Modules: ListView, FlipView, Flyout, Tooltip, etc.. WinJS SPA Modules: Promises, Data binding, Scheduler, Fragments, Declarative controls, etc… AngularJS KnockoutJS EmberJS Co-exist with other UI toolkits (e.g. Bootstrap) UI.js Base.js AngularJS Other UI toolkits (e.g. Bootstrap)
  31. 31.    
  32. 32. <!DOCTYPE html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="app" ng-controller="AppController"> <head> <meta charset="utf-8" /> <title>Angular-WinJS</title> <!-- WinJS references omitted --> <script src="/js/lib/jquery.js"></script> <script src="/js/lib/angular.js"></script> <script src="/js/lib/angular-winjs.js"></script> <!-- Project references omitted --> </head> <body> Hello, {{name}}. Your current rating is: {{rating}}.<br /> <input type="text" ng-model="rating" /><br /> <win-rating max-rating="5" user-rating="rating"></win-rating> </body> </html>
  33. 33. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Knockout-WinJS</title> <!-- WinJS references omitted --> <script src="/js/knockout-3.0.0.debug.js"></script> <script src="/js/knockout-winjs.js"></script> <!-- Project references omitted --> </head> <body> Hello, <span data-bind="text: name"></span>. Your current rating is: <span data-bind="text: userRating"></span>.<br /> <input type="text" data-bind="value: userRating, valueUpdate: 'afterkeydown'" /><br /> <div data-bind="winRating: {userRating: userRating}"></div> </body> </html>
  34. 34.      
  35. 35. WinJS 1.0 WinJS 2.0 WinJS Xbox 1.0 WinJS Phone 2.1 //build/ S1 • Desktop/Mobile Browsers • Modularization • Minification S0 • Git, Grunt, Less • Open Source S2 • Consolidation • Devices: WebView • CSS Theming S3 • New Features • Interoperability • Adaptive Apps
  36. 36. Building apps in HTML/JS Big picture of what’s new Deep dive on new features The road ahead Getting started and next steps
  37. 37. New controls Improved controls Building blocks
  38. 38.  Microsoft.Phone.WinJS.2.1   
  39. 39.   
  40. 40. Add talks

×