Опубликован: 26.12.2012 | Уровень: для всех | Доступ: платный
Лекция 4:

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

< Лекция 3 || Лекция 4: 123 || Лекция 5 >

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

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

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

    Диалоговое окно Создать проект (New Project) в Visual Studio
  3. 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.

  1. Вернитесь к шаблону пустого приложения, который вы создали ранее.
  2. Щелкните правой клавишей на документе default.html и выберите в контекстном меню пункт Открыть в приложении Blend (Open in Blend).
  3. Выберите панель Активы (Assets) из панелей в верхней левой вкладке. Панель Активы показывает элементы HTML и мультимедийных материалов, которые могут быть размещены на странице.
    Панель "Активы" в Blend доступна в этой вкладке

    Панель "Активы" в Blend доступна в этой вкладке
  4. Разверните категорию Элементы (Elements) и выберите подкатегорию Формы (Forms). В этом разделе отображаются элементы интерфейса, которые обычно используются для форм ввода данных.
  5. Выберите элемент <label> (метка) и перетяните в рабочее окно визуального конструктора (artboard) – главную панель для редактирования справа.
  6. Дважды кликните на элементе <label> на рабочей области и введите текст "Hello, Blend!"
  7. Попробуйте перемещать метку на странице и обратите внимание, что её позиция "заблокирована". Blend выдает сообщение:
    Blend отображает сообщение при попытке перемещения статического элемента: "Вы не можете перемещать этот элемент, так как его позиция в CSS установлена в качестве статической (static). Рассмотрите варианты использования абсолютного (absolute), относительного (relative) или фиксированного (fixed) позиционирования"

    Blend отображает сообщение при попытке перемещения статического элемента: "Вы не можете перемещать этот элемент, так как его позиция в CSS установлена в качестве статической (static). Рассмотрите варианты использования абсолютного (absolute), относительного (relative) или фиксированного (fixed) позиционирования"
  8. Для изменения расположения элемента <label> в параметрах CSS воспользуемся панелью свойств (Properties). Самый быстрый способ найти поле, отвечающее за расположение элемента (position) – ввести название свойства в поисковой строке.
    Поисковая строка в панели свойств в Blend

    Поисковая строка в панели свойств в Blend
  9. Как только вы нашли свойство, отвечающее за расположение (position), установите в нем абсолютное значение (absolute):
    Атрибут расположения в панели свойств в Blend

    Атрибут расположения в панели свойств в Blend
  10. Теперь поместите элемент <label> в рабочей области куда пожелаете.
  11. Рассмотрим применение Blend для добавления изображения в пользовательский интерфейс. Перейдите к панели Проекты (Projects).
  12. Откройте контекстное меню подпапки images (щелкните правой клавишей) и выберите "Добавить существующий элемент…" ("add existing item…").
    Контекстное меню в панели Проекты Blend

    Контекстное меню в панели Проекты Blend
  13. Перейдите в папку \Module_4_Assets\images\ и выберите sports.png.
  14. Перетащите картинку на рабочую область.
  15. Закройте Blend и сохраните файл. Теперь вы вернулись в Visual Studio, и файл, который вы редактировали, обновился (обратите внимание на изменения в default.html).
  16. Запустите проект (нажатием F5) и обратите внимание на внесенные изменения.
< Лекция 3 || Лекция 4: 123 || Лекция 5 >
Роман Храпай
Роман Храпай
Россия
ashutos Jain
ashutos Jain
Индия, New Delhi