a-bogdanova

[a-bogdanova]

Захват фото в Windows приложении

Сегодня мы посмотрим, как захватить изображение с веб камеры при помощи API CameraCaptureUI. Этот API запускает полноэкранное диалоговое окно интерфейса камеры. Также этот API позволяет выполнять захват фото или видеоизображения.

Обратите внимание, что данный API доступен только для Windows приложений.

Не забудьте добавить ссылки на библиотеку WinJS:

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

Для того, чтобы приложение могло работать с камерой, необходимо указать эту возможность в манифесте вашего приложения:

Добавьте кнопку и обработчик нажатия на кнопку в приложение:

function takepicture() { var captureUI = new Windows.Media.Capture.CameraCaptureUI(); captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (capturedItem) { if (capturedItem) { document.getElementById("message").innerHTML = "User captured a photo." } else { document.getElementById("message").innerHTML = "User didn't capture a photo." } }); }

Готово!

[a-bogdanova]

Реализация навигации в приложениях Windows

Одно из главных, о чем вы должны задуматься на этапе разработки приложения – как организовать навигацию внутри приложения таким образом, чтобы пользователям было удобно работать с контентом, размещенным в приложении.

Существуют различные виды макетов, которые позволяют наиболее удачно реализовать взаимодействие между различными элементами приложения так, чтобы внутри приложения было легко ориентироваться, а также ограничить количество элементов управления, постоянно находящихся на экране.

Основные шаблоны навигации

Плоский шаблон

Плоский шаблон навигации рекомендуется использовать, если приложение содержит небольшое количество страниц, все страницы и вкладки расположены на одном логическом уровне. Плоский шаблон позволяет быстро переходить между страницами.

Для того, чтобы использовать плоский шаблон страницы, необходимо, чтобы каждая страница приложения была доступна с любой другой страницы, и пользователь мог произвольным образом переходить между страницами.

Посмотрим, как реализовать плоский шаблон в приложении Windows.

Навигация в Windows приложениях при помощи панели навигации

Реализовать плоский шаблон в приложении вы можете при помощи элементов управления NavBar, NavBarCommand и NavBarContainer, которые являются частью библиотеки WinJS.

Создайте пустое приложение Windows в Visual Studio и не забудьте добавить ссылки на библиотеку WinJS. Если вы не знакомы с WinJS, можете прочитать основную информацию об этой библиотеке здесь.

Для примера, посмотрим, как создать панель навигации с двумя страницами. В основной html файл вашего приложения добавьте блок div и атрибуту data-win-control присвойте значение WinJS.UI.NavBar. Внутри этого блока определите объект NavBarContainer с элементами управления NavBarCommand.

<div id="navBar" data-win-control="WinJS.UI.NavBar"> <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer"> <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', tooltip: 'Take me home', id:'homeButton', icon: WinJS.UI.AppBarIcon.home, location: '/pages/home/home.html', }"> </div> … </div> </div>

Обратите внимание: для каждого элемента управления NavBarCommand мы задаем его название, подсказку, которая отображается при наведении на элемент, иконку кнопки - WinJS.UI.AppBarIcon и адрес страницы, на которую будет осуществлен переход при нажатии на кнопку.

Также нам необходимо добавить код обработки событий Navigation.onnavigating и Navigation.onnavigated. Приведем пример кода обработки события Navigation.onnavigated. Обработчик получает URL-адрес расположения, куда выполняется переход, от объекта события (определенного в свойстве location атрибута data-win-options объекта NavBarCommand). Затем обработчик очищает узел содержимого (элемент управления страницей) и отрисовывает новую страницу в узле.

nav.onnavigated = function (evt) { var contentHost = document.body.querySelector("#contenthost"), url = evt.detail.location; // Очищение элемента управления страницей WinJS.Utilities.empty(contentHost); // Оторбражение новой страницы в узле WinJS.UI.Pages.render(url, contentHost); }

Иерархический шаблон

Этот шаблон используется, когда содержимое приложения можно представить в виде отдельных, но взаимосвязанных разделов или категорий с разным уровнем детализации. Также удобно применять его, если в приложении содержится структурированное содержимое.

При использовании иерархического шаблона, в приложении создается начальная страница – концентратор, а также разделы, элементы и сведения. На начальной странице представлены все основные возможности и компоненты приложения. Вторым уровнем приложения является страница (страницы) разделов приложения. На страницах разделов отображаются образцы, сводка или краткий обзор элементов, связанных с разделом. Каждый элемент страницы имеет ссылку на страницу сведений, являющеюся третьим уровнем приложений. На странице сведений отображается большая часть содержимого или функций для конкретного элемента, выбранного на страницах предыдущих уровней – концентратора и раздела.

Реализовать иерархический шаблон можно при помощи элемента управления Hub, являющегося элементом управления библиотеки WinJS.

Обратите внимание: элемент управления Hub доступен только для Windows приложений.

Навигация в Windows приложениях при помощи элемента управления Hub

Создайте проект, в котором будет содержаться 3 страницы – html, js, css. На странице html определите элемент управления Hub и несколько главных разделов – объекты HubSection. Если вы не знакомы с тем, как добавлять элементы управления библиотеки WinJS, ознакомьтесь с инструкцией. Свойство элемента управления Hub - sectionOnScreen определяет индекс первой видимой вкладки. Дополнительно воспользуемся следующими свойствами объекта HubSection – свойством header, при помощи которого задается заголовок раздела и свойством isHeaderStatic, которое определяет, является заголовок статическим или динамическим.

<div data-win-control="WinJS.UI.Hub" id="hub" data-win-options="{ sectionOnScreen : '1', }"> <div data-win-control="WinJS.UI.HubSection" data-win-options="{ header: 'Ancient Greek authors', isHeaderStatic: true }"> </div> </div> 

После добавления объектов Hub и HubSection нам необходимо инициализировать их. Обратите внимание, что если какие-то из объектов имеют динамические заголовки, то необходимо обработать событие Hub.onheaderinvoked. Обработчик получает индекс вызванного объекта HubSection и устанавливает значение Hub.sectionOnScreen.

// Получаем индекс вызванного объекта // обрабатываем событие headerInvoked hub = WinJS.Utilities.query("#hub")[0]; hub.winControl.onheaderinvoked = onHeaderInvoked; }; app.oncheckpoint = function (args) { }; // Обработка события нажатия на заголовок секции // делаем секцию полностью видимой. function onHeaderInvoked(args) { hub.winControl.sectionOnScreen = args.detail.index; }

Можно добавить дополнительные элементы управления, например, кнопку BackButton и определить стили страницы.

Навигация в Windows приложениях при помощи элемента управления Pivot

Элемент управления Pivot позволяет реализовать простой способ управления, представления и быстрой навигации по разделам содержимого в вашем приложении путем сдвига влево или вправо — непрерывным вращением подобно карусели. Его можно использовать для фильтрации больших наборов данных, просмотра нескольких наборов данных или переключения между представлениями приложения.

Поддержка элемента управления Pivot в приложениях Windows была анонсирована в качестве новой функции библиотеки WinJS 3.0. На момент написания статьи библиотеку WinJS 3.0 можно собрать самостоятельно при помощи диспетчера пакетов (Bower, npm, или NuGet), с помощью CDN ссылки, загружая zip архив с нашего веб сайта или копируя репозиторий для сборки собственной копии с GitHub’а. О том, как работать с элементом управления Pivot в Windows Phone, я рассказывала в этой статье, разница для приложений Windows – в ссылках на библиотеку и в определении стилей для устройств.

[a-bogdanova]

Как собрать библиотеку WinJS 3.0

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

Не так давно была анонсирована новая версия библиотеки WinJS – WinJS 3.0.

Новая версия предоставляет нам новые функции, о которых вы можете прочитать здесь.

Обратите внимание: на GitHub'e вы можете найти все файлы библиотеки WinJS.

Для сборки библиотеки установите git и Node.js. После установки этих пакетов, не забудьте перезагрузить компьютер.

Запустите git и в командную строку вставьте следующий код:

git clone https://github.com/winjs/winjs.git

Далее, вам необходимо изменить директорию winjs. Пишем следующее:

cd winjs

Затем устанавливаем интерфейс командной строки grunt глобально:

npm install -g grunt-cli

и и последовательно выполняем эти команды

1) npm install 2) grunt

