Build polished collection and list apps in html5
Download
1 / 39

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 '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


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


Collections in windows 8

demo

Collections in Windows 8

News

//build/ Conference App


App 209t build polished collection and list apps in html5

Introducing theListView control


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

    • Used in Socialite, Alarms, Tweet@rama, Stocks, and many others…


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


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


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.


App 209t build polished collection and list apps in html5

Help users explore your collection with Semantic Zoom


Semantic zoom in the build app

demo

Semantic Zoom in the //build/ app


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


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


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


App 209t build polished collection and list apps in html5

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