Спонсор: Microsoft
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 314 / 17 | Длительность: 11:36:00
Специальности: Программист
Практическая работа 1:

Начало работы с Apache Cordova в Visual Studio

< Лекция 3 || Практическая работа 1 || Лекция 4 >
Аннотация: Разрабатывается простой мобильный виджет. Выполняется его запуск на реальном устройстве.
Ключевые слова: Visual Studio

Для выполнения работы будем использовать среду разработки MS Visual Studio 2012 с установленным шаблоном Cordova WP8.

Ход выполнения работы:

  1. Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> MyFirstCordovaProject.
  2. Используя обозреватель решений, откройте файл "index.html" созданного проекта:

    Файл index.html - главная страница созданного Cordova-приложения (пока без вашего содержания).

    Для запуска проекта на эмуляторе выберите необходимую опцию из выпадающего меню и нажмите на зеленый треугольник (это можно сделать клавишей F5).

    Чтобы запустить проект на эмуляторе, используемый компьютер должен удовлетворять требованиям, описанным здесь: http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff626524(v=vs.105).aspx?lc=1033

    Если же компьютер не подходит для запуска проекта на эмуляторе, можно запустить его на реальном устройстве с Windows Phone. Для этого необходимо зарегистрировать аккаунт разработчика. О том, что для этого необходимо, следует прочитать здесь: http://msdn.microsoft.com/en-us/library/windowsphone/help/jj206719(v=vs.105).aspx. Затем необходимо зарегистрировать своё устройство http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769508(v=vs.105).aspx

    После регистрации устройства в опциях запуска выберите "Device" и запустите проект. Устройство должно при этом быть разблокированным. Получаем следующий результат:

  3. Добавьте в страницу проекта index.html свой тег разметки текста (после второго закрывающегося тега </div>):
    <p>Я добавил этот текст сам</p>
  4. Перезапустите приложение, нажав кнопку "Перезапустить" на панели задач или Ctrl+Shift+F5. Для быстрого перезапуска программ эмулятор лучше не закрывать на протяжении всей работы. Результат:

  5. Можно разместить этот текст под "Device is Ready". Для этого добавьте строку разметки внутрь тега <div>, к которому применена таблица стилей:

    Вновь запустите приложение:

  6. Добавьте в папку www проекта еще одну страницу (HTML-файл) и сделайте гиперссылку для перехода к нему.

    Для того чтобы добавить файл в проект, необходимо остановить отладку, нажав соответствующую клавишу на панели инструментов или Shift+F5.

    Для создания нового HTML-файла в обозревателе решений нажмите правой кнопкой мыши на папку www: Добавить -> Новый элемент. Выберите текстовый файл и назовите его NewPage.html.

    Вставьте в этот файл следующий текст разметки:

    <!DOCTYPE html>
    <html> <!-файл NewPage.html-->
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="viewport" content="user-scalable=no, 
    initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width,
    height=device-height, target-densitydpi=device-dpi" />
            <title>New Page</title>
        </head>
        <body bgcolor=#808080>
            <a href="index.html">Назад</a>
        </body>
    </html>
  7. Вернитесь к файлу "index.html". Замените тег
    <p>Я добавил этот текст сам</p>

    гиперссылкой:

    <p><a href="NewPage.html">Переход на вторую страницу</a></p>

    Результат запуска проекта:

    Нажмите на гиперссылку, чтобы перейти ко второй странице:

    Со второй страницы на первую можно вернуться с помощью гиперссылки "Назад" или с помощью соответствующей кнопки телефона.

< Лекция 3 || Практическая работа 1 || Лекция 4 >
Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?

Александр Бут-Гусаим
Александр Бут-Гусаим
Россия, Тула
Виктор Ефремов
Виктор Ефремов
Россия