Применение JavaScript в WinRT-приложениях

Цель обучения

Материалы к модулю Вы можете скачать здесь.

В данном модуле вы научитесь описывать логику приложений с помощью JavaScript, создавать формы для ввода данных, а также – использовать такие средства управления WinRT-приложениями, как панель приложения (Application Bar) и всплывающие меню (Flyout).

Приступая к обучению

Вам понадобится базовая задача из раздела \Module_5_Assets\Starter. Эта задача – подведение итогов предыдущего модуля.

Windows Runtime

Все приложения для Магазина Windows в Windows 8 используют Windows Runtime – набор служб и средств управления, применяемый во всех языках программирования (JavaScript, C#, Visual Basic и C++).

Библиотека Windows для JavaScript

При написании приложений на JavaScript используются веб-стандарты (например, HTML5) для создания пользовательского интерфейса, CSS – для задания стиля и непосредственно JavaScript – для описания самой программной логики. Однако этих веб-стандартов недостаточно для того, чтобы полностью раскрыть потенциал платформы Windows.

Например, наши WinRT-приложения существуют и действуют вне браузера, поэтому нам нужно создать собственную систему навигации для работы с историей переходов и передачи параметров на страницы. К тому же, жизненный цикл приложения заметно отличается от жизненного цикла HTML-страницы в браузере. Кроме того, платформа поддерживает множество функций, предоставляемых Windows – например, дисплей с поддержкой множества касаний, поддержка видео, датчик поворота экрана и возможность хранения файлов. И это не говоря уже о такой технологии будущего, как Естественный пользовательский интерфейс (Natural User Interface), которая набирает популярность гораздо быстрее, чем могут развиваться веб-стандарты.

Для интеграции данного функционала Microsoft и разработала библиотеку Windows для JavaScript (WinJS). WinJS содержит файлы JavaScript и CSS, используемые совместно с Windows Runtime (WinRT) при создании приложений для Магазина Windows .

Элементы управления Windows Runtime

Windows Runtime (WinRT) позволяет использовать элементы управления, отличные от элементов управления HTML. Элементы управления WinRT реализованы на уровне платформы, и доступ к ним осуществляется посредством WinJS.

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

Упражнение: добавление панели приложения

В некоторых шаблонах – например, в шаблоне Приложение таблицы (Grid App) – уже есть панель приложения. Вам нужно только снять теги комментариев с соответствующего фрагмента кода HTML, чтобы панель стала видимой. Давайте включим панель приложений в приложении Wikipedia Images.

<div id="appbar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" 
data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}"></button>
</div>

Свойство data-win-control

Обратите внимание: в добавленной панели приложения есть элемент <div> с именем appbar, у которого имеется свойство data-win-control:

<div id="appbar" data-win-control="WinJS.UI.AppBar">

Это свойство позволяет превратить стандартный элемент <div> из HTML-тега в элемент управления Windows Runtime, способный действовать на уровне платформы.

Таким образом <div>, будучи элементом управления HTML, может содержать в себе элементы управления WinRT-приложениями, такие, как панель приложения.

Упражнение: добавление команд

Вы можете добавлять дополнительные команды на панель приложения, прописывая новые вхождения AppBarCommand. Как и WinJS.UI.AppBar, AppBarCommand является стандартным элементом управления в среде Windows (то есть, не HTML-средством). Давайте добавим на панель приложения команду "Создать" (New Item):

<div id="appbar" data-win-control="WinJS.UI.AppBar">

       <button id="btnAppBarAddImage" 
            data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{section: 'global', label: 'New Item', icon: 'add'}">
        </button>

Элементы управления HTML

Объект WinJS.UI.HtmlControl позволяет нам создавать собственные элементы управления в среде HTML. Зачем использовать HTML? Например, с его помощью мы можем:

Упражнение: добавление всплывающего меню

Сейчас вы создадите элемент управления, позволяющий пользователям вводить дополнительную информацию для их "нового графического объекта", когда они выбирают команду Создать (New Item) на панели приложения. Вы воспользуетесь элементом управления класса Flyout (всплывающее меню) — он действует как всплывающее окно при запуске команды на панели приложения.

