Как подключить фреймворк к eclipse

Обновлено: 04.07.2024

Как отмечалось ранее, для работы JS вместо Spket IDE я теперь использую Eclipse JSDT, который входит в состав Eclipse Web Tools Project. Причины для такого перехода вполне естественные: проекты, с которыми я работаю, становятся всё сложнее и больше, нужно больше удобства и контроля над ситуацией.

В JSDT меня больше всего привлекло следующее:

Рефакторинг: переименование объектов, выделение блока в отдельную переменную, объединение определения переменной и присваивания и т.д. Некоторые вещи вроде выделения в метод пока толком не работают, но, надеюсь, в ближайшее время это будет исправлено.
Валидация кода. Помимо обычной проверки синтаксиса, можно настроить более сложные проверки вроде поиска неиспользованных переменных, недостижимый код, переопределение переменной из внешней области видимости и т.д.
Выделение фрагментов camelCase-переменных с помощью Shift+Alt+← и Shift+Alt+→
Поддержка JSDoc.
Удобный Outline/Quick outline; дополнительные окна, в которых показывается документация и код определения текущего объекта.
Автоматическая отбивка кода при его перемещении из/в блок.
Подключение внешних библиотек.
Встроенный дебаггер.

Лучше всего будет, если читатель поставит Eclipse for JavaScript Web Developers и изучит все настройки и менюшки — в том числе контекстные — JSDT (лучше включить перспективу JavaScript), потому что возможностей действительно очень много и их сложно описать в одной статье.

Однако при всей «крутости» этой среды разработки, в ней есть ряд проблем, с которыми пришлось столкнуться прежде, чем окончательно перейти на JSDT.

Начинаем работу

Module pattern

Главным преимуществом для меня в Spket IDE была поддержка современных паттернов, в том числе и модуля:

В Spket такая конструкция без проблем отображается в outline и по ней работает code complete, но в JSDT ни то, ни другое не работает:

Небольшой JSDoc исправит ситуацию:

Теперь работает как надо:

Как видно из примера, я описал несуществующий класс __module , двойное подчёркивание я использую в качестве своеобразного соглашения об именовании объектов. Проблема в том, что этот несуществующий класс попадёт в code complete всего проекта, и использование двойного подчёркивания — простой и понятный способ отфильтровать ненужные данные при вызове code complete. Однако этот недостаток очень легко можно превратить в достоинство: таким образом можно описывать структуры объектов, доступ к описанию которых затруднён из-за отсутствия строгой типизации в JS:

Поддержка популярных библиотек

Базовый набор библиотек для JSDT довольно невелик: это стандартные объекты JavaScript ( Array , String и прочее) и стандартный DOM ( HTMLElement , document и так далее). То есть если мы напишем, например, document. и вызовем code complete, то увидем список свойств и методов объекта document , экземпляра класса Document . Но современная веб-разработка немыслима без использования популярных библиотек вроде jQuery.

Имея в своём распоряжении JSDoc, можно создать описание практически любого популярно фреймворка и использовать его для подсказок в коде. Так как таких описаний в интернете найдено не было, я воспользовался своим любимым принципом «если хочешь, чтобы что-то было сделано хорошо, сделай это сам» и запустил проект, в котором создаю описания популярных библиотек и фреймворков, с которыми работаю:

jsdt-docs — JSDoc для популярных библиотек

В этом проекте сейчас есть следующие библиотеки:

Добавить библиотеку довольно просто:

После того, как библиотека была создана, нужно добавить её в проект:

Идём в настройки проекта: Project > Properties > JavaScript > Include Path > Libraries.
Жмём кнопку Add JavaScript Library, выбираем User Library, а затем и библиотеки, которые хотим добавить.

Теперь у вас в проекте будет работать code complete для указанных библиотек:

Поддержка jQuery

Добавление поддержки своего любимого фреймворка оказалась не такой уж и простой задачей. Во-первых, он довольно большой и содержит внушительных объемов документацию. Во-вторых — многие методы в нём «перегружены»: например, val() возвращает текстовое значение поля, а val(str) — записывает его и возвращает уже jQuery-объект.

