WinJS 4.0 preview version announced: universal UX, integration with AngularJS, updated ListView
- Transfer
We are pleased to present you a preview version of the Windows library for JavaScript 4.0 (WinJS 4.0). In our previous release (WinJS 3.0), we focused on cross-browser compatibility. With WinJS 4.0, we began to add new features so that the library continues to be a good framework for developing both Windows-based applications and web-based applications.
In preparation for this release, we focused on community feedback and your add-ons, which helped us focus around several critical areas:
We are happy to share this preliminary version with you. If you have any difficulties, please send us a request for inclusion or report a problem through GitHub.
You can start using the WinJS 4.0 preview today through your favorite package manager (Bower, npm or NuGet), a link to the CDN, by downloading the Zip archive from our website or by cloning the repository to build your own copy on GitHub.
Further in the article we will tell more about the focal areas mentioned above. We hope you enjoy the new features in WinJS 4.0 as well.
Form factors for computing devices continue to evolve. Successful application experience within a modern ecosystem includes, among other things:
Traditionally, the practice of implementing responsive web design focuses on the first task. We are sure that a great responsive design should also address the second point. The universal design of WinJS controls just suggests this second step. In WinJS 4.0, we added new controls that take into account the current form factor, and also made existing controls more adaptive. WinJS remains compatible with all input methods, working fully with the keyboard, mouse, touch input and even a gamepad (with our new XYFocus functionality).
Typically, developing an application that adapts to screen size and form factor is not a trivial task. As the screen size and aspect ratio change, the application undergoes a number of changes both in the overall composition and in individual controls. All this requires special code. In WinJS 4.0, we have added a number of important controls that reduce the amount of work needed to implement such a universal experience.
A split-view is an adaptive composition of elements that has become a bit of an industry standard. We describe the application with a combined view as an application with a navigation bar on the left and the main content on the right, as shown in the screenshot below. As a rule, this navigation panel can be opened or minimized by clicking on a button in the upper left.
Standard Composition for a Generic Application Using SplitView, Toolbar, and ListView
The new WinJS SplitView control allows you to quickly implement this behavior in an application. The flexibility and capabilities of this element will allow your application to easily adapt to the current screen size, thus supporting phones, tablets, computers and everything in between. In the screenshots below, you will see SplitView working in different modes, with support for three different ranges of screen sizes.
SplitView in fixed mode
SplitView in overlapping
SplitView mode in the 'mobile' configuration
The SplitView control is a powerful and efficient way to add versatility to your application. You can try it in action for menus and content on try.buildwinjs.com and in the SplitView example.
Another complex aspect of creating a universal application is the command interface. In WinJS 4.0, we added a responsive command surface called ToolBar. ToolBar includes a number of excellent features, which makes it uniquely tailored for application development for various form factors. You can try all these features on the example page .
WinJS ToolBar automatically displays the correct number of commands corresponding to the current screen size. This is done using command hiding prioritization (by default or your choice). This allows for impressive flexibility with little effort. You can evaluate it yourself on the site with an example ToolBar .
Example of a new WinJS ToolBar control
Gone are the days when a person clicking on tab in your dialogue and got to a random element in your application. In the new WinJS Content Dialog control, pressing a tab simply toggles between the available options, as it should be. In addition, the control adapts itself and positions the content according to the size of the screen. You can also place arbitrary content inside, which is a nice little bun.
Play around with our new Content Dialog to see for yourself.
The new XYFocus feature makes it easy to navigate between a specific group of HTML elements in four directions. This is especially convenient in terms of supporting the input model typical of a gamepad. This feature can easily be projected onto any suitable key combination, such as a keyboard arrow or w, a, s, d keys. As you might guess, this will allow you to simplify the addition of support for gamepads, requires minimal effort and is available in the WinJS 4.0 preview. Follow the demo on the XYFocus example page .
From the very beginning, the Pivot control in WinJS implemented an effective paradigm for organizing navigation in the application, however, advanced gesturing controls were only available for Windows applications and Internet Explorer. In release 4.0, the element will receive both visual-style updates and, in particular, adaptive headers, and equivalent functionality in different browsers. You can try it yourself on the page with the Pivot example .
WinJS is designed to transparently dock with other frameworks. In the past, this could be traced through community-made interoperability layers with popular frameworks such as ReactJS and KnockoutJS . To demonstrate interoperability, we also developed a new WinJS binding for AngularJS . We hope that this scenario will become quite popular as more Angular users learn about the capabilities of the WnJS library.
With WinJS 4.0, your Angular projects easily get a large list of new features. Let's see what our strapping allows us to do in a little more detail.
Angular provides a powerful way to extend HTML by creating custom DOM elements using directives. The Angular-WinJS binding exposes the WinJS framework controls through directives, allowing developers to use them the way Angular does.
WinJS Rating Control as Angular Directive
Angular offers a powerful bidirectional data binding mechanism. The new WinJS control directives included in the binding allow you to use the familiar binding features with them. In other words, the new WinJS directives integrate transparently into the binding system from Angular. If you work with Angular, you can say that you just got a new set of controls and functionality from WinJS.
ListView is an iconic control for WinJS. We have always been proud of the opportunity to present a virtualized presentation of content with built-in keyboard support, excellent performance, flexible styling and great interaction settings. In version 4.0, we simplified the work with the available interaction options, and also added the features requested by the developers.
Optimization for both mouse and touch control has been a key part of ListView since WinJS was created. As many finger gestures have become standardized in the industry, we have made some changes to the ListView interaction model. One of these changes was the transition to pressing and holding to drag and drop items (drag-n-drop) in WinJS 2.0.
In WinJS 4.0, we once again simplify and improve the interaction model in ListView. A new set of modes is described below, they are conceptually simpler and include a new set of selection mappings.
Read only:
Disable selection completely.
Single selection:
Users select from a group of mutually exclusive options.
Multi selection:
Users select one or more items from a group of options.
Extended selection:
A method familiar to advanced users when working with a keyboard; in the mode of operation only with fingers or only with the mouse without modifier keys, it behaves as a single choice described above. The Shift and Ctrl keys allow multiple selections using the arrow keys or the mouse.
To achieve this design, we removed the swipeBehavior property. This means that the “swipe to select” gesture, as well as the “right click to select” gesture, are no longer supported in ListView. This greatly simplifies the work with the ListView selection modes.
You can try it in the ListView example .
We were often asked whether there is an easy way to add the desired style to ListView elements depending on the evenness or oddness of the element. This improves the readability of the elements and can generally be used for aesthetic reasons. Now this can easily be done using the win-container-ever and win-container-add classes. Using these classes makes the implementation of this non-trivial task much simpler.
The general paradigm encountered in content virtualization is the ability to automatically list additional content for a list of items when the user is near the end of the list. This reduces the load on use and reduces the loading time of large amounts of data. Often this approach is used when working with news feeds, lists sorted by relevance, search results, etc.
Since the advent of WinJS, we have argued internally about the best implementation of this template. With the addition of headers and footers, it has become even easier to implement.
A progressive download example is available on our website .
The WinJS project team members are sincerely grateful for your support and feedback that we receive through the GitHub community.
The full release of WinJS 4.0 will be available later this year . We look to the future with the idea of developing WinJS as a great open source JavaScript library that meets the needs of web developers everywhere. Please send us your inclusion requests and report difficulties via GitHub. Let's make 4.0 better together.
In preparation for this release, we focused on community feedback and your add-ons, which helped us focus around several critical areas:
- Universal experience of interaction - people want their applications to work in the same place as they do: on phones, tablets, computers and even on the TV in the room. The form factor of devices is constantly evolving in order to better meet the needs of a person: somewhere it’s a keyboard connected to a tablet in order to make work more productive, somewhere it’s connecting a phone to a TV so that you can lean back on the couch and explore content, and so on. WinJS controls make it easy to create responsive applications that not only work on screens of different sizes, but also allow for different input methods. We want to help you sharpen the experience of interaction for each device and form factor, so that you can focus on creating the applications themselves.
- Great interaction with others - WinJS is designed with compatibility in mind. We believe that you should be able to easily use WinJS and your favorite JS frameworks together. For example, the WinJS wrapper for AngularJS allows you to transparently use WinJS in your AngularJS projects.
- Powerful ListView - WinJS should support your application development by providing better controls. Our implementation of ListView has been significantly optimized in terms of performance and supports a wide range of scenarios. We have added new features, such as support for alternating styles, headings and footers for lists and improved selection of elements.
We are happy to share this preliminary version with you. If you have any difficulties, please send us a request for inclusion or report a problem through GitHub.
You can start using the WinJS 4.0 preview today through your favorite package manager (Bower, npm or NuGet), a link to the CDN, by downloading the Zip archive from our website or by cloning the repository to build your own copy on GitHub.
Further in the article we will tell more about the focal areas mentioned above. We hope you enjoy the new features in WinJS 4.0 as well.
Universal Experience
Form factors for computing devices continue to evolve. Successful application experience within a modern ecosystem includes, among other things:
- Good job on any screen size
- Support for all input methods (keyboard, mouse, touch screen, etc.)
Traditionally, the practice of implementing responsive web design focuses on the first task. We are sure that a great responsive design should also address the second point. The universal design of WinJS controls just suggests this second step. In WinJS 4.0, we added new controls that take into account the current form factor, and also made existing controls more adaptive. WinJS remains compatible with all input methods, working fully with the keyboard, mouse, touch input and even a gamepad (with our new XYFocus functionality).
New universal controls
Typically, developing an application that adapts to screen size and form factor is not a trivial task. As the screen size and aspect ratio change, the application undergoes a number of changes both in the overall composition and in individual controls. All this requires special code. In WinJS 4.0, we have added a number of important controls that reduce the amount of work needed to implement such a universal experience.
WinJS SplitView
A split-view is an adaptive composition of elements that has become a bit of an industry standard. We describe the application with a combined view as an application with a navigation bar on the left and the main content on the right, as shown in the screenshot below. As a rule, this navigation panel can be opened or minimized by clicking on a button in the upper left.
Standard Composition for a Generic Application Using SplitView, Toolbar, and ListView
The new WinJS SplitView control allows you to quickly implement this behavior in an application. The flexibility and capabilities of this element will allow your application to easily adapt to the current screen size, thus supporting phones, tablets, computers and everything in between. In the screenshots below, you will see SplitView working in different modes, with support for three different ranges of screen sizes.
SplitView in fixed mode
SplitView in overlapping
SplitView mode in the 'mobile' configuration
The SplitView control is a powerful and efficient way to add versatility to your application. You can try it in action for menus and content on try.buildwinjs.com and in the SplitView example.
Winjs toolbar
Another complex aspect of creating a universal application is the command interface. In WinJS 4.0, we added a responsive command surface called ToolBar. ToolBar includes a number of excellent features, which makes it uniquely tailored for application development for various form factors. You can try all these features on the example page .
Team scaling and overlapping
WinJS ToolBar automatically displays the correct number of commands corresponding to the current screen size. This is done using command hiding prioritization (by default or your choice). This allows for impressive flexibility with little effort. You can evaluate it yourself on the site with an example ToolBar .
Example of a new WinJS ToolBar control
Content dialog
Gone are the days when a person clicking on tab in your dialogue and got to a random element in your application. In the new WinJS Content Dialog control, pressing a tab simply toggles between the available options, as it should be. In addition, the control adapts itself and positions the content according to the size of the screen. You can also place arbitrary content inside, which is a nice little bun.
Play around with our new Content Dialog to see for yourself.
XYFocus
The new XYFocus feature makes it easy to navigate between a specific group of HTML elements in four directions. This is especially convenient in terms of supporting the input model typical of a gamepad. This feature can easily be projected onto any suitable key combination, such as a keyboard arrow or w, a, s, d keys. As you might guess, this will allow you to simplify the addition of support for gamepads, requires minimal effort and is available in the WinJS 4.0 preview. Follow the demo on the XYFocus example page .
Touch Control Enhancement for Pivot
From the very beginning, the Pivot control in WinJS implemented an effective paradigm for organizing navigation in the application, however, advanced gesturing controls were only available for Windows applications and Internet Explorer. In release 4.0, the element will receive both visual-style updates and, in particular, adaptive headers, and equivalent functionality in different browsers. You can try it yourself on the page with the Pivot example .
Great interaction with others
WinJS is designed to transparently dock with other frameworks. In the past, this could be traced through community-made interoperability layers with popular frameworks such as ReactJS and KnockoutJS . To demonstrate interoperability, we also developed a new WinJS binding for AngularJS . We hope that this scenario will become quite popular as more Angular users learn about the capabilities of the WnJS library.
With WinJS 4.0, your Angular projects easily get a large list of new features. Let's see what our strapping allows us to do in a little more detail.
WinJS Controls as Angular Directives
Angular provides a powerful way to extend HTML by creating custom DOM elements using directives. The Angular-WinJS binding exposes the WinJS framework controls through directives, allowing developers to use them the way Angular does.
<win-rating max-rating=”5”></win-rating>
WinJS Rating Control as Angular Directive
Angular data binding integration
Angular offers a powerful bidirectional data binding mechanism. The new WinJS control directives included in the binding allow you to use the familiar binding features with them. In other words, the new WinJS directives integrate transparently into the binding system from Angular. If you work with Angular, you can say that you just got a new set of controls and functionality from WinJS.
<div ng-app="sample" ng-controller="sampleController">
<win-rating user-rating="rating"></win-rating>
<p>Rating: {{rating}}</p>
</div>angular.module('sample', ['winjs']).controller("sampleController", function ($scope) {
$scope.rating = 3;
});
Powerful ListView
ListView is an iconic control for WinJS. We have always been proud of the opportunity to present a virtualized presentation of content with built-in keyboard support, excellent performance, flexible styling and great interaction settings. In version 4.0, we simplified the work with the available interaction options, and also added the features requested by the developers.
ListView Updates
Simplification of the selection model
Optimization for both mouse and touch control has been a key part of ListView since WinJS was created. As many finger gestures have become standardized in the industry, we have made some changes to the ListView interaction model. One of these changes was the transition to pressing and holding to drag and drop items (drag-n-drop) in WinJS 2.0.
In WinJS 4.0, we once again simplify and improve the interaction model in ListView. A new set of modes is described below, they are conceptually simpler and include a new set of selection mappings.
Selection scenarios
Read only:
Disable selection completely.
Single selection:
Users select from a group of mutually exclusive options.
Multi selection:
Users select one or more items from a group of options.
Extended selection:
A method familiar to advanced users when working with a keyboard; in the mode of operation only with fingers or only with the mouse without modifier keys, it behaves as a single choice described above. The Shift and Ctrl keys allow multiple selections using the arrow keys or the mouse.
To achieve this design, we removed the swipeBehavior property. This means that the “swipe to select” gesture, as well as the “right click to select” gesture, are no longer supported in ListView. This greatly simplifies the work with the ListView selection modes.
New option to display selection in ListView
You can try it in the ListView example .
Alternation
We were often asked whether there is an easy way to add the desired style to ListView elements depending on the evenness or oddness of the element. This improves the readability of the elements and can generally be used for aesthetic reasons. Now this can easily be done using the win-container-ever and win-container-add classes. Using these classes makes the implementation of this non-trivial task much simpler.
Progressive loading with new ListView footer
The general paradigm encountered in content virtualization is the ability to automatically list additional content for a list of items when the user is near the end of the list. This reduces the load on use and reduces the loading time of large amounts of data. Often this approach is used when working with news feeds, lists sorted by relevance, search results, etc.
Since the advent of WinJS, we have argued internally about the best implementation of this template. With the addition of headers and footers, it has become even easier to implement.
A progressive download example is available on our website .
Moving on
The WinJS project team members are sincerely grateful for your support and feedback that we receive through the GitHub community.
The full release of WinJS 4.0 will be available later this year . We look to the future with the idea of developing WinJS as a great open source JavaScript library that meets the needs of web developers everywhere. Please send us your inclusion requests and report difficulties via GitHub. Let's make 4.0 better together.