Windows Phone + WinJS. Вивчаємо Pivot

    
Разом з оновленням Windows Phone 8 до версії 8.1 з'явилася можливість писати нативні додатки на HTML і JavaScript. Ви можете використовувати стандартні можливості HTML, CSS, JavaScript, сторонні бібліотеки і спеціальну бібліотеку WinJS (у версії 2.1).
 
Одним з нововведень WinJS (2.1) є додавання елемента управління Pivot . Pivot являє собою повноекранний контейнер з вбудованим механізмом навігації, що забезпечує перехід між різними уявленнями (вкладками Pivota). Наприклад, за допомогою елемента управління Pivot реалізовані такі стандартні додатки Windows Phone, як календар і повідомлення.
 
 Зауваження: Перш ніж почати роботу з WinJS, не забудьте додати посилання на бібліотеку WinJS в ваш HTML файл, в разі, якщо створюєте порожній проект.
 
 
<!-- 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>

 Створення Pivot
Давайте розглянемо, як створити Pivot елемент. Існує два способи створення Pivot елемента — декларативний і програмний.
 
 Декларативне створення Pivot (HTML)
Для створення Pivot — елементу необхідно додати на сторінку блок div з атрибутом «data-win-control», та присвоїти йому значення WinJS.UI.Pivot .
 
 
<div data-win-control="WinJS.UI.Pivot"></div>

В ході ініціалізації сторінки бібліотека WinJS автоматично створить на базі цього блоку Pivot-елемент з необхідними стилями і розміткою. Додатково в розмітці можна вказати параметри створення елемента через атрибут data-win-options :
 
 
<!-- Создаем 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>

 
 
Параметри ініціалізації кожного з об'єктів ви можете знайти за посиланнями вище.
 
 Програмне створення Pivot (JS)
Створення Pivot-елемента з коду на JS повторює логіку декларативного опису
 
 
//создаем элемент 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);

Зверніть увагу:
 
     
  • При ініціалізації Pivot або PivotItem потрібно вказати вузловий DOM-елемент , на базі якого буде створено відповідний елемент керування (якщо задати null, то WinJS сама створить відповідний елемент):
     
  •  
 
     
  • Для вставки вкладок об'єкти myPivotItem1 і myPivotItem2 об'єднуються в список WinJS.Binding.List , який в свою чергу записується в myPivot.items.
  •  
 Управління Pivot з JS
Вкладка Pivot (PivotItem) складається з заголовка і контенту, між вкладками реалізується закцікленная навігація. Розглянемо, як програмно реалізувати перехід між вкладками елемента. Спочатку необхідно отримати загальну кількість вкладок в елементі Pivot (за допомогою властивості length), потім визначити індекс обраної вкладки і здійснити перехід до наступної. У разі, якщо номер наступної за вибраної вкладки більше, ніж їх загальна кількість, то перехід буде здійснено до першої.
 
Зверніть увагу, що тип items — 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;
	}
}

 
Аналогічно, ви можете перейти до попередньої (наступної) вкладці (пам'ятаєте про зацикленості Pivot) або до конкретної вкладці, вказавши її значення в selectedIndex.
 
 Блокування перемикання вкладок
Давайте розглянемо роботу одного з властивостей вкладок — блокування перемикання сусідніх вкладок. Для прикладу візьмемо елемент управління Pivot, всередину якого ми додали елемент управління ListView . ListView представляє дані у вигляді настроюваного списку або сітки. За допомогою нього реалізовано відображення пошти, контактів адресної книги.
 
 
 
При виділенні елемента списку (ListView) на поточній вкладці, перемикання між іншими вкладками можна заблокувати (приховати), залишаючи активної тільки поточну, на якій відбулося виділення.
 
 
 
Для реалізації блокування сусідньої вкладки використовуйте властивість locked. Воно приймає два значення — true і false. Нижче реалізована функція toggleSelectionMode, в якій перевіряється значення властивості selectionModeActive елемента ListView. Якщо елемент не виділено (selectionModeActive = false), тоді властивості locked присвоюємо значення false, якщо елемент виділено (selectionModeActive = true), то властивості locked присвоюємо значення 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
Візуальне оформлення елементу управління Pivot можна дуже легко міняти. Для того, щоб змінити стиль заголовків або контенту, досить визначити різні CSS класи для елементів Pivota.
 
 
 
 
     
  • Клас win-pivot визначає стиль Pivota
     
     
    .win-pivot {
    	color: darkviolet;
    	font-family: "Times New Roman";
    	font-size: 24pt;
    	background-color: lightblue;
    }
    

     
  •  
  • За допомогою класу win-pivot-title можна окремо визначити стиль заголовка Pivota
     
     
    .win-pivot .win-pivot-title {
    	color: lightcoral;
    	font-size: 18pt;
    }
    

     
  •  
  • win-pivot-header задає стиль заголовка вкладки
     
     
    .win-pivot button.win-pivot-header {
    	color: blue;
    }
    

     
  •  
Для того, щоб вставити всередину заголовка картинку, використовуйте шрифт з відповідними зображеннями. Наприклад, зверніть увагу на шрифт Segoe UI.
 
 
 
Про решту класах, що дозволяють змінювати стиль Pivota, можна почитати тут .
 
 Додавання елемента керування Pivot і WinJS в веб
WinJS доступний для веб-проектів у вигляді відкритої бібліотеки, а також ви можете його використовувати на своїх веб-сторінках.
 
Подивимося, як додати елемент управління Pivot на HTML сторінку. Для цього створіть HTML сторінку і додайте два скрипта з посиланнями на бібліотеку WinJS. Також необхідно додати посилання на бібліотеку теми відображення елемента управління. В даному прикладі використовується світла тема оформлення.
 
 
<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" />

Не забудьте додати скрипт з посиланням на ваші дані, а також скрипт, в якому обробляється подія завантаження контенту і оголошується функція зв'язки елементів WinJS.UI.processAll.
 
 
<script src="js/myscript.js"></script>
<script>
        document.addEventListener("DOMContentLoaded", function () {
            
            WinJS.UI.processAll().then(function () {
//здесь ваш код
            });
        }, false);

    </script>

 
 
Підтримка елементу управління Pivot в Windows буде доступна у версії бібліотеки WinJS 3.0. Якщо ви хочете спробувати додати Pivot свого Windows додаток, то ви можете самостійно зібрати бібліотеку, попередньо скачавши файли тут .
  

    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.