Пользовательские элементы управления в нашем проекте по структуре идентичны страницам. Они состоят из трех частей:

Щелкните правой кнопкой мыши на проекте и выберите Add > New Folder (Добавить > Новая папка).

Щелкните правой кнопкой мыши на подпапке и выберите Add > New Item… (Добавить > Новый элемент…).

Выберите HTML-страницу и в поле Name (Имя) введите addImageFlyout.html.

В окне редактора удалите HTML-код, прописанный по умолчанию, и замените его нижеследующим. Этот фрагмент позволит отобразить кнопку для выбора изображения, поля для ввода названия и описания, а также кнопку сохранения. Обратите внимание: вам не нужно использовать теги <html>, <head> или <body>, т.к. это лишь фрагмент HTML-кода, который будет динамически подставлять в наши блок интерфейса.

Этот фрагмент доступен в разделе \Module_5_Assets\snippets\addImageFlyoutHtml.txt

<div class="flyout" id="addImageFlyout" data-win-control="WinJS.UI.Flyout">
    <div>
        <button id="btnSelectImage">Select Image...</button>
    </div>
    <div>
        <label for="title">Title:</label>
        <input id="title" placeholder="enter a title">
    </div>
    <div>
        <label for="description">Description:</label>
        <input id="description" placeholder="enter a description" />
    </div>
    <div class="command">
        <button id="btnAddItem">Save</button>
    </div>
</div>

Щелкните правой кнопкой мыши на подпапке и выберите Add > New Item… (Добавить > Новый элемент…).

Выберите файл JavaScript File и в поле Name (Имя) пропишите addImageFlyout.js. Пока что оставьте этот файл пустым.

Щелкните правой кнопкой мыши на подпапке и выберите Add > New Item… (Добавить > Новый объект…).

Выберите таблицу стилей CSS и в поле Название (Name) введите flyout.css.

Введите нижеследующий фрагмент CSS-кода, отвечающий за внешний вид поля Название, поля ввода текста и кнопок.

Этот фрагмент доступен в разделе \Module_5_Assets\snippets\flyoutCss.txt

div.label {
    width:280px;
    margin-top: 10px;
}

div.flyout input {    
    margin-bottom: 5px;
    width:  calc(95%);
}

div.selectButton  {    
    margin-bottom: 15px;
}

div.command {
    margin: 10px;
    float: right;
}

Итак, HTML-блок готов. Добавьте его в панель приложения. В файле default.html найдите тег <head>.

Разместите между ним и закрывающим тегом </head> следующий JavaScript-фрагмент и ссылку, встраивающую в документ наш код на JavaScript и таблицу стилей.

Этот фрагмент доступен в разделе \Module_5_Assets\snippets\addJsIncludes.txt

<!-- Add in the image flyout code -->
<script src="/controls/addImageFlyout.js"></script>


<!-- Add in the Flyout styles -->
<link href="/controls/flyout.css" rel="stylesheet">

Сразу после тега <body> добавьте нижеследующий HTML-фрагмент. Он встраивает addImageFlyout.html в страницу default.html.

Этот фрагмент доступен в разделе \Module_5_Assets\snippets\addFlyoutHtmlControl.txt

<div data-win-control="WinJS.UI.HtmlControl" 
     data-win-options="{uri: '/controls/addImageFlyout.html'}"></div>

Добавьте команду appbar, отображающую всплывающее меню, посредством соответствующей опции.

Этот фрагмент доступен в разделе \Module_5_Assets\snippets\addButtonWithOptions.txt

<button data-win-control="WinJS.UI.AppBarCommand" 
data-win-options="{section: 'global', label: 'New Item', icon: 'add',type:'flyout', flyout: 'addImageFlyout'}"></button>

Запустите проект. Если вы используете устройство с сенсорным экраном, проведите пальцем от нижнего края экрана к центру. Если вы используете мышь, просто щелкните правой кнопкой.

Щелкните на кнопке Создать(New Item) на панели приложения. Обратите внимание – на экране отобразилось всплывающее меню:

Программная логика на JavaScript

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

Выделение пространства имен – это способ компоновки элементов со схожей функциональностью в группы функций. Например, шаблон Приложение таблицы (Grid App) в Visual Studio создает пространство имен "Data" для группировки всех методов и свойств, относящихся к работе с данными. Вот как прописано пространство имен Data в файле data.js:

WinJS.Namespace.define("Data", {
        items: groupedItems,
        groups: groupedItems.groups,
        getItemsFromGroup: getItemsFromGroup,
        getItemReference: getItemReference,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference
    });

В приведенном примере для создания нового пространства имен с названием "Data" использован метод WinJS.Namespace.define. Кроме того, сюда же были отнесены еще несколько свойств и методов – теперь они доступны для любого файла, в котором есть данный скрипт. Обратите внимание: если методы и свойства описаны как открытые, вы можете задать дополнительное имя для функции. В приведенном примере свойство groupedItems указано как items. Таким же образом свойство groupedItems.groups указано как groups.

Упражнение: определение пространства имен

Создайте пространство имен для нашего всплывающего меню.

/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />
(function () {
    "use strict";

    WinJS.Namespace.define("ImageFlyout", {
        initialize: initialize
    });
   

    function initialize() {

    }

})();

Что делает вышеприведенный фрагмент кода?

Следующие строки позволяют Visual Studio отображать IntelliSense-подсказки для создаваемого кода:

/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />

Раздел function создает общий метод, автоматически исполняемый при интегрировании данного .js-файла в проект (помните: вы включили этот файл в default.html, так что он будет подгружаться при каждом запуске приложения).

(function () {
    
})();

Квалификатор "use strict" сообщает компилятору JavaScript, что нужно оповещать об ошибке, если переменные используются без объявления. Это позволяет использовать JavaScript как язык с более строгим синтаксисом – например, как С#.

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

WinJS.Namespace.define("ImageFlyout", {
        initialize: initialize
    });
   

    function initialize() {
    }

При включении этого .js-файла в любой код мы можем вызывать данный метод с помощью команды:

ImageFlyout.initialize();

Обработка событий

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

Чтобы добавить детектор события, сначала нужно получить указатель на нужный элемент управления с помощью функции getElementById:

var btnAddItem = document.getElementById("btnAddItem");

Приведенный фрагмент кода создает переменную btnAddItem, являющуюся указателем на элемент управления btnAddItem.

Упражнение: обработка событий

Добавьте скрипт, обрабатывающий щелчок на кнопке Сохранить (Save) во всплывающем меню.

<button id="btnAddItem">Save</button>

var btnAddItem = document.getElementById("btnAddItem");

        btnAddItem.addEventListener("click", function (e) {
            // the following code will be executed when btnAddItem is clicked:
            var title = document.getElementById("title");
            var description = document.getElementById("description");
            
            // show a message to the user for now
            var msg = new Windows.UI.Popups.MessageDialog(
"The btnAddItem button was clicked.");
            msg.showAsync();
        });

args.setPromise(WinJS.UI.processAll().then(function () {

    ImageFlyout.initialize();

    if (nav.location) {
        nav.history.current.initialPlaceholder = true;
        return nav.navigate(nav.location, nav.state);
    } else {
        return nav.navigate(Application.navigator.home);
    }
}));

Итоги

WinRT и WinJS представляют собой мощный каркас разработки приложений для Магазина Windows. JavaScript используется для создания программного кода и HTML/CSS – для создания пользовательского интерфейса. В данном модуле для создания элемента интерфейса вы задействовали такие средства управления, как панель приложения и всплывающее меню.

Самостоятельная работа

При написании WinRT-приложений на JavaScript у вас есть доступ к большому количеству элементов управления. Пройдите по ссылке, чтобы перейти к полному списку доступных элементов управления. Попробуйте использовать различные элементы (например, кольцо прогресса, кнопка и переключатели) при создании собственных интерфейсов:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465453.aspx

Вопросы

Дополнительные материалы

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

Ответы