Создание первого приложения для Магазина Windows с помощью Blend, часть 2: страница сведений (HTML и JavaScript)

  • Статья

Можно разрабатывать приложения для Магазина Windows быстрее и эффективнее, используя коллекцию средств HTML и CSS в Blend для Visual Studio. По мере изучения этого руководства будет создан пример приложения, PickaFlick, в котором можно просматривать новые фильмы списком, создаваемым через API с сайта Rotten Tomatoes.

Создание первого приложения для Магазина Windows в Blend (HTML)

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

Примечание

Для запуска этого приложения необходимо зарегистрироваться на сайте Rotten Tomatoes, чтобы получить ключ и вставить его в код.См. подраздел Добавление ссылки на API Windows JavaScript далее в этом разделе.

В Создание первого приложения для Магазина Windows с помощью Blend, часть 1: эталонная страница (HTML и JavaScript) была создана домашняя страница PickaFlick. Во второй части будут выполнены следующие действия:

Добавление в проект шаблона элемента

Первые действия по созданию страницы сведений о фильме напоминают процедуру, описанную в первой части руководства: создание HTML-страницы, добавление в нее div, а затем переименование этого элемента для создания элемента id.

Добавление HTML-страницы

  1. На панели Проекты щелкните файл проекта правой кнопкой мыши, а затем щелкните Создать элемент.

    Откроется диалоговое окно Создать элемент.

    Новая HTML-страница в Blend

  2. В списке шаблонов элементов щелкните HTML-страница, назовите страницу movieDisplay.html и нажмите кнопку ОК.

Добавление div в movieDisplay.html

  1. На панели Live DOM щелкните правой кнопкой мыши Основная часть, выберите Вставить элемент, щелкните div или нажмите сочетание клавиш Ctrl+Shift+=.

  2. На панели Live DOM переименуйте только что добавленный элемент div, щелкнув его и введя в текстовом поле movieDisplayContainer.

    Панель "Динамическая DOM" в Blend

Переключение к Visual Studio и обратно

Пространство имен фрагмента Windows JavaScript — это то же пространство, которое использовалось при создании страницы homepage.html в первой части этого руководства. Знакома вам будет и процедура переключения с Blend на Visual Studio. Вызов пространства имен WinJS.Ui.Fragments загрузит страницу movieDisplay в качестве фрагмента страницы default.html при нажатии кнопки с цыпленком.

Изменение файла default.js

  1. На панели Проекты щелкните правой кнопкой мыши файл PickaFlick.sln и выберите Редактировать в Visual Studio.

    В Visual Studio откроется проект PickaFlick.

  2. В области Обозреватель решений разверните папку js и дважды щелкните файл default.js, чтобы открыть его.

  3. Найдите .done(). Вставьте следующий код внутри скобок.

    //when the loadInitialPage function is complete, call handleLoadedPage
    function completed(r) {
      handleLoadedPage();
    }
  );
}

//create the chickenButton variable, and add a click event listener
//when chickenButton is clicked, call loadResultsPage
function handleLoadedPage() {
  var chickenButton = document.querySelector("#chickenButton");
  chickenButton.addEventListener("click", loadResultsPage);
}

//define loadResultsPage function, load movieDisplay.html
function loadResultsPage() {
  clearChildren(target);

//When page is loaded, use Windows Javascript Fragments API to load movieDisplay.html
//call getMovieData
  WinJS.UI.Fragments.render("/movieDisplay.html", target).done(
function completed(r) {
  getMovieData();
}
);
}

function clearChildren(element) {
  while (element.hasChildNodes()) {
    element.removeChild(element.lastChild);
  }
}

//define movieData variable and associated movie data variables
//insert your own Rotten Tomatoes API key for apikey variable
var movieData;

function getMovieData() {
  var movieArray = new Array();
  var apikey = "Insert API Key Here";
  var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
  var moviesSearchUrl = baseUrl + '/lists/movies/box_office.json?apikey=' + apikey;

  WinJS.xhr({
    url: moviesSearchUrl, dataType: "jsonp"
  }).then(function (xhr) {
    var response = JSON.parse(xhr.response);

//get title, summary, box art
    response.movies.forEach(function (i) {
      movieArray.push({
        title: i.title,
        summary: i.synopsis,
        boxart: i.posters.detailed
      });
    });

//create movieData binding
    movieData = new WinJS.Binding.List(movieArray);

    WinJS.UI.processAll();
  }

  4. Если требуется запустить это приложение, замените текст Insert API Key Here ключом , полученным от Rotten Tomatoes, а затем сохраните все изменения, нажав клавиши Ctrl+Shift+S.

    При регистрации для получения ключа API Rotten Tomatoes необходимо указать имя приложения и URL-адрес. Можно использовать любое имя и указать URL-адрес личного сайта, например блога. Кроме того, требуется выбрать нужный тип приложения. Поскольку это приложение Windows 8, оно оптимизировано для планшетов и настольных компьютеров Windows 8. Приложение вызывает список новых выпусков фильмов, включая название, иллюстрацию и краткое описание.

  5. В Blend щелкните Перезагрузить, чтобы загрузить только что внесенные в проект в Visual Studio изменения.

Использование интерактивного режима

При сборке и запуске приложения (например, нажатием клавиши F5) можно открыть файл movieDisplay.html, щелкнув кнопку с цыпленком или коснувшись ее. Однако невозможно нажать кнопку с цыпленком (или коснуться ее) на поверхности разработки. При открытии файла movieDisplay.html из Blend состояние приложения должно измениться. С помощью интерактивного режима можно передавать события в приложение во время разработки и тем самым переходить к состояниям приложения, которые недоступны до выполнения кода JavaScript.

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

Доступ к файлу movieDisplay.html с помощью интерактивного режима

  1. Если default.html отображается на поверхности разработки, щелкните Включить интерактивный режимЗначок интерактивного режима в Blend (в правом верхнем углу интерфейса приложений) или нажмите клавиши Ctrl+Alt+I.

  2. После запуска приложения в интерактивном режиме нажмите кнопку с цыпленком (или коснитесь ее) для перехода на пустую страницу movieDisplay.html.

  3. Щелкните Выключить интерактивный режимЗначок "Выключить интерактивный режим" в Blend (в правом верхнем углу интерфейса приложения) или нажмите клавиши Ctrl+Alt+I.

Обратите внимание, что вы все еще работаете на странице default.html (см. вкладку вверху приложения). Однако movieDisplayContainer теперь отображается на панели Live DOM. Кроме того, уведомление "Выбранное содержимое является частью файла movieDisplay.html." отображается в верхней части приложения под вкладкой default.html. Как было сказано выше в этом разделе, эта страница не была доступна для редактирования в динамическом состоянии до перехода в интерактивный режим. После загрузки файла movieDisplay.html можно приступать к стилистическому оформлению movieDisplayContainer.

Добавление стиля к movieDisplayContainer

  1. На панели Live DOM щелкните правой кнопкой мыши movieDisplayContainer, а затем выберите команду Создать правило стиля из ИД элемента.

  2. На панели Свойства CSS выберите #movieDisplayContainer в категории Примененные правила стилей и установите для параметра Высота значение 100 %.

Добавление элемента управления FlipView (библиотека Windows JavaScript (WinJS))

Элемент управления FlipView — это элемент управления из библиотеки JavaScript Windows, который в определенный момент времени отображает один элемент в коллекции, обеспечивая возможность пролистывания для просмотра элементов в коллекции. С помощью элемента управления FlipView в PickaFlick можно легко просматривать список фильмов, получаемый в результате вызова API Rotten Tomatoes.

Элемент управления FlipView можно добавить непосредственно с панели Активы в Blend.

Добавление элемента управления FlipView

  1. В текстовом поле Поиск панели Активы введите FlipView и нажмите клавишу ВВОД.

  2. Дважды щелкните FlipView, чтобы добавить этот элемент управления в movieDisplayContainer.

Обратите внимание, что элемент FlipView появился на панели Live DOM. Когда в Blend создается экземпляр элемента управления .winjs, связанные с ним динамические элементы также появляются на панели Динамическая DOM. Чтобы просмотреть эти динамические элементы, разверните узел FlipView на панели Live DOM. Значок молнии b5-icn-livedom-dynamic справа от элемента показывает, что элемент создан динамически.

FlipView в динамической DOM в Blend

При наведении указателя мыши на FlipView на панели Live DOM отображаются дополнительные сведения об элементе управления, включая type, tag, id и class. Обратите внимание, что элемент управления FlipView является частью класса win-flipview.

FlipView в динамической DOM в Blend при наведении указателя

Если нажать кнопку FlipView на панели Live DOM, а затем выбрать команду .win-flipview (ui-dark.css) в категории Примененные правила стилей панели Свойства CSS, можно убедиться, что значение .win-flipview определено в .win-flipview (ui-dark.css), а для свойства Высота установлено значение 400px.

FlipView в uiDarkCSS в Blend

Можно переопределить стиль по умолчанию (производный от ui-dark.css) путем создания пользовательского стиля в default.css. Поскольку класс уже назначен элементу управления FlipView, можно быстро добавить ссылку на этот класс в файл default.css и определить новое правило стиля для этого класса.

Создание стиля для класса win-flipview

  1. На панели Свойства CSS справа от раздела Примененные правила стилей щелкните значок Создать правило стиля из выбранного элемента, а затем щелкните Создать правило стиля из класса элементов.

    Blend — применяемые стили — значок "Создать правило стиля"

  2. На панели Правила стилей щелкните win-flipview.

    Обратите внимание, что на панели Свойства CSS в категории Примененные правила стилей теперь отображается элемент .win-flipview (default.css).

    FlipView в defaultCSS в Blend

  3. На панели Свойства CSS установите свойство высота равным 100 %.

Привязка к данным фильма

На этом этапе данные фильма загружены, но не отображаются, поскольку в HTML отсутствует ссылка на них. HTML, отображаемый на поверхности разработки, и данные, созданные default.js (и определенные переменной movieData), полностью независимы друг от друга. Для отображения данных на поверхности разработки необходимо привязать данные к элементу управления FlipView в HTML.

Привязка элемента управления FlipView к movieData

  1. На панели Live DOM щелкните FlipView.

    Теперь можно осуществлять доступ к элементу управления FlipView на панели Атрибуты HTML (вкладка рядом с вкладкой Свойства CSS).

    Совет

    Если щелкнуть элемент, на панели Атрибуты HTML отображаются свойства элемента.Если щелкнуть элемент управления, на панели Атрибуты HTML отображаются свойства элемента управления.

  2. В категории Элементы управления приложения Windows на панели Атрибуты HTML введите movieData.dataSource в поле itemDataSource.

    Теперь в файле movieDisplay.html к элементу управления FlipView применен атрибут data-win-options, содержащий значение itemDataSource:movieData.dataSource.

Создание и стилистическое оформление шаблона элементов

Поскольку приложение запускается из Blend, реальные данные отображаются на поверхности разработки. Необработанные данные отображаются как строка. Теперь, когда подключение к данным проверено, можно стилистически оформить данные, воспользовавшись свойствами title, summary и boxart, созданными в файле default.js.

Источник данных на поверхности разработки в Blend

Будет создан шаблон данных для последовательного применения стиля ко всем данным фильма, извлеченным из Rotten Tomatoes.

Шаблон элемента будет создан путем применения свойства itemTemplate к элементу управления FlipView.

Создание шаблона элемента

  1. Убедитесь, что на панели Live DOM выбрано FlipView.

  2. В списке itemTemplate в категории Элементы управления приложения Windows панели Атрибуты HTML щелкните Создать новый шаблон.

    Откроется диалоговое окно Создать новый шаблон.

  3. Назовите шаблон movieDisplayTemplate и убедитесь, что выбрано Определить по ИД.

  4. В списке Добавить поля данных в шаблон последовательно щелкните иллюстрация, краткое описание и название. Нажмите кнопку ОК.

    На поверхности разработки появятся иллюстрация, название и краткое описание первого фильма в списке.

    Шаблон элемента в Blend

    Важно!

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

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

Стилистическое оформление шаблона элементов

  1. На поверхности разработки щелкните справа от изображения иллюстрации. Будет выделен объект div, содержащий иллюстрацию, название и краткое описание. Все элементы на странице будут выделены синими прямоугольниками.

  2. Щелкните правой кнопкой мыши папку div и выберите команду Добавить новый класс.

  3. В диалоговом окне Добавить новый класс назовите класс movieContainer, убедитесь, что установлен флажок Создать правило стиля для этого класса, и нажмите кнопку ОК.

  4. На панели Правила стилей щелкните .movieContainer.

  5. В поле Поиск или задание на панели Свойства CSS введите высота: 100 %; ширина: 100 %;, чтобы одновременно задать свойства height и width, а затем нажмите клавишу ВВОД.

    Содержимое переместится в левый верхний угол поверхности разработки.

  6. Чтобы упростить создание сетки, очистите страницу, удалив из movieDisplay.html следующий код.

    <img data-win-bind="src:boxart" height="100" width="100">
     <div data-win-bind="textContent:summary"></div>
     <div data-win-bind="textContent:title"></div>

  7. На панели Свойства CSS очистите текстовое поле Поиск или задание, щелкнув значок Очистить поиск Blend — значок "Очистить поиск"в правой части поля.

  8. В категории Макет в раскрывающемся списке отображение щелкните –ms-grid.

Создание сетки макета

Теперь, когда свойство отображения имеет значение -ms-grid, можно создать строки и столбцы, щелкнув непосредственно на поверхности разработки.

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

Создание сетки макета

  1. Убедитесь, что на панели Свойства CSS выбрано Конечные свойства или .movieContainer.

  2. На поверхности разработки укажите на пунктирную синюю линию вверху сетки, а затем щелкните отобразившийся оранжевый графический элемент вставки.

    Графический элемент столбца сетки в Blend

    Добавляется графический элемент столбца.

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

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

    Графический элемент строки сетки в Blend

    В результате должна получиться сетка с пятью столбцами и двумя строками, напоминающая следующую иллюстрацию.

    Сетка макета в Blend

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

  • Частичное (fr)

  • Пиксель (px)

  • Авто

  • Процент (%)

Расположение элементов сетки

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

Вставка и стилистическое оформление изображений

  1. На панели Проекты откройте папку Изображения, а затем перетащите small-LogoChicken в верхнюю левую ячейку в сетке.

  2. Щелкните правой кнопкой мыши папку small-LogoChicken, а затем выберите Добавить новый класс.

  3. В диалоговом окне Добавление нового класса назовите класс smallLogo-Chicken.

  4. Убедитесь, что установлен флажок Создать правило стиля для этого класса, а затем нажмите кнопку ОК.

  5. На панели Свойства CSS в категории Сетка установите для свойств grid-column-align и grid-row-align значение по центру.

    Эмблема учебника в Blend

  6. На панели Проекты откройте папку Изображения, а затем перетащите файл temp.png в третий столбец во второй строке сетки.

  7. Щелкните правой кнопкой мыши папку temp.png, а затем выберите команду Добавить новый класс.

  8. В диалоговом окне Добавление нового класса назовите класс boxart.

  9. Убедитесь, что установлен флажок Создать правило стиля для этого класса, а затем нажмите кнопку ОК.

  10. На панели Свойства CSS в категории Сетка установите для свойства grid-column-align значение по центру, а для свойства grid-row-align — значение начать.

    Временное поле в Blend

Теперь можно выполнить привязку к данным и стилистическое оформление непосредственно на поверхности разработки.

Правка привязок данных

Путем привязки отдельных элементов к конкретным объектам данных, определенным в файле default.js, можно стилистически оформить каждый элемент по отдельности.

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

Привязка изображения иллюстрации к данным иллюстрации

  1. На поверхности разработки щелкните изображение иллюстрации.

  2. На панели Атрибуты HTML в категории Общие выберите Дополнительные параметры12e06962-5d8a-480d-a837-e06b84c545bb, а затем щелкните Изменить привязку данных.

  3. В диалоговом окне Создать привязку данных для <img>.src выберите иллюстрация, а затем нажмите кнопку ОК.

    Желтая граница вокруг редактора значений указывает на объект с привязкой данных.

    Объект с привязкой к данным в панели атрибутов HTML в Blend

    После небольшой задержки из-за обновления подключения данных новое изображение фильма отобразится на поверхности разработки.

  4. На панели Свойства CSS установите свойство высота равным 500px.

Добавление и стилистическое оформление плитки

  1. На панели Активы введите h1 в текстовое поле Поиск и перетащите элемент h1 в третий столбец в первой строке.

    Элемент h1 отображается на странице.

  2. Щелкните правой кнопкой мыши элемент h1, а затем выберите Добавить новый класс.

  3. В диалоговом окне Добавление нового класса назовите класс название.

  4. Убедитесь, что установлен флажок Создать правило стиля для этого класса, а затем нажмите кнопку ОК.

  5. Щелкните элемент h1, а затем рядом с полем Цвет в категории Шрифт на панели Свойства CSS щелкните Не задано.

  6. В нижнем правом углу редактора цвета щелкните пипетку выбора цветаЗначок пипетки выбора цвета в Blend.

    Редактор font-color в Blend

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

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

  8. Щелкните цвет, который требуется применить к заголовку.

Привязка элемента h1 к данным заголовка

  1. Выделив элемент h1, в категории Общие на панели Атрибуты HTML щелкните Дополнительные параметры12e06962-5d8a-480d-a837-e06b84c545bb, а затем выберите Изменить привязку данных.

  2. В диалоговом окне Создать привязку данных для h1.textContent щелкните название, а затем нажмите кнопку ОК.

    После небольшой задержки из-за обновления подключения данных новое название фильма отобразится на поверхности разработки.

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

Изменение диапазона столбцов для заголовка

  • На панели Свойства CSS в категории Сетка установите значение grid-column-span равным 3 и нажмите клавишу ВВОД.

    Элемент h1 теперь охватывает три столбца.

Добавление краткого описания

  • На панели Активы введите статья в текстовое поле Поиск и перетащите элемент статья в пятый столбец во второй строке.

    Элемент статья появится в .movieContainer. Поскольку элемент пуст, пользователь не увидит содержимое до тех пор, пока не будет выполнена привязка к данным.

Привязка элемента статьи к данным краткого описания

  1. Щелкните правой кнопкой мыши элемент статья, а затем выберите Добавить новый класс.

  2. В диалоговом окне Добавление нового класса назовите класс summary.

  3. Убедитесь, что установлен флажок Создать правило стиля для этого класса, а затем нажмите кнопку ОК.

  4. В категории Общие на панели Атрибуты HTML щелкните Дополнительные параметры12e06962-5d8a-480d-a837-e06b84c545bb справа от textContent, а затем щелкните Изменить привязку данных.

  5. В диалоговом окне Создать привязку данных для article.textContent щелкните краткое описание, а затем нажмите кнопку ОК.

    Новое краткое описание фильма отобразится на поверхности разработки.

Изменение свойств шрифта

Стиль текста по умолчанию не удобен для чтения, однако можно легко изменить свойства шрифта текста, воспользовавшись панелью Свойства CSS. В следующей процедуре показано стилистическое оформление текста краткого описания. Можно изменить шрифт названия аналогичным образом.

Стилистическое оформление текста краткого описания

  1. Щелкните элемент статья, а затем щелкните нужный шрифт в списке Имя семейства шрифтов на панели Свойства CSS.

    Можно добавить шрифты в список font-family, выбрав их в списке Имя семейства шрифтов.

    Можно также изменить порядок выделения шрифтов, выбрав шрифт в списке Имя семейства шрифтов и нажав клавиши со стрелками вверх или вниз. Можно проверить в CSS-файле, что порядок шрифтов изменился соответственно.

  2. В редакторе значений Размер шрифта щелкните или введите нужное значение.

    Свойства CSS шрифтов в Blend

  3. Рядом с полем Цвет нажмите кнопку Не задано.

  4. В редакторе цвета щелкните нужный цвет или введите шестнадцатеричный код нужного цвета в поле Шестнадцатеричное значение и нажмите клавишу ВВОД.

    Кроме того, можно щелкнуть пипетку выбора цветаЗначок пипетки выбора цвета в Blend в нижнем правом углу редактора цвета. Используйте пипетку для указания на любой элемент нужного цвета на рабочем столе. Цвет названия меняется при наведении на разные элементы. Если щелкнуть элемент нужного цвета, текст краткого описания будет отображаться в этом цвете.

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

Чтобы добавить полосу прокрутки для более длинных кратких описаний, измените свойство Переполнение элемента Статья.

Добавление полосы прокрутки к более длинным кратким описаниям

  1. Выделите элемент article, а затем в текстовом поле Поиск или задание введите Переполнение.

  2. В списке Переполнение выберите Авто.

    Теперь полоса прокрутки будет отображаться для кратких описаний, выходящих за пределы страницы.

Можно также дополнительно настроить макет, воспользовавшись линейками и направляющими, позволяющими выровнять элементы на странице. См. раздел Использование линейки и направляющих.

Если выполнена регистрация в Rotten Tomatoes и вставлен соответствующий ключ API, можно выполнить сборку и запуск приложения нажатием клавиши F5.