К счастью, у документации к jQuery есть публичный API, который выдаёт описание всех методов в XML. Я написал парсер на node.js, который опрашивает API и преобразует XML в JSDoc, понятный для JSDT (и, надеюсь, другим IDE). Так что в случае выхода новой версии jQuery можно быстро перегенерировать всё документацию. Парсер я писал для себя и по-простому, он не поддерживает передачу параметров через командную строку, всё настраивается в main.js:

Можно сгенерировать документацию для определённой версии jQuery ( TARGET_VERSION ).
Можно сгенерировать описание в виде нескольких файлов. Это связано с особенностью JSDT. Как уже отмечалось ранее, в jQuery много «перегруженных» методов, и если их описать в одном JS-файле, то JSDT будет использовать только одно (самое последнее) описание. Однако если сохранить описание методов с одинаковым названием в разных файлах, то JSDT вполне неплохо покажет по ним code complete и документацию. Так что у вас есть выбор: при создании библиотеки jQuery добавить все файлы вида jquery-jsdoc-N.js (Eclipse JSDT) или же только jquery-jsdoс.js если ваша IDE способна прочитать описание с перегруженными методами.
Можно переписать некоторые определения для более удобной работы с code complete ( class_map , prefix_map ). Например, так переписываются описания для Deferred и Promise объектов, чтобы можно было использовать их описание в JSDoc:

В описании есть ряд классов, которые можно использовать в JSDoc: __jQueryDeferred , __jQueryPromise и __jQueryEvent .

Пишем плагины к jQuery

Собственно, как писать плагины рассказывать нет смысла, это подробно описано в документации. Покажу лишь как сделать так, чтобы ваш плагин появился в code complete. А сделать это очень просто, достаточно методу плагина указать, что он является членом класса jQuery:

Поддержка Node.JS

Отдельно стоит упомянуть Node.JS, так как к модулям нужно обращаться не напрямую, а через функцию require() :

То есть подсказки для модуля должны зависеть от того, какой аргумент передали в функцию require() . В целом, в JSDT эта ситуация решаема: нужно написать отдельный плагин в виде подключаемой библиотеки, который будет находить вызовы функции require() , смотреть на аргумент и возвращать виртуальный объект с необходимыми методами, и может быть я когда-нибудь напишу такую библиотеку. А пока будем довольствоваться малым: указывать тип модуля через JSDoc .

Советы

В качестве заключения дам несколько советов, которые помогут вам в работе с JSDT:

Не используйте фигурные скобки при указании типа переменной с помощью тэга @type — в некоторых случаях JSDT не сможет подцепить тип переменной. Лучше писать так: @type Array (вместо @type ).
При описании модуля тэг @memberOf moduleName достаточно указать только у одного свойства/метода в литерале, все остальные подцепятся автоматически.
Если у вас в проекте есть непосредственно код библиотек (например, jQuery), то его лучше исключать из индекса, чтобы он не мешал работе code complete. Делается это так: заходите в настройки проекта Project > Properties > JavaScript > Include Path > Source. Разворачиваете папку с исходниками, двойной клик по фильтру Excluded и в диалоговом окне в секцию Exclusion patterns добавляете файлы, которые надо исключить.

35 комментариев

Сергей Чикуенок

Смотря с какими настройками сжимать. При стандартных у меня вроде не ругался на JSDoc.

Стандартные — это Advanced или Simple? Проверю в обеих.

Сергей Чикуенок

Advanced рулит. В Closure есть сложные типы данных типа @typedef >, которые не обходятся без фигурных скобок.

И проблема с goog.base при наследовании, к сожалению. Но лучше Eclipse пока нет.

Сергей Чикуенок

Ну вообще фигурные скобки в @type никто не запрещает использовать, я просто указал, что в JSDT с этим могут быть проблемы 🙂 А какие проблемы с goog.base?

