Установка бібліотеки WinJS 3.0

Всім добрий день!



Не так давно ми розповідали вам про анонс нової версії бібліотеки WinJS — WinJS 3.0.

Нагадаю, нова версія надає нам нові функції, такі як кросбраузерна та платформна підтримка, оновлення дизайну універсальних елементів управління і новий модульний підхід.

Якщо ви хочете почати використовувати бібліотеку WinJS 3.0, вже зараз необхідно самостійно зібрати її і підключити в свій проект. У цій статті ми подивимося, як це зробити.


Установка бібліотеки WinJS 3.0

Файли бібліотеки WinJS доступні для установки за допомогою різних диспетчерів пакетів та інших джерел, наприклад:

npm

>npm install winjs


Bower

>bower install winjs


NuGet

>Install-Package winjs


CDN

cdnjs.com/libraries/winjs

Пряме посилання на архів

WinJS 3.0.1 (zip)

Збираємо кастомный білд
У релізі бібліотеки WinJS 3.0 була анонсована підтримка модульного підходу. Тепер ви можете зробити кастомний збірку бібліотеки тільки з тими модулями, які вам необхідні. Давайте подивимося, як зібрати свою власну версію бібліотеки. Для складання кастомного білду вам потрібно встановити git і Node.js.

Виконайте наступні команди:

  • npm install-g requirejs
  • npm install winjs-modules
  • cp node_modules/winjs-modules/WinJS-custom.js .
  • cp node_modules/winjs-modules/example.build.js ./build.js


У разі необхідності, відредагуйте шляху в build.js

Відредагуйте файл WinJS-custom.js, закомментировав ті модулі, які вам не потрібні.

Виконайте команду r.js -o build.js



Готово! Ваш кастомный білд буде розташовуватися по шляху: bin\WinJS.js

Вставляємо зібрану бібліотеку в проект
Відкрийте свій JavaScript проект в Visual Studio і в Solution Explorer e додайте в shared-проект (якщо це універсальне додаток) файли бібліотеки WinJS (включаючи css, fonts і js).



Тепер вам залишилося просто додати посилання на тільки що додані файли на сторінки вашого додатки (у разі Windows/Windows Phone програми, швидше за все, це default.html).

Для проекту Windows:

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


Для проекту Windows Phone:

<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="/WinJS/js/base.js"></script>
<script src="/WinJS/js/ui.js"></script>


Зверніть увагу:

  1. На відмінність посилань, визначають тему, яка буде використовуватися в додатку. Якщо ви працюєте з Windows, то вам необхідно самостійно вибрати, яка тема буде використовуватися в додатку — темна або світла (відповідно ui-dark.css або ui-light.css). Якщо ви розробляєте додаток під Windows Phone, то ви можете вказати посилання на файл ui-themed.css, тоді тема програми буде визначатися відповідно до обраної на телефоні.
  2. Якщо у вашому Windows проекті не підключена бібліотека WinJS 2.1, то, для того, щоб використовувати автоматичне визначення теми у телефоні, вам необхідно прописати посилання в файлах ui-themed.css, ui-themed.theme-dark.css, ui-themed.theme-light.css на файли зі стилями бібліотеки WinJS 3.0.


<img src=«habrastorage.org/files/800/8f3/ad0/8008f3ad0ed54e9fb82e4222353b1ca2.png» width=«700» висота=«350»/>

Бібліотека додано! Тепер можна додати елементи управління і запускати додаток!

Тестуємо елемент управління Pivot в універсальному додатку
Було анонсовано, що крім додавання кроссплатформної підтримки та змін, пов'язаних з дизайном, в бібліотеці WinJS 3.0 додалася підтримка елемента управління Pivot в Windows додатках (у попередніх бібліотеках він був тільки для Windows Phone).

Я вирішила перевірити, як буде виглядати елемент управління Pivot в універсальному додатку. Ось, що у мене вийшло:



Корисні посилання


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

0 коментарів

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