Создание первого приложения для Магазина Windows с помощью Blend, часть 1: эталонная страница (HTML и JavaScript)

Можно разрабатывать приложения для Магазина Windows быстрее и эффективнее, используя коллекцию средств HTML и CSS в Blend для Visual Studio. В процессе изучения этого руководства будет собрано простое приложение, PickaFlick, в котором можно будет просматривать список новых фильмов. Список создается с помощью API Rotten Tomatoes, поэтому необходимо зарегистрироваться для получения ключа API, который вставляется в код.

Домашняя страница приложения PickaFlick

В части 1 этого руководства будет создана домашняя страница приложения. В процессе создания страницы вы научитесь следующему.

• Создание проекта из шаблона проекта

• Просмотр отражения изменений приложения в ИП Blend

• Добавление в проект шаблона элементов

• Реализация модели одностраничной навигации

• Переключение к Visual Studio и обратно

• Добавление ссылки на API Windows JavaScript

• Добавление изображений в проект

• Определение правил стилей CSS

• Создание контейнера макета гибкой рамки

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

Для изучения этого руководства не требуется опыт работы с HTML, CSS или JavaScript. Однако для успешного использования Blend окажутся полезными навыки работы с HTML, CSS и JavaScript среднего уровня.

Создание проекта из шаблона проекта

Blend и Visual Studio предоставляют те же шаблоны проектов, которые помогут приступить к разработке приложения для Магазина Windows. Дополнительные сведения о шаблонах, предлагаемых Blend и Visual Studio для разработки других типов приложений, см. в разделах Шаблоны, ускоряющие разработку приложений.

Создание проекта

1. В Blend в меню Файл выберите команду Создать проект.

   В левой части диалогового окна Создание проекта отображается список типов проектов. При выборе типа проекта щелчком связанные с этим типом шаблоны проектов отображаются справа.

   

2. В списке типов проектов щелкните HTML (Магазин Windows).

3. В списке шаблонов проектов выберите пункт Пустое приложение.

4. В текстовом поле Имя введите PickaFlick.

5. В текстовом поле Расположение проверьте расположение проекта.

6. В списке Язык JavaScript является единственным доступным параметром.

Просмотр отражения изменений приложения в ИП Blend

Рабочая область Blend по умолчанию представляет собой графический интерфейс для сборки приложений для Магазина Windows: поверхность разработки, панели, конфигурации рабочей области, представления разработки и меню. Дополнительные сведения см. в разделе Рабочая область приложения Blend (HTML).

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

В верхнем левом углу щелкните вкладку Проекты, чтобы просмотреть папки и файлы, которые были автоматически созданы при создании проекта из шаблона Пустое приложение.

• Ссылки. Содержит доступные только для чтения таблицы CSS и библиотеки Windows для JavaScript.

• CSS. Содержит CSS-файл для приложения.

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

• js. Содержит JS-файл по умолчанию для приложения.

• default.html. Используемая по умолчанию начальная страница приложения.

• package.appxmanifest. Перечень содержимого приложения и описание его возможностей, например сведения о том, может ли приложение получать доступ к веб-камере пользователя. Этот файл также задает начальную страницу приложения.

Дополнительные сведения см. в разделе Панель "Проекты" (HTML).

Под панелью Проекты в нижней левой части интерфейса находится панель Live DOM. На панели Live DOM можно видеть структуру файла default.html. Если развернуть узел body, становится видимым элемент p.

Панель Live DOM позволяет просмотреть иерархию объектов страницы HTML, над которой работает пользователь. Работая непосредственно на панели Live DOM, можно быстро и легко изменить иерархию объектов.

Дополнительные сведения см. в разделе Панель "Динамическая DOM" (HTML).

Элемент p содержит текст "Место для содержимого", отображаемый на поверхности разработки.

В представлении связанных документов отображается код файлов default.html и default.css. При внесении изменений в элементы, отображаемые на поверхности разработки, связанные документы обновляются автоматически. При внесении изменений в JavaScript разработчик будет оповещен о необходимости обновить представление. Щелкните Обновить в правом верхнем углу приложения для просмотра изменений на поверхности разработки.

