| // |
| // Licensed to the Apache Software Foundation (ASF) under one |
| // or more contributor license agreements. See the NOTICE file |
| // distributed with this work for additional information |
| // regarding copyright ownership. The ASF licenses this file |
| // to you under the Apache License, Version 2.0 (the |
| // "License"); you may not use this file except in compliance |
| // with the License. You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, |
| // software distributed under the License is distributed on an |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| // KIND, either express or implied. See the License for the |
| // specific language governing permissions and limitations |
| // under the License. |
| // |
| |
| = Начало работы по созданию приложения Cordova |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: Начало работы по созданию приложения Cordova - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, Начало работы по созданию приложения Cordova |
| |
| В этом документе описывается создание проекта HTML5 в среде IDE, который упакован в виде мобильного приложения и запускается в симуляторе мобильного устройства. При создании приложения HTML5 можно воспользоваться шаблоном сайта Apache Cordova. Apache Cordova предоставляет группу методов API, которые позволяют разрабатывать приложение с HTML, CSS и JavaScript, для которого создается пакет в виде оригинального мобильного приложения. Приложение запускается на мобильном устройстве и может получать доступ к оригинальным функциям устройства, таким как GPS или камера. С помощью методов API Cordova разработчик может создать мобильное приложение без необходимости написания оригинального кода. |
| |
| В этом документе описана установка обязательного программного обеспечения и разработка приложения с помощью Cordova. После установки Cordova можно в мастере 'Новый проект' использовать шаблон Cordova для создания приложения Cordova. Затем необходимо добавить код и запустить приложение в симуляторе мобильного устройства. В этом учебном руководстве используется симулятор iOS. Если вы собираетесь использовать эмулятор устройства под управлением Android, выполните аналогичные действия. |
| |
| Демонстрация развертывания приложения Cordova в эмуляторе Android: link:../web/html5-cordova-screencast.html[+Видеоролик 'Основы разработки на Cordova'+]. |
| |
| |
| |
| == Для выполнения этого учебного курса потребуются следующие материалы. |
| |
| |=== |
| |Программное обеспечение или ресурс |Требуемая версия |
| |
| |link:https://netbeans.org/downloads/index.html[+IDE NetBeans, Java+] |8.0 |
| |
| |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Комплект для разработчика на языке Java (JDK)+] |версия 7 |
| |
| |link:http://cordova.apache.org/[+Apache Cordova+] |-- |
| |
| |link:http://nodejs.com/[+NodeJS+] |-- |
| |
| |link:http://git-scm.com/[+Git+] |-- |
| |
| |SDK для мобильных платформ |
| |Android или |
| iOS |
| |=== |
| |
| *Примечания.* |
| |
| * Предполагается, что совместимый комплект SDK для целевой мобильной платформы и эмулятор устройства уже установлены. |
| * Предполагается, что читатель обладает базовыми знаниями или опытом программирования на HTML, CSS и JavaScript. Для получения дополнительных сведений о поддержке HTML5 в среде NetBeans IDE см. раздел link:html5-gettingstarted.html[+Начало работы с приложениями HTML5+] |
| |
| |
| == Установка Cordova |
| |
| Вам необходимо установить Cordova в локальной системе для упаковки приложения HTML5 в виде оригинального мобильного приложения с помощью среды IDE NetBeans. Используйте *npm*, диспетчер пакетов NodeJS, для установки и обновления Cordova. Кроме того, убедитесь, что в локальной системе выполнена установка и корректная настройка Git. Cordova использует Git для извлечения из репозитория необходимых исходных файлов Cordova при упаковке приложения в виде внутреннего мобильного приложения. |
| |
| Большинство следующих действий этого упражнения будут выполнены в окне терминала. |
| |
| 1. Загрузите и установите Node.js, если не сделали этого раньше. |
| |
| Программу установки можно загрузить с link:http://nodejs.org[+сайта Node.js+]. |
| |
| |
| [start=2] |
| . Откройте окно терминала. |
| |
| [start=3] |
| . Чтобы убедиться в наличии Node.js, выполните следующую команду. |
| |
| [source,shell] |
| ---- |
| |
| $ node -v |
| ---- |
| |
| Если установка node.js выполнена, в окне терминала отобразится номер версии. |
| |
| *Примечания.* |
| |
| * При использовании прокси-сервера необходимо настроить node.js на использование данного прокси-сервера для доступа к сети. Для настройки прокси-сервера можно выполнить следующие команды, заменив ``http://proxy:8080`` на нужный прокси-сервер. |
| |
| [source,shell] |
| ---- |
| |
| $ sudo npm config set proxy http://proxy:8080 |
| $ sudo npm config set https-proxy http://proxy:8080 |
| ---- |
| |
| Для просмотра текущих параметров конфигурации выполните следующие команды. |
| |
| |
| [source,shell] |
| ---- |
| |
| $ npm config list |
| ---- |
| * Для получения дополнительных сведений о настройке node.js см. link:https://npmjs.org/doc/config.html[+https://npmjs.org/doc/config.html+]. |
| |
| [start=4] |
| . Для установки Cordova выполните следующую команду. |
| |
| [source,shell] |
| ---- |
| |
| $ npm install -g cordova |
| ---- |
| |
| *Примечания.* |
| |
| * Если при выполнении команды установки в окне терминала появляется сообщение об ошибке, убедитесь, что конфигурация прокси-сервера выполнена правильно. |
| * Для обновления Cordova до самой последней версии выполните следующую команду. |
| |
| [source,shell] |
| ---- |
| |
| $ npm update -g cordova |
| ---- |
| |
| [start=5] |
| . Чтобы убедиться в успешной установке Cordova и просмотр информацию об используемой версии, выполните следующую команду. |
| |
| [source,shell] |
| ---- |
| |
| $ cordova --version |
| ---- |
| |
| Если установка Cordova выполнена, в окне терминала отобразится номер версии. |
| |
| |
| [start=6] |
| . Загрузите и установите систему контроля версий Git, если не сделали этого раньше. |
| |
| Программу установки можно загрузить с link:http://git-scm.com/[+сайта Git+]. |
| |
| *Примечание.* В среду Path требуется добавить Git. |
| |
| |
| [start=7] |
| . Для проверки успешной установки Git выполните следующую команду. |
| |
| [source,shell] |
| ---- |
| |
| $ git --version |
| ---- |
| |
| Если установка Git выполнена, в окне терминала отобразится номер версии. |
| |
| *Примечания.* |
| |
| * При использовании прокси-сервера необходимо настроить Git на использование данного прокси-сервера для доступа к сети. Для настройки прокси-сервера можно выполнить следующие команды, заменив ``http://proxy:8080`` на нужный прокси-сервер. |
| |
| [source,shell] |
| ---- |
| |
| $ git config --global http.proxy http://proxy:8080 |
| $ git config --global https.proxy http://proxy:8080 |
| ---- |
| |
| Для просмотра текущих параметров конфигурации выполните следующие команды. |
| |
| |
| [source,shell] |
| ---- |
| |
| $ git config --list |
| ---- |
| * Для получения дополнительных сведений о настройке Git см. инструкции по установке link:http://git-scm.com/book/en/Getting-Started-First-Time-Git-Setup[+http://git-scm.com/book/en/Getting-Started-First-Time-Git-Setup+]. |
| |
| Теперь у вас есть все инструменты, необходимые для разработки и упаковки оригинального мобильного приложения в среде IDE. В следующем упражнении для создания приложения используется мастер создания проектов. |
| |
| |
| == Создание приложения Cordova |
| |
| В этом упражнении мы используем мастер создания проектов в среде IDE, чтобы создать новое приложение Cordova. Приложение Cordova создается путем выбора шаблона Cordova Hello World в качестве шаблона сайта в мастере создания проекта. Приложение Cordova представляет собой приложение HTML5 с дополнительными библиотеками и файлами конфигурации. Если у вас уже есть приложение HTML5, вы можете использовать окно 'Свойства проекта' в среде IDE для добавления источников Cordova и других файлов, необходимых для упаковки приложения в виде приложения Cordova. |
| |
| В этом учебном курсе создается очень простой проект HTML5, который содержит файл ``index.html`` и несколько файлов JavaScript и CSS. При создании проекта в мастере мы выберем несколько библиотек jQuery JavaScript. |
| |
| 1. Выберите 'Файл' > 'Новый проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac) в главном меню, чтобы открыть мастер создания проектов. |
| 2. Выберите категорию *HTML5*, затем выберите *Приложение Cordova*. Нажмите кнопку "Далее". |
| image::images/cordova-newproject-wizard1.png[title="Шаблон приложения Cordova в мастере создания проектов"] |
| |
| [start=3] |
| . Введите *CordovaMapApp* в качестве имени проекта и укажите каталог на компьютере, где следует сохранить проект. Нажмите 'Далее'. |
| |
| [start=4] |
| . В шаге 3. "Шаблон сайта", убедитесь, что шаблоны Download Online и Cordova Hello World выбраны в списке. Нажмите кнопку "Далее". |
| image::images/cordova-newproject-wizard2.png[title="Панель шаблонов сайта в мастере создания приложений HTML5"] |
| |
| *Примечание.* Вы должны быть подключены к сети, чтобы создать проект, который основан на одном из интернет-шаблонов в списке. |
| |
| |
| [start=5] |
| . В шаге 4. "Файлы JavaScript" выберите библиотеки JavaScript ``jquery`` и ``jquery`` на панели 'Доступные' и щелкните кнопку со стрелкой вправо ( > ), чтобы переместить выбранные библиотеки на панель мастера 'Выбранное'. По умолчанию библиотеки создаются в папке проекта ``js/libraries`` . В этом учебном курсе будут использоваться "уменьшенные" версии библиотек JavaScript. |
| |
| Можно использовать текстовое поле на панели, чтобы отфильтровать список библиотек JavaScript. Например, введите *jq* в поле, чтобы найти библиотеки ``jquery`` . Вы можете удерживать нажатой клавишу Ctrl и щелкнуть левой кнопкой мыши имена библиотек для выбора нескольких библиотек. |
| |
| image::images/cordova-newproject-wizard3.png[title="Панель 'Библиотеки JavaScript' в мастере создания приложений HTML5"] |
| |
| *Примечания.* |
| |
| * Можно нажать номер версии библиотеки в столбце 'Версия', чтобы открыть всплывающее окно, в котором можно выбрать предыдущие версии библиотек. По умолчанию в мастере отображается самая последняя версия. |
| * Минимизированные версии библиотек JavaScript - это сжатые версии, и при просмотре в редакторе код не является доступным для понимания. |
| |
| [start=6] |
| . В шаге 5. "Служба поддержки Cordova", используйте значения по умолчанию. Для завершения мастера нажмите кнопку *Готово*. |
| |
| После нажатия кнопки 'Готово' в IDE создается проект, отображается узел проекта в окне 'Проекты' и открывается файл ``index.html`` в редакторе. |
| |
| image::images/cordova-projects-window1.png[title="Окно проектов"] |
| |
| Если развернуть папку ``js/libs`` в окне 'Проекты', будет видно, что библиотеки JavaScript, которые были указаны в мастере создания проектов, были автоматически добавлены к проекту. Можно удалить библиотеку JavaScript из проекта, щелкнув правой кнопкой мыши файл JavaScript и выбрав 'Удалить' во всплывающем меню. |
| |
| Чтобы добавить библиотеку JavaScript к проекту, щелкните правой кнопкой мыши узел проекта и выберите 'Свойства', чтобы открыть окно 'Свойства проекта'. Можно добавлять библиотеки к панели 'Библиотеки JavaScript' в окне 'Cвойства проекта'. Кроме того, можно скопировать файл JavaScript, который находится в локальной системе, напрямую в папку ``js`` . |
| |
| Теперь вы можете выполнить проверку выполнения и развертывания проекта в эмуляторе для целевого мобильного устройства. |
| |
| |
| [start=7] |
| . Щелкните значок выбора браузера на панели инструментов и убедитесь, что в столбце Cordova таблицы выбран эмулятор целевого мобильного устройства. В столбце Cordova можно выбрать эмулятор Android или симулятор iOS (потребуется OS X и XCode). |
| image::images/cordova-select-browser.png[title="Браузер, выбранный в раскрывающемся списке на панели инструментов."] |
| |
| [start=8] |
| . Нажмите значок 'Выполнить' на панели инструментов. |
| |
| При нажатии кнопки 'Выполнить' среда IDE выполняет развертывание приложения Cordova в эмуляторе. |
| |
| image::images/cordova-ios7-run.png[title="Приложение в симуляторе iOS"] |
| |
| *Примечание.* При развертывании симулятор iOS должен открываться автоматически. При развертывании приложения в эмуляторе Android требуется настроить и открыть симулятор перед выполнением приложения. Демонстрация развертывания приложения Cordova в эмуляторе Android: link:../web/html5-cordova-screencast.html[+Видеоролик 'Основы разработки на Cordova'+]. |
| |
| |
| == Изменение приложения |
| |
| В этом упражнении редактируются файлы ``index.html`` и ``index.js`` . Код, созданный в шаблоне Cordova Hello World, заменяется кодом для отображения карты текущего местоположения в приложении. Кроме того, необходимо изменить конфигурацию Cordova, удалив подключаемые модули Cordova, необязательные для приложения. |
| |
| |
| === Редактирование файла HTML |
| |
| В этом упражнении файл HTML редактируется в исходном редакторе с целью добавления ссылок в библиотеки и файлы CSS, а также для добавления элементов страниц. |
| |
| 1. Откройте в редакторе `index.html` (если он еще не открыт). |
| |
| В редакторе можно увидеть, что среда IDE создала код на основе шаблона Cordova Hello World. |
| |
| |
| [start=2] |
| . Добавьте в редакторе ссылки на библиотеки jQuery JavaScript и файлы CSS, которые добавлялись при создании проекта. Добавьте следующий код (*полужирным шрифтом*) между открывающим и закрывающим тегами ``<head>`` . |
| |
| [source,xml] |
| ---- |
| |
| <html> |
| <head> |
| <meta 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"> |
| <link rel="stylesheet" type="text/css" href="css/index.css" /> |
| |
| *<link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.min.css"/> |
| <script type="text/javascript" src="js/libs/jquery/jquery.min.js"></script> |
| <script type="text/javascript" src="js/libs/jquery-mobile/jquery.mobile.min.js"></script>* |
| <title>Hello World</title> |
| </head> |
| <body> |
| ... |
| </html> |
| ---- |
| |
| В окне 'Проекты' можно увидеть путь к файлам и использовать функцию автозавершения кода в редакторе. |
| |
| image::images/cordova-code-completion.png[title="Автозавершение кода в редакторе"] |
| |
| [start=3] |
| . Добавьте следующую ссылку на Google Maps JavaScript API между тегами `<head>`. |
| |
| [source,xml] |
| ---- |
| |
| <script type="text/javascript" src="http://www.google.com/jsapi"></script> |
| ---- |
| |
| *Примечание.* Это ссылка на исключенную версию v2 JavaScript API. Эта версия JavaScript используется в данной учебной программе в демонстрационных целях. При создании настоящего приложения рекомендуется использовать новую версию. |
| |
| |
| [start=4] |
| . Удалите код между тегами `<body>` за исключением следующих ссылок на файлы JavaScript `index.js` и `cordova.js`. |
| |
| [source,xml] |
| ---- |
| |
| <body> |
| |
| *<script type="text/javascript" src="cordova.js"></script> |
| <script type="text/javascript" src="js/index.js"></script>* |
| |
| </body> |
| </html> |
| ---- |
| |
| Файл `index.js` был автоматически сгенерирован при создании проекта. Он отображается в узле `js` в окне 'Проекты'. Далее во время учебного курса мы изменим код в `index.js`. |
| |
| Файл `cordova.js` не отображается в окне 'Проекты', так как он генерируется при сборке приложения Cordova. |
| |
| |
| [start=5] |
| . Добавьте следующий код (*полужирным шрифтом*) между тегами ``body`` . |
| |
| [source,html] |
| ---- |
| |
| <body> |
| *<div data-dom-cache="false" data-role="page" id="mylocation"> |
| <div data-role="header" data-theme="b"> |
| <h1 id="header">Searching for GPS</h1> |
| <a data-role="button" class="ui-btn-right" onclick="showAbout()">About</a> |
| </div> |
| |
| <div data-role="content" style="padding:0;"> |
| <div id="map" style="width:100%;height:100%; z-index:50"> |
| </div> |
| |
| </div> |
| <div data-role="footer" data-theme="b" data-position="fixed" > |
| <h4>Google Maps</h4> |
| </div> |
| </div> |
| <div data-dom-cache="false" data-role="page" id="about"> |
| <div data-role="header" data-theme="b"> |
| <a data-role="button" data-rel="back" href="#mylocation" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">Back</a> |
| <h1>About</h1></div> |
| <div data-role="content" id="aboutContent"> |
| </div> |
| <div data-role="footer" data-theme="b" data-position="fixed" > |
| <h4>Created with NetBeans IDE</h4> |
| </div> |
| </div> |
| * |
| <script type="text/javascript" src="cordova.js"></script> |
| <script type="text/javascript" src="js/index.js"></script> |
| </body> |
| </html> |
| ---- |
| |
| |
| === Изменение конфигурации Cordova |
| |
| В этом упражнении выполняется изменение списка подключаемых модулей Cordova, установленных в приложении. |
| |
| 1. Правой кнопкой мыши щелкните узел проекта в окне "Проекты" и выберите "Свойства" во всплывающем меню. |
| 2. Выберите *Cordova* в списке категорий. |
| image::images/cordova-properties-application.png[title="Вкладка 'Подключаемые модули Cordova' в окне 'Свойства проекта'"] |
| |
| Вкладка 'Приложение' может использоваться для просмотра и изменения данных конфигурации Cordova о приложении, указанных в файле `config.xml`. |
| |
| |
| [start=3] |
| . Щелкните вкладку 'Подключаемые модули' на панели Cordova. |
| |
| Вкладка 'Подключаемые модули' содержит две панели. На панели 'Доступно' отображается список подключаемых модулей Cordova, доступных в настоящее время. |
| |
| На панели 'Выбрано' отображается список подключаемых модулей Cordova, установленных в приложении. При использовании шаблона Cordova Hello World для создания приложения все подключаемые модули устанавливаются по умолчанию. Для большинства приложений не требуются все подключаемые модули. Вкладка 'Подключаемые модули' в окне 'Свойства проекта' используется для удаления подключаемых модулей, необязательных для вашего приложения. |
| |
| *Примечание.* Кроме того, список установленных подключаемых модулей можно изменить путем внесения изменений в файл `nbproject/plugins.properties` в редакторе. |
| |
| |
| [start=4] |
| . Удалите все подключаемые модули за исключением следующих: API устройства (Device API), Диалоги (Уведомления) ( Dialogs (Notifications)) и Геолокация (Geolocation). Нажмите кнопку "ОК". |
| image::images/cordova-properties-plugins.png[title="Вкладка 'Подключаемые модули Cordova' в окне 'Свойства проекта'"] |
| |
| |
| === Редактирование файла JavaScript |
| |
| В данном упражнении выполняется удаление кода JavaScript, сгенерированного шаблоном, а также добавление нескольких простых методов для отображения карты текущего местоположения. |
| |
| 1. Откройте `index.js` в редакторе. |
| |
| При создании проекта в `index.js` был сгенерирован шаблон кода. Для данного приложения можно удалить весь сгенерированный код. |
| |
| |
| [start=2] |
| . Замените созданный код следующим: Сохраните изменения. |
| |
| [source,java] |
| ---- |
| |
| var map; |
| var marker; |
| var watchID; |
| |
| $(document).ready(function() { |
| document.addEventListener("deviceready", onDeviceReady, false); |
| //uncomment for testing in Chrome browser |
| // onDeviceReady(); |
| }); |
| |
| function onDeviceReady() { |
| $(window).unbind(); |
| $(window).bind('pageshow resize orientationchange', function(e) { |
| max_height(); |
| }); |
| max_height(); |
| google.load("maps", "3.8", {"callback": map, other_params: "sensor=true&language=en"}); |
| } |
| |
| function max_height() { |
| var h = $('div[data-role="header"]').outerHeight(true); |
| var f = $('div[data-role="footer"]').outerHeight(true); |
| var w = $(window).height(); |
| var c = $('div[data-role="content"]'); |
| var c_h = c.height(); |
| var c_oh = c.outerHeight(true); |
| var c_new = w - h - f - c_oh + c_h; |
| var total = h + f + c_oh; |
| if (c_h < c.get(0).scrollHeight) { |
| c.height(c.get(0).scrollHeight); |
| } else { |
| c.height(c_new); |
| } |
| } |
| |
| function map() { |
| var latlng = new google.maps.LatLng(50.08, 14.42); |
| var myOptions = { |
| zoom: 15, |
| center: latlng, |
| streetViewControl: true, |
| mapTypeId: google.maps.MapTypeId.ROADMAP, |
| zoomControl: true |
| }; |
| map = new google.maps.Map(document.getElementById("map"), myOptions); |
| |
| google.maps.event.addListenerOnce(map, 'tilesloaded', function() { |
| watchID = navigator.geolocation.watchPosition(gotPosition, null, {maximumAge: 5000, timeout: 60000, enableHighAccuracy: true}); |
| }); |
| } |
| |
| // Method to open the About dialog |
| function showAbout() { |
| showAlert("Google Maps", "Created with NetBeans 7.4"); |
| } |
| ; |
| |
| function showAlert(message, title) { |
| if (window.navigator.notification) { |
| window.navigator.notification.alert(message, null, title, 'OK'); |
| } else { |
| alert(title ? (title + ": " + message) : message); |
| } |
| } |
| |
| function gotPosition(position) { |
| map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); |
| |
| var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); |
| if (!marker) { |
| //create marker |
| marker = new google.maps.Marker({ |
| position: point, |
| map: map |
| }); |
| } else { |
| //move marker to new position |
| marker.setPosition(point); |
| } |
| } |
| ---- |
| |
| *Примечание.* Для данного учебного курса вызов метода `onDeviceReady` добавлен только в виде комментария, так как метод является необязательным для развертывания приложения в эмуляторе мобильного устройства. При необходимости выполнения приложения в веб-браузере следует удалить символы комментария перед вызовом метода `onDeviceReady`. |
| |
| |
| [start=3] |
| . Выполните сброс эмулятора, перезапустив эмулятор или сбросив его настройки. |
| |
| [start=4] |
| . Нажмите 'Выполнить' на панели инструментов для развертывания приложения в эмуляторе. |
| |
| В симуляторе iOS появится запрос на разрешение приложению использовать ваше текущее месторасположение. |
| |
| image::images/cordova-ios7-run1.png[title="Запрос местоположения в приложении"] |
| |
| Вы можете проверить смоделированное местоположение в симуляторе IOS, выбрав 'Отладка > Местоположение > Пользовательское местоположение' в главном меню симулятора IOS, чтобы открыть диалоговое окно 'Пользовательское местоположение'. |
| |
| image::images/cordova-ios-customlocation.png[title="Диалоговое окно 'Пользовательское местоположение' в симуляторе iOS"] |
| |
| Если для вашего текущего местоположения в поле 'Широта' ввести значение 48.8582, а в поле 'Долгота' - 2.2945, приложение отобразит на карте Эйфелеву башню. |
| |
| image::images/cordova-ios7-run3.png[title="Приложение при использовании текущего местоположения в симуляторе iOS"] |
| |
| |
| == Отладка приложения |
| |
| В этом упражнении описывается установка точки останова в файле JavaScript и повторное выполнение приложения. |
| |
| 1. Выполните сброс или перезапуск эмулятора. |
| 2. Откройте `index.js` в редакторе. |
| 3. Установите точку останова, щелкнув в левой части следующей строки метода `gotPosition`. |
| |
| [source,java] |
| ---- |
| |
| var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); |
| ---- |
| |
| [start=4] |
| . Нажмите 'Выполнить' на панели инструментов, чтобы повторно выполнить приложение. |
| |
| При выполнении приложения отладчик дойдет до точки останова, когда приложение попытается определить текущее местоположение. |
| |
| image::images/cordova-debug-breakpoint1.png[title="Отладчик остановился по достижении точки останова"] |
| |
| Если навести курсор на переменную, отобразится всплывающая подсказка со сведениями о данной переменной. Если навести курсор на переменную `latitude`, в подсказке отобразится значение переменной. |
| |
| image::images/cordova-debug-variables1b.png[title="Подсказка с переменными"] |
| |
| Если навести курсор на переменную `position` или `coords` появится стрелка, которую можно нажать, чтобы развернуть подсказку. |
| |
| image::images/cordova-debug-variables1a.png[title="Подсказка с переменными"] |
| |
| Развернутая подсказка позволяет просматривать значения более подробно. |
| |
| image::images/cordova-debug-variables2.png[title="Подсказка с переменными"] |
| |
| В этом случае удобнее просматривать значения в окне 'Переменные'. В окне 'Переменные' отображается широта и долгота текущего местоположения. |
| |
| image::images/cordova-debug-variables.png[title="Окно "Переменные""] |
| |
| В окне 'Сетевой монитор' отображается список запросов приложения. |
| |
| image::images/cordova-network-monitor.png[title="Окно "Переменные""] |
| |
| |
| [[summary]] |
| == Заключение |
| |
| В этом учебном курсе описывается, как установить и настроить программное обеспечение, необходимое для создания приложения Cordova в среде IDE. Кроме того, вы узнаете, как создать приложение Cordova и изменить некоторые параметры конфигурации Cordova. |
| |
| link:/about/contact_form.html?to=3&subject=Feedback:%20Getting%20Started%20with%20Creating%20a%20Cordova%20Applications[+Отправить отзыв по этому учебному курсу+] |
| |
| |
| |
| |
| [[seealso]] |
| == См. также |
| |
| Подробнее о поддержке приложений HTML5 в IDE см. в следующих материалах на сайте link:https://netbeans.org/[+www.netbeans.org+]: |
| |
| * [Видеоролик] link:../web/html5-cordova-screencast.html[+Основы разработки на Cordova+] |
| * link:html5-editing-css.html[+Работа со страницами стилей CSS в приложениях HTML5+] Документ, который продолжает работу с приложением, которое было создано в этом учебном курсе. Он показывает, как использовать некоторые из мастеров CSS и окон в IDE и как использовать режим проверки в браузере Chrome для визуального определения элементов в источниках проекта. |
| * link:html5-js-support.html[+Отладка и тестирование JavaScript в приложениях HTML5+] Документ, который демонстрирует, как IDE предоставляет инструменты, которые могут использоваться в отладке и тестировании файлов сценариев JAVA в IDE. |
| * link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG2272[+Создание файлов JavaScript+] в документе _Разработка приложений в IDE NetBeans_ |
| |
| Дополнительные сведения о jQuery доступны в официальной документации: |
| |
| * Официальная домашняя страница: link:http://jquery.com[+http://jquery.com+] |
| * Домашняя страница UI: link:http://jqueryui.com/[+http://jqueryui.com/+] |
| * Учебные курсы: link:http://docs.jquery.com/Tutorials[+http://docs.jquery.com/Tutorials+] |
| * Главная страница документации: link:http://docs.jquery.com/Main_Page[+http://docs.jquery.com/Main_Page+] |
| * Демонстрации интерфейса пользователя и документация: link:http://jqueryui.com/demos/[+http://jqueryui.com/demos/+] |
