Windows Phone + WinJS. Learning Pivot

Along with the upgrade of Windows Phone 8 to version 8.1, it became possible to write native applications in HTML and JavaScript. You can use the standard features of HTML, CSS, JavaScript, third-party libraries and a special library WinJS (in version 2.1).

One of the new features of WinJS (2.1) is the addition of the Pivot control. Pivot is a full-screen container with a built-in navigation mechanism that provides a transition between different views (Pivota tabs). For example, using the Pivot control implements such standard Windows Phone applications as the calendar and messages.

Note: Before you start working with WinJS, do not forget to add links to the WinJS library to your HTML file in case you create an empty project.
')

<!-- WinJS references --> <link href="//Microsoft.WinJS.2.1/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.2.1/js/base.js"></script> <script src="//Microsoft.WinJS.2.1/js/ui.js"></script> 

Create Pivot

Let's take a look at how to create a Pivot element. There are two ways to create a Pivot element - declarative and software.

Pivot declarative creation (HTML)

To create a Pivot element, you need to add a div block to the page with the data-win-control attribute, and assign it the value WinJS.UI.Pivot .

 <div data-win-control="WinJS.UI.Pivot"></div> 

During page initialization, the WinJS library will automatically create a Pivot element based on this block with the necessary styles and markup. Additionally, in the markup, you can specify the parameters for creating an element through the data-win-options attribute:

 <!--  Pivot –    'WINJS - PIVOT' --> <div data-win-control="WinJS.UI.Pivot" data-win-options="{title: 'WINJS - PIVOT' }"> <!--   ,     WinJS.UI.PivotItem. --> <!--     'one' --> <div class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'one'}"> <p> Content - Item One </p> </div> <!--     'two' --> <div class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'two'}"> <p> Content - Item Two </p> </div> </div> 

You can find the initialization parameters for each of the objects at the links above.

Software creation of Pivot (JS)

Creating a Pivot element from JS code repeats the logic of a declarative description.

 //  myPivot   'WINJS - PIVOT' var myPivot = new WinJS.UI.Pivot(null, { title: 'WINJS - PIVOT' }); //  myPivotItem   'one'   var myPivotItem1 = new WinJS.UI.PivotItem(null, { 'header': 'one' }); //  ( )   myPivotItem var item1Content = document.createElement("p"); item1Content.innerHTML = "Content - Item One"; myPivotItem1.contentElement.appendChild(item1Content); //  myPivotItem   'two'   var myPivotItem2 = new WinJS.UI.PivotItem(null, { 'header': 'two' }); //  ( )   myPivotItem var item2Content = document.createElement("p"); item2Content.innerHTML = "Content - Item Two"; myPivotItem2.contentElement.appendChild(item2Content); // WinJS-  Binding.List var pivotItems = new WinJS.Binding.List(); //    WinJS.Binding.List\ pivotItems.push(myPivotItem1); pivotItems.push(myPivotItem2); myPivot.items = pivotItems; //  DOM –    document.querySelector("#myPivotContainer").appendChild(myPivot.element); 

Note:

• When initializing a Pivot or PivotItem, you need to specify the node DOM element on the basis of which the corresponding control will be created (if set to null, WinJS will create the corresponding element itself):
  

• To insert tabs, the myPivotItem1 and myPivotItem2 objects are combined into the WinJS.Binding.List list, which is in turn written to myPivot.items.

Control Pivot from JS

The Pivot tab (PivotItem) consists of a title and content, with closed loop navigation between tabs. Consider how to programmatically implement the transition between tabs of an element. First you need to get the total number of tabs in the Pivot element (using the length property), then determine the index of the selected tab and go to the next one. If the number next to the selected tab is greater than their total number, the transition will be carried out to the first.

Notice that the items type is Binding.List .

 function gotoNextPivotItem() { //  Pivot- var pivotControl = document.getElementById("myPivot").winControl; //    var pivotControlLength = pivotControl.items.length; //  -  var pivotSelected = pivotControl.selectedIndex; //      if (pivotSelected < pivotControlLength-1) { pivotControl.selectedIndex++; } //  ,     ,     else { pivotControl.selectedIndex = 0; } } 

Similarly, you can go to the previous (next) tab (remember about Pivot's obsession) or to a specific tab, specifying its value in selectedIndex.

Tab toggle lock

Let's consider the operation of one of the properties of the tabs - blocking the switching of adjacent tabs. For example, take the Pivot control, into which we added a ListView control. ListView presents data as a custom list or grid. With it, the display of mail, address book contacts is implemented.



When selecting a ListView on the current tab, switching between other tabs can be blocked (hidden), leaving only the current one on which the selection has been active.



To implement the lock of the adjacent tab, use the locked property. It takes two values ​​- true and false. Below, the toggleSelectionMode function is implemented, in which the value of the selectionModeActive property of the ListView is checked. If the element is not selected (selectionModeActive = false), then the locked property is set to false, if the element is selected (selectionModeActive = true), then the locked property is set to true.

 function toggleSelectionMode(listView) { if (listView.selectionModeActive) { listView.selectionModeActive = false; pivotEl.winControl.locked = false; listView.tapBehavior = WinJS.UI.TapBehavior.invokeOnly; listView.selectionMode = WinJS.UI.SelectionMode.none; listView.selection.clear(); } else { listView.selectionModeActive = true; pivotEl.winControl.locked = true; listView.tapBehavior = WinJS.UI.TapBehavior.toggleSelect; listView.selectionMode = WinJS.UI.SelectionMode.multi; } return listView.selectionModeActive; }; 

Pivot control styling

The visual appearance of the Pivot control can be changed very easily. In order to change the style of headers or content, it is enough to define different CSS classes for Pivota elements.

• The win-pivot class defines the Pivota style.
  
  

   .win-pivot { color: darkviolet; font-family: "Times New Roman"; font-size: 24pt; background-color: lightblue; } 

  
  
• Using the win-pivot-title class, you can define the Pivota title style separately.
  
  

   .win-pivot .win-pivot-title { color: lightcoral; font-size: 18pt; } 

  
  
• win-pivot-header sets tab tab style
  
  

   .win-pivot button.win-pivot-header { color: blue; } 

  
  

In order to insert a picture inside the header, use the font with the corresponding images. For example, pay attention to the font Segoe UI.



You can read about the other classes that allow you to change the Pivota style here .

Adding a Pivot and WinJS Control to the Web

WinJS is available for web projects as an open library, and you can also use it on your web pages.

Let's see how to add a Pivot control to an HTML page. To do this, create an HTML page and add two scripts with links to the WinJS library. You also need to add a link to the theme library for the control. This example uses a light theme.

 <script src="/lib/winjs/js/base.js"></script> <script src="/lib/winjs/js/ui.js"></script> <link href="/lib/winjs/css/ui-light.css" rel="stylesheet" /> 

Do not forget to add a script with a link to your data, as well as a script that processes the content loading event and declares the function of the WinJS.UI.processAll element bundle.

 <script src="js/myscript.js"></script> <script> document.addEventListener("DOMContentLoaded", function () { WinJS.UI.processAll().then(function () { //   }); }, false); </script> 

Support for the Pivot control in Windows will be available in the WinJS 3.0 library version. If you want to try adding Pivot to your Windows application, then you can build the library yourself by downloading the files here .