Build polished collection and list apps in HTML5 12/7/2018 8:48 PM APP-209T Build polished collection and list apps in HTML5 Ryan Demopoulos Program Manager Microsoft Corporation © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Agenda Overview of collections in Windows 8 Introduction to the WinJS ListView control Explore how to take advantage of ListView’s best features You’ll leave with an understanding of how to… Create your first ListView Use powerful features like Grouping and Semantic Zoom Add the finishing touches that will make your collection great

What is a Collection? A collection is a set of related user content

Collections are everywhere

Collections are often a major point of focus A prominent part of the user interface Exposed as a list of items that can be browsed Items are often selectable, actionable

In Windows 8, we wanted to reimagine how collections look and feel.

Collections in Windows 8 12/7/2018 8:48 PM demo Collections in Windows 8 News //build/ Conference App © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Introducing the ListView control

It’s what we use for our collections ListView is part of the Windows Library for JavaScript (WinJS) It’s built in JavaScript Both of the apps I showed you use the WinJS ListView Used in Socialite, Alarms, Tweet@rama, Stocks, and many others…

It’s the best way to expose a collection It has the Windows 8 look & feel built-in It will make your app feel familiar to your users It has powerful features that are easy to use

The ListView is the way to make polished collections in apps for Windows 8.

How to get started with a ListView dataSource + itemRenderer + layout Data CSS WinJS.UI.GridLayout

Creating your first ListView 12/7/2018 8:48 PM demo Creating your first ListView Using Visual Studio, we’ll start a new app called “PhotoSale”, and a ListView to it. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Use groups to organize your collection group header ListView makes it easy to group content Headers that fit in nicely with Metro look It handles little things like getting the spacing “right” group of items

Use groups to organize your collection Two steps to grouping: Provide a groupDataSource Provide a groupRenderer for the header Data itemRenderer CSS Group Data groupRenderer CSS

In PhotoSale, we’ll group the items into price ranges. 12/7/2018 8:48 PM demo Implementing groups In PhotoSale, we’ll group the items into price ranges. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Help users explore your collection with Semantic Zoom

Semantic Zoom in the //build/ app 12/7/2018 8:48 PM demo Semantic Zoom in the //build/ app © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Semantic Zoom Fun, and function It empowers users in a way never before possible, by instantly transporting them to a specific place in the collection It helps users see the full context of the content

Semantic Zoom is a great way to polish to your collection.

Hooking up Semantic Zoom is simple First, you need a groupBy function for your items Then, three main steps: Add a zoomed out ListView Place both ListViews into a Semantic Zoom control Provide a new GroupedItemDataSource

Implementing Semantic Zoom 12/7/2018 8:48 PM demo Implementing Semantic Zoom In our PhotoSale app, we’ll add a zoomed out view, and hook up both ListViews to a Semantic Zoom control. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Finishing touches

How to handle Snap View Question: What should I do with my ListView if my app is snapped?

How to handle Snap View First, determine if your collection is important in Snap View If it’s important, then change your layout from WinJS.UI.GridLayout to WinJS.UI.ListLayout adjust your CSS to shrink the width of the ListView (<= 302px) …and sometimes you’ll need to swap out your itemRenderer In a grouped collection that’s very large, consider showing only the groups in ListLayout, and allow users to “navigate in”

PhotoSale code for handling Snap View In homePage.js: (this does not swap itemRenderer) var photoLV = WinJS.UI.getControl(elements.querySelector("#photoList")); var zoomedOutLV = WinJS.UI.getControl(elements.querySelector("#zoomedOutView")); var mql = window.msMatchMedia("(-ms-view-state: snapped)"); mql.addListener(function (mql) { if (mql.matches) { photoLV.layout = new WinJS.UI.ListLayout(); photoLV.refresh(); zoomedOutLV.layout = new WinJS.UI.ListLayout(); zoomedOutLV.refresh(); } else { photoLV.layout = new WinJS.UI.GridLayout(); photoLV.refresh(); zoomedOutLV.layout = new WinJS.UI.GridLayout(); zoomedOutLV.refresh(); });

PhotoSale CSS for handling Snap View In homePage.css: @media screen and (-ms-view-state: snapped) { .homePage section[role=main] { margin-left: 20px; } #photoList, #zoomedOutView, #semanticZoom { width: 302px;

How to style the ListView itself Question: How can I style the actual ListView, not just the item content? (For example, how can I change the selection color?)

How to style the ListView itself Recall: ListView is built in JavaScript out of DOM elements It attaches CSS classes to it’s elements, so you can style it Just write an appropriate selector, and apply your styling

PhotoSale CSS for styling the selection color In homePage.css: /* Targets the selection background */ .win-listView .win-selection-background { border-top: solid 20px pink; border-right: solid 20px pink; } /* Targets the checkmark "hint" behind the item when you swipe */ .win-listView .win-selection-hint color: pink;

Lots of potential for rich content in items ListView items are just element trees; so the content is limitless You can even add interactive elements

PhotoSale code for an interactive button In homePage.html: <div id="imageOverlayAlbum" data-win-control="WinJS.Binding.Template"> <div class="imageOverlayAlbumGrid"> <img class="imageOverlayAlbumImage" data-win-bind="src: imgSrc"/> <div class="imageOverlayAlbumOverlay"> <div class="imageOverlayAlbumTextAlbum win-itemTextStrong" data-win-bind="innerHTML: price"></div> <div class="imageOverlayAlbumTextArtist win-itemTextLight" data-win-bind="innerHTML: desc"></div> <button class="win-interactive">Click Me</button> </div>

Key takeaways ListView is the best way to expose collections in Win8 It will make your collection look great, and feel familiar It has great features that will make your app stand out Easy-to-use Grouping, Semantic Zoom ListView is built in JavaScript Familiarity of HTML5 / CSS / JavaScript

Related sessions Key Upcoming Session: Sessions to catch on video: [APP-210T] Build data-driven collection and list apps using ListView in HTML5 Sessions to catch on video: [APP-211T] Create Metro style apps quickly with built-in controls [APP-207T] Reach your customers’ devices with one beautiful HTML5 user interface [PLAT-892T] Building great Metro style gallery apps today

Further reading and documentation SDK Samples Documentation Adding ListView controls (ready-to-use itemRenderer templates) Accessing files and data (JavaScript) Learn to build Metro style apps Metro style app development forums Windows Dev Center home: http://dev.windows.com/

thank you Feedback and questions http://forums.dev.windows.com Session feedback http://bldw.in/SessionFeedback

12/7/2018 8:48 PM © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.