(Продолжение. Начало в "Dev-КВ" №9'2013)

Почему HTML5?

Почему в этой статье рассматриваются именно - и только - проекты на HTML5, ведь NetBeans позволяет вести разработку на большом количестве других языков программирования?

Причин тут две.

Во-первых, технологии HTML5 переживают период бурного развития, к ним проявляет интерес все большее число специалистов. Это существенно влияет на положение дел в области так называемых Front-End технологий, изменения в которых позволяют очень значительно повысить мощность и эффективность разрабатываемых веб-приложений.

Вторая причина вытекает из первой. Одновременно с развитием самой технологии развиваются и инструменты программирования для нее, в них постоянно реализуются новые интересные подходы и приемы; различные среды разработки активно соревнуются друг с другом, и нужно держать этот процесс под контролем, чтобы оставаться на переднем крае новых технологических возможностей.

Установка модификаций (updates) компонент NetBeans

Время от времени как для установленных модулей, так и для ядра NetBeans появляются новые версии - updates. Их установка и подключение делается очень просто.

Прежде всего, нужно обратить внимание на индикатор наличия модификаций, расположенный в строке состояния (Status line) NetBeans (нижняя строка на экране).

В данном случае индикатор показывает, что имеется одно извещение (нотификация). Сколько модификаций скрывается за ней - пока неизвестно. Узнать их количество можно, наведя курсор мыши на индикатор, при этом появится всплывающая подсказка.

После клика на иконке нотификации появится панель извещений (notifications), имеющая следующий вид.

Как видно, поступило извещение о наличии 9 модификаций в NetBeans. Чтобы скачать и установить их, нужно просто кликнуть по ссылке в правом окне и далее следовать указаниям установщика. После того, как модификации будут установлены, вам будет предложено перезагрузить NetBeans, и после перезагрузки вы будете использовать среду последней версии.

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

Как уже говорилось, выделенная поддержка разработки HTML5 приложений в виде самостоятельных проектов впервые была реализована в NetBeans версии 7.3.

NetBeans позволяет одновременно вести большое количество проектов, причем для разных языков и технологий, так что HTML5-проекты могут существовать в произвольном количестве и независимо от других проектов.

Создание нового HTML5-проекта осуществляется по той же схеме, что и создание любого проекта в NetBeans. При этом возможности NetBeans делают возможной ускоренную разработку HTML5-приложений, начиная прямо с создания проекта.

Создать новый проект можно одним из трех способов:

• Пункт New Project в главном меню
• Кнопка New Project в главной инструментальной линейке
• Комбинация горячих клавиш Ctrl+Shift+N

Использование любого из этих способов приведет к появлению диалога создания нового проекта, в котором в окне категорий (Categories) нужно выбрать HTML5, а в окне проектов - вариант создания нового проекта: с нуля, на основе имеющегося HTML кода или в виде приложения Cordova.

После выбора нужных опций и нажатия кнопки Next, появляется диалог параметров HTML5-приложения, в котором требуется указать название проекта и привязать этот проект к дисковому каталогу, где он и будет размещен.

До этого диалога создание нового проекта шло по более-менее типовому сценарию, теперь же начинаются отличия, предоставляемые средой NetBeans.

Прежде всего, если для большинства обычных HTML-проектов требуется наличие HTTP-сервера (скажем, Apache в виде независимой инсталляции, или входящий в состав какой-нибудь распространенной сборки - Денвер или XAMPP, например), то для разрабатываемых в NetBeans HTML5-проектов он не нужен, так как NetBeans содержит встроенный HTTP сервер. О некоторых деталях и особенностях его использования мы еще поговорим, сейчас же отметим только, что благодаря такому подходу HTML5-проект в NetBeans может быть размещен в произвольной папке, не привязанной к какому бы то ни было конкретному месту, что требовалось бы в случае использования отдельного HTTP сервера.

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

Первая - это возможность использовать так называемый шаблон сайта.

NetBeans предоставляет возможность выбора одного из популярных онлайновых шаблонов для HTML5 проектов или же указания места расположения .zip-архива, содержащего шаблон разработчика (custom template), выбранный для данного проекта. При создании использующего шаблон проекта его файлы, библиотеки и структура определяются выбранным шаблоном.

Если на момент создания проекта ясности с подходящим шаблоном еще нет, проект может быть начат с нуля, а дополнительные возможности HTML5 можно подключить уже после создания приложения.

Нажатие кнопки Next после определения шаблона выводит еще один, последний диалог в сценарии создания нового проекта. Этот диалог позволяет подключить в проект популярные JavaScript-библиотеки и фреймворки, входящие в состав поставки NetBeans. Таких библиотек предлагается весьма большой список, однако не всегда в дистрибутив включены их последние версии. При возникновении такой ситуации, однако, всегда можно подключить требуемую библиотеку самостоятельно.

Живой просмотр веб-страниц

Итак, работа над проектом началась. Чтобы она была максимально эффективной, NetBeans предоставляет разработчикам мощный интеллектуальный редактор и инструменты отладки. Такими возможностями обладает большинство современных инструментов разработки программного обеспечения, и ими разработчиков не удивишь.

Для работы с HTML5-проектами последние версии NetBeans включают несколько новых инструментов (конечно, некоторые другие, хотя и далеко не все IDE уже включают нечто подобное, но в NetBeans эти возможности были введены именно с акцентом на HTML5, и поэтому они имеют ряд дополнительных преимуществ).

Первым из них является возможность проверки кода разрабатываемого HTML5-приложения на большом количестве браузеров. Для этого служит кнопка выбора браузера, расположенная в главной инструментальной линейке.

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

Изначально NetBeans видит только несколько браузеров, установленных на рабочем компьютере. Если есть браузеры, не видимые в данном меню, то их можно легко подключить через меню Tools -> Options, закладка General. В группе Web browser этой закладки можно проверить список доступных для работы с NetBeans браузеров и, если требуемого браузера в этом списке нет, добавить его, используя кнопку Edit. Нажатие этой кнопки открывает окно менеджера веб-браузеров, в котором и производится собственно подключение нужных браузеров.

Нужно иметь в виду, что сам NetBeans содержит встроенный браузер WebKit.

Говоря о взаимодействии NetBeans с браузерами нужно отметить углубленную интеграцию NetBeans с браузером Google Chrome и встроенным браузером WebKit. Для реализации такой интеграции с Chrome в последнем должно быть подключено расширение NetBeans Connector, которое находится в интернет-магазине Chrome в разделе Расширения.

После установки этого расширения между запущенным в NetBeans проектом и браузером Chrome возникает канал связи, обеспечивающий возможность так называемого живого предпросмотра веб-страниц. Такая углубленная интеграция с браузерами Google Chrome и встроенным WebKit обеспечивает, по мнению большинства профессиональных разработчиков, больше возможностей, чем простой WYSIWYG.

Чтобы использовать такую возможность, нужно в вышеупомянутом меню браузеров выбрать Chrome и запустить проект на выполнение, используя кнопку Запустить проект (Run Project) или горячую клавишу F6.

После запуска проекта в браузере появится строка- индикатор того, что между NetBeans и Chrome установлена связь и NetBeans Connector управляет процессом их взаимодействия. Не следует нажимать Cancel в этой строке, так как режим взаимодействия тогда будет закрыт и связь между браузером и средой разработки будет разорвана.

Обратите внимание на адресную строку браузера. Тестируемый проект запущен на встроенном HTTP сервере NetBeans, который работает на порту 8383.

Если Chrome и NetBeans работают в таком режиме, то разработчик получает возможность этого самого уже упоминавшегося ранее живого предпросмотра. Так, если в код приложения вносятся изменения, то результат будет виден на странице в браузере сразу после их сохранения в IDE, без каких бы то ни было дополнительных действий.

В распоряжении разработчика также имеется живое веб-превью для веб-страниц на мобильных устройствах, то есть не только в Chrome и во встроенном браузере Embedded WebKit, но также для Chrome на Android и для Mobile Safari для iOS. Правда, для этого нужны некоторые дополнительные компоненты.

Развитые возможности веб-дизайна

NetBeans содержит богатые возможности для облегчения работы над дизайном веб-страницы.

Режим живого просмотра веб-страниц

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

В браузере Chrome для управления этим режимом в адресную строку включается дополнительная иконка NetBeans. При нажатии на нее открывается меню, предоставляющее различные опции для изменения размера окна браузера, а также включения режима Inspect in NetBeans.

Как видно на этом скриншоте, в NetBeans по умолчанию уже определено несколько форм-факторов, являющихся, по мнению разработчиков IDE, часто используемыми. Набор предварительно установленных форм-факторов находится в диапазоне от смартфонов до настольных компьютеров и позволяет просматривать страницу как в портретном (portrait), так и в ландшафтном (landscape) режимах.

Выбрав пункт Customize (Настроить), можно изменить параметры уже существующих или добавить новые форм-факторы.

При выборе одного из форм-факторов размер окна браузера будет изменен до размеров устройства. Это позволит проконтролировать, как приложение будет выглядеть на выбранном устройстве. HTML5- приложения обычно проектируются соответствующими размеру экрана устройства, на котором они будут работать. Используя JavaScript и правила CSS можно добиться соответствия расположения и размеров визуальных компонент приложения размерам экрана требуемого устройства.

Упростить подгонку визуальных элементов позволяет использование режима Inspect in NetBeans. Включив этот режим, разработчик получает возможность контролировать визуальное расположение компонентов на экране и корректировать их параметры. Управление параметрами выполняется в дополнительных панелях окна браузера, для вызова которых нужно щелкнуть правой кнопкой мыши на любом экранном компоненте и в появившемся меню выбрать пункт Inspect element.

Автозавершение кода

NetBeans, как и любая другая развитая среда разработки, обеспечивает режим автозавершения кода для всех поддерживаемых языков программирования. При работе с HTML5-проектами автозавершение действует для HTML, CSS и JavaScript-кодов.

Контроль и модификация стилей

NetBeans в режиме живого просмотра позволяет управлять не только HTML-кодом страницы, но и связанными с нею стилями. Так, редактор стилей CSS NetBeans контролирует запрос, который в настоящее время отображает браузер, и автоматически корректирует отображаемую страницу в соответствии с изменениями стилей, сделанными в редакторе.

Навигация по проекту

NetBeans имеет два окна, обеспечивающих быструю и удобную навигацию по HTML5-проекту.

В первом из них - окне Navigator - представлена структура HTML файла.

Клик правой кнопкой мыши на элементе и выбор пункта Go To Source в появившемся меню позволяет быстро перейти к этому элементу в файле исходного кода.

Второе окно - Browser DOM - позволяет увидеть текущую структуру страницы с некоторыми характеристиками ее элементов. В этом окне представлены DOM- элементы страницы вместе с примененными к ним стилями.

Расширенная поддержка JavaScript

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

Кроме того, в состав дистрибутива NetBeans включены следующие фреймворки: jQuery, JSON, Knockout, Ext Js, AngularJS, JsDoc, ExtDoc и ScriptDoc. Как уже говорилось ранее, можно самостоятельно подключать более свежие версии этих фреймворков, а также подключать к проектам любые другие JavaScript-фреймворки.

Настройки, выполняемые в диалоге Options, позволяют устанавливать параметры форматирования для JavaScript.

Работа со стилями CSS

Новая версия NetBeans включает поддержку CSS-препроцессоров Sassy и LESS, включая цветовую подсветку синтаксиса и семантики конструкций языка, автоматические отступы, переформатирование, фолдинг кода и шаблоны файлов. Для всех вариантов синтаксических конструкций CSS обеспечиваются автозавершение кода и инструменты рефакторинга.

Редактор стилей в NetBeans представляет собой комбинацию собственно редактора, а также панелей навигации по стилям и параметров выбранного стиля. Вызывается этот редактор при открытии файла CSS, а управление отображением панелей навигации и параметров осуществляется через пункт Window->Web главного меню.

Кроме того, изменять стили документа можно прямо в дополнительных панелях браузера в режиме Inspect in NetBeans, как описывалось выше.

Ну и наконец, поддержка стилей реализована и для мобильных устройств, а именно для Chrome на платформе Android и для Mobile Safari на iOS с использованием платформы Apache Cordova. Версия Cordova также включена в дистрибутив NetBeans, но требует дополнительной настройки для поддержки проектов Android и iOS.

Поддержка мобильных устройств и разработка для Cordova

Использование фреймворка Cordova позволяет, используя технологии HTML5, JavaScript и CSS3, создавать дистрибутивы приложений для разных, в том числе и для мобильных, устройств, базирующихся на платформах Android или iOS. Любой HTML5-проект может быть преобразован в нативный iOS или Android дистрибутив и затем установлен на соответствующем устройстве прямо из NetBeans.

С поддержкой со стороны Cordova NetBeans предоставляет возможность визуально редактировать CSS файлы и отлаживать JavaScript-код как в браузере Chrome и встроенном WebKit браузере, так и непосредственно на устройствах, работающих под управлением операционных систем iOS (с браузером Safari) и Android (браузер Chrome).

Заключение

В этой статье кратко перечислены только новые возможности NetBeans, касающиеся разработки HTML5-проектов. Но NetBeans развивает и традиционные, ставшие уже фактически стандартными возможности, делая их более удобными и эффективными в применении.

Так, с появлением канала связи между NetBeans и браузером появилась возможность отладки и тестирования приложений в единой (браузер-IDE) среде. Отладку JavaScript-кода можно теперь производить в браузерах Chrome, внутреннем Embedded WebKit Browser, в браузере Chrome для платформы Android и в браузере Mobile Safari в iOS.

Еще одна развивающаяся возможность - использование удаленных данных за счет создания JavaScript-клиентов для RESTful веб сервисов. NetBeans позволяет быстро создавать JavaScript-клиентов, используя построитель клиентов RESTful JavaScript.

Наконец, поддержка современных инструментов управления версиями - а NetBeans поддерживает как давно известные инструменты Mercurial и Subversion, так и относительно недавно появившийся и очень быстро ставший суперпопулярным Git - позволяет легко организовать командную работу, обеспечивая высокую надежность процесса разработки.

Итак, подведем итог.

Даже краткое рассмотрение новых возможностей NetBeans IDE позволяет сделать вывод, что она не случайно является одним из лидеров на современном рынке инструментов разработки для Web. Целенаправленное ее развитие заставляет ожидать выхода новых, еще более мощных и удобных версий. Сейчас уже начинается предварительное тестирование новой, восьмой версии IDE. Какие новые возможности предоставит она? Это мы узнаем уже скоро.

Александр НЕСТЕРОВ