Главная » Статьи » Visual Studio 2012 » Создание с помощью JavaScript
Часть 3(3). Объекты PageControl и навигация

Шаг 6. Использование функции навигации для перехода между страницами

У нас уже есть вторая страница, но пользователь не может перейти на нее. Обновим страницу home.html, добавив ссылку на page2.html.

JJ663505.wedge(ru-ru,WIN.10).gifПереход между страницами

  1. Откройте файл home.html и добавьте ссылку на page2.html.
    HTML
    <body>
 <!-- The content that will be loaded and displayed. -->
 <div class="fragment homepage">
 <header aria-label="Header content" role="banner">
 <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
 <h1 class="titlearea win-type-ellipsis">
 <span class="pagetitle">Hello, world!</span>
 </h1>
 </header>
 <section aria-label="Main content" role="main">
 
 <p>What's your name?</p>
 <input id="nameInput" type="text" />
 <button id="helloButton">Say "Hello"</button>
 <div id="greetingOutput"></div>
 <label for="ratingControlDiv">
 Rate this greeting: 
 </label>
 <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
 </div>
 <div id="ratingOutput"></div>

 <!-- A hyperlink to page2.html. -->
 <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
 </section>
 </div>
</body>
  2. Запустите приложение и щелкните ссылку. Кажется, ссылка работает: в приложении отображается page2.html.

    Диалоговое окно Add New Item (Добавление нового элемента)

Но есть проблема: приложение выполняет навигацию верхнего уровня. Вместо перехода со страницы home.html на страницу page2.html оно выполняет переход со страницы default.html на страницу page2.html.

Выполнение навигации верхнего уровня

Мы же хотим заменить содержимое страницы home.html страницей page2.html.

Переход на страницу page2.html рекомендуемым способом

К счастью, элемент управления PageControlNavigator позволяет выполнять навигацию этого типа довольно легко. Код PageControlNavigator (в файле navigator.js вашего приложения) обрабатывает событие WinJS.Navigation.navigated. При возникновении события элемент PageControlNavigator загружает указанную в нем страницу.

Событие WinJS.Navigation.navigated возникает при использовании для навигации функций WinJS.Navigation.navigate, WinJS.Navigation.back или WinJS.Navigation.forward.

Вы сами должны вызвать WinJS.Navigation.navigate, а не использовать поведение гиперссылки по умолчанию. Можно заменить ссылку кнопкой и использовать обработчик события нажатия кнопки для вызова WinJS.Navigation.navigate. Либо можно изменить поведение гиперссылки по умолчанию так, чтобы при выборе ссылки пользователем приложение использовало WinJS.Navigation.navigate для перехода к целевому объекту ссылки. Для этого необходимо обработать событие click гиперссылки и использовать это событие, чтобы запретить поведение гиперссылки по умолчанию, а затем вызвать функцию WinJS.Navigation.navigate и передать ей целевой объект ссылки.

JJ663505.wedge(ru-ru,WIN.10).gifПереопределение поведения гиперссылки по умолчанию

  1. В файле home.js определите обработчик событий click для гиперссылок и сделайте его членом PageControl. Назовите его linkClickEventHandler и добавьте после обработчика события nameInputChanged.
    JavaScript
     nameInputChanged: function (eventInfo) {
 var nameInput = eventInfo.srcElement;

 // Store the user's name for multiple sessions.
 var appData = Windows.Storage.ApplicationData.current;
 var roamingSettings = appData.roamingSettings;
 roamingSettings.values["userName"] = nameInput.value;
 }, 

 
 linkClickEventHandler: function (eventInfo) {

 }
  2. Вызовите метод preventDefault для отмены заданного по умолчанию поведения ссылки (непосредственного перехода на указанную страницу).
    JavaScript
     linkClickEventHandler: function (eventInfo) {
 eventInfo.preventDefault();

 }
  3. Получите гиперссылку, которая вызвала событие.
    JavaScript
     linkClickEventHandler: function (eventInfo) {
 eventInfo.preventDefault();
 var link = eventInfo.target;

 }
  4. Вызовите функцию WinJS.Navigation.navigate и передайте ей целевой объект ссылки. (Можно также передать объект состояния, описывающий состояние данной страницы. Дополнительные сведения см. на странице WinJS.Navigation.navigate.)
    JavaScript
     linkClickEventHandler: function (eventInfo) {
 eventInfo.preventDefault();
 var link = eventInfo.target;
 WinJS.Navigation.navigate(link.href);
 }
  5. В функции ready файла home.js присоедините обработчик событий для гиперссылок.

    Библиотека Windows для JavaScript предусматривает функцию WinJS.Utilities.query, которая упрощает извлечение нескольких элементов на странице. Функция WinJS.Utilities.query возвращает объект QueryCollection, который предоставляет дополнительные методы для присоединения и удаления обработчиков событий. Используем набор WinJS.Utilities.query и метод listen для присоединения linkClickEventHandler.

    JavaScript
     // This function is called whenever a user navigates to this page. It
 // populates the page elements with the app's data.
 ready: function (element, options) {
 // TODO: Initialize the page here.

 WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);

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

  6. Запустите приложение и щелкните ссылку на страницу page2.html.

    Теперь приложение отображает страницу page2.html правильно

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

    Структура содержимого после перехода на страницу page2.html

Шаг 7. Добавление панели приложения для дополнительной навигации

Элемент управления WinJS.UI.AppBar предоставляет пользователям удобный доступ к командам тогда, когда они нужны. Чтобы открыть панели приложений, пользователь может провести пальцем от нижнего края экрана. Панели демонстрируют содержимое приложения, и пользователь может закрыть их боковой прокруткой или при взаимодействии с приложением. Используйте панели приложений для размещения элементов навигации, команд и инструментов для пользователей.

Панель приложения относится к элементам управления библиотеки Windows для JavaScript. Чтобы объявить панель приложения в HTML, используйте следующий синтаксис:

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

</div>

Панель приложения содержит кнопки команд. Чтобы создать кнопку команды на панели приложения, используйте элемент button, который нужно сделать кнопкой с помощью атрибута data-win-control.

HTML
<div id="appbar" data-win-control="WinJS.UI.AppBar">
 <button data-win-control="WinJS.UI.AppBarCommand"></button>
</div>

Также необходимо использовать атрибут data-win-options для указания нескольких параметров кнопки команды:

  • id: идентификатор команды.
  • label: метка, которая будет отображаться для команды.
  • icon: значок, который будет отображаться для команды, или путь к пользовательскому PNG-файлу. (Список значений значков см. в разделе AppBarIcon.)
  • section: раздел, к которому относится команда. Возможные значения — "selection" и "global".
  • tooltip: подсказка, которая будет отображаться для команды.
  • type: тип команды. Возможные значения — "button", "toggle", "flyout" и "separator".

Далее приведен пример синтаксиса:

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

Можно также добавить элементы hr в качестве разделителей, например:

HTML
<div id="appbar" data-win-control="WinJS.UI.AppBar">
 <hr 
 data-win-control="WinJS.UI.AppBarCommand" 
 data-win-options="{type:'separator', section:'global'}" />
 <button data-win-control="WinJS.UI.AppBarCommand"
 data-win-options="{id:'cmdID', label:'Command', icon:'placeholder', tooltip: 'Command'}">
 </button>
</div>

По умолчанию единственными элементами, которые может содержать панель приложения, являются кнопки команд и элементы hr. И для тех, и для других должен быть задан атрибут data-win-control="WinJS.UI.AppBarCommand". (Сведения о создании пользовательских панелей приложений, которые могут содержать другие элементы, см. в разделе Краткое руководство: добавление пользовательской панели приложения.)

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

HTML
var appbar = document.getElementById("appbar").winControl;
appbar.getCommandById("cmdID").addEventListener("click", myEventHandler, false);

Наше приложение содержит несколько страниц. Куда следует добавить панель приложения?

  • Если ваша панель приложения содержит команды, которые должны быть доступны на каждой странице, добавьте ее в файл default.html.
  • Если на каждой странице своя панель приложения, можно определить разные панели приложения в каждом объекте PageControl.
  • Можно также определить центральную панель приложения в default.html, а затем изменять ее по мере загрузки других объектов PageControl.

Создадим простую панель приложения, которая позволяет пользователю переходить между страницами home.html и page2.html. Определим ее в файле default.html.

JJ663505.wedge(ru-ru,WIN.10).gifДобавление панели приложения

  1. Откройте файл default.html. Шаблон создал панель приложения, но она закомментирована. Раскомментируйте ее.

    HTML
    <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>HelloWorldWithPages</title>

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

 <!-- HelloWorldWithPages references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
 <script src="/js/navigator.js"></script>
</head>
<body>

 <div id="contenthost" data-win-control="Application.PageControlNavigator" 
 data-win-options="{home: '/pages/home/home.html'}"></div>
 <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'}" 
 type="button"></button>
 </div>
</body>
</html>
  2. Запустите приложение. Чтобы открыть панель, проведите пальцем от верхнего или нижнего края экрана, нажмите клавиши Win+Z или щелкните правой кнопкой мыши.

    Простая панель приложения

    Сейчас панель приложения не выполняет никаких функций.

  3. Удалите кнопку панели приложения и замените ее двумя собственными элементами кнопок: один будет использоваться для перехода на страницу home.html, другой — для перехода на страницу page2.html. Присвойте кнопке "Домой" идентификатор "homeButton", а кнопке для перехода на страницу page2.html — идентификатор "page2Button". Добавим также разделитель.
    HTML
     <div id="appbar" data-win-control="WinJS.UI.AppBar">
 <hr 
 data-win-control="WinJS.UI.AppBarCommand" 
 data-win-options="{type:'separator',section:'global'}" />
 <button data-win-control="WinJS.UI.AppBarCommand" 
 data-win-options="{id:'homeButton',label:'Home',icon:'home',section:'global', 
 tooltip:'Go to the home page', type: 'button'}">
 </button>
 <button data-win-control="WinJS.UI.AppBarCommand" 
 data-win-options="{id:'page2Button',label:'Page 2',icon:'page',section:'global', 
 tooltip:'Go to page 2', type: 'button'}">
 </button>
 </div>
  4. Согласно документу Руководство и контрольный список для панелей приложений панели приложений, используемые для навигации, должны отображаться вверху экрана. Чтобы определить место отображения панели приложения, можно задать свойство placement. Задайте для свойства размещения панели приложения значение "top", чтобы она отображалась вверху экрана.
    HTML
     <div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'top'}" >
 <hr 
 data-win-control="WinJS.UI.AppBarCommand" 
 data-win-options="{type:'separator',section:'global'}" />
 <button data-win-control="WinJS.UI.AppBarCommand" 
 data-win-options="{id:'homeButton',label:'Home',icon:'home',section:'global', 
 tooltip:'Go to the home page', type: 'button'}">
 </button>
 <button data-win-control="WinJS.UI.AppBarCommand" 
 data-win-options="{id:'page2Button',label:'Page 2',icon:'page',section:'global', 
 tooltip:'Go to page 2', type: 'button'}">
 </button>
 </div>

    Панель приложения объявлена. Теперь определим ее стиль.

  5. Откройте файл default.css и в его начале создайте стиль CSS для панели приложения, который будет изменять цвет ее фона.
    CSS
    #appbar {

 background-color: #03abe2;
}

    Теперь присоединим обработчики событий, чтобы кнопки выполняли те или иные функции.

  6. В default.js после обработчика событий activated создайте два обработчика событий goToHomePage и goToPage2.
    JavaScript
     function goToHomePage(eventInfo) {
 WinJS.Navigation.navigate("/pages/home/home.html");
 }
 
 function goToPage2(eventInfo) {
 WinJS.Navigation.navigate("/pages/page2/page2.html"); 
 }
  7. В обработчике событий activated извлеките панель приложения и используйте ее метод getCommandByID для извлечения кнопок навигации. Сохраните их в переменных homeButton и page2Button и присоедините обработчики событий.
    JavaScript
     app.addEventListener("activated", function (args) {
 if (args.detail.kind === activation.ActivationKind.launch) {
 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
 // TODO: This application has been newly launched. Initialize
 // your application here.
 } else {
 // TODO: This application has been reactivated from suspension.
 // Restore application state here.
 }

 // Save the previous execution state. 
 WinJS.Application.sessionState.previousExecutionState =
 args.detail.previousExecutionState;

 if (app.sessionState.history) {
 nav.history = app.sessionState.history;
 }
 args.setPromise(WinJS.UI.processAll().then(function () {

 // Retrieve the app bar.
 var appbar = document.getElementById("appbar").winControl;

 // Attach event handlers to the command buttons.
 var homeButton = appbar.getCommandById("homeButton");
 homeButton.addEventListener("click", goToHomePage, false);
 var page2Button = appbar.getCommandById("page2Button");
 page2Button.addEventListener("click", goToPage2, false);

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

 }));
 }
 });

  8. Запустите приложение. Теперь можно использовать панель приложения для перехода между двумя страницами.

    Приложение HelloWorldWithPages с панелью приложения

Сводка

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



Источник: http://msdn.microsoft.com/ru-ru/library/windows/apps/
Категория: Создание с помощью JavaScript | Добавил: expert1 (19.04.2013)
Просмотров: 2033 | Теги: Web, metro-приложения, Windows | Рейтинг: 0.0/0
Всего комментариев: 0