DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Join us tomorrow at 1 PM EST: "3-Step Approach to Comprehensive Runtime Application Security"
Save your seat

Playing with the ListView Layout Generator

Mariano Vazquez user avatar by
Mariano Vazquez
·
Dec. 07, 12 · Interview
Like (0)
Save
Tweet
Share
7.26K Views

Join the DZone community and get the full member experience.

Join For Free

The past months I've been working on creating new, exciting Windows Store apps, using the Windows Library for Javascript, WinJS. Fortunately, since most of my work is web-related, not to mention all the node.js projects I've been involved in (thanks @woloski!) the adaptation wasn't so hard.

But leaving the code aside, one of the most exciting challenges about Windows 8 apps is the UI/UX (after all, we're creating touch-interactive applications). Furthermore, they have its own way of organizing and displaying the content. So you should be very meticulous on topics like what and how (much) to show (there are some useful guidelines about this on msdn, like this one).

The guys up there seem to be aware of this, and they developed some controls that do most of the job for us. In particular, I'm going to focus on the WinJS.UI.ListView object. First of all, you need to know that it's designed to work with square containers, named tiles. You can find a set of predefined templates that fit some of the basic scenarios. But if you want something different, like multi-size tiles for example, you need to perform some adjustments in the ListView if you want to render all of them properly.

ListView layout generator

Note: you can find the source code here

I've created a Windows Store app that can help you for designing ListView layouts (specifically GridLayouts). It still needs a lot of work, but the basic functionality is there. Currently, it supports the following ListView modifications:

  • You can enable multi-sized items in the layout
  • You can modify the max-rows property
  • You can set custom width and height for a particular group of items
  • New! You can add several item styles at once (separated by a comma)
  • New! Using item no. and group.no, you can style a single item in the list
  • New! Use asterisk/star to add styles for all the items or groups

I'm going to be updating the app based on the feedback I received these days. Some new things I'm going to implement and you'll see soon are: an export button (so you can easily get the css code), a way to identify a particular item in the list, add several styles at once, etc.

Basic usage

Once the app is launched you'll see a page with several items, separated in three different groups. Each item contains a specific css class, so you can style it if you want using CSS. To avoid refreshing the app every time you update the styles, you edit the ListView by clicking the Edit ListView command in the appBar (right-click on the app to display it). A flyout will pop-up, where you can update the ListView settings and add styles for the items. Some key points here:

  • If you want to display a multi-size layout, activate the cell spanning switch and modify the cellWidth and cellHeight values.
  • If you want to add item styles, type the item number in the first input and the desired width and height, then press the add icon (e.g. Item 0 | 322 | 100)
  • When you're ready, press the Update layout button to see the changes in the ListView.

some example of what you may get

For now, you can play with the values and learn what they are for. In the few next days, I'll write a new post explaining them in detail. Stay tuned!

app

Published at DZone with permission of Mariano Vazquez, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Mr. Over, the Engineer [Comic]
  • Distributed Stateful Edge Platforms
  • Last Chance To Take the DZone 2023 DevOps Survey and Win $250! [Closes on 1/25 at 8 AM]
  • How To Validate Three Common Document Types in Python

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: