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

Программная логика на 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.

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

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

• Откройте созданный файл JavaScript, находящийся в \controls\addImageFlyout.js.
• Добавьте в него фрагмент кода, создающий пространство имен с названием "ImageFlyout" и добавляющий открытую функцию initialize:

/// <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) во всплывающем меню.

1. Откройте HTML-файл с элементом управления — /controls/addImageFlyout.html.
2. Вам нужен элемент, выглядящий как нижеприведенный фрагмент кода. Он создает кнопку с параметром id="btnAddItem".

   <button id="btnAddItem">Save</button>
3. Теперь откройте JS-файл с элементом управления - /controls/addImageFlyout.js.
4. Добавьте следующий фрагмент кода внутрь функции initialize():

   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();
           });
   
   

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

   Встраиваемая функция получает указатели на элементы управления заголовка и описания (эти указатели пригодятся нам в следующем модуле). В конце она выводит на экран соответствующее диалоговое окно.
5. Вам все еще нужно вызвать функцию initialize() в пространстве имен ImageFlyout. Нужно, чтобы эта функция выполнялась при запуске приложения.
6. Откройте JavaScript-файл — /js/default.js. В этом файле содержится код главной страницы приложения (страницы по умолчанию).
7. Ваша цель – инициализировать элемент управления ImageFlyout после того, как будет определен весь интерфейс страницы по умолчанию. Это нужно, чтобы убедиться, что панель приложения и всплывающее меню целиком и полностью созданы в рамках интерфейса. Найдите функцию processAll(), связывающую данные с элементами управления, и добавьте в нее строку, выделенную желтым цветом:

   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);
       }
   }));
   
8. Запустите проект. Если вы используете устройство с сенсорным экраном, проведите пальцем от нижнего края экрана к центру. Если вы используете мышь, просто щелкните правой кнопкой.
9. Щелкните на кнопке Создать (New Item) на панели приложения, затем щелкните на кнопке Сохранить (Save). Этот щелчок запускает событие, в результате которого на экране отображается диалоговое окно.

Итоги

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

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

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

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

Вопросы

1. Какова цель применения WinRT при разработке приложений для Магазина Windows? Что вы можете сказать о применении WinJS?
2. Как добавить элементу управления в JavaScript возможность реагировать на событие?
3. Как создать команду для панели приложения и всплывающее меню?

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

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

• Быстрый старт: Добавление элементов управления HTML и обработчиков событий

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

  В материале показано, как обрабатывать элементы управления и подключать события в JavaScript.
• Добавление элементов управления стилей WinJS

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

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

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

  Здесь описывается, как выбрать нужный тип поверхности для вашего интерфейса.

Ответы

1. Windows Runtime – набор служб и средств управления, предоставляющий платформам на базе Windows возможность работы с XAML- и JavaScript-приложениями. WinJS содержит файлы JavaScript и CSS, используемые совместно с WinRT для интеграции функций и средств управления платформы в приложения.
2. Чтобы добавить элементу возможность реагировать на событие, нужно добавить детектор события с помощью функции addEventListener.
3. Чтобы добавить всплывающее меню (flyout ) для команды панели приложения, можно использовать свойство flyout объекта AppBarCommand.