Главная » Статьи » Visual Studio 2012 » Создание с помощью JavaScript |
Предоставление данныхПосле написания кода для сохранения данных веб-канала в массивах необходимо сгруппировать данные веб-канала для элемента управления ListView. Также необходимо завершить привязку данных веб-канала к элементу управления ListView. Функция var list = new 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. Чтобы отобразить содержимое в массиве <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> Выполнены следующие обновления:
Результат. <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, показанный ниже. Также уменьшите в атрибуте .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-код разделенной страницы в шаблоне содержит демонстрационные данные. Чтобы отобразить имена в массиве <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> Выполнены следующие обновления:
Результат. <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 нет тега для отображения вертикальной черты. Поскольку нам не требуются все демонстрационные данные, для упрощения страницы удалите следующий код из раздела <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:
Откройте 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> Замените раздел <section aria-label="Main content" role="main"> <article> <div class="item-content"></div> </article> </section> Откройте itemDetail.js и измените код для функции 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 и добавьте следующий код в функцию // 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 и добавьте следующий код в функцию // 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. После объявления переменной // The selected item var post; Добавьте следующий оператор в функцию // Get the first item, which is the default selection post = this._items.getAt(0); Добавьте следующий оператор в функцию // Get the item selected by the user post = this._items.getAt(this._itemSelectionIndex); За пределами функции function displayFullView() { // Display the selected item in the item detail page nav.navigate('/pages/itemDetail/itemDetail.html', { item: post }); } Добавьте следующий код в функцию // 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. После выбора элемента запись блога
отображается вертикально. После нажатия кнопки СводкаРабота над кодом приложения завершена. Мы научились использовать встроенные шаблоны страниц, привязывать данные к ListView, переходить на новую страницу и добавлять панель приложения с кнопкой. Источник: http://msdn.microsoft.com/ru-ru/library/windows/apps/ | |
Просмотров: 1184
| Теги: |
Всего комментариев: 0 | |