Дополнительные сведения см. в разделе Представление связанных документов (HTML).

Если файлы default.html и default.css не отображаются, щелкните значок представления Разделить в правом верхнем углу поверхности разработки.

В этой процедуре необходимо удалить элемент p по умолчанию из файла default.html, добавить цвет фона в body и убедиться, что код обновляется в процессе работы.

Изменение отображения файла default.html

1. На панели Live DOM щелкните правой кнопкой мыши элемент p, а затем щелкните Удалить.

2. На панели Правила стилей разверните узел default.css, а затем выберите основная часть.

   Обратите внимание, что селектор body также выбран в default.css в представлении связанных документов.

3. На панели Свойства CSS разверните категорию Фон.

4. Рядом с полем Цвет фона нажмите кнопку Не задано.

5. В текстовом поле Шестнадцатеричное значение введите #D5BF9A и нажмите клавишу ВВОД.

   Селектор body в файле default.css теперь содержит правило стиля background-color: #D5BF9A.

Добавление в проект шаблона элементов

Помимо шаблонов проектов Blend и Visual Studio предоставляют шаблоны элементов, которые содержат часто используемый код. Можно легко добавить шаблон в проект, ускорив тем самым разработку приложений. См. раздел Шаблоны, ускоряющие разработку приложений.

Для приложения PickaFlick шаблон элементов для страницы HTML будет добавлен в существующий проект. Эта страница будет содержать код HTML домашней страницы приложения.

Добавление шаблона элементов для страницы HTML

1. В меню Файл выберите команду Создать элемент.

   Откроется диалоговое окно Создать элемент.

   

2. В списке шаблонов элементов выберите HTML-страница.

3. В текстовом поле Имя введите homepage.html и нажмите кнопку ОК, чтобы добавить шаблон элемента.

В представлении связанных документов убедитесь, что файл homepage.html содержит минимальную разметку.

Поскольку homepage.html отображается как фрагмент внутри файла defaul.html, файл homepage.html будет наследовать стиль файла default.html, поэтому добавлять CSS- или HTML-ссылки на homepage.html не нужно.

Далее следует добавить на страницу элемент div и переименовать div. При переименовании div атрибут id применяется к этому объекту, благодаря чему div проще идентифицировать среди других элементов div на странице и в пределах приложения.

Элементы можно добавить на страницу HTML следующими способами.

• Непосредственный ввод в редакторе кода

• Вставка элемента с использованием панели Активы

• Вставка элемента непосредственно на панель Live DOM.

В следующей процедуре демонстрируются все три способа добавления элемента на HTML-страницу. После добавления элемента div к этому элементу div добавляется атрибут id путем переименования элемента на панели Live DOM.

Добавление элемента div в файл homepage.html

1. На панели Live DOM щелкните правой кнопкой мыши Основная часть, выберите Вставить элемент, щелкните div или нажмите сочетание клавиш Ctrl+Shift+=.

   Совет

   Дополнительные способы добавления элемента на поверхность разработки в Blend перечислены ниже.

   • В представлении связанных документов в файле homepage.html поместите курсор между открывающим и закрывающим тегами body, а затем введите <div>.Закрывающий тег добавляется автоматически.

   • На панели Live DOM выберите пункт основная часть, а затем на панели Активы найдите элемент div, введя div в текстовом поле Поиск, и выполните одно из следующих действий.

     • Дважды щелкните div, чтобы добавить на страницу элемент div.

     • Перетащите div c панели Активы на поверхность разработки.

     • Перетащите div с панели Активы на панель Live DOM.

     • Создайте div непосредственно на поверхности разработки.

   Новый элемент div также появился на панели Live DOM и в коде HTML страницы homepage.html.

2. На панели Live DOM выполните одно из следующих действий, чтобы применить id к новому объекту div.

   • Дважды щелкните div и введите homepageContainer в текстовое поле.

     

   • Щелкните правой кнопкой мыши div, щелкните Правка идентификатора и введите homepageContainer.

   • На панели Атрибуты HTML в поле Идентификатор введите homepageContainer.

   В представлении связанных документов в homepage.html в элемент div добавлен атрибут id со значением homepageContainer.

   

