Основы разработки приложений

Шаблон Приложение таблицы (Grid App)

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

• Страницы узлов (Hub) отображают все группы.
• Страницы разделов (Section) показывают содержимое отдельной группы.
• Страницы сведений (Detail) показывают подробные данные одного элемента группы.

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

Для получения дополнительных сведений о модели навигации посетите:

http://msdn.microsoft.com/ru-ru/library/windows/apps/hh738344.aspx

Упражнение: Создание Приложения таблицы

Рассмотрим создание приложения с макетом на основе сетки, используя соответствующий шаблон, и изучим его особенности

1. В Visual Studio, выберите Файл > Создать проект (File > New Project).
2. Выберите шаблон Приложение таблицы (Grid App) и назовите его WikipediaImages.
   

   
   Диалоговое окно Создать проект (New Project) в Visual Studio
3. Запустите проект, чтобы увидеть, что предоставляет шаблон.
   • Для нескольких групп верхнего уровня добавлены примеры данных.
   • Кликните на любом элементе, чтобы перейти на страницу сведений этого элемента.
   • Нажмите кнопку "назад", чтобы воспользоваться историей навигации.
   • Нажмите на имени группы, чтобы просмотреть список элементов этой группы.
4. Вернитесь в Visual Studio (можно воспользоваться сочетанием клавиш Alt+Tab).
5. Обратите внимание на следующие элементы шаблона Приложение таблицы, отличающие его от шаблона пустого приложения.
   • В файле /js/data.js предоставлен пример данных.
   • В файле default.html добавлен управляющий элемент PageControlNavigator, позволяющий осуществлять навигацию по различным страницам.
   • Появилась новая папка /Pages, которая содержит отдельные страницы, отображаемые внутри элемента PageControlNavigator:
     • groupedItems – страница "Центрального узла" приложения, показывает сгруппированный список всех элементов;
     • groupedDetail – страница "Разделов" приложения, показывает сведения отдельной группы;
     • itemDetail – страница "Сведений" приложения, показывает сведения отдельного элемента группы.
   • В /javascript/navigator.js был добавлен JavaScript-файл, который представляет собой оболочку для PageControlNavigator, обеспечивающую общую функциональность приложения, в том числе клавиатурную навигацию.

Упражнение: пример данных

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

1. Откройте data.js.
2. Измените одно или несколько значений sampleItems.
3. Запустите приложение и обратите внимание на измененные значения.
4. Вы также можете полностью заменить набор данных путем замены файла data.js и добавления любых материалов, например, изображений, которые понадобятся в новом наборе данных.
5. В контекстном меню папки /js/ выберите Добавить существующий элемент (Add Existing Item).
6. Перейдите в папку с примером данных и выберите "data.js".
7. Выберите Перезаписать (Overwrite) в появившемся диалоговом окне.
8. В контекстном меню папки /images/ выберите Добавить существующий элемент (Add Existing Item).
9. Перейдите в папку с примером данных, затем в папку /images/ и выберите все изображения.
10. Запустите проект и обратите внимание на внесенные изменения.

Итоги

В этом модуле вы познакомились с доступными в Visual Studio шаблонами приложений для Магазина Windows. Вы создали приложение на основе шаблона Приложение таблицы и увидели, как можно изменять данные. Кроме того, вы ознакомились со структурой проекта WinRT-приложения на основе JavaScript.

Самостоятельная работа

Используя проект приложения с шаблоном на основе сетки, созданный в последнем упражнении, измените файл data.js таким образом, чтобы добавить собственные группы и элементы. Как бы вы создали новые изображения, описания элементов и иконки групп для новых данных?

Вопросы

1. Вы хотите создать игру, используя JavaScript для WinRT-приложений, и вам нужно, чтобы интерфейс автоматически масштабировался по размерам экрана пользовательского устройства. С какого шаблона лучше всего начать создание приложения?
2. Вам нужно создать приложение, которое отображает иерархические данные, со страницами, представляющими корневой узел, разделы и описания. С какого шаблона следовало бы начать?
3. Какой инструмент лучше подходит для написания и отладки кода: 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

  Описание модели навигации в различных шаблонах.

Ответы

1. Шаблон Приложение с фиксированным макетом идеально подходит для игр, так как этот тип интерфейса будет автоматически масштабироваться под экран пользовательского устройства.
2. Шаблон Приложение таблицы идеально подходит для отображения иерархический данных.
3. Возможности написания и отладки кода предоставляет Visual Studio.