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

В этом учебнике вы скопируете код из приложения "Hello, world" в новое приложение, использующее шаблон Navigation App, а затем добавите дополнительную страницу.

Вы научитесь:

• использовать шаблон проекта Navigation App для создания приложения, содержащего несколько страниц;
• разделять код на модульные блоки при помощи объектов PageControl;
• использовать одностраничную модель навигации для переходов между страницами;
• предоставлять команды навигации при помощи AppBar.

Совет  

Если вы хотите пропустить учебник и перейти прямо к коду, см. раздел Начало работы с JavaScript: полный код для серии учебников.

Перед началом работы

• Это третий учебник в серии. Прежде чем приступить к изучению этого учебника, ознакомьтесь с разделом Часть 2. Управление жизненным циклом и состоянием приложения. Начнем с кода, созданного во второй части.

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

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

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

Чтобы помочь вам создавать приложения на основе одностраничной модели навигации, в библиотеке Windows для JavaScript предусмотрен объект WinJS.UI.Pages.PageControl. Существует также шаблон проекта Navigation App, который предоставляет дополнительную инфраструктуру навигации. В следующем шаге вы создадите новый проект на основе этого шаблона.

Шаг 1. Создание нового приложения навигации в Visual Studio

Создадим новое приложение с именем HelloWorldWithPages, использующее шаблон Navigation App. Для этого:

1. Запустите Microsoft Visual Studio Express 2012 для Windows 8.
2. В меню File (Файл) выберите команду New Project (Новый проект).

   Откроется диалоговое окно New Project (Новый проект). Левая панель диалогового окна позволяет выбрать тип отображаемого шаблона.

3. На левой панели последовательно разверните узлы Installed (Установлено), Templates (Шаблоны), JavaScript и выберите шаблон Windows Store (Магазин Windows). На центральной панели диалогового окна отображается список шаблонов проектов для JavaScript.

   В этом руководстве мы используем шаблон Navigation App.

4. На центральной панели выберите шаблон Navigation App.
5. В текстовое поле Name введите "HelloWorldWithPages".
6. Снимите флажок Create directory for solution (Создать каталог для решения).

   

7. Чтобы создать проект, нажмите кнопку ОК.

   Visual Studio создает проект и отображает его в обозревателе решений.

   

Обратите внимание, что новое приложение Navigation App содержит больше файлов, чем приложение "Hello, world". Рассмотрим эти новые файлы:

• /pages/home/home.css, /pages/home/home.html и /pages/home/home.js.

  Эти три страницы определяют объект PageControl для домашней страницы приложения. PageControl состоит из HTML-файла, файла JavaScript и CSS-файла. Объект PageControl представляет собой модульный блок HTML, CSS и JavaScript, к которому можно перейти (как к HTML-странице) или использовать его как пользовательский элемент управления. Чтобы разделить большое приложение на более удобные в управлении части, можно использовать объекты PageControl.

  Объекты PageControl поддерживают несколько методов, благодаря чему использовать их в приложении проще, чем набор свободных страниц HTML, CSS и JavaScript. Позднее вы узнаете больше об этих методах.

• /js/navigator.js

  Этот файл содержит вспомогательный класс PageControlNavigator, который можно использовать для отображения объектов PageControl и обеспечения навигации между ними. Он не требуется для отображения PageControl, но может облегчить их использование.

Рассмотрим страницу default.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>

Объект body файла содержит два элемента: элемент div для PageControlNavigator и закомментированный элемент div для AppBar. Пока пропустим app bar и более подробно рассмотрим первый элемент div.

 <div id="contenthost" data-win-control="Application.PageControlNavigator" 
 data-win-options="{home: '/pages/home/home.html'}"></div>
 

Этот элемент div создает элемент управления PageControlNavigator. PageControlNavigator загружает и отображает домашнюю страницу. Атрибут data-win-options указывает ему, какую страницу нужно загрузить (/pages/home/home.html).

Запустите приложение.

Хотя это не очевидно, приложение фактически отображает обе страницы — default.html и home.html. Это напоминает использование iframe для отображения HTML-страницы внутри другой HTML-страницы.

Шаг 2. Копирование содержимого HTML и CSS из приложения "Hello, world"

Новое приложение содержит две HTML-страницы: default.html и home.html. Где разместить содержимое?

• Используйте default.html для элементов пользовательского интерфейса, которые всегда должны присутствовать на экране независимо от отображаемой страницы приложения. Например, можно использовать default.html для размещения панели навигации.

• Используйте страницы, такие как home.html, для содержимого, составляющего отдельный экран приложения.

Откроем страницу home.html и рассмотрим часть ее разметки.

• Элемент head содержит ссылки на код и таблицы стилей библиотеки Windows для JavaScript. Он также содержит ссылки на таблицу стилей приложения по умолчанию (default.css) и на другие файлы, которые составляют домашнюю страницу (home.css и home.js).

  HTML

  <head>
   <meta charset="utf-8" />
   <title>homePage</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>
  
   <link href="/css/default.css" rel="stylesheet" />
   <link href="/pages/home/home.css" rel="stylesheet" />
   <script src="/pages/home/home.js"></script>
  </head>
  
  
  

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

  HTML

   <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">Welcome to HelloWorldWithPages!</span>
   </h1>
   </header>
  
  
  

• Здесь имеется раздел для основного содержимого.

  HTML

   <section aria-label="Main content" role="main">
   <p>Content goes here.</p>
   </section>
  
  
  

Добавим содержимое из приложения "Hello, world" на домашнюю страницу (home.html) нового проекта HelloWorldWithPages.

Добавление содержимого HTML и CSS из приложения "Hello, world"

1. Скопируйте окончательное HTML-содержимое из файла default.html приложения "Hello, world" в раздел основного содержимого /pages/home/home.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">Welcome to HelloWorldWithPages!</span>
    </h1>
    </header>
    <section aria-label="Main content" role="main">
   
    <!-- Copied from "Hello, world" -->
    <h1 class="headerClass">Hello, world!</h1>
    <div class="mainContent">
    <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>
    </div>
    </section>
    </div>
   </body>
   
   

2. Переместите скопированное содержимое заголовка в элемент h1, который предоставляет home.html. Так как home.html уже содержит раздел основного содержимого, удалите скопированный элемент "mainContent" div (сохранив его содержимое).
   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>
    </section>
    </div>
   </body>
   
   

3. Переключитесь на таблицу светлых стилей. Поменяйте ссылку на таблицу темных стилей
   HTML

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

   на следующую:

   HTML

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
   
   
   

4. Каждый объект PageControl имеет собственный CSS-файл.

   Скопируйте стиль greetingOutput из файла default.css, созданного в разделе Часть 1. Создание приложения "Hello, world!", в home.css.

   CSS

   .homepage section[role=main] {
    margin-left: 120px;
   }
   
   #greetingOutput {
    height: 20px; 
    margin-bottom: 40px;
   }
   
   
   @media screen and (-ms-view-state: snapped) {
    .homepage section[role=main] {
    margin-left: 20px;
    }
   }
   
   @media screen and (-ms-view-state: portrait) {
    .homepage section[role=main] {
    margin-left: 100px;
    }
   }
   
   

5. Запустите приложение.

   

   Вы воссоздали содержимое из исходного приложения "Hello, world". Далее добавим интерактивные возможности, скопировав обработчики событий из приложения "Hello, world".

Шаг 3. Копирование обработчиков событий

Каждый объект PageControl имеет собственный файл JavaScript. Рассмотрим файл JavaScript, созданный программой Visual Studio для объекта PageControl "домашней страницы", home.js:

(function () {
 "use strict";

 WinJS.UI.Pages.define("/pages/home/home.html", {
 // 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.
 }
 });
})();

Этот файл отличается от файла default.js. Во-первых, он намного короче. Это связано с тем, что default.js уже обрабатывает активацию и основную логику приложения. Каждый объект PageControl должен содержать только логику для самой страницы.

Одна из первых строк кода, вызов функции WinJS.UI.Page.define, создает объект PageControl. Эта функция использует два параметра: универсальный код ресурса (URI) страницы ("/pages/home/home.html" в данном примере) и объект, определяющий члены PageControl. Можно добавить любой тип члена. Также можно реализовать набор особых членов, которые описываются интерфейсом IPageControlMembers и автоматически вызываются приложением при использовании PageControl.

Файл home.js, созданный шаблоном, определяет один из таких особых членов — функцию ready. Функция ready вызывается после инициализации и обработки страницы. Здесь целесообразно присоединить обработчики событий.

Возможно, вы заметили, что код не включает вызов WinJS.UI.processAll. Это объясняется тем, что объект PageControl вызывает эту функцию автоматически. К моменту вызова функции ready функция WinJS.UI.processAll уже вызвана и завершила обработку.

Добавление обработчиков событий

1. В разделах Часть 1. Создание приложения "Hello, world!" и Часть 2. Управление жизненным циклом и состоянием приложения вы определили три обработчика событий: buttonClickHandler, ratingChanged и nameInputChanged. Скопируйте эти обработчики событий в файл home.js и сделайте их членами PageControl. Добавьте их после функции ready, которую создал шаблон.

   JavaScript

    WinJS.UI.Pages.define("/pages/home/home.html", {
   
    // 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.
   
    },
   
    buttonClickHandler: function (eventInfo) {
   
    var userName = document.getElementById("nameInput").value;
    var greetingString = "Hello, " + userName + "!";
    document.getElementById("greetingOutput").innerText = greetingString;
   
    // Save the session data. 
    WinJS.Application.sessionState.greetingOutput = greetingString;
    },
   
    ratingChanged: function (eventInfo) {
   
    var ratingOutput = document.getElementById("ratingOutput");
    ratingOutput.innerText = eventInfo.detail.tentativeRating;
   
    // Store the rating for multiple sessions.
    var appData = Windows.Storage.ApplicationData.current;
    var roamingSettings = appData.roamingSettings;
    roamingSettings.values["greetingRating"] = eventInfo.detail.tentativeRating;
    },
   
    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;
    }
   
   
    });
   
   

2. Теперь нужно присоединить обработчики событий. В частях 1 и 2 мы создали функцию then для объекта Promise, который возвращает функция WinJS.UI.processAll. Теперь все немного проще, так как можно использовать функцию ready для присоединения обработчиков событий. Функция ready вызывается после того, как объект PageControl автоматически вызвал функцию WinJS.UI.processAll.

   Скопируйте код, присоединяющий обработчики событий для функции ready в home.js.

   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.
   
    // Retrieve the div that hosts the Rating control.
    var ratingControlDiv = document.getElementById("ratingControlDiv");
   
    // Retrieve the actual Rating control.
    var ratingControl = ratingControlDiv.winControl;
   
    // Register the event handler. 
    ratingControl.addEventListener("change", this.ratingChanged, false);
   
    // Retrieve the button and register our event handler. 
    var helloButton = document.getElementById("helloButton");
    helloButton.addEventListener("click", this.buttonClickHandler, false);
   
    // Retrieve the input element and register our
    // event handler.
    var nameInput = document.getElementById("nameInput");
    nameInput.addEventListener("change", this.nameInputChanged);
   
    },
   
   

3. Запустите приложение. Когда вы введете имя и нажмете кнопку, появится приветствие. Во время оценки приветствия отображается численное значение оценки.