Реализация модели одностраничной навигации

В этом разделе вы научитесь делать следующее.

• Реализация модели одностраничной навигации

• Переключение между Blend и Visual Studio для изменения кода JavaScript

Для приложения PickaFlick будет использована модель одностраничной навигации, что означает, что единственная страница используется для отображения приложения и для загрузки на эту страницу данных с других страниц, если это необходимо. При этом приложение все равно делится на несколько файлов, но вместо перемещения между страницами (многостраничная навигация) приложение загружает другие страницы в виде фрагментов страницы по умолчанию. См. Краткое руководство. Использование одностраничной навигации (приложения для Магазина Windows с использованием JavaScript и HTML).

Переключение к Visual Studio и обратно

Для загрузки содержимого homepage.html в файл default.html потребуется вызвать отображение фрагмента страницы в файле default.html в пространстве имен Win.JS UI.Fragment. Можно изменить JS-файлы в Blend, однако проще добавлять, изменять и отлаживать код JavaScript с помощью встроенных в Visual Studio инструментов. Дополнительные сведения об этих инструментах см. в разделе JavaScript IntelliSense.

Можно свободно переключаться между Blend и Visual Studio во время работы над проектом. Кроме того, один и тот же файл проекта может быть открыт одновременно в Blend и Visual Studio на одном компьютере. При сохранении изменений в файле в одном средстве и переходе к средство достаточно перезагрузить файл, чтобы обновить представление проекта.

Примечание

Можно копировать и вставить код в Blend или Visual Studio.Однако Visual Studio является рекомендуемым приложением для написания и редактирования кода JavaScript.В этом шаге показано, как можно легко переключаться между Blend и Visual Studio даже при работе над одним проектом.

При добавлении новых файлов в проект во время работы в Visual Studio необходимо сохранить проект с помощью команды Сохранить все (Ctrl+Shift+S) или выполнить сборку и запуск приложения, прежде чем вернуться к Blend.При переключении на Blend будет получен запрос о необходимости перезагрузки проекта.Щелкните Да, и новые файлы будут добавлены в проект в Blend.

Добавление ссылки на API Windows JavaScript

Теперь можно добавить ссылку на пространство имен Windows JavaScript Fragment.

Добавление ссылки на пространство имен WinJS.UI.Fragments в файл default.js

1. На панели Проекты щелкните правой кнопкой мыши PickaFlick и выберите Редактировать в Visual Studio.

   В Visual Studio откроется проект PickaFlick.

2. В Visual Studio в области Обозреватель решений разверните папку js и дважды щелкните файл default.js, чтобы открыть его.

3. Вставьте следующий код сразу после app.start();:

   //add DOMContentLoaded event
       document.addEventListener("DOMContentLoaded", loadInitialPage, false);
   

4. Вставьте следующий код в конце скрипта:

   //When initial page is loaded, use WinJS.UI.Fragments Namespace to load homePage.html into the body element of default.html
   var target;
   
   function loadInitialPage() {
       target = document.querySelector("body");
       WinJS.UI.Fragments.renderCopy("/homePage.html", target).done();
   }
   

5. Нажмите клавишу Ctrl+Shift+S, чтобы сохранить все изменения, а затем переключитесь обратно в Blend.

6. Щелкните Перезагрузить в ответ на запрос о перезагрузке проекта. В Blend отражены только что внесенные в проект в Visual Studio изменения.

Обратите внимание, что элемент homepageContainer теперь отображается на панели Live DOM. Щелкните вкладку default.html в верхней части приложения. Обратите внимание, что цвет фона для homepageContainer на панели Live DOM отличается от цвета остальных частей панели Live DOM, указывая на то, что это объект с другой страницы. Справа от homepageContainer находится значок фрагмента .

