Основы разработки приложений
Шаблон Приложение таблицы (Grid App)
Шаблон Приложение таблицы, основанный на сетке, отлично подходит для отображения иерархических данных. Этот шаблон дает различные способы предоставления данных с различными уровнями подробности, а также обеспечивает образцы данных для начала работы.
- Страницы узлов (Hub) отображают все группы.
- Страницы разделов (Section) показывают содержимое отдельной группы.
- Страницы сведений (Detail) показывают подробные данные одного элемента группы.
Также, в отличие от "пустого" приложения, шаблон приложения на основе сетки знакомит вас с моделью навигации, которая отслеживает историю переходов пользователя и позволяет переходить на ранее просмотренные страницы.
Для получения дополнительных сведений о модели навигации посетите:
http://msdn.microsoft.com/ru-ru/library/windows/apps/hh738344.aspx
Упражнение: Создание Приложения таблицы
Рассмотрим создание приложения с макетом на основе сетки, используя соответствующий шаблон, и изучим его особенности
- В Visual Studio, выберите Файл > Создать проект (File > New Project).
- Выберите шаблон Приложение таблицы (Grid App) и назовите его WikipediaImages.
- Запустите проект, чтобы увидеть, что предоставляет шаблон.
- Для нескольких групп верхнего уровня добавлены примеры данных.
- Кликните на любом элементе, чтобы перейти на страницу сведений этого элемента.
- Нажмите кнопку "назад", чтобы воспользоваться историей навигации.
- Нажмите на имени группы, чтобы просмотреть список элементов этой группы.
- Вернитесь в Visual Studio (можно воспользоваться сочетанием клавиш Alt+Tab).
- Обратите внимание на следующие элементы шаблона Приложение таблицы, отличающие его от шаблона пустого приложения.
- В файле /js/data.js предоставлен пример данных.
- В файле default.html добавлен управляющий элемент PageControlNavigator, позволяющий осуществлять навигацию по различным страницам.
- Появилась новая папка /Pages, которая содержит отдельные страницы, отображаемые внутри элемента PageControlNavigator:
- groupedItems – страница "Центрального узла" приложения, показывает сгруппированный список всех элементов;
- groupedDetail – страница "Разделов" приложения, показывает сведения отдельной группы;
- itemDetail – страница "Сведений" приложения, показывает сведения отдельного элемента группы.
- В /javascript/navigator.js был добавлен JavaScript-файл, который представляет собой оболочку для PageControlNavigator, обеспечивающую общую функциональность приложения, в том числе клавиатурную навигацию.
Упражнение: пример данных
Пример данных, который генерируется как часть шаблона Приложение таблицы, может быть легко модифицирован для соответствия вашим потребностям. Например, вы можете построить целое приложение со статическими данными, не нуждающееся в получении данных из интернета (в последующих модулях вы узнаете о реализации обмена данными с интернет-сервисами и другими ресурсами).
- Откройте data.js.
- Измените одно или несколько значений sampleItems.
- Запустите приложение и обратите внимание на измененные значения.
- Вы также можете полностью заменить набор данных путем замены файла data.js и добавления любых материалов, например, изображений, которые понадобятся в новом наборе данных.
- В контекстном меню папки /js/ выберите Добавить существующий элемент (Add Existing Item).
- Перейдите в папку с примером данных и выберите "data.js".
- Выберите Перезаписать (Overwrite) в появившемся диалоговом окне.
- В контекстном меню папки /images/ выберите Добавить существующий элемент (Add Existing Item).
- Перейдите в папку с примером данных, затем в папку /images/ и выберите все изображения.
- Запустите проект и обратите внимание на внесенные изменения.
Итоги
В этом модуле вы познакомились с доступными в Visual Studio шаблонами приложений для Магазина Windows. Вы создали приложение на основе шаблона Приложение таблицы и увидели, как можно изменять данные. Кроме того, вы ознакомились со структурой проекта WinRT-приложения на основе JavaScript.
Самостоятельная работа
Используя проект приложения с шаблоном на основе сетки, созданный в последнем упражнении, измените файл data.js таким образом, чтобы добавить собственные группы и элементы. Как бы вы создали новые изображения, описания элементов и иконки групп для новых данных?
Вопросы
- Вы хотите создать игру, используя JavaScript для WinRT-приложений, и вам нужно, чтобы интерфейс автоматически масштабировался по размерам экрана пользовательского устройства. С какого шаблона лучше всего начать создание приложения?
- Вам нужно создать приложение, которое отображает иерархические данные, со страницами, представляющими корневой узел, разделы и описания. С какого шаблона следовало бы начать?
- Какой инструмент лучше подходит для написания и отладки кода: Visual Studio или Blend?
Дополнительные ресурсы
Вы можете узнать больше о шаблонах приложений в Visual Studio по следующим ссылкам:
- Шаблоны проектов JavaScript для WinRT-приложений:
http://msdn.microsoft.com/ru-ru/library/windows/apps/hh758331.aspx
Подробное описание разнообразных шаблонов
- Добавление данных в шаблон проекта:
http://msdn.microsoft.com/ru-ru/library/windows/apps/hh758329.aspx
Подробная инструкция по добавлению и изменению данных в шаблонах "Приложение таблицы" и "Приложение с разделением".
- Модель навигации
http://msdn.microsoft.com/ru-ru/library/windows/apps/hh738344.aspx
Описание модели навигации в различных шаблонах.
Ответы
- Шаблон Приложение с фиксированным макетом идеально подходит для игр, так как этот тип интерфейса будет автоматически масштабироваться под экран пользовательского устройства.
- Шаблон Приложение таблицы идеально подходит для отображения иерархический данных.
- Возможности написания и отладки кода предоставляет Visual Studio.