As one who works in HTML/JS most of the time, it’s exciting to see a number of new WinJS controls and some improvements to existing ones, namely the ListView and the AppBar.

New controls can be found when you scan the WinJS.UI namespace in the updated documentation:

  • BackButton: a cleaner back button implementation that hooks directly into WinJS.Navigation APIs. Previously, most of this functionality was provided through the Visual Studio templates, where a standard <button> was just styled to look like a back button, and the PageControlNavigator code handled the details like calling WinJS.Navigation and handling keyboard events. The BackButton does such things in a more encapsulated way. Refer to the Navigation and navigation history sample.
  • Hub: a significant new control for implementing app home pages with a hub design. In Windows 8, developers had to do this manually, or use a third-party library (Telerik created a hub control, for instance). So now we have a standard implementation. Refer to the HTML Hub Control sample.
  • ItemContainer/Repeater: Together, these provide for a lightweight list implementation, namely where you just need to create a repeating, templated display of data items and don’t need all the interactivity of a ListView. Refer to the HTML ItemContainer sample and the HTML Repeater control sample.
  • NavBar: a standard implementation of a top app bar as used for navigation. Refer to the HTML NavBar Control sample.
  • SearchBox: with in-app search moving to the app canvas instead of the search charm, WinJS adds a control that provides the same kind of search contract interactivity with the app that the charm did. Refer to the SearchBox control sample.

Where the ListView is concerned, many things have changed. I haven’t had a chance to get into the details yet, but one thing I know is that doing a custom layout is much simpler as the whole layout model has changed from a complex custom interface to one based primarily on CSS (called ILayout2). Custom layouts were possible before, but very difficult to implement and it never really got documented–so now they’re easier. For more, see the HTML ListView custom layout sample. Note that we also have some new WinJS layouts, such as CellSpanningLayout, an Orientation option to make the GridLayout (pan vertically), options to add group headers to the ListLayout. There is also drag-and-drop reordering support now–see the HTML ListView reorder and drag and drop sample.

For more details and demonstrations (as well as bits on the AppBar), see Paul Gusmorino’s What’s New in WinJS talk from //build 2013.


Comments are closed