Библиотека собрана! Ее файлы располагаются по адресу: C:\Users\your_user_name\winjs

Как вставить собранную библиотеку в проект

Откройте свой JavaScript проект в Visual Studio и в Solution Explorer’e добавьте новую папку, которая и будет содержать файлы библиотеки.

В ней, в свою очередь, создайте еще 3 папки – css, fonts, js. В них добавьте файлы из папки C:\Users\your_user_name\winjs\bin.

В html файл вашего проекта добавьте ссылки на только что добавленные файлы:

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

Готово! Теперь можно добавлять элементы управления и запускать приложение!

У меня получилось добавить элемент управления Pivot в Windows приложение (в предыдущих библиотеках он был не доступен).

[a-bogdanova]

Использование API Bing Maps в Windows приложениях

Давайте посмотрим, как можно встроить карты в приложение

Откройте Visual Studio и создайте пустой проект JavaScript –>  Store Apps  –>  Windows App

Добавьте ссылку на SDK Bing Maps. Для этого, в Solution Explorer правой кнопкой мыши нажмите на папку References, затем на Add Reference. Выберите Windows -> Extensions, затем Bing Maps для JavaScript.

Создайте новый JavaScript файл в папке js. Мы будем использовать его для описания логики приложения.

Обратите внимание, что в папке js referenc’ов Bing Maps для JavaScript находится два JavaScript файла. Файл veapicore.js отвечает за загрузку карт в ваше приложение, а в файле veapiModules.js находится дополнительный код, который используется в случае подключения дополнительных модулей Bing Maps.

Перейдем непосредственно к добавлению Bing Maps в приложение. Для начала добавим необходимые ссылки.

На библиотеку WinJS:

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />

<script src="//Microsoft.WinJS.2.0/js/base.js">

</script> <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

На файлы проекта:

<link href="/css/default.css" rel="stylesheet" />

<script src="/js/default.js"></script>

<script type="text/javascript" src="/js/BingMaps.js"></script>

На элементы управления Bing Maps:

<script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>

<script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapiModules.js"></script>

Добавьте блок div в том месте, где вы хотите отрендерить карту.

В JavaScript файл, описывающий логику приложения, добавьте следующий код для инициализации карты.

(function () {

var map; function initialize() {

Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: GetMap });

} function GetMap() {

map = new Microsoft.Maps.Map(document.getElementById("myMap"), {

credentials: "YOUR_BING_MAPS_KEY"

});

} document.addEventListener("DOMContentLoaded", initialize, false);

})();

  Вам осталось заменить YOUR_BING_MAPS_KEY на свой ключ Bing Maps Key.

    Готово!

[a-bogdanova]

Как добавить рекламный блок в свое приложение

Привет!

Сегодня я хочу рассказать о том, как добавить рекламный блок в свое приложение. Начнем с выбора сервиса, непосредставенно ко вставке рекламного блока перейдем в конце.

Цель

Найти самый простой способ для монетизации приложения на платформе Windows Phone 8.1.

Начало – выбор системы

Я взяла список, состоящий из нескольких систем, а именно:

AdMob

Smaato

Begun

Plus1

Adduplex

Трудности:

Основная трудность была связана с тем, что Мы находимся в России, а некоторые системы не поддерживают вывод денег из своих механизмов.

Начнем с первого сервиса, именно, с AdMob.

Минус – нет SDK для 8.1, из-за несоответствия referenc’а и версии примера приложения, запустить не удалось даже его, что неприятно удивило меня.

Что касается второго сервиса –  Smaato – тут тоже все не так просто.

Плюс – есть версия SDK для 8.1.

Минус – при попытке запустить sample – появилась вот такая ошибка:

