build polished collection and list apps in html5
Download
Skip this Video
Download Presentation
Build polished collection and list apps in HTML5

Loading in 2 Seconds...

play fullscreen
1 / 39

APP-209T: Build polished collection and list apps in HTML5 - PowerPoint PPT Presentation


  • 153 Views
  • Uploaded on

APP-209T. Build polished collection and list apps in HTML5. Ryan Demopoulos Program Manager Microsoft Corporation. Agenda. Overview of collections in Windows 8 Introduction to the WinJS ListView control Explore how to take advantage of ListView’s best features

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'APP-209T: Build polished collection and list apps in HTML5' - benjamin


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
build polished collection and list apps in html5
APP-209T

Build polished collection and list apps in HTML5

Ryan Demopoulos

Program Manager

Microsoft Corporation

agenda
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
What is a Collection?
  • A collection is a set of related user content
collections are often a major point of focus
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
collections in windows 8
demo

Collections in Windows 8

News

//build/ Conference App

it s what we use for our collections
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
it s the best way to expose a collection
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
how to get started with a listview
How to get started with a ListView

+ layout

+ itemRenderer

dataSource

ListView =

Data

CSS

WinJS.UI.GridLayout

creating your first listview
demo

Creating your first ListView

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

use groups to organize your collection
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 collection1
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

implementing groups
demo

Implementing groups

In PhotoSale, we’ll group the items into price ranges.

semantic zoom fun and function
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
hooking up semantic zoom is simple
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
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.

how to handle snap view
How to handle Snap View
  • Question: What should I do with my ListView if my app is snapped?
how to handle snap view1
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
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();
  • }
  • });
photosale css for handling snap view
PhotoSaleCSS for handling Snap View
  • In homePage.css:
  • @mediascreenand(-ms-view-state: snapped) {
  • .homePagesection[role=main] {
  • margin-left: 20px;
  • }
  • #photoList, #zoomedOutView, #semanticZoom
  • {
  • width: 302px;
  • }
  • }
how to style the listview itself
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 itself1
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
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;
  • }
lots of potential for rich content in items
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
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>
key takeaways
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
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
further reading and documentation
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/

feedback and q uestions http forums dev windows com session f eedback http bldw in sessionfeedback
thank you

Feedback and questions http://forums.dev.windows.com

Session feedbackhttp://bldw.in/SessionFeedback

slide38

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

ad