Build polished collection and list apps in HTML5

1. APP-209T Build polished collection and list apps in HTML5 Ryan Demopoulos Program Manager Microsoft Corporation

2. 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

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

4. Collections are everywhere

6. 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

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

8. demo Collections in Windows 8 News //build/ Conference App

9. Introducing theListView control

10. 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…

11. 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

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

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

14. demo Creating your first ListView Using Visual Studio, we’ll start a new app called “PhotoSale”, and a ListView to it.

15. 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

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

17. demo Implementing groups In PhotoSale, we’ll group the items into price ranges.

18. Help users explore your collection with Semantic Zoom

19. demo Semantic Zoom in the //build/ app

20. Semantic ZoomFun, 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

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

22. 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

23. 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.

24. Finishing touches

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

26. 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”

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

28. PhotoSaleCSS for handling Snap View • In homePage.css: • @mediascreenand(-ms-view-state: snapped) { • .homePagesection[role=main] { • margin-left: 20px; • } • #photoList, #zoomedOutView, #semanticZoom • { • width: 302px; • } • }

29. 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?)

30. 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

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

32. 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

33. 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> • <buttonclass="win-interactive">Click Me</button> • </div> • </div> • </div>

34. 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

35. Related sessions • Key Upcoming Session: • [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

36. 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/

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

38. © 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.