Error    2    Named resource 'Files\..\..\..\..\..\..\..\Richard\SkyDrive\Projects\Smaato\Smaato SDK for WP 8.1\Smaato SDK for Windows Phone 8.1\SOMAWP81\bin\Release\SOMAWP81.pri' is outside project root! Only resource containers are allowed outside the project root.    C:\Users\***\Downloads\SOMA_SDK_for_WINDOWSPHONE_8_1_V1.0.7\Smaato SDK for WP8\Samples\Presentation Layer Exec\Presentaion Layer Exec\MakePRI    Presentation Layer Exec

Кто такой Ричард и почему я не могу запустить из-за него пример приложения я не знаю, поэтому решила написать в техподдержку с просьбой решить эту проблему.

Сервис Begun тоже не порадовал – SDK для версии 8.1. отсутствует, ставим ему жирный минус.

У Plus1 отсутствует SDK – сразу отказалась от его использоваться.

А вот и последний претендент – Adduplex. Вот к нему мы и приглядимся)

AdDuplex — ведущий сервис баннеро-обменной сети для Windows Phone и Windows приложений. Для начала необходимо зарегистрироваться на сайте – заполнить информацию о себе. После регистрации у вас появится своя панель управления. Мы посмотрим, как добавить баннер, при помощи которого вы сможете рекламировать внутри своего приложения другие или какие-то функции своего приложения, например, встроенные покупки.

Нам необходимо зарегистрировать приложение. Для этого нажимаем New app в блоке Apps. Далее выбираем имя для нашего приложения и ту платформу, под которой оно работает. Если ваше приложение уже опубликовано, укажите ссылку на него.  После заполнения всех полей нажмите кнопку Create.

Вашему приложению будет присвоен номер – ID, который потребуется при последующей работе с баннером.

Создайте баннер и укажите ссылку, в случае, если собираетесь промотировать через свое приложение другое.

Для того, чтобы добавить баннер в приложение, скопируйте ссылки из вкладки AdDuplex SDK.

Обратите внимание: Если вы используете SDK для универсальных приложений, ссылки должны быть немного другими, а именно:

Для Windows приложения:

xmlns:ad="using:AdDuplex.Universal.Controls.Win.XAML"

<ad:AdControl x:Name="adDuplexAd" AppId="YOUR_AppId_HERE" Size="500x130" />

Для Windows Phone приложения:

xmlns:ad="using:AdDuplex.Universal.Controls.WinPhone.XAML"

  <ad:AdControl x:Name="adDuplexAd"                AppId="YOUR_AppId_HERE" />

  Где вместо YOUR_AppId_HERE указываете ID вашего приложения в системе AdDuplex. 

Как установить AdDuplex SDK

1) Скачайте AdDuplex SDK. Для универсальных приложений Windows 8.1 и Windows Phone 8.1 можно скачать SDK здесь.

2) В списке файлов вашего проекта правой кнопокй мыши нажмите на References – Add Reference

3) В левой части открывшегося окна выберите Browse и укажие путь до файла с SDK.

Готово! SDK добавлено!

Обратите внимание: SDK нужно добавлять для каждого проекта в отдельности.

Если вы сделали все правильно, то у вас, должно получиться что-то подобное:

[a-bogdanova]

Элементы управления библиотеки WinJS

Всем привет!

Сегодня мы с вами будем говорить об элементах управления библиотеки WinJS, об основных вещах, которые нужно знать при создании приложений с ее помощью. Библиотека WinJS в текущей версии состоит из двух частей: base.js и ui.js, отвечающих, соответственно, за ряд базовой функциональности и создание элементов управления и работу с ними. Для стилизации элементов управления к библиотеке также прилагаются наборы стилей ui-light.css и ui-dark.css. Давайте познакомимся с ui-частью, с основными элементами управления, входящими в библиотеку WinJS, а также рассмотрим базовые вещи, необходимые для работы с WinJS.

Основные элементы управления, входящие в библиотеку WinJS

AppBar Панель приложения с набором команд.

BackButton Кнопка «Назад» для перехода к предыдущему экрану. В Windows Phone имеет встроенную аппаратную или программную реализацию.

DatePicker Элемент управления для выбора даты. Позволяет выбрать месяц, день и год.

FlipView Элемент управления FlipView используется для отображения коллекции элементов. В каждый момент времени отображается только один объект.

Flyout Элемент управления Flyout используется для отображения всплывающего окна на странице. Его можно также применять для вывода различных предупреждений, сообщений.

ListView Элемент управления ListView является одним из основных элементов в библиотеке WinJS. С его помощью вы можете отображать различные списки объектов – файлы, фотографии, фильмы и т.д.

ItemContainer Создает элемент, по которому можно проводить пальцем, сжимать и перетаскивать. Используйте ItemContainer, когда необходимо отобразить элементы, но нет потребности во всех возможностях элемента управления ListView.

NavBar Тип панели приложения AppBar, отображающий команды навигации.

Rating Позволяет вводить и отображать поставленные оценки. По умолчанию можно выставлять оценки от 1 до 5 посредством выбора соответствующего количества звезд.

Repeater Формирует HTML-код на основе набора данных и шаблона. По сути – простой список без дополнительно функциональности ListView.

SearchBox Позволяет выполнять поисковые запросы и выбирать предлагаемые варианты.

SemanticZoom Позволяет пользователям переключаться между двумя видами с разным масштабом, предоставляемыми дочерними элементами управления. Один дочерний элемент управления предоставляет вид с уменьшенным масштабом, другой — вид с увеличенным масштабом.

TimePicker Позволяет пользователям выбрать время. Позволяет выбрать часы, минуты и время суток (AM/PM)

ToggleSwitch Является аналогом элемента checkbox в HTML. Включает или отключает элемент.

Tooltip Отображает подсказку с поддержкой форматированного содержимого (например, изображения и форматированный текст), чтобы предоставить больше информации об объекте.

x-ms-webview Отображает HTML-содержимое. С помощью этого элемента управления можно отображать веб-страницы приложения.

Список всех доступных элементов управления можно найти здесь. С основными элементами управления мы познакомились, теперь пришло время разобраться с тем, как подключить библиотеку WinJS и добавить элементы управления в приложение.

Как подключить библиотеку WinJS

Для того, чтобы подключить библиотеку WinJS, достаточно указать на нее 3 ссылки в главном HTML файле приложения.

Ссылки на библиотеку для Windows:

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

Ссылки на библиотеку для Windows Phone: <link href="/css/ui-themed.css" rel="stylesheet"/> <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script> <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

Обратите внимание: Ссылки на WinJS для Windows и Windows Phone приложений различаются, в том числе версией. Одна из ссылок, которую нужно указывать в HTML файле определяет тему, которая будет использоваться в приложении. В состав библиотеки WinJS для Windows включены две темы оформления – темная (ui-dark.css) и светлая (ui-light.css). Вам необходимо выбрать тему для своего приложения вручную. В случае работы с Windows Phone, Вы можете предоставить выбор пользователю, указав ui-themed, или явно задав тему аналогично подходу в Windows.

Как добавить элемент управления в приложение

Все элементы управления в библиотеке WinJS задаются через атрибут data-win-control с нужным значением (WinJS.UI.****) в соответствующем элементе разметки. Например, чтобы добавить FlipView, присвойте атрибуту data-win-control значение WinJS.UI.FlipView.

<div id="basicFlipView" data-win-control="WinJS.UI.FlipView"></div>

Библиотека WinJS автоматически создаст на базе этого блока элемент с необходимыми стилями и разметкой. Также, через атрибут data-win-options в разметке можно указать параметры создания элемента.

<div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{…}"></div>

 Для работы некоторых элементов управления необходимы дополнительные данные, например, источник изображений. Давайте посмотрим, как добавить данные в элемент управления.

Как добавить данные в элемент управления

За определение данных, которые хранятся в элементе управления, отвечает свойство itemDataSource. Для того, чтобы указать, какие данные будут использоваться, присваиваем атрибуту data-win-options значение itemDataSource.

<div data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : value}"> </div>

К примеру, если для работы элемента управления требуются картинки, то для их представлен��я можно использовать объект WinJS.Binding.List. Обратите внимание, что при декларативном описании переменная с данными должна быть видна в глобальном контексте. Для корректного отображения данных необходимо определить шаблон. Посмотрим, как это сделать.

Как определить шаблон для отображения данных в элементе управления

Для того, чтобы определить, как будут отображаться данные, задайте шаблон WinJS.Binding.Template для каждого элемента. Создайте блок div и присвойте атрибуту data-win-control значение WinJS.Binding.Template. Например, определим шаблон для отображения картинки с заголовком.

<div id="Template" data-win-control="WinJS.Binding.Template"> <!—- Задаем шаблон для отображения картинки. --> <img data-win-bind="alt: title; src: picture" /> <div> <!-- Задаем шаблон для отображения заголовка. --> <h4 data-win-bind="innerText: title"></h4> </div> </div>

Обратите внимание, что мы определяем привязку данных при помощи атрибута data-win-bind.

Инициализация WinJS.UI.

Итак, мы научились создавать элементы управления, теперь нам нужно разобраться с тем, как их инициализировать. После того, как приложение запущено, наступает событие activated. После этого можно инициализировать элементы управления WinJS. Это происходит внутри функции WinJS.UI.processAll. В самом простом случае функция обработки запуска приложения выглядит следующим образом:

(function () { "use strict"; var app = WinJS.Application; app.addEventListener("activated", function (args) { WinJS.UI.processAll(); }); app.start(); })();

Если вы хотите обработать только конкретный DOM-узел, то используйте функцию WinJS.UI.process. Также вы можете создавать элементы управления напрямую в коде на JavaScript, используя соответствующие объекты из WinJS.UI.*.

Дополнительные ссылки

Список элементов управления (HTML) Краткое руководство: добавление элементов управления WinJS и стилей (HTML) MVA курс по мобильной разработке для веб-разработчиков Скачать Microsoft Visual Studio можно здесь

[a-bogdanova]

WinJS 3.0 – релиз для всех платформ (перевод)

Команда проекта «Библиотека Windows для JavaScript» (WinJS) спешит сообщить о первом релизе с момента представления открытого проекта на конференции //BUILD 2014 – библиотеке WinJS 3.0. Релиз WinJS 3.0 предлагает разработчикам:

Кроссбраузерную/кроссплатформенную поддержку, охватывающую наиболее распространенные декстопные и мобильные браузеры, а также основанные на HTML среды приложений, такие как Apache Cordova

Модульный подход, предоставляющий разработчикам контроль над оптимизацией производительности и загрузкой только тех модулей библиотеки WinJS, которые необходимы для их веб сайта или приложения

Улучшенный дизайн универсальных элементов управления, обеспечивающий более комфортную работу для конечных пользователей и охватывающий телефоны, планшеты, компьютеры — форм-факторы с различными размерами экранов и устройства ввода

Кроссплатформенные возможности и улучшения дизайна

Последние пять месяцев команда WinJS была сосредоточена на том, чтобы библиотека без проблем работала на различных платформах и браузерах. Это означает, что теперь вы можете использовать WinJS не только для ваших универсальных Windows-приложений, но также для ваших веб сайтов и при создании мобильных приложений, основанных на HTML, при помощи различных платформ, использующих технологии, аналогичные Apache Cordova. Смотрите полную таблицу браузеров и операционных систем, поддерживаемых библиотекой WinJS. Основное, на чем мы акцентируем внимание в релизе 3.0 — улучшение кросс-платформенной инфраструктуры для композиции интерфейса, работы с клавиатурой, локализации строк и поддержки языков, которые пишутся справа налево, а также на исчерпывающем наборе юнит-тестов, работающих на наших компонентах для основных операционных систем и браузеров; на обновлении дизайна для стандартных элементов управления WinJS и встроенных элементов управления HTML, обеспечивая единый пользовательский интерфейс на многих платформах и браузерах.

Обновления дизайна

Добавление в репозиторий WinJS шрифта, содержащего символы, используемые в AppBar, NavBar, FlipView, Ratings, Hub, и SearchBox; так что теперь они отображаются на многих операционных системах и браузерах. Например, вот как выглядит элемент управления Ratings:

ListView теперь поддерживает шаблоны Grid и List на всех платформах. Зависимость шаблона от CSS Grid была убрана, таким образом теперь поддерживается ListView с группировкой элементов.

AppBar теперь имеет визуальное представление для скрытия и вызова панели, благодаря этому панель больше на зависит только от жестов с краев.

Кнопки навигации по FlipView всегда отображаются на платформах, которые не поддерживают точки привязки прокрутки в CSS.

Элементы управления диапазоном ввода (Input range), встроенный элемент управления HTML — слайдер, и другие встроенные элементы управления получили обновление внешнего вида на разных платформах.

После того, как была убрана зависимость от CSS Grid, у элемента управления NavBar обновилась композиция интерфейса.

Поисковые подсказки в элементе управления Searchbox стали отображаться на различных платформах (после того, как была создана прослойка для поддержки API подсказок).

Элемент управления Toggle switch больше не зависит от встроенного HTML слайдера и является полнофункциональным и визуально привлекательным на всех платформах.

 Теперь у элемента управления Pivot есть кнопки по обе стороны от заголовка, поэтому его можно использовать при помощи мыши. Также он красиво отображается на экранах всех размеров (раньше он отображался только на небольших экранах мобильных телефонов).

Модульность

Теперь WinJS 3.0 разделена на несколько десятков модулей. Вы можете продолжить использовать библиотеку со всеми модулями, как в раньше или вы можете сделать кастомную сборку WinJS только с теми модулями, которые вам нужны. Это дает вам возможность контроля над оптимизации вашей производительности и размером загружаемых ресурсов. Это особенно удобно при использовании WinJS для веб-сайта или при использовании ее вместе с другими популярными библиотеками, как AngularJS или Knockout. WinJS была разработана с нуля для того, чтобы иметь хорошую внутреннюю архитектуру и совместимость с другими библиотеками. Теперь легко делать такие сборки WinJS, которые будут включать только те слои, которые вы используете. Например, если вы хотите использовать только AppBar в вашем приложении, вы можете сделать кастомную сборку WinJS, которая будет содержать подходящие модули для Appbar, исключая всю остальную библиотеку WinJS, а, затем, использовать ее вместе с библиотекой вроде Knockout, включая связывание данных. Инструкцию по сборке кастомной библиотеки WinJS смотрите на вики-странице на GitHub'е. Мы сделали нашу собственную сборку для того, чтобы улучшить быстродействие сайта try.buildwinjs.com. В таблице ниже представлены данные о некоторых кастомных сборках, которые вы можете сделать, а также соответствующие размеры JavaScript кода

Улучшенный дизайн универсальных элементов управления

В дополнении к кроссплатформенным изменениям, мы начали процесс объединения нашей библиотеки. Таким образом, телефоны, планшеты и компьютеры будут поддерживаться одним единственным релизом WinJS. Для достижения этой цели, анимации, которые до этого были доступны только для телефона, сейчас доступны для всех форм-факторов в WinJS 3.0. Элемент управления Pivot, ранее доступный только на телефоне, теперь также поддерживается на всех форм-факторах. Он был усовершенствован таким образом, что им можно управлять при помощи мыши и клавиатуры, а также масштабировать на все размеры экранов. Оставайтесь с нами для того, чтобы быть в курсе дальнейших улучшений в этом направлении!

Двигаясь вперед

Члены команды проекта WinJS MS Open Tech хотят искренне поблагодарить за теплый прием, который мы получили от GitHub сообщества, а также за проявленный интерес и поддержку. Вместе мы можем продолжать собирать WinJS как большую открытую JavaScript библиотеку, которая приспосабливается к нуждам веб разработчиков по всему миру и помогает всем нам создать восхитительную, основанную на опыте пользователей библиотеку, которая может совместно использовать код между сайтами и приложениями. Мы призываем вас присылать pull запросы и проблемы с файлами через GitHub или при помощи ссылок «задать вопрос» на нашем сайте. Проверяйте нашу страницу в фейсбуке и подписывайтесь на нас в твиттере @buildwinjs, там мы размещаем крупные анонсы о нашем проекте.

Дополнительные ссылки

WinJS на GitHub'е. Основные элементы управления библиотеки WinJS здесь. Протестируйте основные элементы управления на сайте try.buildwinjs.com. Про использование FlipView в универсальных приложениях можно почитать тут. MVA курс по мобильной разработке для веб-разработчиков. Скачать Microsoft Visual Studio можно здесь.

Оригинальная статья: http://blogs.windows.com/buildingapps/2014/09/17/winjs-everywhere/

[a-bogdanova]

WinJS + универсальные приложения. Изучаем FlipView

Давайте посмотрим, как создать галерею изображений, используя элемент управления FlipView из библиотеки WinJS. Мы будем делать галерею фотографий и коллекцию карточек товаров в интернет магазине в рамках универсального приложения для Windows и Windows Phone, а также рассмотрим использование библиотеки WinJS в вебе.

  Создание простой галереи

  У элемента управления FlipView есть два ключевых свойства - itemDataSource и itemTemplate. Свойство itemDataSource ссылается на источник данных IListDataSource, который можно создать при помощи WinJS.Binding.List, а свойство itemTemplate - на шаблон для данных ItemTemplate (WinJS.Binding.Template).

Для создания FlipView, вам нужно выполнить три простых действия:

1) Создать элемент управления FlipView.

2) Добавить источник данных.

3) Определить шаблон для отображения.

Создание FlipView

Для того, чтобы создать FlipView — элемент, необходимо добавить на страницу блок div с атрибутом «data-win-control», и присвоить ему значение WinJS.UI.FlipView:

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