Если щелкнуть homepageContainer на панели Live DOM, можно будет увидеть объект homepage.html, открытый в представлении связанных документов. В дополнение к этим подсказкам при выделении элемента, происходящего из файла homepage.html, при работе с default.html в верхней части приложения на вкладке default.html отобразится уведомление "Выделенное содержимое является частью файла homepage.html". Это сообщение помогает определить источник объектов или элементов, отображаемых на поверхности проектирования при работе с файлом default.html — основным компонентом модели одностраничной навигации.

Добавление изображений в проект

При создании приложения PickaFlick используются изображения, созданные графическим конструктором. Помимо того, что изображения цыпленка вызывает визуальный интерес, оно также служит кнопкой, нажатие которой позволяет запустить приложение.

Изображения можно добавить в проект следующими способами.

• Использование команды Добавить существующий элемент в меню Проект

• Копирование и вставка

• Перетаскивание

В этом примере будут копироваться и вставляться изображения.

Добавление изображений в проект

1. Следующие изображения включены в пример проекта.

   • ChickenSprite

   • FilmStrip

   • MainLogo

   • SmallLogo-Chicken

   • TempBoxArt

   Если загружен пример проекта, откройте папку Assets, нажмите клавиши Ctrl+A, а затем — Ctrl + C.

2. В Blend на панели Проекты щелкните правой кнопкой мыши папку Изображения и выберите команду Вставить.

Теперь можно добавить изображения на поверхность разработки для изменения стиля приложения.

Определение правил стилей CSS

Можно изменить внешний вид приложения, применив стили CSS. Можно изменить стили, воспользовавшись любым текстовым редактором, однако гораздо проще создавать и редактировать их с помощью набора разнообразных CSS-средств в Blend.

Можно задать определенные свойства CSS в Blend следующими способами.

• Непосредственный ввод в редакторе кода.

• Нахождение свойства, которое требуется изменить, на панели Свойства CSS (зрительно или путем ввода имени свойства в текстовое поле Поиск или задание), а затем ввод нужного значения в редактор значений этого свойства.

• Ввод объявления свойства непосредственно в текстовое поле Поиск или задание и использование правильного CSS-синтаксиса. Например, можно присвоить свойству background-repeat значение repeat-x, введя background-repeat: repeat-x в текстовое поле Поиск или задание и нажав клавишу ВВОД.

  Также можно ввести несколько свойств для одного и того же элемента, указав имена и значения свойств непосредственно в текстовое поле Поиск или задание. Используйте правильный синтаксис CSS и ставьте точку с запятой (;) после каждого определения стиля. Например, можно присвоить свойству background-repeat значение repeat-x, а свойству position-y — значение по центру, введя background-repeat: repeat-x; position-y: center в поле Поиск или задание и нажав клавишу ВВОД.

Можно расположить свойства на панели Свойства CSS одним из двух способов: по категории или по имени.

Если упорядочить свойства по категории, свойства CSS будут сгруппированы по категории, а категории упорядочены по алфавиту. Если упорядочить свойства по имени, отобразится алфавитный список всех доступных свойств CSS.

После этого необходимо применить свойство height к элементу homepageContainer и добавить и стилистически оформить изображения.

Изменение высоты элемента homepageContainer

1. На панели Live DOM щелкните правой кнопкой мыши homepageContainer, а затем выберите команду Создать правило стиля из ИД элемента.

   Обратите внимание, что элемент #homepageContainer теперь отображается на панели Правила стилей. Зеленый контур указывает, что в настоящее время выбран тот или иной стиль. Желтый индикатор под #homepageContainer является точкой вставки новых стилей. Можно перетащить точку вставки, если требуется вставить новые стили в другом месте. Также обратите внимание, что #homepageContainer (default.css) на панели Свойства CSS теперь отображается в окне Примененные стили.

2. На панели Свойства CSS найдите свойство "Высота", введя высота в текстовое поле Поиск или задание.

3. В редакторе значения высота введите 100 %.

   Если свойства упорядочены по категориям, line-height отобразится первым в списке. Если свойства упорядочены по именам, height отобразится первым в списке.

Добавление фонового изображения и настройка его стиля

1. В текстовом поле Поиск или задание щелкните "x", чтобы снять выделение из предыдущей процедуры.

