Preview version of WinJS 4.0 announced: universal UX, integration with AngularJS, updated ListView
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 started adding new features so that the library continued to be a good framework for developing both Windows applications and web applications.
In preparation for this release, we focused on community feedback and your add-ons, which helped us focus around a few critical areas:
')
We are happy to share with you this preliminary version. If you have any difficulties, please send us a request for inclusion or report a problem through GitHub.
You can start using WinJS 4.0 preview today through your favorite package manager (Bower, npm or NuGet), a link to 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 of WinJS 4.0 too.
Form factors computing devices continue to evolve. Successful application experience within a modern ecosystem includes, among others:
Traditionally, the practice of implementing responsive web design focuses on the first task. We are sure that an excellent responsive design should also address the second point. The universal design of the WinJS controls just involves 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 the screen size and form factor is not a trivial task. As the screen size and aspect ratio change, the application undergoes a series of changes both in the overall composition and in individual controls. All this requires a special code. In WinJS 4.0, we added a number of important controls that reduce the amount of work needed to implement this kind of universal experience.
A split view is an adaptive composition of elements that has become something of an industry standard. We describe the combined view application 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 bar can be opened or collapsed by clicking on a button at the top left.
Standard composition of a universal application using SplitView, Toolbar and ListView
New WinJS SplitView control allows you to quickly implement similar 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 work in different modes, with support for three different ranges of screen sizes.
SplitView in fixed mode
SplitView in overlay mode
SplitView in 'mobile' configuration
The SplitView control is a powerful and effective way to add versatility to your application. You can try it in action for menus and content on the try.buildwinjs.com website 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 to the development of applications for different 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 the prioritization of hiding commands (the 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 pressing the tab in your dialogue and fell on a random element in your application. In the new WinJS Content Dialog control, pressing a tab simply switches between the available options, as it should be. In addition, the control adapts itself and positions the content according to the screen size. You can also place arbitrary content inside, which is a nice bun.
Play around with our new Content Dialog item to evaluate everything yourself.
The new XYFocus feature makes it easy to implement navigation between a specific group of HTML elements in four directions. This is especially convenient in terms of supporting the input model typical for a gamepad. This feature can be easily projected onto any suitable combination of keys, for example, the keyboard arrows or the w, a, s, d keys. As you guessed, it will allow you to simplify the addition of support for gamepads, requires minimal effort and is available in preview WinJS 4.0. For a demonstration, proceed to the page with an example of XYFocus .
From the very beginning, the Pivot control in WinJS implemented an effective paradigm for organizing navigation in an application; however, its advanced gestures were accessible only for Windows applications and in Internet Explorer. In release 4.0, the element will receive both updates in a visual style and, in particular, adaptive headers, as well as equivalent functionality in different browsers. You can try it yourself on the page with the Pivot-example .
WinJS is designed to transparently interface with other frameworks. In the past, this was done can be traced through community compatibility with popular frameworks such as ReactJS and KnockoutJS . To demonstrate the 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.
As part of 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 bit more detail.
Angular provides a powerful way to extend HTML by creating your own DOM elements using directives. Angular-WinJS strapping exposes WinJS framework controls through directives, allowing developers to use them in the way that Angular does.
WinJS Rating Control as Angular Directive
Angular offers a powerful bidirectional data binding mechanism. New directives for the WinJS controls included in the binding allow you to use your usual binding capabilities. In other words, new directives for WinJS are seamlessly integrated into the Angular binding system. If you are working with Angular, you can say that you have just received a new set of controls and functionality from WinJS.
ListView is a signed control for WinJS. We have always been proud of the opportunity to present a virtualized presentation of content with built-in support for keyboard management, excellent performance, flexible styling, and great interaction customization options. 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 operation and touch control has been a key component of ListView since the very creation of WinJS. As many digital 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 (n-drop) elements in WinJS 2.0.
With WinJS 4.0, we once again simplify and improve the interaction model in ListView. The new set of modes is described below, they are conceptually simpler and include a new set of selection displays.
Read only:
Complete disabling selection
Single selection (Single):
Users choose from a group of mutually exclusive options.
Multiple Selection (Multi):
Users select one or more items from a group of choices.
Extended selection (Extended):
A way familiar to advanced users when working with the keyboard; in the operation mode only with fingers or only with a 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 a similar design, we removed the swipeBehavior property. This means that the gesture "make to select", as well as the "right click to select" is no longer supported in ListView. This greatly simplifies working with the ListView selection modes.
You can try to work in the example ListView .
We were often asked if there was an easy way for the ListView elements to add the desired style depending on the parity or oddness of the element. This allows for improved readability of elements and can be generally used for aesthetic reasons. This can now be easily done using the “win-container-ever” and “win-container-add” classes. Using these classes makes implementing this non-trivial task much easier.
The common paradigm encountered in content virtualization is the ability for the list of items to automatically load additional content when the user is near the end of the list. This reduces the load on use and reduces the load time for large amounts of data. Often this approach is used when working with news feeds, lists sorted by relevance, search results, etc.
From the very beginning of WinJS, we argued inside about the best implementation of this pattern. With the addition of working with headers and footers, it has become even easier to implement.
An example with progressive download is available on our website .
Members of the WinJS project team convey sincere thanks for your support and feedback we receive through the GitHub community.
The full release of WinJS 4.0 will be available later this year . We are looking to the future with the idea of ​​developing WinJS as an excellent open JavaScript library that satisfies 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 a few critical areas:
')
- Universal experience of interaction - people want their applications to work in the same place where they are: on phones, tablets, computers, and even on a TV in a room. The form factor of the devices is constantly evolving to better meet the needs of the person: somewhere it is a keyboard connected to the tablet in order to make work more productive, somewhere it is connecting the phone to the TV so that you can lie 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 various sizes, but also take into account 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.
- Excellent interaction with others - WinJS is designed with an eye on compatibility. We believe that you should be able to easily use WinJS and your favorite JS frameworks together. For example, the WinJS wrapper for AngularJS will allow you to transparently use WinJS in your AngularJS projects.
- Powerful ListView - WinJS should support your application development by providing the best controls. Our implementation of ListView has been greatly optimized in terms of performance and supports a wide range of scenarios. We added new features, such as support for alternating styles, headings and footers for lists, and improved selection of elements.
We are happy to share with you this preliminary version. If you have any difficulties, please send us a request for inclusion or report a problem through GitHub.
You can start using WinJS 4.0 preview today through your favorite package manager (Bower, npm or NuGet), a link to 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 of WinJS 4.0 too.
Universal interaction experience
Form factors computing devices continue to evolve. Successful application experience within a modern ecosystem includes, among others:
- Good job on any screen size
- Support 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 an excellent responsive design should also address the second point. The universal design of the WinJS controls just involves 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 the screen size and form factor is not a trivial task. As the screen size and aspect ratio change, the application undergoes a series of changes both in the overall composition and in individual controls. All this requires a special code. In WinJS 4.0, we added a number of important controls that reduce the amount of work needed to implement this kind of universal experience.
WinJS SplitView
A split view is an adaptive composition of elements that has become something of an industry standard. We describe the combined view application 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 bar can be opened or collapsed by clicking on a button at the top left.
Standard composition of a universal application using SplitView, Toolbar and ListView
New WinJS SplitView control allows you to quickly implement similar 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 work in different modes, with support for three different ranges of screen sizes.
SplitView in fixed mode
SplitView in overlay mode
SplitView in 'mobile' configuration
The SplitView control is a powerful and effective way to add versatility to your application. You can try it in action for menus and content on the try.buildwinjs.com website 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 to the development of applications for different form factors. You can try all these features on the example page .
Scaling and overlapping commands
WinJS ToolBar automatically displays the correct number of commands corresponding to the current screen size. This is done using the prioritization of hiding commands (the 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 pressing the tab in your dialogue and fell on a random element in your application. In the new WinJS Content Dialog control, pressing a tab simply switches between the available options, as it should be. In addition, the control adapts itself and positions the content according to the screen size. You can also place arbitrary content inside, which is a nice bun.
Play around with our new Content Dialog item to evaluate everything yourself.
Xyfocus
The new XYFocus feature makes it easy to implement navigation between a specific group of HTML elements in four directions. This is especially convenient in terms of supporting the input model typical for a gamepad. This feature can be easily projected onto any suitable combination of keys, for example, the keyboard arrows or the w, a, s, d keys. As you guessed, it will allow you to simplify the addition of support for gamepads, requires minimal effort and is available in preview WinJS 4.0. For a demonstration, proceed to the page with an example of XYFocus .
Improved touch controls for Pivot
From the very beginning, the Pivot control in WinJS implemented an effective paradigm for organizing navigation in an application; however, its advanced gestures were accessible only for Windows applications and in Internet Explorer. In release 4.0, the element will receive both updates in a visual style and, in particular, adaptive headers, as well as equivalent functionality in different browsers. You can try it yourself on the page with the Pivot-example .
Excellent interaction with others
WinJS is designed to transparently interface with other frameworks. In the past, this was done can be traced through community compatibility with popular frameworks such as ReactJS and KnockoutJS . To demonstrate the 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.
As part of 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 bit more detail.
WinJS controls as Angular directives
Angular provides a powerful way to extend HTML by creating your own DOM elements using directives. Angular-WinJS strapping exposes WinJS framework controls through directives, allowing developers to use them in the way that Angular does.
<win-rating max-rating=”5”></win-rating> WinJS Rating Control as Angular Directive
Integration with data binding from Angular
Angular offers a powerful bidirectional data binding mechanism. New directives for the WinJS controls included in the binding allow you to use your usual binding capabilities. In other words, new directives for WinJS are seamlessly integrated into the Angular binding system. If you are working with Angular, you can say that you have just received 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 a signed control for WinJS. We have always been proud of the opportunity to present a virtualized presentation of content with built-in support for keyboard management, excellent performance, flexible styling, and great interaction customization options. In version 4.0, we simplified the work with the available interaction options, and also added the features requested by the developers.
ListView updates
Simplify the selection model
Optimization for both mouse operation and touch control has been a key component of ListView since the very creation of WinJS. As many digital 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 (n-drop) elements in WinJS 2.0.
With WinJS 4.0, we once again simplify and improve the interaction model in ListView. The new set of modes is described below, they are conceptually simpler and include a new set of selection displays.
Selection scenarios
Read only:
Complete disabling selection
Single selection (Single):
Users choose from a group of mutually exclusive options.
Multiple Selection (Multi):
Users select one or more items from a group of choices.
Extended selection (Extended):
A way familiar to advanced users when working with the keyboard; in the operation mode only with fingers or only with a 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 a similar design, we removed the swipeBehavior property. This means that the gesture "make to select", as well as the "right click to select" is no longer supported in ListView. This greatly simplifies working with the ListView selection modes.
New option to display choices in ListView
You can try to work in the example ListView .
Alternation
We were often asked if there was an easy way for the ListView elements to add the desired style depending on the parity or oddness of the element. This allows for improved readability of elements and can be generally used for aesthetic reasons. This can now be easily done using the “win-container-ever” and “win-container-add” classes. Using these classes makes implementing this non-trivial task much easier.
Progressive download with new ListView basement
The common paradigm encountered in content virtualization is the ability for the list of items to automatically load additional content when the user is near the end of the list. This reduces the load on use and reduces the load time for large amounts of data. Often this approach is used when working with news feeds, lists sorted by relevance, search results, etc.
From the very beginning of WinJS, we argued inside about the best implementation of this pattern. With the addition of working with headers and footers, it has become even easier to implement.
An example with progressive download is available on our website .
Moving on
Members of the WinJS project team convey sincere thanks for your support and feedback we receive through the GitHub community.
The full release of WinJS 4.0 will be available later this year . We are looking to the future with the idea of ​​developing WinJS as an excellent open JavaScript library that satisfies the needs of web developers everywhere. Please send us your inclusion requests and report difficulties via GitHub. Let's make 4.0 better together.
Source: https://habr.com/ru/post/255571/
All Articles