Добавление данных в элемент управления Flipview

  Для добавления данных в элемент управления FlipView, вам нужно создать источник данных IListDataSource и определить шаблон WinJS.Binding.Template для каждой карточки. Вы можете воспользоваться объектом WinJS.Binding.List, а, при необходимости, создать свой источник данных. В качестве примера, посмотрим, как создать источник данных при помощи объекта WinJS.Binding.List. Для этого добавьте в JavaScript файл массив данных с несколькими свойствами. В данном примере это тип элемента, название и изображение.

var dataList = new WinJS.Binding.List([ { type: "item", title: "Горы", picture: "images/1.jpg" }, { type: "item", title: "Гроза", picture: "images/2.jpg" }, { type: "item", title: "Замок", picture: "images/3.jpg" }, … ]); // Делаем dataList видимым глобально WinJS.Namespace.define("DataExample", { itemList: dataList }); Для того, чтобы связать ваш список данных с элементом управления FlipView, используйте свойство itemDataSource: var flipView = document.getElementById("basicFlipView").winControl; flipView.itemDataSource = DataExample.itemList.dataSource;

Обратите внимание:

Можно объявить те же самые данные декларативно в HTML коде. Для этого внутри атрибута data-win-options присвойте свойству itemDataSource значение, равное DataExample.itemDataList.dataSource, в блоке div элемента управления FlipView.

<div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource }"></div>

Создание шаблона для отображения данных

  Далее, для корректного отображения данных нужно задать шаблон WinJS.Binding.Template. Это можно сделать двумя способами: определить WinJS.Binding.Template с помощью ручной разметки или же реализовать функцию, которая сделает это автоматически. Посмотрим, как создать шаблон вручную.

Добавьте блок div и присвойте атрибуту data-win-control значение WinJS.Binding.Template, в него добавьте дополнительные классы с описанием разметки для каждого свойства элемента - типа элемента, названия и изображения.

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template"> <div class="overlaidItemTemplate"> <img class="image" src="#" data-win-bind="src: picture; alt: title" /> <div class="overlay"> <h2 class="ItemTitle" data-win-bind="innerText: title"></h2> </div> </div> </div>

Для того, чтобы применить шаблон элемента, внутри атрибута data-win-options присвойте свойству itemTemplate значение, равное ItemTemplate, в блоке div элемента управления FlipView.

<div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"></div>

Готово! У нас получилось создать галерею для отображения фотографий.

  Стилизация FlipView

  Элемент управления FlipView вы можете стилизовать с помощью шаблона WinJS.Binding.Template, а для кнопок навигации существует отдельный набор CSS классов.

Ниже дана схема компонентов элемента управления FlipView, к которым можно применить стили.

· .win-navbottom Задает стиль кнопки навигации вниз.

· .win-navbutton Задает стиль всех кнопок навигации.

· .win-navleft Задает стиль кнопки навигации влево.

· .win-navright Задает стиль кнопки навигации вправо.

· .win-navtop Задает стиль кнопки навигации вверх.

Например, для того, чтобы задать стиль правой кнопки навигации для элемента управления FlipView, нужно переопределить класс CSS win-navright.

.win-flipview .win-navright { background-color: rgba(0,0,255, 0.8); width: 50px; height: 650px; margin-left: -50px; margin-top: -402px; margin-right: 10px; }

Создание галереи для отображения товаров в интернет магазине

  Мы уже познакомились с тем, как добавлять изображения в элемент управления FlipView. Давайте посмотрим, как создать галерею для отображения товаров в интернет магазине. Сделать это очень просто. Создайте файл с данными, где у каждого элемента будет четыре свойства – тип, картинка, название и описание. Основное изменение по сравнению с предыдущим шаблоном связано с определением CSS стилей.

Разделите экран на несколько частей – для этого определите для объекта overlaidItemTemplate свойство -ms-grid-rows. Обратите внимание, что для относительного позиционирования элементов в FlipView удобно использовать Grid Layout.

В своем примере я предпочла разделить экран на две равные части. На одной будет отображаться картинка с названием, на другой – описание товара. Для того, чтобы задать CSS стили нижней части экрана, я определила класс для .overlaidItemTemplate .ItemDescription. Все ограничивается только вашей фантазией! У меня, например, получился макет интернет магазина по продаже телевизоров.

Для того, чтобы сделать страницу, на которой элементы будут иди списком, просто добавьте в атрибут data-win-option свойство orientation со значением 'vertical'.

Вот такие настройки использовались для стилизации мини-магазина.

/*CSS стили для всего шаблона*/ .overlaidItemTemplate { display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr 1fr; width: 100%; height: 100%; } /*CSS стили для нижней части шаблона */ .overlaidItemTemplate .ItemDescription { color: black; font-family: 'Segoe UI Mono'; font-size: 15pt; padding-top: 8px; padding-left: 8px; -ms-grid-row-align: stretch; background-color: rgba(255, 255, 255, 0.4863); background-position-y: 50%; position: relative; z-index: 2; -ms-grid-row: 2; }

Давайте немного модифицируем задачу. Пусть теперь нам необходимо каким-то образом отметить некоторые товары, допустим, выделить новые модели. Разберемся с тем, как это сделать.

· Добавляем в массив данных новое свойство - isNew, принимающее значение true или false в зависимости от того, является товар «новым» или нет:

var dataArray = [ { type: "item", title: "Feel", picture: "images/Cliff.jpg", description: "Тип экрана", isNew: true }, … { type: "item", title: "Grape", picture: "images/Grapes.jpg", description: "Тип экрана", isNew: false }, ];

· Используя WinJS.Binding.converter, создаем конвертер, при помощи которого мы добавляем поверх значок со стикером.

var converters = { convertToPic: WinJS.Binding.converter(function(showSticker) { if (showSticker) return '/images/star.png'; else return ""; }) }; WinJS.Namespace.define("Data", {"Converters": converters });

· Вставляем изображение в шаблон

<div class="imageBackgroundnew"><img data-win-bind="src: isNew Data.Converters. convertToPic" /></div>

Создание элемента управления контекстом

  Очень часто элементы управления, аналогичные FlipView, используются на страницах веб-сайтов для того, чтобы реализовать с отображение текущей позиции и навигации по элементам. Посмотрим, как сделать тоже самое при помощи FlipView.

В элементе управления FlipView есть методы и события, которые дают пользователю представление о текущей позиции в галерее и об общем количестве элементов. Давайте добавим кнопки, с помощью которых можно реализовать возможность перехода к любому элементу. Синхронизация кнопок переключения с FlipView поддерживается с помощью событий pageselected и pagevisibilitychanged.

Вам нужно описать события нажатия на кнопку и перелистывания страницы в javascript файле вашего проекта. Общий план такой:

1. Создание элемента управления переключением страниц.

2. Создание кнопок переключения между страницами и добавление событий нажатия на кнопку.

3. Определение начала переключения страницы и блокировка последующих переключений до завершения перемещения на соседнюю страницу.

4. Описание события переключения страницы.

5. Добавление созданного элемента управления в DOM.

Полный код реализации навигации по элементу управления FlipView смотрите здесь:

HTML код:

<div data-win-control="ContextControl"> <div class="contextControlScenario"> <div id="contextControl_ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> <div class="overlaidItemTemplate"> <img class="image" data-win-bind="src: picture; alt: title" /> <div class="overlay"> <h2 class="ItemTitle" data-win-bind="innerText: title"></h2> </div> </div> </div> <div> <div id="contextControl_FlipView" class="flipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource: DefaultData.bindingList.dataSource, itemTemplate: contextControl_ItemTemplate }"> </div> <div id="ContextContainer"></div> </div> </div> </div>

JavaScript код:

(function () { "use strict"; var myFlipview = null; var page = WinJS.UI.Pages.define("default.html", { processed: function (element, options) { myFlipview = document.getElementById("contextControl_FlipView").winControl; myFlipview.count().done(countRetrieved); } }); function countRetrieved(count) { // 1) Создаем элемент управления переключением страниц var contextControl = document.createElement("div"); contextControl.className = "contextControl"; var isFlipping = false; // 2) Создаем radio кнопки для каждой страницы в FlipView и добавляем «флаг» var radioButtons = []; for (var i = 0; i < count; ++i) { // Создаем radio-кнопку var radioButton = document.createElement("input"); radioButton.setAttribute("type", "radio"); // Задаем имя для группы radio кнопок radioButton.setAttribute("name", "flipperContextGroup"); // Присваиваем каждой кнопке номер страницы radioButton.setAttribute("value", i); // Установка маркера доступности radioButton.setAttribute("aria-label", (i + 1) + " of " + count); // Добавлем обработчик события radioButton.onclick = radioButtonClicked; // Добавляем кнопки в нашу коллекцию radioButtons.push(radioButton); // Добавляем кнопки в элемент управления переключением страниц contextControl.appendChild(radioButton); } // 3) Устанавливаем связь между выбранным элементом и элементом, на котором //находится FlipView if (count > 0) { radioButtons[myFlipview.currentPage].checked = true; } // 4) Описываем события для radio кнопок function radioButtonClicked(eventObject) { if (isFlipping) { var currentPage = myFlipview.currentPage; radioButtons[currentPage].checked = true; } else { var targetPage = eventObject.srcElement.getAttribute("value"); myFlipview.currentPage = parseInt(targetPage, 10); } } // 5) Определяем начало переключения страницы для того, чтобы предотвратить // переключения страницы до завершения предыдущего переключения myFlipview.addEventListener("pagevisibilitychanged", function (eventObject) { if (eventObject.detail.visible === true) { isFlipping = true; } }, false); // 6) Подсвечиваем элемент, на котором мы находимся myFlipview.addEventListener("pageselected", function () { // Перемещение закончено, «опускаем» флаг isFlipping = false; // Устанавливаем выбранную страницу var currentPage = myFlipview.currentPage; radioButtons[currentPage].checked = true; }, false); // 7) Добавляем элемент управления в DOM var contextContainer = document.getElementById("ContextContainer"); contextContainer.appendChild(contextControl); } })();

Обратите внимание, что для стилизации кнопок переключения будем использовать radio кнопки. Для того, чтобы сделать симпатичные круглые кнопки, достаточно задать CSS свойство border-radius и указать, насколько процентов мы хотим закруглить края (по умолчанию radio кнопки прямоугольные)

input[type="radio"] { margin: 10px 5px; width: 15px; height: 15px; padding: 0px; border-radius: 50%; }

FlipView в вебе

WinJS доступен для веб-проектов в виде открытой библиотеки, а также вы можете его использовать на своих веб-страницах. Вы можете посмотреть, как выглядит элемент управления FlipView в вебе, просто перейдя по этой ссылке.

Обратите внимание на третий пример с использованием динамичного шаблона. Такую возможность мы рассмотрим в одной из следующих статей.

  Дополнительные ссылки:

Краткое руководство: добавление элемента управления FlipView (HTML)

Пример использования элемента управления FlipView, написанный на HTML

Скачать Microsoft Visual Studio можно здесь

[a-bogdanova]

Иэн Стюарт "Истина и красота. Всемираня история симметрии"

Интересная и очень неоднозначная книга. 

Я не могла от нее оторваться. Формулы и определения, которые встречаются в книге, напомнили мне о временах первого курса, когда мы с большим трудом пытались понять очевидные для наших профессоров вещи. Это целое искусство - объяснить на пальцах что-то сложное и непонятное. С этим я часто сталкивалась, объясняя своим друзьям, которые не занимаются математикой, то, чем я "живу" в университете. Во время чтения книги, я невольно задумывалась, а сможет ли книга понравится человеку, который не имеет за спиной технического/математического образования (гуманитарий, одним словом)? Сделала вывод, что нет. Уж очень много "узких" терминов, таких как топология, например. А вот для человека, который хотя бы немного знаком с "вышматом" - очень и очень. Переплетение математики, философии и истории - вот из чего состоит книга. Автору удивительным образом удалось найти баланс между этими науками так, чтобы было занимательно и интересно.

Я с наслаждением читала про то, как автор расписывает поиски решения уравнений - пытается донести всю важность проблемы до читателя. С одной стороны книга написана математически грамотным языком, с другой - не обошлось и без фраз, которые разбавляют скучные биографии известных (и не очень) ученых. Одно лишь "наш дружище х" в рассказе про то, что такое уравнение, заставляет улыбнуться. Еще позабавила фраза: "Немногие среди европейских математиков тех дней были настолько отчаянными, чтобы согласиться принять отрицательные числа", потому что сейчас никакого отчаяния не нужно - все воспринимается как должное.

В завершении, хочу посоветовать эту книгу тем, кто интересуется историей математики и механики, а также тем, кому не хватает математических формул в обычной жизни.

[a-bogdanova]

Том ДеМарко."Dedline. Роман об управлении проектами."

Небольшое вступление.

Эта книга начинается со знакомства главных героев – мистера Томпкинса и мисис Хулигэн. Мистер Томпкинс является замечательным лидером, знатоком своего дела. Мисис Хулигэн предлагает ему работу в государстве Моровия, где в обязанности Томпкинса входит управление полуторатысячной группой людей. Ему поставлена цель – сделать программное обеспечение, которое, по планам главного начальника должно было принести огромную прибыль.Томпкинс выбирает себе с помощь напарницу – Белинду Бинду –замечательного лидера, а также генерала Маркова. Они набрали замечательную команду людей и принялись выполнять поставленные задачи. Одновременно с созданием софта, Томпкинс проводит эксперимент –по-разному группирует своих подчиненных, стремится узнать, в чем же секрет командной работы.

Вебстер Томпкинс встречается с разными людьми, которые предлагают ему необычные способы организации и оптимизации рабочего процесса. Все идет довольно гладко до тех пор, пока Великий Вождь Народов(ВВН) не уезжает вместе с мисс Хулигэн в долгосрочную командировку. Во главе государства сразу же становится человек, который не собирается удовлетворять и выполнять те требования, которые при приеме на работу выставил мистер Томпкинс - он сокращает сроки и "ломает" отлаженный механизм. Новые условия игры ставят Вебстера и его помощников в тупик, им приходится находить новые решения для достижения цели...

О структуре книги.

Книга разделена на главы, в конце большинства глав приводятся "отрывки" из записной книжки мистера Томпкинса с наиболее важными выводами, сделанными им в ходе знакомства и разговора с новыми людьми.

К примеру:

Четыре основных правила менеджмента

Отрицательная мотивация

Процесс разработки и его улучшение

Повышение производительности

Что дает давление сверху

Делать работу по-другому

Основы здравого смысла

В книге также много интересных иллюстраций, которые помогают понять и увидеть суть нестандартного подхода к оптимизаци�� процессов.

[a-bogdanova]

Джон Маэда. Законы простоты.

Еще одна книжка от Джона Маэды – «Законы простоты». На мой взгляд, книга «Редизайн лидерства» и «Законы простоты» чем-то похожи. Одинаково легко читаются и одинаково наполнены огромным количеством различных умных мыслей, которые, с певого взгляда очевидны, но потом появляется неоходимость еще раз подумать и разложить по полочкам все «простые истины».

Думаю, никого не удивить тем, что в книге с названием «Законы простоты» как раз и содержатся эти «законы». Хотя мне хочется называть их не законами, скорее правилами, указаниями к действию.

Начнем по порядку. Всего правил 10 штук, кроме них есть еще 3, так называемых, ключа.

Главный закон, собственно закон простоты, заключается в следующем: «Простота заключается в том, чтобы убрать очевидное и добавить необходимое.» В нем, так или иначе, отражены все остальные законы. Мне захотелось разделить остальные законы на несколько групп, а именно – законы, связанные со временем, законы, связанные эмоциями и третья группа, которую сложно назвать каким-нибудь общим словом.

Законы, связанные эмоциями: доверие, неудача и, собственно, эмоции. Мы должны доверять простоте, понимать, что не все может быть удачным и стараться проявлять как можно больше эмоций.

Законы, связанные со временем: организация, сокращение, время. Тут все просто – организуем все так, чтобы по-минимуму использовать наше драгоценное время.

Замыкающая тройка: учись, различия, контекст. Учись различиям в контексте – так бы обосновала их я.

Что касается ключей – их три. Не буду и никак разделять, напишу, как есть.

Отстранение. Большее выглядит как меньшее, если отодвинуть его в сторону.

Открытость. Открытость упрощает сложность

Энергия. Трать меньше, получай больше

Собственно, законы являются основными мыслями в книге, все размышления в книге завязаны на них.

Что касается самой книги – почему-то она напомнила книгу Айзексона о Стиве Джобсе. Хотя, возможно, это просто влияние примера про создание айпода.

[a-bogdanova]

Джон Маэда. Редизайн лидерства

В своей книге «Редизайн лидерства» Джон Маэда рассказывает о том, как проходил путь от преподавателя до лидера крупной компании, о тех вещах, которые казались ему удивительными во время его «пути».

Интересно, что автор строит свое повествование, опираясь на твиты – небольшие высказывания, которые отражают наиболее важные мысли. Каждый твит – идея, бесценный опыт, которым автор делится с читателями. Книга захватывает, потому что в ней описаны реальные события и проблемы, с которыми сталкивается человек, переходя на должнось руководителя, лидера. Хотя, на мой взгляд, проблемы, описанные автором, характерны не только для руководящих должностей.

Хочется отметить, что книга поделена на несколько частей, где автор рассматривает «лидера» как художника, дизайнера, преподавателя, инженера, ученого, просто человека. Автор рассказывает о том, какие возможности становления лидера существуют, как стать им, используя те или иные методы(тирания или, наоборот, желание быть ближе к тем, кто существует рядом с ним, общаться и слушать людей вокруг). При этом, для Джона Маэды необходимо попробовать быть не лидером по общим правилам, а вывести свою, индивидульную формулу «лидерства» и следовать ей. Важным для Джона Маэды является контакт с людьми, при том именно личное взаимодействие, one to one, без использования различных интернет ресурсов. А главная идея заключается в том, что ошибки не страшны, а, наоборот, полезны, если переосмысливать их и совершенствовать себя.