Прочитал предыдущий пост, даже немного воодушевился, решил окончательно и бесповоротно перейти на eclipse. До этого, конечно, были эпизодические попытки перейти на него, и даже пару месяцев назад написал простенькое html5 приложение для android при помощи eclipse, но все равно так его и не осилил, все смущала неповоротливость и прожорливость ресурсов (в сравнении с notepad++).
Как и советовали, скачал Eclipse JSDT, денёк побаловался с локальными проектами — все было замечательно (если не считать лагание и глючность самого eclipse). Для локальной неторопливой разработки оказалось вполне себе ничего, но когда мне понадобилось перенести проект на сервер для интеграции с серверной частью (ajax, xml и т.п.) я понял, что это северная белая лиса. Как оказалось встроенных инструментов для работы с удаленными фс у eclipse нет, всезнающий гугл показал мне 3 буквы — rse (remote system explorer), хаброюзеры пугали муками при установке rse под линкус и я не желая испытывать судьбу решил для начала попробовать с виндой — это толстенная северная белая лиса, чуть сервер задержался с ответом — висит, случайно нажал сохранить во время синхронизации файлов с сервером — висит, после каждого сохранения он зачем-то заново загружает список файлов с сервера — нажал какую-нить кнопку — опять висит.
Потерянных 4х рабочих часов, в попытках хоть как-то это заставить работать стабильно, хвалило, что б очень на долго отбило у меня желание снова пытаться подружиться с eclipse, я даже подумывал вернуться к старым и верным notepad++ и winscp, но проекты все сложнее и обьемнее и без ide уже никак. Выбор пал на netbeans, и я не прогадал — стабильно, быстро, удобно, а eclipse в дальний сектор винчестера под запароленый архив, а код потерять

Сергей Чикуенок

Вообще, конечно, работать напрямую с проектом через FTP — не самый правильный способ поддерживать проект в рабочем состоянии, ну да ладно 🙂 Мы у себя решаем эту проблему довольно просто: монтируем удалённый сервер по NFS/SSHFS, а версии синхронизируем через плагин FileSync, который автоматом закачивает изменившиеся файлы в нужную папку. За 2 года активного использования такого метода проблем не обнаружил.

Добрый день, Сергей.
Подскажите пожалуйста, возможно ли настроить отображение в Outline локальных переменных, расположенных внутри анонимных функций (не Module pattern, а обычная анонимная функция).

В данной статье я хотел рассказать о том, как создавать приложения при помощи Eclipse RCP (Rich Client Platform). Поводом для написания послужил тот факт, что на Хабре абсолютно отсутствуют статьи, описывающие данную платформу. В качестве примера мы создадим пользовательскую форму ввода; корректность данных будет проверяться при помощи JFace Data Binding framework. Для затравки приведу ниже скриншот с тем, что у нас должно получиться.

Что такое Eclipse RCP

Для начала, все же необходимо сказать, что же такое Eclipse RCP. Eclipse – это среда разработки, написанная на Java, развиваемая и поддерживаемая Eclipse Foundation (участниками которого являются IBM, SAP, Oracle, компании, предлагающие продукты на основе Eclipse RCP и участвующие в развитии экосистемы Google, RedHat, Adobe, Cisco, Intel). Eclipse RCP – это набор плагинов для создания, так называемых, rich client application. Все что видит пользователь, открывая Eclipse IDE, является плагином, созданным на основе этой платформы. Пользователь может создавать свои плагины на основе огромного количества уже существующих, также при необходимости можно найти большинство популярных фреймворков, таких как Hibernate, Google Guice, Google Guava, JUnit, TestNG в виде плагинов. Также стоит отметить, что архитектура времени выполнения основана на спецификации сервисной платформы OSGI, данная спецификация описывает способы создания и работы модульных приложений. Eclipse, как уже упоминалось выше, написана на Java и позиционируется как кроссплатформенный продукт (в 90% случаев RCP приложение соберётся на Windows, Linux и Mac). Все плагины, составляющие ядро платформы, и большинство сторонних плагинов распространяются под лицензией EPL (Eclipse Public License). Пользовательский интерфейс RCP приложений основан на визуальных компонентах фреймворков SWT и JFace, а также на собственных Eclipse виджетах. Рисунки, приведённые ниже, показывают из каких компонентов состоит приложение, основанное на платформе RCP, и структуру самой платформы Eclipse.

