WinJS on Windows Phone 8.1
This year two large announcements related to the Windows JavaScript library (“WinJS”) were presented at // build2014 . The first outlined the work of MS Open Technology in order to make the WinJS library cross-platform and with open source available. Now developers have the opportunity to introduce the personality of Windows applications to other devices and browsers. More information about this innovation can be found in the article by Maria Kang.
The second announcement is the release of version 2.1. for winjs. Now, with the release of Windows Phone 8.1, the WinJS library is also available on the mobile platform. WinJS 2.1 adapts the features of WinJS 2.0 (for Windows applications) to the features of Windows Phone. We also added new controls and phone-specific features without sacrificing performance on low-cost devices.
')
Now you can port your existing Windows Store application easily and painlessly, also covering the Windows Phone platform. Using familiar and familiar languages and tools, you can share resources between your Windows and Windows Phone applications. Placing files such as source code, images, localization data, etc. in one place allows you to reduce the cost and effort that would be required to create two separate applications focused on different platforms. This combination underlies the idea of universal Windows-based applications, recently announced by David Tradvil in a report at the opening of the first day of the Build conference.
Visual Studio provides you with three sets of templates: Windows applications, Windows Phone, and universal applications.
If each of the applications under Windows and Windows Phone is directed to the corresponding form factor, then with the help of universal applications you have the potential to write the application once and at the same time cover both platforms. In other words, developers can create great native applications for both platforms at once.
In this article, we will look at the differences in design and functionality, and also provide links to additional resources on this topic.
In Windows Phone, the model of interaction with the application is different from those commonly used on computers or tablets. The phone interface contains controls that are not available in WinJS 2.0. Therefore, in version 2.1, we added the Pivot control.
A full-screen container (for Pivot) provides quick navigation between different views, for example, as in the case of the ListView shown above.
Those familiar with the Hub control will see similarities both in appearance and in the API. In fact, in most cases it is possible to go from Hub to Pivot by searching and replacing the corresponding names in the API. Pivot is a powerful control with which you can create exactly the experience that users expect on Windows Phone.
For more information, we recommend the article “Quickstart: Using a pivot control for layout and navigation” .
The form factor of the phone creates many challenges that can make you reconsider how your application looks and feels.
Windows - the device covers a wide range of screens of various sizes, from small tablets to large monitors, while devices with Windows Phone usually do not exceed five to six inches. In addition, with Windows, devices can support multiple input methods, including a mouse and keyboard, while a Windows Phone device uses only touch input.
We tried to minimize the work that needs to be done in order to adapt the application for all devices, which, as a rule, means minor adjustments in the layout and visual elements. WinJS automatically adapts the controls to the interface and features of the phone, so most of the markup remains the same.
We also updated the style patterns to fit the design requirements of Windows Phone, the controls now right out of the box correspond to the paradigms of the user experience in the phone. You can take advantage of the wonderful device personalization options and create applications that take into account the current theme of the device and its accent color.
Below are a few examples.
The application bar on the phone is always visible in one form or another. There are two minimized states, minimum (bottom left) and compact (by default, bottom right). In the minimum state, no buttons are visible, except for the ellipsis on the right side. In a compact state at the same time you can see up to four buttons visible.
If you click or drag to ellipsis, the panel's drawing area will increase and, through animation, will bring it to the open state shown below. In the application panel you can see the captions for the three main buttons, as well as the menu of additional commands.
Available display space is rarely a problem in the Windows Store application. Imagine the first script of an example HTML application panel on a Windows device:
The camera button is separated from the main commands and spaced along the width of the page. Large space allows you to split the commands of the application panel into two parts. If you set the section property as “global” (global), the command is added to the right, while the “selection” (selection) moves it to the left edge.
On the other hand, there is not much available space in the Windows Phone application. The “Camera” button shown in the previous image is moved to the secondary list of commands, hidden from view until the panel is opened. The global value now corresponds to the main commands, and the selection to the secondary one.
Finally, screen orientation plays a big role for small devices. On the tablet or Windows computer, the application bar remains attached to the bottom of the current display, regardless of whether the device is in portrait or landscape mode. However, the application bar on Windows Phone will be attached to the bottom of the physical device. Considering the direction in which the phone is turned, the application panel may appear on the left or right of your screen, with icons and text rotated accordingly. In order to achieve this type and functionality, you do not need to do anything extra - the control will be applied automatically.
For more information, refer to the WinJS.UI.-object documentation of the application panel .
In order to get the most out of space, the text entry field on the phone is stretched to fit the width of the parent container. If the width is not specified explicitly, this behavior is implemented by default.
Depending on the orientation of the phone, the text field changes accordingly to fill the available space.
Sliders, selectors, and selectors have the same flexible behavior for widths.
If there are new controls on Windows Phone that are missing on Windows, then in Windows, there are also controls that do not correspond to the design of the mobile platform.
Flyout , Menu , NavBar , SearchBox , SettingsFlyout , and Tooltip have no analogues for Windows Phone applications. The same applies to BackButton - it is no longer needed, since this button is integrated on devices. As a result, these and other controls are no longer available in WinJS 2.1.
For each unsupported control, we have prepared recommendations. Check out the changes in the WinJS API for Windows Phone 8.1 for a complete list of unsupported APIs, functional changes, and optimization tips.
It is also worth noting that not all HTML elements supported by Windows are available on Windows Phone. These include: context menu, dialog box and simple tooltips. Similarly, file loading and status bar work, but are not officially supported.
Using the library WinJS 2.1 in the application for Windows Phone allows you to make the transition smoothly from the Windows Store application, made using WinJS 2.0. The main difference between one version and another is in the controls, since there are differences in the user interface between Windows Phone and Windows.
In addition, the basic features and utilities of WinJS are identical. With WinJS, you can optimize the development of universal applications for Windows, while covering a wide range of devices.
"What's new in WinJS: Windows Phone and the road ahead" , Paul Gusmorino, Build 2014
Jim Williams and Rian Salva, Build 2014
More information can be found on the links:
Code examples:
Tools: Download Microsoft Visual Studio 2013
Recommended MVA courses:
The second announcement is the release of version 2.1. for winjs. Now, with the release of Windows Phone 8.1, the WinJS library is also available on the mobile platform. WinJS 2.1 adapts the features of WinJS 2.0 (for Windows applications) to the features of Windows Phone. We also added new controls and phone-specific features without sacrificing performance on low-cost devices.
')
Now you can port your existing Windows Store application easily and painlessly, also covering the Windows Phone platform. Using familiar and familiar languages and tools, you can share resources between your Windows and Windows Phone applications. Placing files such as source code, images, localization data, etc. in one place allows you to reduce the cost and effort that would be required to create two separate applications focused on different platforms. This combination underlies the idea of universal Windows-based applications, recently announced by David Tradvil in a report at the opening of the first day of the Build conference.
Visual Studio provides you with three sets of templates: Windows applications, Windows Phone, and universal applications.
If each of the applications under Windows and Windows Phone is directed to the corresponding form factor, then with the help of universal applications you have the potential to write the application once and at the same time cover both platforms. In other words, developers can create great native applications for both platforms at once.
In this article, we will look at the differences in design and functionality, and also provide links to additional resources on this topic.
Pivot
In Windows Phone, the model of interaction with the application is different from those commonly used on computers or tablets. The phone interface contains controls that are not available in WinJS 2.0. Therefore, in version 2.1, we added the Pivot control.
A full-screen container (for Pivot) provides quick navigation between different views, for example, as in the case of the ListView shown above.
Those familiar with the Hub control will see similarities both in appearance and in the API. In fact, in most cases it is possible to go from Hub to Pivot by searching and replacing the corresponding names in the API. Pivot is a powerful control with which you can create exactly the experience that users expect on Windows Phone.
For more information, we recommend the article “Quickstart: Using a pivot control for layout and navigation” .
Adaptive controls
The form factor of the phone creates many challenges that can make you reconsider how your application looks and feels.
Windows - the device covers a wide range of screens of various sizes, from small tablets to large monitors, while devices with Windows Phone usually do not exceed five to six inches. In addition, with Windows, devices can support multiple input methods, including a mouse and keyboard, while a Windows Phone device uses only touch input.
We tried to minimize the work that needs to be done in order to adapt the application for all devices, which, as a rule, means minor adjustments in the layout and visual elements. WinJS automatically adapts the controls to the interface and features of the phone, so most of the markup remains the same.
We also updated the style patterns to fit the design requirements of Windows Phone, the controls now right out of the box correspond to the paradigms of the user experience in the phone. You can take advantage of the wonderful device personalization options and create applications that take into account the current theme of the device and its accent color.
Below are a few examples.
Application bar
The application bar on the phone is always visible in one form or another. There are two minimized states, minimum (bottom left) and compact (by default, bottom right). In the minimum state, no buttons are visible, except for the ellipsis on the right side. In a compact state at the same time you can see up to four buttons visible.
If you click or drag to ellipsis, the panel's drawing area will increase and, through animation, will bring it to the open state shown below. In the application panel you can see the captions for the three main buttons, as well as the menu of additional commands.
Available display space is rarely a problem in the Windows Store application. Imagine the first script of an example HTML application panel on a Windows device:
The camera button is separated from the main commands and spaced along the width of the page. Large space allows you to split the commands of the application panel into two parts. If you set the section property as “global” (global), the command is added to the right, while the “selection” (selection) moves it to the left edge.
On the other hand, there is not much available space in the Windows Phone application. The “Camera” button shown in the previous image is moved to the secondary list of commands, hidden from view until the panel is opened. The global value now corresponds to the main commands, and the selection to the secondary one.
Finally, screen orientation plays a big role for small devices. On the tablet or Windows computer, the application bar remains attached to the bottom of the current display, regardless of whether the device is in portrait or landscape mode. However, the application bar on Windows Phone will be attached to the bottom of the physical device. Considering the direction in which the phone is turned, the application panel may appear on the left or right of your screen, with icons and text rotated accordingly. In order to achieve this type and functionality, you do not need to do anything extra - the control will be applied automatically.
For more information, refer to the WinJS.UI.-object documentation of the application panel .
Built-in controls
In order to get the most out of space, the text entry field on the phone is stretched to fit the width of the parent container. If the width is not specified explicitly, this behavior is implemented by default.
Depending on the orientation of the phone, the text field changes accordingly to fill the available space.
Sliders, selectors, and selectors have the same flexible behavior for widths.
Important changes
If there are new controls on Windows Phone that are missing on Windows, then in Windows, there are also controls that do not correspond to the design of the mobile platform.
Flyout , Menu , NavBar , SearchBox , SettingsFlyout , and Tooltip have no analogues for Windows Phone applications. The same applies to BackButton - it is no longer needed, since this button is integrated on devices. As a result, these and other controls are no longer available in WinJS 2.1.
For each unsupported control, we have prepared recommendations. Check out the changes in the WinJS API for Windows Phone 8.1 for a complete list of unsupported APIs, functional changes, and optimization tips.
It is also worth noting that not all HTML elements supported by Windows are available on Windows Phone. These include: context menu, dialog box and simple tooltips. Similarly, file loading and status bar work, but are not officially supported.
Making the application universal
Using the library WinJS 2.1 in the application for Windows Phone allows you to make the transition smoothly from the Windows Store application, made using WinJS 2.0. The main difference between one version and another is in the controls, since there are differences in the user interface between Windows Phone and Windows.
In addition, the basic features and utilities of WinJS are identical. With WinJS, you can optimize the development of universal applications for Windows, while covering a wide range of devices.
Additional materials
"What's new in WinJS: Windows Phone and the road ahead" , Paul Gusmorino, Build 2014
Jim Williams and Rian Salva, Build 2014
More information can be found on the links:
- Porting a Windows Runtime application to Windows Phone using JavaScript
- Changing API in WinJS for Windows Phone 8.1
- Try WinJS
- WinJS on github
- WinJS Developer Center
- Build Windows Phone 8.1 Apps in HTML
Code examples:
Tools: Download Microsoft Visual Studio 2013
Recommended MVA courses:
Source: https://habr.com/ru/post/229811/
All Articles