Спонсор: Microsoft
Опубликован: 26.12.2012 | Доступ: свободный | Студентов: 727 / 31 | Длительность: 06:22:00
Специальности: Программист
Лекция 5:

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

< Лекция 4 || Лекция 5: 12 || Лекция 6 >

Программная логика на 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.
< Лекция 4 || Лекция 5: 12 || Лекция 6 >
Игорь Хан
Игорь Хан
Узбекистан, Ташкент, Ташкентский педагогический институт иностранных языков, 1990