Рисунок 1 — Компоненты используемые в RCP приложении (рисунок взят с этого сайта)

Рисунок 2 – Архитектура Eclipse (рисунок взят с этого сайта)

Плюсы и минусы платформы

Главный вопрос — чем же так хороша данная платформа и зачем ее использовать для разработки десктопных приложений (к слову, возможно разрабатывать веб приложения и приложения для мобильных платформ). Модульность, кроссплатформенность, поддержка мультиязычности, бесплатность, огромное количество существующих плагинов, библиотек и фреймвороков. Все это позволяет создавать приложения коммерческого уровня (ссылка на список существующих приложений разработанных на данной платформе приведена в конце статьи). К минусам можно отнести достаточно высокий уровень вхождения, так как для разработки серьёзного приложения необходимо знать хотя бы в общих чертах, как работает OSGI фреймворк, уметь работать с компонентами и виджетами SWT и JFace. Также для русскоговорящих разработчиков проблемой будет найти какие-либо материалы или книги об упомянутых выше фреймворках и библиотеках (ссылки на найденные ресурсы, в том числе и на русскоязычные, приведены в конце статьи), хотя в Европе и США периодически проводятся конференции, которые организуют участники Eclipse Foundation, в Германии издается специальный журнал, рассказывающий о новых плагинах и содержащий уйму примеров их применения, а также существует целая серия книг на немецком, которая описывает все ньюансы и тонкости разработки. На английском можно найти специальную серию книг eclipse series издательства Addison-Wesley, также можно найти пару книг от издательства Apress. Но на нашем родном языке материалов и книг ничтожно мало.

Приступаем к работе

Установка необходимых плагинов

Рисунок 3 – Окно установки плагинов

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

После перезагрузки выберем в главном меню пункт File->New->Other, выберем пункт Plug-in Development, далее, в ниспадающем меню отметим Plug-in Project.

Рисунок 4 – Меню выбора типа создаваемого проекта

Нажмём Next, нам необходимо дать имя нашему проекту, пусть он будет называться first.rcp.application, опять нажмём Next. В следующем окне нам необходимо указать имя приложения, в поле Name напишем First RCP Application. Снимем флажок с пункта Generate an activator, a Java class that controls the plug-in’s life cycle; для нашего простого приложения класс активатор не нужен. Оставим флажок на пункте — This plug-in will make contributions to the UI, так как наше приложение будет содержать пользовательский интерфейс. Оставим третий пункт Enable API Analysis неотмеченным. На вопрос — Would you like to create a rich client application? ответим Yes.

Рисунок 5 – Окно создания плагина

Нажмём Next, нам будет предложено выбрать шаблон для будущего приложения, выберем — Hello RCP и нажмём Next.

Рисунок 6 — Окно выбора шаблона RCP проекта

В последнем окне, в поле Application window title напишем — User Form, в поле Application class – MyApplication. Флажок Add branding оставим неактивным. Нажмём кнопку Finish. Нам будет предложено переключиться на перспективу Plug-in Development perspective, согласимся с этим предложением.

Рисунок 7 — Окно конфигурации шаблона RCP проекта

Структура проекта

Итак перед нами структура только что созданного проекта.

Рисунок 8 – Структура проекта

Содержание пяти классов в пакете first.rcp.application в данный момент нас не итересует, скажу только, что класс MyApplication это в некотором роде метод main() обычной Java программы, данный класс отвечает за то как будет запущен наш плагин и как он будет остановлен. В классе ApplicationWorkbenchWindowAdvisor, мы можем установить размер окна приложения при помощи следующей строки кода:
configurer.setInitialSize(new Point(400, 300));
Также мы можем увидеть, что по умолчанию не будет показываться панель инструментов и строка состояния:
configurer.setShowCoolBar(false);
configurer.setShowStatusLine(false);
Последней строкой устанавливается заголовок главного окна:
configurer.setTitle("User Form");
Класс ApplicationActionBarAdvisor отвечает за настройку строки меню нашего приложения. Класс Perspective отвечает за расположение и размер редакторов (editors) и видов (views), которые находятся в данной перспективе (perspective), в RCP приложении должна быть хотя бы одна перспектива.

