Задача:
- подключить кастомную библиотеку тегов
- сделать подсветку синтаксиса JS в XML-файле
- расширить подсказки для JavaScript кода своим глобальным объектом
Если так случилось, что в качестве своего постоянного редактора кода или IDE
вы выбрали Adobe DreamWeaver (прим. речь идет о версии CS5.5), то попытаемся немного упростить себе жизнь, работая в нём.
А для этого нужно максимально возможно его допилить под себя для эффективной работы и экономии времени.
Распложение файлов
Глобальные настройки находятся в папке с установленным DW, например для Windows 7:
%ProgramFiles%\Adobe\Adobe Dreamweaver CS5.5\configuration\ (далее в статье %DW_Config_Common%)
Локальные пользовательские настройки имеют больший приоретет, и располагаются обычно тут:
%UserProfile%\AppData\Roaming\Adobe\Dreamweaver CS5.5\en_US\Configuration\ (далее в статье %DW_Config_User%)
TagLibraries
Итак, начнем с самого простого, чтобы научить понимать DW какие-то нестандартные теги (обычно это необходимо, если вы работаете с XML), то
идем в пункт меню
Edit → Tag Libraries (в самом низу списка). В открывшемся окошке (см. рисунок выше) мы видим список всех
созданных библиотек тегов. Создадим еще одну новую, для этого жмем на [+] в левом верхнем углу и выбираем
New Tag Library.
Вписываем подходящее название для своего библиотеки и жмем Ok. После этого нам нужно выделить её в общем списке, затем указать где она будет использоваться,
т.е проставляем чекбоксы в разделе
Used In, также можно указать
Tag Prefix, т.е нэймспэйс для тегов, например "x:".
Далее добавляем необходимые теги и аттрибуты тегов,
[+] → New Tags (или New Attributes) (можно указывать через запятую).
Примечание: по умолчанию аттрибуты регистронезависимы. т.е если вы создали, например,
список доступных значений для какого-либо аттрибута в "CamelCase" регистре букв, то при выборе данные будут вставлены в "lowercase" регистре.
Чтобы это исправить лезем вручную в созданные файлы библиотеки наших тегов.
Она находится в локальных настройках DW (см. выше "расположение файлов) в директории
%DW_Config_User%\TagLibraries\название_нашей_библиотеки.
Там находиться список файлов с названиями тегов и расширением *.vtm, это XML-конфиги. Открываем нужный тег, находим нужный элемент, описывающий необходимый аттрибут тега и
дописываем ему аттрибут
casesensitive="yes", например:
<![CDATA[
<attrib name="method" type="enumerated" casesensitive="yes">
<attriboption value="include" />
<attriboption value="invoke" />
<attriboption value="load" />
<attriboption value="loadBinary" />
<attriboption value="loadJson" />
<attriboption value="loadText" />
<attriboption value="test" />
</attrib>
]]>
Подсветка JavaScript в XML
По-умолчанию подсветка JS-кода в DreamWeaver включена только внутри тега
script в XSL, HTML и PHP файлах, а также непосредственно в самих *.js файлах.
Мне же было необходимо, чтобы подсветка также работала в XML-файлах в тегах
x:js. Чтобы это исправить, придется опять ковырять конфиги.
Открываем файл
%DW_Config_User%\CodeColoring\CodeColoring.xml и ищем элемент
scheme с аттрибутом
MMString:name="JavaScript/scheme/name".
Далее дописываем внутрь этого тега нужные нам блоки:
<![CDATA[
<scheme MMString:name="JavaScript/scheme/name" id="JavaScript" doctypes="JavaScript" priority="50">
<!-- какие-то другие элементы -->
<!-- включаем подсветку JS в XML-е -->
<blockStart doctypes="XML" scheme="outerTag"><![CDATA[<x:js>]]]]><![CDATA[></blockStart>
<blockEnd><![CDATA[</x:js>]]]]><![CDATA[></blockEnd>
<blockStart doctypes="XML" scheme="outerTag"><![CDATA[<x:js\s+\*>]]]]><![CDATA[></blockStart>
<blockEnd><![CDATA[</x:js>]]]]><![CDATA[></blockEnd>
]]>
Примечание: после всех действий с конфигами, чтобы они заработали, DW нужно перезапустить.
Расширяем подсказки для JavaScript
Например, нам необходимо чтобы в глобальной области существовал объект
foobar,
т.е необходимо, чтобы если мы напечатали слово
foo и сразу нажали
Ctrl+Space,
то должен появится выпадающий список с доступными объектами (ф-иями), в котором должен быть наш объект
foobar.
После этого, мы выбираем foobar, жмем точку и на соответствие "foobar." нам показывается список его свойств (т.е "hello" и "world"), итд.
<![CDATA[
// сфеерический прототип объекта foobar в вакууме :)
foobar = {
hello: function(arg1, arg2){} /* некая функция */,
world: {
type: /* число */,
date: /* объект класса Date */,
screen: /* объект со всеми свойствами уже существующего объекта window.screen */,
config: function([settings]){ /* settings объект с доступными свойствами "accept" и "async: true|false" */ }
}
}
]]>
Чтобы всё это заработало, да-да, как вы уже догадались, лезем в недра конфигов DW. Необходимо создать, опять же, XML-файл в директории
%DW_Config_User%\CodeHints, например создаем файл
my_foobar_hints.xml со специальной разметкой, о которой можно подробнее почитать
на сайте
Adobe.
Итак, содержимое файла
my_foobar_hints.xml, согласно придуманному прототипу объекта, должно быть таким:
<![CDATA[
<codehints xmlns:MMString="http://www.macromedia.com/schemes/data/string/">
<menugroup MMString:name="my_foobar_hints">
<!-- создаем элемент function для доступа к объекту из глобального списка -->
<function pattern="foobar"
displayrestriction="JavaScript"
casesensitive="true"
icon="shared/mm/images/hintProperty.png"/>
<!-- вначале создаем матчер выпадающего списка -->
<menu pattern="foobar." alias="$f" patternseparator="" casesensitive="true" displayrestriction="JavaScript" additionaldismisschars=".;" allowwhitespaceprefix="true">
<menuitem label="hello(arg1, arg2)" icon="shared/mm/images/hintFunction.png" />
<menuitem label="world" icon="shared/mm/images/hintProperty.png" />
</menu>
<!-- далее чтобы вложенные объекты ссылались куда надо, небходимо создать список свойств с необходимыми аттрибутами "propType" -->
<menu classpattern="foobar" alias="$f" casesensitive="true" displayrestriction="JavaScript" additionaldismisschars=".;" allowwhitespaceprefix="true">
<method pattern="hello(arg1, arg2)" icon="shared/mm/images/hintFunction.png" retType="String" object="foobar" source="my_foobar_hints.xml" description="Описание свойства объекта, можно использовать тут HTML" />
<property label="world" icon="shared/mm/images/hintProperty.png" propType="foobar_world" object="foobar" source="my_foobar_hints.xml" description="" />
</menu>
<!-- создаем список свойств для объекта foobar.world -->
<menu classpattern="foobar_world" casesensitive="true" displayrestriction="JavaScript" additionaldismisschars=".;" allowwhitespaceprefix="true">
<property label="type" icon="shared/mm/images/hintProperty.png" propType="Number" />
<property label="screen" icon="shared/mm/images/hintProperty.png" propType="screen" />
<method pattern="date([ts])" icon="shared/mm/images/hintFunction.png" retType="Date" />
<!-- пример метода с выпадающим списком для первого аргумента -->
<method pattern="config([settings])" icon="shared/mm/images/hintFunction.png">
<parammenu pattern='{,' name="settings" index="0" type="optionArray" allowwhitespaceprefix="true">
<parammenuitem label="accepts" value="accepts: " icon="shared/mm/images/hintMisc.gif"/>
<optionparammenu pattern="async" label="async" value="async: " icon="shared/mm/images/hintFlag.gif" type="enumerated">
<optionparammenuitem label="true" value="true" icon="shared/mm/images/hintMisc.gif"/>
<optionparammenuitem label="false" value="false" icon="shared/mm/images/hintMisc.gif"/>
</optionparammenu>
</parammenu>
</method>
</menu>
</menugroup>
</codehints>
]]>
Также рекомендую покопаться в уже существующих XML-файлах для лучшего понимания разметки файлов:
- %DW_Config_Common%\CodeHints\CodeHints.xml
- %DW_Config_Common%\CodeHints\DOMHints.xml
- %DW_Config_Common%\CodeHints\JQueryCodeHints.xml
В заключение, раз уж я вначале статьи заговорил про эффективность работы, то не могу не упомянуть про
отличный плагин
ZenCoding, который заметно сокращает время для написания разметки XML/HTML и даже написания CSS.
