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
Upcoming SlideShare
Loading in …5
×

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

1,190 views

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Please give simple full Semantic zoom jump lists.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
1,190
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
13
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • Thanks for coming to today’s session.
    My name is Paul Gusmorino and I work on the developer platform in the operating systems group.
    I’m excited to be here on behalf of the whole team back in Redmond to get to talk with you all about what’s new in WinJS.
    And as you saw announced in the keynote this morning, there have been some interesting developments on this front… 

    As a quick show of hands…
    Any web developers… currently write web sites or web apps?
    Anyone building Windows store apps today?
    Anyone using WinJS?
    Anyone building Phone apps today?
    Great. This session should have stuff for all of you whether you are new to WinJS or not, and whether you are new to Phone or not.
  • You can use WinJS today to make apps for Windows desktops, laptops, tablets, convertibles, etc.
  • You can use WinJS today to make apps for Windows desktops, laptops, tablets, convertibles, etc.
  • You can use WinJS today to make apps for Windows desktops, laptops, tablets, convertibles, etc.
  • Build compelling native Phone apps with HTML
    All controls redesigned to match Phone UX
  • Low-end form factor
    Performance requirements and footprints
    Memory per app process
    App launch time

    All goals met or exceeded in lab
    Apps < 150MB commit memory per app process
    No app in lab exceeded 30MB commit
    Total memory never exceeded 85MB
    Apps need to launch within three seconds
    Goal met
  • All core capabilities and utilities are available
    Controls migrated and improved
    New platform specific features
  • Seamless cross-platform development through shared resources
  • Exclusive to Phone
    Smooth transition animations
    Lock capability
    Programmatic navigation
  • Launch Pivot SDK Sample app (SDKTemplateV4Phone)
    Go to 3) Pivot with a multi-select LIstView
    Swipe ahead
    Swipe back
    Click the next header
    Swipe back
    Scroll up/down in the listview – you can have arbitrary content
    Stop at a position with an item cutoff
    Say: you can preserve context. See how I kept the item cutoff
    Swipe ahead then back and show it was preserved
    Rotate the screen to landscape – it even works with rotation
    Swipe to the right (show the previous section)
    Click the header after the next (two ahead)
    A very lovely and complete high-quality implementation for you!
  • Taken from the Pivot SDK Sample app

    selectedIndex of 0 displays First section by default
  • WinRT integration with Splash App bar
    Same set of APIs between platforms
    New Phone-exclusive compact/minimal state
  • Launch AppBar SDK Sample app (AppBar control JS sample)

    APPBAR STATES
    Go to 1) Create an AppBar
    Note minimal state app bar (only has three dots showing)
    Tap the three dots
    Note the additional menu commands (text only, no icons permitted)
    Tap out of focus
    Hit the hardware back button
    Go to 5) AppBar with ListView
    Note compact state app bar (only has buttons and three dots showing)
    Only four primary commands allowed
    Tap the three dots
    Use hardware back button to return

    ROTATE
    Rotate screen
    Note the icons rotate
    Tap the three dots
    Note the appropriately oriented additional commands and button label

  • Same API as on PC…

    (next slide for differences on Phone)
  • Next slide to highlight key code
  • Section property is reinterpreted (value of “selection” means it’s a menu list item)

    Note closedDisplayMode property (minimal and compact values).

    Taken from AppBar SDK Sample App
  • section: selection means left alignment on PC, additional menu on Phone
    closedDisplayMode has no effect on PC

    Plug Josh’s talk on writing a universal app?
  • Open Controls_AppBar.sln
    Point out how the universal template is broken into 3: Windows, Phone, and Shared
    Controls_AppBar.Shared > html > create-appbar.html
    Note the AppBar code shown in previous slide
    Modify the closedDisplayMode to ‘compact’
    Changes on Phone, PC fails silently
    Modify the ‘Edit’ command to have section: ‘selection’
    ‘Edit’ goes into the additional menu commands on Phone
    ‘Edit’ moves to the left on PC
  • For those coming from Silverlight, known as the long list selector.

    New selection mode
    New touch target
    Same set of APIs between platforms

    Virtualization

    New selection mode is exclusive to Phone

    New touch target: left margin of screen
  • (Pre-launch: SDKTemplateV4Phone, AppBar control JS sample, and zJSSocialite)

    SELECTION
    Launch Pivot SDK app (SDKTemplateV4Phone)
    Scroll quickly down the page
    Swipe to the left (show next section), then back again to the right
    Note the feathered animation
    Tap and hold and note the tilting response animation
    Click on the left margin of any line item
    Unselect the only checkbox (watch the checkboxes disappear)

    Launch AppBar SDK app (AppBar control JS sample)
    Go to the app bar and click select
    Click a few checkboxes
    Hit the hardware back button to hide the checkboxes

    TILT
    Socialite Home (zJSSocialite)

    GROUPING
    Socialite Friends


  • Need to set selectionMode to ‘multi’ and tapBehavior to ‘toggleSelect’.

    Verbally say:
    Additional code will have to be added in JavaScript and CSS to enable the full functionality, available in the Pivot SDK Sample.
  • Adapted to Phone experience
    Built-in reader board animation
    Dimmed background
    Removed pinch gesture and mouse button

    Semantic zoom adapted to Phone experience
    Same set of APIs between platforms
    Easy for developers to hook up the experience
  • Process in video:
    Taps [a] header
    Selects [r] tile
    Taps [r] header
    Selects [b] tile
    Scrolls to beginning


    Talk to:
    Built-in reader board animation
    Dimmed background
    Removed pinch gesture and mouse button
  • See the SeZo on Phone SDK Sample to see how to create visuals that map to JumpList for the zoomed out view.

    On screen:
    #inGroupTemplate is the header tile in the grouped list

    Appear 1:
    #outItemTemplate is the tile in the Jump List

    Appear 2:
    The semantic zoom implementation
  • On screen:
    Alphabet defined for jump list

    Appear 1:
    Added an item for each thing in the groups array, set the bg color for each item to blue/gray (depending on count), made note of index mapping

    Appear 2:
    Use the index mapping from the previous step to create mapping functions for SeZo to use

    Appear 3:
    Ensure clicking an empty group does nothing

    See the SeZo on Phone SDK Sample to see how to create visuals that map to JumpList for the zoomed out view.
  • Phone core signature animations available
    Windows animations also available
  • New Phone-specific animations highlighted in blue
  • Examples of entrance animations. Argument can be a single element or an array of elements

    Continuum and slide(Right/Left)(In/Out) animations slightly more complicated (additional arguments: need to pass page object, root or content elements, etc.)
  • ListView “Feather” Turnstile animation
  • Controls tailored for both dark and light experience
    Ability to match user’s Phone theme
  • Open the Intrinsic Controls app (“IntrinsicControls”)

    Highlight the different appearance (border colors, font colors, etc.). Accent color remains the same.

    If you choose to set ui-themed.css, it is your responsibility to test for both themes (i.e. don’t force colors)
  • Taken from the Visual Studio template for a new Phone app in default.html

    Note the new /css/ui-themed.css file path.
  • Pre-launch: TextEnlargement app

    Hooks up to WinRT APIs. Listen for the event to fire.

    Go to Settings > Ease of Access and make sure the “Text size” slider is all the way to the left
    Hold the back button and close the Settings app process
    Open the TextEnlargement app (“TextEnlargement”)
    Note the current size of the title and description of each line item
    Hold the back button and switch to Ease of Access
    Move the slider up about halfway
    Hold the back button and return to TextEnlargement
    Note the new sizes for the titles and descriptions
    By listening for the event to fire (“textscalefactorchanged”), you do not need to refresh the app to see the changes
  • Process:
    Listen for textscalefactorchanged event to fire.
    Dynamically add new style element.
    Calculate new sizes given the original size and the textScaleFactor property.
    Dynamically insert new sizes into classes, opt-in.

    No need to reload app. Changes automatic.
  • Shim Layers: Worked with the community to create shim layers. Enables ability to use other popular libraries in tandem with WinJS

    Loosely connected: Specifically designed to be loosely connected toolkits

    Strictly layered: The declarative syntax for data binding and controls is strictly layered
    Delivered as two files today for ease in packaged apps

    Pay-for-play
  • WinJS controls show up as directives in this Angular app

    Simple rating control with two-way data binding
  • Same exact functionality as the Angular code, but using Knockout
  • Open WinJS-Interop.sln on PC

    ANGULAR-WINJS
    Set startup project to Angular-WinJS
    Open default.html and reveal the code shown in the previous slide
    Go to js/default.js to show the controller
    Run app on local machine
    Modify values using rating control and textbox

    KNOCKOUT-WINJS
    Set startup project to Knockout-WinJS
    Open default.html and reveal the code shown in the previous slide
    Go to js/default.js to show the control model
    Run app on local machine
    Show exact same functionality
  • Open source: Apache 2.0 license through assignment at Microsoft Open Technologies Hub

    Cross-platform: Started by working well with other frameworks (i.e. Angular, Knockout).
    Now we intend to bring WinJS to other browsers and devices, including Chrome, Firefox, iOS, and Android.
    Beginning by enabling some WinJS features to run on the web

    GitHub: Source code available now. We encourage you to check it out, send feedback, and contribute
    Grunt: Build infrastructure has been moved over to leverage the JavaScript Task Runner
    Less: CSS files are now being generated with the CSS pre-processor
    QUnit: Unit tests are now runnable
  • We are at S0, the present. Now for the future…

    S1
    Base Infrastructure - Complete any necessary internal tool migrations to have WinJS working on web tools
    Browser Support - Ensure that WinJS can run reliably in Desktop and Mobile Browsers (SPA and UI controls)
    Modularization – Allow developers to load in components of WinJS, rather than having to include every component
    Minification – Provide optimized versions of WinJS for web delopyment
    S2
    Finish Desktop and Mobile Browser Support – Fill out our graded browser support
    CSS Theming – Refactor CSS to allow for more flexibility with UI theming
    Consolidation – Consolidate functionality between WinJS 2.1, 2.1, and 1.0 (Xbox) into one main version (reconcile UX)
    Devices – Focus on hosting in WebView environments (e.g. Cordova)
    S3
    New Features – SPA utilities and new UI controls
    Interoperability – Build interop utilities to work with other popular JS libraries
    Adaptive Apps – SPA utilities (and possibly UI controls) that help developers span their UX across device types and platforms
    Watch List
    TypeScript
    Apache Cordova
    Web Components
    ECMAScript 6
  • Get involved: provide feedback on our check-ins, bug fixes, and new features; submit contributions; build and test products using the most up-to-date versions
  • 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

    ×