Запуск проекта

Для того, чтобы запустить только что созданное нами приложение, нам необходимо перейти в папку META-INF и открыть файл MANIFEST.MF, если вы вдруг его закрыли (этот файл открывается по-умолчанию при создании проекта).

Рисунок 9 – Редактор свойств RCP приложения

Данный файл позволяет нам менять многие настройки проекта, подключать дополнительные плагины, подключать и управлять расширениями, настраивать сборку нашего плагина и многое другое. Мы находимся на вкладке Overview, в разделе Testing нажмём на ссылку — Launch an Eclipse application, через мгновение на экране появится окно нашего приложения, закроем его и перейдём к следующему этапу.

Рисунок 10 – Окно нашего приложения

Добавление вида (view)

Добавление расширения

Второе расширение отвечает за настройку перспективы нашего приложения. Файл MANIFEST.MF позволяет нам не заглядывая в код класса Perspective, указать, какие виды и/или редакторы будет содержать данная перспектива, их положение, размер и соотношение. Щёлкнув на этом расширении и перейдя к дочернему пункту мы увидим, что в разделе Extension Element Details мы можем указать класс перспективы, идентификатор и имя. Необходимо отметить, что подобные изменения, как говорилось выше, можно произвести путём редактирования непосредственно кода класса, который связан с данным расширением и редактированием файла plugin.xml, но не хотелось бы усложнять создание нашего первого проекта.

Рисунок 11 – Вкладка с расширениями нашего проекта

Нам необходимо добавить новое расширение для создания вида. Для этого нажмём на кнопку Add и в появившемся окне, в поле Extension Point filter введём views, должно остаться только одно расширение – org.eclipse.ui.views, выберем его и нажмём кнопку Finish.

Рисунок 12 – Окно выбора нового расширения

В списке расширений у нас должно появиться ещё одно, третье по счёту расширение.

Настройка вида

Щёлкнем по добавленному нами расширению правой кнопкой мыши, появится контекстное меню, выберем в нем New->view, тем самым мы добавим элемент к нашему расширению (этим элементом и является необходимый нам вид). В правой части появятся настройки данного элемента. Для начала создадим класс для нашего вида. Сделать этом мы можем нажав на ссылку class*.

Рисунок 13 – Настройки вида (view)

Откроется стандартный диалог создания Java класса, дадим ему название – MainView; как мы можем заметить, данный класс наследуется от класса org.eclipse.ui.part.ViewPart, родительского класса для всех видов. Завершим создание класса нажав на кнопку Finish. Осталось совсем немного, после создания класса для нашего вида перед нами откроется его код, создадим статическую переменную, которая будет содержать идентификатор данного вида, в качестве идентификатора мы зададим каноническое имя данного класса. Напишем следующее:
…
public class MainView extends ViewPart public static final String > …
>
Ввернёмся к файлу MANIFEST.MF, откроем вкладку Extension, скопируем содержимое поля class* и вставим его в поле ID. Теперь имя класса и идентификатор этого вида совпадают, данный приём является хорошей практикой, так как всегда позволяет быстро найти нужный вид и узнать его идентификатор. В поле name* напишем – User Form. Все вид создан, осталось связать его с нашей перспективой, так как вид сам по себе не может быть использован, иными словами он должен принадлежать какой-либо перспективе.

Настройка расположения вида

Дальнейшие манипуляции мы можем произвести оставаясь в редакторе расширений или же открыть код класса перспективы — Perspective.java, что мы и сделаем. В классе Perspective, перейдём в метод – createInitialLayout(), данный метод задаёт начальное положение видов и редакторов. В методе напишем следующие две строки кода:
layout.setEditorAreaVisible(false);
layout.addStandaloneView(MainView.ID, true, IPageLayout.LEFT, 1.0f, layout.getEditorArea());
Первая строка указывает объекту layout, что нам не нужна область для редактирования, так как у нас только один вид и нету редакторов. Вторая строка добавляет наш вид, причём как автономный (standalone). Первым параметром является идентификатор нашего вида. Второй параметр это булево значение, отвечающее за то, будет или нет показан заголовок нашего вида (User Form). Третий параметр предназначен для указания ориентации вида в перспективе, так как вид у нас один и займёт все пространство перспективы, то данное значение может быть любым. Четвёртый параметр определяет положение этого вида по отношению к другим видам или редакторам, так как, в нашем случае, вид один он должен занимать все пространство перспективы. Последний пятый параметр, идентификатор области редактирования (editor area). Сохраним наши изменения.

Запуск приложения с добавленным видом

Вернёмся к файлу MANIFEST.MF и снова запустим наше приложение, для этого перейдём на вкладку Overview, в разделе Testing, щёлкнем по ссылке Launch an Eclipse application. Большого различия с тем как выглядела форма при предыдущем запуске мы не увидим, добавилась только вкладка с нашим видом – User Form.

Рисунок 14 – Окно нашего приложения с добавленным видом

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

1- JDK vs JRE

JDK: Software Development Kit: Это набор средств разработки для Java, в JRE, и компиляторы (compilers) и инструменты (как JavaDoc и Java Debugger) чтобы создавать и компилировать программы.

Обычно, если вас волнует только работа программ Java на вашем браузере или компьютере, вы установите только JRE. Это все, что вам нужно. С другой стороны, если вы планируете сделать некотоные программы Java, вам так же понадобится JDK.

Иногда, даже если у вас нет плана разработки приложения Java на компьютере, вам все равно нужно установить JDK. Например, если вы развертываете WebApp с JSP, технически вы только запускаете программы Java внутри сервера приложения (Application Server). Почему вам нужен JDK? Потому что сервер приложения конвертирует JSP в Servlets и использует JDK для компилирования Servlet. Я уверен может быть больше примеров.

2- Использовать JDK вместо JRE

Если на вашем компьютере установлены и JRE и JDK, Eclipse использует JRE как инструмент по умолчанию чтобы build (построить) ваши проекты. Но есть проекты или инструменты, которые заставляют вас использовать JDK вместо JRE. Например у вас есть приложение Maven, и вы хотите использовать функцию "Maven install" чтобы упаковать приложение в файл JAR/WAR, может появиться ошибка со следующим уведомлением:

Мой совет: Лучше всего на всех проектах используйте JDK. Теперь как вам нужно конфигурировать на Eclipse?

Window/Preferences

Если вы видите, что Eclipse использует JRE то вам нужно удалить JRE и добавить JDK.

> java.util - так понимаю, стандартная библиотека. А если нужно подключить
> что то другое? Как eclipse подсказать где в каком каталоге искать?

У проекта сказать "Add externak jar" и показать на него.

PS: так делать не надо. А как надо- объяснять долго.

Posted via ActualForum NNTP Server 1.4

Вроде не предлагает вставить import.

Как указать что и где брать при импорте?

С этим у него нормально, строка import java.io.*; не подсвечивалась пока Вы не посоветовали убрать строчки с импортом.

> Вроде не предлагает вставить import.
>
> Как указать что и где брать при импорте?

Простой, но некрасивый вариант- свойства проекта, раздел "Java Build
path", вкладка "Libraries", кнопка "Add External JARs".
Далее надо найти jar с "javax.servlet". Например в tomcat'е он лежит в
lib/servlet-api.jar.

По хорошему надо либо класть servlet-api.jar в свой проект (и тогда
вместо "Add External jar" жмакать "Add JARs", либо делать библиотеку, но
это читай сам.

Posted via ActualForum NNTP Server 1.4

> Вроде не предлагает вставить import.
>
> Как указать что и где брать при импорте?

Получилось. Но теперь не понятно как заниматься отладкой сервлетов? Ругается на отсутствие main функции. В сервлетах в наличии main нет необходимости?

> Получилось. Но теперь не понятно как заниматься отладкой сервлетов?
> Ругается на отсутствие main функции. В сервлетах в наличии main нет
> необходимости?

Читайте также: