НОУ ИНТУИТ | Разработка гибридных приложений для мобильных устройств под Windows Phone. Лекция 1: Начало работы с Apache Cordova в Visual Studio

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

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

|

Вам нравится? Нравится 13 студентам

| Поделиться |

Поддержать программу

Аннотация: Разрабатывается простой мобильный виджет. Выполняется его запуск на реальном устройстве.

Ключевые слова: Visual Studio

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

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

Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> MyFirstCordovaProject.

увеличить изображение
Используя обозреватель решений, откройте файл "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" и запустите проект. Устройство должно при этом быть разблокированным. Получаем следующий результат:

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

увеличить изображение

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

увеличить изображение
Добавьте в папку 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>
```
Вернитесь к файлу "index.html". Замените тег
```
<p>Я добавил этот текст сам</p>
```
гиперссылкой:
```
<p><a href="NewPage.html">Переход на вторую страницу</a></p>
```
Результат запуска проекта:

увеличить изображение

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

увеличить изображение

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