WinJS on Windows Phone 8.1
- Transfer
This year at // build2014 , two large announcements related to the Windows JavaScript Library (“WinJS”) were presented. The first outlined the work of MS Open Technology to make the WinJS library cross-platform and accessible open source. Now developers have the opportunity to bring the personality of Windows applications to other devices and browsers. More information about this innovation can be found in an 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 capabilities of WinJS 2.0 (for Windows applications) to the specifics of Windows Phone. We also added new phone-specific controls and features without sacrificing performance on low-cost devices.
Now you can port your existing Windows Store application easily and painlessly, thereby embracing the Windows Phone platform as well. 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, data for localization, 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 applications, recently announced by David Tradville in his presentation at the opening of the first day of the Build conference .
Visual studioprovides you with three sets of templates: Windows applications, Windows Phone, and universal applications.
If each of the applications for Windows and Windows Phone is aimed at the corresponding form factor, then using 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 apps for both platforms at once.
In this article, we will look at differences in design and feature set, as well as provide links to additional resources on this topic.
In Windows Phone, the interaction model 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 a 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 switch 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 details, we recommend the article “Quickstart: Using a pivot control for layout and navigation” .
The phone's form factor creates many challenges that can make you rethink 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, Windows devices can support many 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 to 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 that most of the layout remains unchanged.
We also updated the style templates to meet the design requirements in Windows Phone, the controls now directly from the box meet the user experience paradigms in the phone. You can take advantage of the wonderful options for personalizing the device 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 (default, bottom right). In the minimum state, no buttons are visible, except for the ellipsis on the right side. In a compact state, up to four buttons are visible at the same time.
If you click or pull the ellipsis, the draw area of the panel will increase and through the animation will bring it to the open state, shown below. In the application panel, there are signatures for the three main buttons, as well as a menu of additional commands.
Display space is rarely a problem in the Windows Store app. Imagine the first scenario of an example HTML application bar on a Windows device:
The camera button is separated from the main commands and spaced across the width of the page. Large space allows you to split the application panel commands into two parts. If you set the section property to “global,” the command will be added to the right, while “selection” will move it to the left.
On the other hand, there is not much available space in the Windows Phone application. The “Camera” button shown in the previous image has been moved to a secondary list of commands, hidden from view until the panel is open. The global value now corresponds to the main commands, and selection to the secondary one.
Finally, screen orientation plays a big role for small devices. On a tablet or Windows computer, the application panel 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 the Windows Phone will be attached to the bottom of the physical device. Given the direction the phone is rotated, the application bar 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 documentation of the WinJS.UI.-application bar object .
In order to maximize the benefit of space, the text input field on the phone is stretched in accordance with 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 box changes accordingly to fill the available space.
Sliders, selectors, and radio buttons have the same flexible width behavior.
If Windows Phone has new controls that are not available on Windows, then similarly in Windows there are also controls that do not match 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 on devices this button is built-in. 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.WinJS API for Windows Phone 8.1 to see a complete list of unsupported APIs, functional changes, and optimization recommendations.
It is also worth noting that not all HTML elements that are supported by Windows are available on Windows Phone. These include: a context menu, a dialog box, and simple prompts. Similarly, file upload and status bar work, but are not officially supported.
Using the WinJS 2.1 library in an application for Windows Phone allows you to make the transition smooth 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 main features and utilities of WinJS are identical. Using 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
“coding demonstration for universal apps in Build a Converged Phone and PC App using HTML and JavaScript” , Josh Williams and Rian Salva, Build 2014
You can learn more. find 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 capabilities of WinJS 2.0 (for Windows applications) to the specifics of Windows Phone. We also added new phone-specific controls and features without sacrificing performance on low-cost devices.
Now you can port your existing Windows Store application easily and painlessly, thereby embracing the Windows Phone platform as well. 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, data for localization, 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 applications, recently announced by David Tradville in his presentation at the opening of the first day of the Build conference .
Visual studioprovides you with three sets of templates: Windows applications, Windows Phone, and universal applications.
If each of the applications for Windows and Windows Phone is aimed at the corresponding form factor, then using 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 apps for both platforms at once.
In this article, we will look at differences in design and feature set, as well as provide links to additional resources on this topic.
Pivot
In Windows Phone, the interaction model 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 a 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 switch 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 details, we recommend the article “Quickstart: Using a pivot control for layout and navigation” .
Adaptive controls
The phone's form factor creates many challenges that can make you rethink 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, Windows devices can support many 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 to 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 that most of the layout remains unchanged.
We also updated the style templates to meet the design requirements in Windows Phone, the controls now directly from the box meet the user experience paradigms in the phone. You can take advantage of the wonderful options for personalizing the device and create applications that take into account the current theme of the device and its accent color.
Below are a few examples.
Application panel
The application bar on the phone is always visible in one form or another. There are two minimized states, minimum (bottom left) and compact (default, bottom right). In the minimum state, no buttons are visible, except for the ellipsis on the right side. In a compact state, up to four buttons are visible at the same time.
If you click or pull the ellipsis, the draw area of the panel will increase and through the animation will bring it to the open state, shown below. In the application panel, there are signatures for the three main buttons, as well as a menu of additional commands.
Display space is rarely a problem in the Windows Store app. Imagine the first scenario of an example HTML application bar on a Windows device:
The camera button is separated from the main commands and spaced across the width of the page. Large space allows you to split the application panel commands into two parts. If you set the section property to “global,” the command will be added to the right, while “selection” will move it to the left.
On the other hand, there is not much available space in the Windows Phone application. The “Camera” button shown in the previous image has been moved to a secondary list of commands, hidden from view until the panel is open. The global value now corresponds to the main commands, and selection to the secondary one.
Finally, screen orientation plays a big role for small devices. On a tablet or Windows computer, the application panel 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 the Windows Phone will be attached to the bottom of the physical device. Given the direction the phone is rotated, the application bar 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 documentation of the WinJS.UI.-application bar object .
Built-in controls
In order to maximize the benefit of space, the text input field on the phone is stretched in accordance with 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 box changes accordingly to fill the available space.
Sliders, selectors, and radio buttons have the same flexible width behavior.
Important changes
If Windows Phone has new controls that are not available on Windows, then similarly in Windows there are also controls that do not match 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 on devices this button is built-in. 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.WinJS API for Windows Phone 8.1 to see a complete list of unsupported APIs, functional changes, and optimization recommendations.
It is also worth noting that not all HTML elements that are supported by Windows are available on Windows Phone. These include: a context menu, a dialog box, and simple prompts. Similarly, file upload and status bar work, but are not officially supported.
We make the application universal
Using the WinJS 2.1 library in an application for Windows Phone allows you to make the transition smooth 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 main features and utilities of WinJS are identical. Using 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
“coding demonstration for universal apps in Build a Converged Phone and PC App using HTML and JavaScript” , Josh Williams and Rian Salva, Build 2014
You can learn more. find the links:
- Porting a Windows Runtime Application to Windows Phone Using JavaScript
- Change API in WinJS for Windows Phone 8.1
- Try WinJS
- WinJS on GitHub
- WinJS Developer Center
- Building Windows Phone 8.1 Apps in HTML
Code Examples:
- HTML AppBar Management
- HTML ListView (main)
- HTML Pivot Management
- HTML scrolling, panning and zooming
Tools: Download Microsoft Visual Studio 2013
Recommended MVA Courses: