Главная » Статьи » Visual Studio 2012 » Создание с помощью JavaScript

Часть 6(2). Создание программы для чтения блогов

Предоставление данных

После написания кода для сохранения данных веб-канала в массивах необходимо сгруппировать данные веб-канала для элемента управления ListView. Также необходимо завершить привязку данных веб-канала к элементу управления ListView.

Функция getItemsFromGroup вызывает метод createFiltered и возвращает записи для указанного блога. Функция getItemsFromGroup использует переменную list.

var list = new WinJS.Binding.List();

Замените это определение вызовом функции getBlogPosts, которая возвращает переменную blogPosts. Это объект WinJS.Binding.List.

var list = getBlogPosts();

Обратите внимание, что вызов метода createGrouped сортирует записи блога по указанному критерию (в этом случае по принадлежности записи к блогу).

var groupedItems = list.createGrouped(
 function groupKeySelector(item) { return item.group.key; };
 function groupDataSelector(item) { return item.group; }

Обновление элементов PageControl

Основная функция элементов PageControl — это элемент управления ListView, реализованный с помощью WinJS.UI.ListView. В этом списке содержится элемент каждого блога. Изменим представленный в шаблоне элемент управления ListView таким образом, чтобы в нем содержались заголовок блога и дата последнего обновления блога.

Откройте items.html. Чтобы отобразить содержимое в массиве blogs, необходимо изменить HTML-код в теге div.

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
 <div class="item">
 <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
 <div class="item-overlay">
 <h4 class="item-title" data-win-bind="textContent: title"></h4>
 <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
 </div>
 </div>
</div>

Выполнены следующие обновления:

  1. Так как мы не располагаем изображением для каждого блога, удалите тег img.
  2. В теге h6 замените textContent: subtitle на textContent: updated. При этом дата последнего обновления блога находится в разделе наложения элемента ListView.
  3. Поместите тег h4 перед элементом div класса item-overlay. При этом заголовок блога помещается в главную часть элемента ListView.

Результат.

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
 <div class="item">
 <h4 class="item-title" data-win-bind="textContent: title"></h4>
 <div class="item-overlay"> 
 <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: updated"></h6>
 </div>
 </div>
</div>

Чтобы задать голубой цвет элементов списка, откройте items.css и добавьте атрибут background-color, показанный ниже. Также уменьшите в атрибуте -ms-grid-rows размер второго ряда с 90 пикселей до 60 пикселей, как показано ниже, потому что в наложении необходимо отобразить только дату последнего обновления блога.

.itemspage .itemslist .item {
 -ms-grid-columns: 1fr;
 -ms-grid-rows: 1fr 60px;
 display: -ms-grid;
 height: 250px;
 width: 250px;
 background-color: #557EB9;
}

Чтобы установить размер шрифта и поля для заголовка блога, добавьте следующий код в items.css.

.itemspage .itemslist .win-item .item-title {
 -ms-grid-row: 1;
 overflow: hidden;
 width: 220px;
 font-size: 24px;
 margin-top: 12px;
 margin-left: 15px;
}

Обновление разбиения PageControl

Откройте split.html. HTML-код разделенной страницы в шаблоне содержит демонстрационные данные. Чтобы отобразить имена в массиве blogPosts, необходимо изменить HTML-код в теге div.

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
 <div class="item">
 <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
 <div class="item-info">
 <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
 <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
 <h4 class="item-description" data-win-bind="textContent: description"></h4>
 </div>
 </div>
</div>

Выполнены следующие обновления:

  1. Замените тег img новым узлом <div class="item-date">...</div>.
  2. В теге h6 замените textContent: subtitle на textContent: author.
  3. Удалите тег h4.

Результат.

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
 <div class="item">
 <div class="item-date">
 <p class="item-month" data-win-bind="innerHTML: month"></p>
 <span class="item-day" data-win-bind="innerHTML: day"></span> | 
 <span class="item-year" data-win-bind="innerHTML: year"></span>
 </div>
 <div class="item-info">
 <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
 <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: author"></h6>
 </div>
 </div>
</div>

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

Поскольку нам не требуются все демонстрационные данные, для упрощения страницы удалите следующий код из раздела articleSection.

<header class="header">
 <div class="text">
 <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title"></h2>
 <h4 class="article-subtitle" data-win-bind="textContent: subtitle"></h4>
 </div>
 <img class="article-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
</header>

Чтобы задать цвет блока текста с датой элемента, а также шрифт и поля для текста, откройте split.css и добавьте следующий код.

.splitpage .itemlistsection .itemlist .item .item-date {
 -ms-grid-column: 1;
 background-color: #557EB9;
}

 .splitpage .itemlistsection .itemlist .item .item-date .item-month{
 margin-top: 12px;
 margin-left: 12px;
 margin-bottom: 4px;
 font-weight: bold;
 font-size: 28px;
 }

 .splitpage .itemlistsection .itemlist .item .item-date .item-day{
 margin-left: 12px;
 font-size: 28px;
 }

Чтобы получить нужную разметку страницы, замените значение атрибута -ms-grid-row с "1" на "2". Это значение размещает заголовок страницы в первой строке, а ListView и статью — во второй строке.

.splitpage .articlesection {
 -ms-grid-column: 2;
 -ms-grid-row: 2;
 -ms-grid-row-span: 2;
 margin-left: 50px;
 overflow-y: auto;
 padding-right: 120px;
 position: relative;
 z-index: 0;
}

Теперь попробуем запустить приложение еще раз. Чтобы построить, развернуть и запустить приложение, нажмите клавишу F5. Заголовок страницы отобразится сразу, однако данные веб-канала загрузятся с небольшой задержкой. Когда все отложенные результаты будут получены, элемент управления ListView отобразит по одному элементу из каждого блога. (Код добавляет элементы в элемент управления ListView в порядке получения результатов.) Когда пользователь щелкнет или прикоснется к элементу в элементе управления ListView, откроется разделенная страница со списком записей блога и содержимым выбранной записи блога. По умолчанию выбрана первая запись блога.

Чтобы вернуться на страницу элементов, щелкните стрелку "Назад". Обратите внимание, что плитки отображаются на экране с анимацией перехода. Это функция библиотеки Windows для JavaScript, которая позволяет элементам управления и другим элементам пользовательского интерфейса перемещаться в соответствии с рекомендациями по взаимодействию с пользователем для приложений Магазина Windows.

Снимок экрана домашней страницы в альбомной ориентации.

Добавление сведений об элементе PageControl

Сведения об элементе PageControl в качестве заголовка используют заголовок записи блога. На этой странице также имеется область для содержимого записи блога.

Чтобы добавить сведения об элементе PageControl:

  1. В окне Solution Explorer (Обозреватель решений) щелкните правой кнопкой мыши папку pages и выберите команду Add (Добавить) > New Folder (Папка).
  2. Назовите папку itemDetail.
  3. В окне Solution Explorer (Обозреватель решений) щелкните правой кнопкой мыши папку itemDetail и выберите команду Add (Добавить) > New Item (Элемент).
  4. Выберите JavaScript > Windows Store (Магазин Windows) > Page Control (Элемент управления страницей) и используйте имя файла itemDetail.html.
  5. Щелкните Add (Добавить), чтобы создать файлы itemDetail.css, itemDetail.html и itemDetail.js в папке pages/itemDetail.

Откройте itemDetail.html и измените основной раздел, как показано ниже. Этот код задает разметку страницы. (Это упрощенная версия кода на странице itemDetail.html, находящейся в шаблоне Grid Application (Сетка).)

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>itemDetail</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="itemDetail.css" rel="stylesheet" />
 <script src="itemDetail.js"></script>
</head>
<body>
 <div class="itemDetail fragment">
 <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 itemDetail</span>
 </h1>
 </header>
 <section aria-label="Main content" role="main">
 <p>Content goes here.</p>
 </section>
 </div>
</body>
</html>

Замените раздел Main content следующим.

<section aria-label="Main content" role="main">
 <article>
 <div class="item-content"></div>
 </article>
</section>

Откройте itemDetail.js и измените код для функции ready, как показано ниже. Когда пользователь переходит на страницу, этот код отображает заголовок и содержимое. (Это упрощенная версия кода на странице itemDetail.js, находящейся в шаблоне Grid Application (Сетка).)

ready: function (element, options) {
 // Display the appbar but hide the Full View button
 var appbar = document.getElementById('appbar');
 var appbarCtrl = appbar.winControl;
 appbarCtrl.hideCommands(["view"], false);

 var item = options && options.item ? options.item : Data.items.getAt(0); 
 element.querySelector(".titlearea .pagetitle").textContent = item.title;
 element.querySelector("article .item-content").innerHTML = item.content;
},

Теперь необходимо определить стили для страницы сведений об элементе. Откройте файл itemDetail.css и вместо кода шаблона добавьте следующий код.

.itemDetail section[role=main] {
 -ms-grid-row: 2;
 display: block;
 height: 100%;
 overflow-x: auto;
 position: relative;
 width: 100%;
 z-index: 0;
}

 .itemDetail section[role=main] article {
 /* Define a multi-column, horizontally scrolling article by default. */
 column-fill: auto;
 column-gap: 80px;
 column-width: 480px;
 height: calc(100% - 50px);
 margin-left: 120px;
 width: 480px;
 }

 .itemDetail section[role=main] article .item-content p {
 margin-bottom: 20px;
 margin-right: 20px;
 vertical-align: baseline;
 }

@media screen and (-ms-view-state: snapped) {
 .itemDetail section[role=main] article {
 /* Define a single column, vertically scrolling article in snapped mode. */
 -ms-grid-columns: 300px 1fr;
 -ms-grid-row: 2;
 -ms-grid-rows: auto 60px;
 display: -ms-grid;
 height: 100%;
 margin-left: 20px;
 overflow-x: hidden;
 overflow-y: auto;
 width: 300px;
 }

 .itemDetail section[role=main] article .item-content {
 padding-bottom: 60px;
 }
}

@media screen and (-ms-view-state: fullscreen-portrait) {
 .itemDetail section[role=main] article {
 margin-left: 100px;
 }
}

Добавление панели приложения с командой для отображения страницы сведений об элементе

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

Откройте файл default.html и раскомментируйте следующий код.

<!-- <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> -->

Чтобы создать кнопку Full View (Во весь экран) в правом углу панели приложения, измените определение кнопки, как показано ниже.

<div id="appbar" data-win-control="WinJS.UI.AppBar">
 <button data-win-control="WinJS.UI.AppBarCommand" 
 data-win-options="{id:'view', label:'Full View', icon:'add'}" type="button">
 </button>
</div> 

Кнопка Full View (Во весь экран) не должна отображаться на панели приложения при переходе на страницу элементов или страницу сведений об элементе. Чтобы скрыть кнопку, откройте файл items.js и добавьте следующий код в функцию ready. (Этот код уже присутствует в функции ready созданного файла itemDetail.js.)

// Display the appbar but hide the Full View button
var appbar = document.getElementById('appbar');
var appbarCtrl = appbar.winControl;
appbarCtrl.hideCommands(["view"], false);

Кнопка Full View (Во весь экран) отображается на панели приложения при переходе на разделенную страницу. Чтобы отобразить кнопку, откройте файл split.js и добавьте следующий код в функцию ready.

// Display the appbar and show the Full View button
var appbar = document.getElementById('appbar');
var appbarCtrl = appbar.winControl;
appbarCtrl.showCommands(["view"], false);

Навигация с разделенного элемента PageControl на страницу сведений об элементе PageControl

Когда пользователь нажимает кнопку Full View (Во весь экран) на панели приложения, открывается страница сведений об элементе PageControl и отображается заголовок и содержимое выбранной записи блога.

Откройте файл split.js. После объявления переменной utils добавьте следующее объявление переменной.

// The selected item
var post;

Добавьте следующий оператор в функцию ready перед вторым вызовом querySelector, чтобы this.items обрабатывался первым. Этот код присваивает переменной post значение индекса первой записи блога, когда пользователь переходит на страницу.

// Get the first item, which is the default selection
post = this._items.getAt(0);

Добавьте следующий оператор в функцию _selectionChanged после оператора, который задает this._itemSelectionIndex. Этот код присваивает переменной post значение индекса записи блога, выбранной пользователем.

// Get the item selected by the user
post = this._items.getAt(this._itemSelectionIndex);

За пределами функции _selectionChanged добавьте функцию обработчика событий после объявления переменной post. Этот обработчик вызывается, когда пользователь нажимает кнопку Full View (Во весь экран). Функция WinJS.Navigation.navigate загружает страницу сведений об элементе и передает в качестве элемента выбранную запись блога.

function displayFullView() {
 // Display the selected item in the item detail page
 nav.navigate('/pages/itemDetail/itemDetail.html', { item: post });
}

Добавьте следующий код в функцию ready сразу после кода, который был добавлен для отображения кнопки Full View (Во весь экран). Этот код регистрирует функцию displayFullView в качестве обработчика события click для кнопки Full View (Во весь экран).

// Register the event handler for the Full View button
document.getElementById('view').addEventListener("click", displayFullView, false);

Чтобы запустить приложение, нажмите клавишу F5. Когда пользователь выбирает элемент на странице элементов, открывается разделенная страница со списком записей блога и содержимым выбранной записи блога. После выбора записи блога ее содержимое отображается в столбце справа. Чтобы открыть панель приложения, проведите пальцем сверху вниз (или снизу вверх) либо щелкните правой кнопкой мыши, если компьютер не поддерживает касания.

Снимок экрана разделенной страницы в альбомной ориентации.

Если вы коснетесь кнопки Full View (Во весь экран) или щелкнете ее, приложение отобразит содержимое выбранной записи блога на странице сведений об элементе.

Снимок экрана страницы сведений в альбомной ориентации.

Если вы коснетесь кнопки Back (Назад) или щелкнете ее, откроется разделенная страница. По умолчанию выделен первый элемент ListView. Это не означает, что вы выбрали именно этот элемент для отображения на странице сведений об элементе. Вы можете добавить код для сохранения и восстановления выбора.

Код шаблона нашего приложения поддерживает и книжную, и альбомную ориентации. Поверните экран компьютера или запустите приложение в эмуляторе Microsoft Visual Studio Express 2012 для Windows 8 и затем поверните экран. Страница элементов выглядит следующим образом.

Домашняя страница в книжной ориентации.

Разделенная страница выглядит следующим образом. Обратите внимание, что до тех пор, пока не будет выбран элемент, отображается только элемент управления ListView. После выбора элемента запись блога отображается вертикально. После нажатия кнопки Full View (Во весь экран) запись блога отображается горизонтально.

Разделенная страница в книжной ориентации.

Сводка

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



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