2. В категории Фон на панели Свойства CSS найдите поле Слои, щелкните Добавить , а затем щелкните кнопку ресурсов изображений .

3. В списке источников щелкните FilmStrip.png.

4. В поле position-y задайте значение по центру, а затем установите для свойства повторить значение repeat-x.

   

Добавление основной эмблемы и настройка ее стиля

1. В поле Слои щелкните Добавить, а затем нажмите кнопку ресурсов изображений .

2. В списке источников щелкните MainLogo.png.

   Обратите внимание, что MainLogo.png находится за filmstrip.png.

3. Измените z-index (порядок слоев), щелкнув MainLogo.png в поле Слои и щелкнув стрелку вверх, чтобы поместить MainLogo.png над filmstrip.png в списке изображений.

   MainLogo.png теперь отображается поверх filmstrip.png.

   

4. Задайте для свойств position-x и position-y значение по центру, а для свойства повторить — значение no-repeat.

   

Создание контейнера макета гибкой рамки

В этом разделе будет добавлено и стилистически оформлено изображение цыпленка. Изображение цыпленка отображается в центре эталонной страницы, однако меняет свое положение при наведении указателя. Этот эффект не является анимацией, а всего лишь псевдоклассом hover, который применяется к изображению. По умолчанию видна только половина изображения. При наведении указателя мыши скрытая часть изображения становится видимой, заменяя собой представление по умолчанию и имитируя анимацию.

Чтобы было проще определять положение изображения, создайте контейнер макета flexbox, изменив свойство display элемента homepageContainer. См. раздел Макет гибкой рамки.

Добавление и стилистическое оформление гибкой рамки

1. На панели Live Dom щелкните homepageContainer.

2. На панели Проекты в папке Изображения дважды щелкните ChickenSprite.png, чтобы добавить изображение цыпленка на поверхность разработки.

   Щелкнув homepageContainer, вы добавили ChickenSprite.png в качестве дочернего элемента для homepageContainer. Элемент img является активным, и изображение цыпленка отображается на панели разработки.

   

3. На панели Live DOM щелкните homepageContainer.

4. На панели Свойства CSS найдите категорию Макет, а затем щелкните гибкий в списке дисплей.

5. В категории Гибкая рамка установите для свойств align-items и justify-content значение center.

6. На панели Live DOM щелкните правой кнопкой мыши элемент img, выберите Сгруппировать в, щелкните div или нажмите сочетание клавиш Ctrl+G.

   Совет

   Можно также перетащить элемент img на div.

   Элемент изображения теперь помещен в контейнер div.

7. Щелкните div и введите spriteContainer в текстовом поле.

8. Щелкните правой кнопкой мыши spriteContainer, а затем выберите команду Создать правило стиля из идентификатора элемента.

9. На панели Свойства CSS задайте для свойства высота значение 180px, а для свойства overflow-y — значение hidden.

   

10. Щелкните img на панели Live DOM, а затем введите chickenButton в текстовом поле.

    Совет

    Разверните spriteContainer, если элемент img не видим.

11. На панели Правила стилей справа от default.css щелкните Добавить.

12. Щелкните .newStyle на панели Правила стилей, а затем введите #chickenButton:hover, чтобы создать псевдоселектор для chickenButton.

    Обратите внимание, что в процессе ввода модуль Intellisense CSS предоставляет доступные справочники CSS, чтобы упростить разработку правил стилей.

    

13. На панели Свойства CSS в категории Поле установите для свойства margin-top значение -180px.

Нажмите клавишу F5 для сборки и запуска приложения или Ctrl+I для предварительного просмотра приложения в интерактивном режиме. Укажите на изображение цыпленка, чтобы убедиться, что изображение цыпленка переходит из одного состояния в другое. Нажмите сочетание клавиш ALT+F4, чтобы закрыть приложение.

Теперь можно создавать страницу подробных сведений. Продолжение см. в разделе Создание первого приложения для Магазина Windows с помощью Blend, часть 2: страница сведений (HTML и JavaScript).