Разработка приложений для Modern UI: Windows 8

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

Показывать лекцию целиком

Цель изучения

Материалы к модулю Вы можете скачать здесь.

В этом модуле вы изучите структуру проекта Windows-приложения на базе JavaScript. Вы ознакомитесь с инструментами, применяемыми для создания WinRT-приложений, узнаете об особенностях шаблонов и создадите первое простое приложение.

Подготовка

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

Visual Studio

Visual Studio – это основной инструмент, который вы будете использовать для написания кода на JavaScript, отладки и настройки приложений для Магазина Windows. Visual Studio имеет несколько ключевых возможностей, которыми вы будете пользоваться:

  • Visual Studio предоставляет четкие и понятные редакторы кода и HTML с системой IntelliSense;
  • в Visual Studio есть возможность отлаживать код, используя точки останова, и также возможен просмотр контрольных значений (Watches) для отладки нештатных ситуаций в процессе исполнения кода;
  • мы можем применять редакторманифеста (описания) приложения (Application Manifest Editor) для установки некоторых свойств приложения, таких, как безопасность, ориентация устройства, иконки и настройки Магазина Windows.
    •

    Шаблоны в Visual Studio

    Visual Studio по умолчанию включает в себя несколько шаблонов, которые представляют собой основу для приложений, выполненных по принципам нового дизайна для Windows. Вы можете найти эти шаблоны в меню Файл/Создать проект (File>New>Project), выбрав в левой панели пункт "JavaScript".

    Пустое приложение

    Шаблон пустого приложения (Blank App) идеально подходят для создания приложений "с нуля" с уникальным пользовательским интерфейсом.

    Приложение таблицы

    Этот шаблон на основе сетки (Grid App) позволяет просматривать иерархические данные в трех видах: Узлы, Разделы и Сведения. Пользователи могут легко заходить в группы и изучать данные в различном виде. Это идеальный шаблон для любых сгруппированных данных.

    Приложение с разделением

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

    Приложение с фиксированным макетом

    Шаблон приложения с фиксированным макетом (Fixed Layout App) похож на шаблон пустого приложения, но способен масштабировать содержимое под размер экрана устройства. Например, если ваш дизайн разработан под экран 800 х 600 пикселей, а у пользователя устройство с разрешением 1600 х 900, то этот шаблон автоматически масштабирует содержимое под разрешение 1600 х 900.

    Этот шаблон идеален для игр.

    Приложение навигации

    Этот шаблон (Navigation App) похож на шаблон пустого приложения, но включает в себя панель навигации, используемую в приложениях на основе сетки и разделенных приложениях. Вы можете использовать эту панель, чтобы добавить новые страницы, по которым пользователь может переходить с возможностью возвращения с помощью кнопки "Назад".

    Для более подробного описания шаблонов для JavaScript воспользуйтесь ресурсом:

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

    Упражнение: Наше первое приложение

    Cоздадим проект, используя шаблон пустого приложения.

  • В меню Visual Studio выберите Файл > Создать проект (File > New Project).
  • В левой панели выберите JavaScript и выберите Пустое приложение (Blank App) в качестве шаблона. Введите в поле Имя (Name) BlankApp, затем нажмите ОК.
  • Visual Studio автоматически создает несколько файлов проекта, которые вы можете видеть в Обозревателе решений (Solution Explorer):

    • Решение "BlankApp"

    Решение (Solution) — это самый верхний элемент в Обозревателе решений. Решение представляет собой совокупность всех проектов, собранных в одном файле, но в нашем случае в Решении присутствует всего один проект.

    BlankApp

    Это файл проекта, который объединяет все файлы, свойственные шаблону пустого приложения.

    /css/default.css

    Это файл CSS, который определяет визуальное оформление элементов приложения, такие, как шрифты, цвета и макет.

    /images/

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

    /js/default.js

    Файл кода JavaScript содержит логику для страницы default.html, включающую в себя такие элементы, как обработчики событий и инициализацию.

    BlankApp_TemporaryKey.pfx

    В этом файле содержится ключ, который подписывает файл appxmanifest, удостоверяющий автора приложения.

    default.html

    Эта HTML-страница определяет пользовательский интерфейс приложения и на данный момент представляет собой одну пустую страницу.

    package.appxmanifest

    Этот файл XML содержит множество настроек (поддерживаемые ориентации, значки, экран загрузки и др.) и описывает специфические возможности, используемые приложением. Поскольку это файл XML, Visual Studio предоставляет отдельный редактор для работы с ним, который можно вызвать двойным щелчком по файлу.

    Упражнение: Blend для Visual Studio

    Редактирование HTML в Visual Studio ограничено текстовым редактором HTML-разметки. Для более удобного, WYSIWYG (what you see is what you get, что видишь – то и получаешь) редактирования HTML-страниц можно использовать Blend.

  • Вернитесь к шаблону пустого приложения, который вы создали ранее.
  • Щелкните правой клавишей на документе default.html и выберите в контекстном меню пункт Открыть в приложении Blend (Open in Blend).
  • Выберите панель Активы (Assets) из панелей в верхней левой вкладке. Панель Активы показывает элементы HTML и мультимедийных материалов, которые могут быть размещены на странице.
  • Разверните категорию Элементы (Elements) и выберите подкатегорию Формы (Forms). В этом разделе отображаются элементы интерфейса, которые обычно используются для форм ввода данных.
  • Выберите элемент <label> (метка) и перетяните в рабочее окно визуального конструктора (artboard) – главную панель для редактирования справа.
  • Дважды кликните на элементе <label> на рабочей области и введите текст "Hello, Blend!"
  • Попробуйте перемещать метку на странице и обратите внимание, что её позиция "заблокирована". Blend выдает сообщение:
  • Для изменения расположения элемента <label> в параметрах CSS воспользуемся панелью свойств (Properties). Самый быстрый способ найти поле, отвечающее за расположение элемента (position) – ввести название свойства в поисковой строке.
  • Как только вы нашли свойство, отвечающее за расположение (position), установите в нем абсолютное значение (absolute):
  • Теперь поместите элемент <label> в рабочей области куда пожелаете.
  • Рассмотрим применение Blend для добавления изображения в пользовательский интерфейс. Перейдите к панели Проекты (Projects).
  • Откройте контекстное меню подпапки images (щелкните правой клавишей) и выберите "Добавить существующий элемент…" ("add existing item…").
  • Перейдите в папку \Module_4_Assets\images\ и выберите sports.png.
  • Перетащите картинку на рабочую область.
  • Закройте Blend и сохраните файл. Теперь вы вернулись в Visual Studio, и файл, который вы редактировали, обновился (обратите внимание на изменения в default.html).
  • Запустите проект (нажатием F5) и обратите внимание на внесенные изменения.
    •

    Шаблон Приложение таблицы (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.
    •
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^