Опубликован: 02.04.2013 | Доступ: свободный | Студентов: 1122 / 54 | Длительность: 20:18:00
Специальности: Программист
Теги:
Лекция 3:
Быстрый старт
Другие шаблоны
В этой лекции мы работали только с шаблоном Пустое приложение, рассматривали основы написания приложений для Магазина Windows без каких-либо отвлекающих факторов. В "Анатомия приложения и навигация по страницам" мы глубже рассмотрим анатомию приложений, воспользовавшись некоторыми другими шаблонами, мы не будем рассматривать их все. Однако, мы завершим эту главу кратким обзором этих весьма удобных инструментов.
Приложение с фиксированным макетом (Fixed Layout Template)
"Проект приложения для Магазина Windows, которое масштабируется с использованием макета с фиксированными пропорциями" (Описание из Blend/Visual Studio).
Недавно мы видели приложение, которое подстраивается под изменения отображаемой области, изменяя свой макет. В "Here My Am!" мы использовали CSS-сетку с автоматически настраиваемыми областями (значения 1fr в строках и столбцах). Такой подход хорошо работает для приложений с содержимым, которое хорошо поддаётся масштабированию и для приложений, которые могут показывать дополнительный контент, такой, как заголовки новостей или результаты поиска, когда у них больше места.
Как мы увидим в "Макет" , другие виды приложений не обладают такой же гибкостью. Например, игры, где соотношение сторон игровой области должно оставаться постоянным. (Было бы несправедливо, если бы игроки, устройства которых имеют большие экраны, увидели бы большее пространство игрового мира!). Так, когда размер отображаемого пространства приложения изменяется - либо при изменении состояния просмотра, либо разрешения экрана - такое приложение скорее масштабирует своё окно, увеличив его или уменьшив, нежели будет настраивать свой макет.
Приложение с фиксированным макетом предоставляет базовую структуру для подобных приложений, так же, как шаблон Пустое приложение предоставляет базу для создания гибких приложений. Ключевую важность здесь имеет элемент управления WinJS.UI.ViewBox, который автоматически заботится о масштабировании содержимого с сохранением соотношения сторон:
<body> <div data-win-control="WinJS.UI.ViewBox"> <div class="fixedlayout"> <p>Content goes here</p> </div> </div> </body>
В файле default.css вы можете видеть элемент body, которому задан стиль "резинового" блока CSS, центрированного на экране, и элемент fixedLayout, установленный на размер 1024х768 (минимальный размер окон полноэкранных альбомных приложений и приложений в режиме заполняющего просмотра). Размещая содержимое внутри дочернего элемента div, который принадлежит элементу ViewBox, вы можете быть уверены в том, что работаете с этими фиксированными размерностями. ViewBox автоматически настроит масштаб того, что находится внутри, и, при необходимости, добавит пустые пространства сверху и снизу или справа и слева для сохранения пропорций.
Обратите внимание на то, что подобные приложения могут не поддерживать интерактивный прикрепленный режим. В игры, например, невозможно играть при уменьшении размеров их окна. В подобном случае приложение может просто поставить игру на паузу и попытаться выйти из прикрепленного режима, если пользователь пытается продолжить игру. Мы вернемся к этому в "Макет" .
Приложение навигации (Navigation Template)
"Проект приложения для Магазина Windows, которое содержит предопределенные элементы управления для навигации" (Описание из Blend/Visual Studio).
Шаблон Приложение навигации построен на базе шаблона Пустое приложение путём добавления к нему системы навигации по страницам. Как было сказано в "Жизненный путь приложений для Магазина Windows: Характеристики платформы Windows 8" , приложения для Магазина Windows, написанные на JavaScript, лучше реализовать в виде единственной HTML-страницы, выступающей в роли контейнера, в который динамически загружаются другие страницы. Это позволяет организовать плавные переходы (так же, как и анимации) между этими страницами и сохранить скриптовый контекст.
Этот шаблон, и другие оставшиеся, использует элемент управления Page Navigator, который облегчает загрузку (и отправку) страниц таким способом. Вам нужно лишь создать сравнительно простую структуру для описания каждой страницы и её поведения. Мы рассмотрим это в "Анатомия приложения и навигация по страницам" .
В подобной модели default.html - это нечто большее, нежели обычный контейнер, всё остальное в приложении проходит через вспомогательные страницы. Шаблон Приложение навигации создаёт лишь одну вспомогательную страницу, однако, создавая всё необходимое для того, чтобы организовать работу со множеством страниц.
Приложение таблицы (Grid Template)
"Трехстраничный проект приложения для Магазина Windows, которое осуществляет переходы между группами элементов, расположенных в сетке. Сведения о группах и элементах отображаются на выделенных страницах" (Описание из Blend/Visual Studio).
Построенное на базе шаблона Приложение навигации, шаблон Приложение таблицы обеспечивает основу для приложений, которые ориентированы на просмотр наборов (коллекций) данных на множестве страниц. Домашняя страница отображает сгруппированные элементы коллекции, с неё вы можете перейти на страницу подробной информации об элементе, или на страницу подробной информации о группе и её элементах (с которой вы так же можете попасть на страницу с подробным описанием элемента).
В дополнение к навигации, шаблон Приложение таблицы показывает пример управления коллекциями данных посредством класса WinJS.Binding.List. Эту тему мы подробно рассмотрим в "Коллекции и элементы управления для вывода коллекций" , "Коллекции и элементы управления для коллекций". Кроме того, он предоставляет структуру для создания панели приложения и показывает, как упростить поведение приложения в прикрепленном режиме.
Имя шаблона, кстати, получилось от особого табличного (сеточного) макета, который используется для отображения коллекций данных, а не от CSS-сетки (CSS grid).
Приложение с разделением (Split Template)
"Двухстраничный проект приложения для Магазина Windows, которое осуществляет переходы между группированными элементами. Первая страница позволяет выбрать группу, а вторая отображает список элементов вместе со сведениями о выбранном элементе" (Описание из Blend/Visual Studio).
Этот последний шаблон так же построен на базе шаблона Приложение навигации и работает с коллекцией данных. Его домашняя страница отображает список групп, вместо сгруппированных элементов, как в шаблоне Приложение таблицы. При щелчке по группе осуществляется переход на страницу с подробной информацией о группе, разделенной на две части (отсюда и название). Левая часть страницы содержит вертикально прокручиваемый список элементов; правая часть содержит подробную информацию для текущего выделенного элемента.
Так же, как и шаблон Приложение таблицы, шаблон Приложение с разделением обеспечивает заготовку для создания панели приложения и разумно подходит к отображению данных в портретном и прикрепленном режимах просмотра. Это так, потому что вертикально ориентированные режимы просмотра не подходят достаточно хорошо для разделения экрана (в противоположность описанным выше!). Шаблон демонстрирует, как переключиться на модель навигации по страницам внутри тех же состояний просмотра для достижения тех же целей.
Что мы только что изучили:
- Как создать новое приложение для Магазина Windows с использованием шаблона Пустое приложение.
- Как запустить приложение внутри локального отладчика и внутри имитатора, о роли отладки на удалённой машине.
- Функции имитатора, которые включают возможность симулировать касания, устанавливать состояния просмотра, менять разрешение и плотность пикселей.
- Основные структуры проекта приложения для Магазина Windows, в том числе - ссылки на WinJS.
- Основную структуру активации приложения посредством события WinJS.Application.onactivated
- Роль и полезность проектирования каркаса приложения при разработке приложения, включая важность проектирования интерфейсов для всех состояний просмотра, где особую важность приобретает видимость элементов и макет.
- Мощь Blend для Visual Studio для быстрой и эффективной стилизации разметки приложения. Blend, кроме того, является отличным инструментом для отладки CSS.
- Как безопасно использовать веб-контент (такой, как карты Bing) внутри веб-контекста iframe и как организовать обмен данными между подобной страницей и локальным контекстом приложения, используя метод postMessage.
- Как использовать API WinRT, в особенности асинхронные методы, использующие promise-объекты, как пользоваться определением местоположения и захватом изображений с камеры. Асинхронные операции возвращают promise-объекты, которым вы предоставляете обработчик завершения (и, необязательно, обработчики ошибок и этапов выполнения задания), для методов promise-объектов then или done.
- Возможности, заявленные в манифесте, определяют, может ли приложение использовать конкретные API WinRT. Исключения возникают, если приложение пытается воспользоваться API, не объявляя соответствующую возможность.
- Как передавать данные в другие приложения, используя контракт Share (Общий доступ) в ответ на событие datarequested.
- Виды приложений, поддерживаемые другими шаблонами приложений: Приложение с фиксированным макетом, Приложение навигации, Приложение таблицы и Приложение с разделением.
