GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
WWW-редактор: больше, чем просто HTML(12308)
Создаем расширение для Dreamweaver MX(11355)
Редактор HTML-Kit v.1.0(10992)
Редактор на пульсе HTML(10256)
Кодируем со всеми удобствами(9471)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » HTML-редакторы » Создаем расширение для Dreamweaver MX

Создаем расширение для Dreamweaver MX


Ростислав Сирык
rost@flash-ripper.com
http://www.flash-ripper.com/

Эта статья описывает процесс создания расширения (extension) для Macromedia Dreamweaver MX. Расширение PHPbreadcrumbs.mxp, на примере которого мы будем учиться, можно скачать с сайта Dreamweaver exchange. Мы предлагаем рассмотреть процесс его создания именно здесь, потому что наглядный пример всегда очень полезен, и лучше все это один раз увидеть, чем долго читать документацию к DW MX. Освоению данного урока не помешает знание JavaScript (есть хорошая книга "O'Reilly JavaScript: Полное руководство (The Definitive Guide)").

Написание расширений помогает вам легко распространять написанный вами код среди команды разработчиков, а им для этого совсем не обязательно уметь программировать. Я написал PHP-код, динамически создающий строку ссылок, указывающую текущее положение пользователя в структуре сайта ("breadcrumb links") путем чтения URL'а страницы. Чтобы другие могли успешно использовать этот код, я разместил его внутри HTML-файла, который работает как команда Dreamweaver (DW), руководствуясь правилами Dreamweaver MX API, являющегося набором объектов, которыми могут пользоваться кодеры, желающие создавать расширения для Dreamweaver MX. Наконец, я не хотел вручную устанавливать команду на машину каждого дизайнера, и поэтому упаковал команду в расширение.

Что интересно в расширении, описанном в этой статье, так это то, что оно просто копируют свой код на страницу. Этот код содержится в переменной внутри файла команды Dreamweaver, генерируемого расширением. Разработчик может легко повторить шаги, предпринятые в данном примере, но заменить исходный PHP-код для формирования строки ссылок своим кодом. Этот код может быть написан на множестве языков, как серверных, так и для клиентской части. Но команда Dreamweaver, вставляющая этот код, должна быть написана на JavaScript, входящем в Dreamweaver MX API.

Любопытные могут взглянуть на PHP-код, генерирующий строку ссылок.

После тестирования код может быть размещен внутри командного файла Dreamweaver. Чтобы создать такой командный файл DW, создайте сначала чистый HTML-файл в папке Dreamweaver MX/Configuration/Commands, и заполните его следующим кодом:

<html>
<head>
    <title>Insert breadcrumbs</title>
    <script language="javascript">
        var what2insert = 'здесь будет динамический breadcrumb-код';
         function canAcceptCommand(){

Давайте остановимся на минутку. Команды Dreamweaver MX — это просто HTML-файлы с JavaScript. Такой код знаком многим веб-дизайнерам. Функция canAcceptCommand() — это код JavaScript, специфический для Dreamweaver MX API. Если canAcceptCommand(), будучи размещенной в командном файле, возвращает true, команда разрешается к выполнению. Если метод canAcceptCommand() возвращает false, команда молча прерывается. Содержимое canAcceptCommand() определяется самим разработчиком. Я сделал это так:

            var dDOM = dw.getDocumentDOM();
            var dSel = dDOM.getSelection();
            return(dSel[0] == dSel[1]);
        }

Сначала я использую метод dw.getDocumentDOM() (из Dreamweaver MX API), чтобы извлечь объект DOM для открытого в данный момент документа. Затем я использую getSelection() (метод, который определен для каждого DOM-объекта в Dreamweaver MX) для получения массива, содержащего позиции текущего выделения в Dreamweaver MX. Это означает, что во время выполнения моей команды я могу сказать, что выбрано, независимо от того, какой документ открыт в Dreamweaver в данный момент. Массив, который я назвал dSel, содержит два элемента: начальная и конечная позиция текущего выделения. Они отсчитываются в символах от начала исходного кода документа. Получив эти две величины, я сравниваю их, и возвращаю булеву величину как результат их сравнения. Это означает, что будет возращено true, если эти две величины равны, и false, если они разные. Единственный возможный случай равенства этих величин сводится к тому, что текущее выделение является просто курсором, и не выбраны никакие элементы кода в Dreamweaver MX. Таким образом, я предохранил мою команду от выполнения, если что-то выбрано. Это хорошо, потому что я не хочу, чтобы у моих коллег что-то случайно заменялось строкой ссылок, которую они вставляют.

Теперь я начинаю писать свою собственную функцию, чтобы вставить внутрь страницы, открытой в Dreamweaver MX то, что мне нужно:

function stickItIn(){
    var dDOM = dw.getDocumentDOM();
    var dSel = dDOM.getSelection();
    var dDoc = dDOM.documentElement;
    var dHTML =dDoc.outerHTML;

Сначала я получаю объект DOM независимо от того, какой документ открыт в Dreamweaver MX во время выполнения этой команды. Затем я получаю текущее выделение, а затем — объект, представляющий HTML-узел — documentElement, затем внешний по отношению к этому элементу HTML — outerHTML (все, что находится между тэгами <HTML> и </HTML> включительно).

Вторая часть моей функции заменяет HTML открытого в данный момент документа подстрокой, начинающейся с начальной точки выделения — dSel[0], плюс строка, которую я хочу вставить — what2insert, и плюс подстрока, начинающаяся с конечной точки выделения — dSel[1] (и продолжающейся до конца документа HTML):

    dDoc.outerHTML = dHTML.substring(0,dSel[0]) + what2insert + dHTML.substring(dSel[1]);

Что получается: я взял всю страницу, разделил ее на две части в том месте, где установлен курсор, а затем снова соединил их, перед этим вставив посередине строку what2insert. После всех этих операций, точка выделения больше не будет находиться на том месте, где она была до этого. Из вежливости моим пользователям я восстанавливаю точку выделения, используя для этого метод setSelection() объекта DOM для Dreamweaver MX. Я устанавливаю точку выделения на место, используя массив dSel, который я получил ранее:

     dDOM.setSelection(dSel[0],dSel[1]);
}

Теперь все мои функции определены, осталось только запустить их. Функция canAcceptCommands() всегда запускается автоматически, если она размещена в командном файле Dreamweaver MX. Я запущу мою функцию stickItIn() как обработчик события onLoad и закрою код HTML необходимыми тэгами:

</script></head><body onLoad="stickItIn()"></body>
</html>

Следующий шаг — тестирование кода, чтобы убедиться, что он ведет себя так, как я рассчитывал. Я создал команду Dreamweaver MX, которая вставляет в документ мою переменную what2insert. Эта команда размещена в папке Configuration/Commands внутри каталога приложения Dreamweaver MX. Запускаю Dreamweaver и выбираю пункт меню Commands > Insert breadcrumbs, чтобы проверить, как это работает. Если все нормально, я могу вернуться к редактированию командного файла. А если команда не работает, или я сделал ошибку, которая повредила DW, я всегда могу удалить файл, который создал, и начать сначала.

Подведем итог. Я могу вернуться к моей команде, чтобы изменить значение переменной what2insert, заменив его динамическим кодом, который мне нужен. Так как один кусочек кода (мой HTML/JavaScript-файл "Insert Breadcrumbs.htm") обрабатывает другой (мой динамический код), то мне нужно превратить опасные символы в escape-последовательности. В моем случае это одинарные кавычки и переносы строк в исходном коде.

Посмотреть окончательный результат с добавленным PHP-кодом.

И вот у меня есть работающая команда для Dreamweaver MX. Вместо того чтобы копировать и вставлять мой динамический код через буфер обмена, я могу просто выбрать пункт меню Commands > Insert Breadcrumbs. Создание команды потребовало некоторых усилий, и я хочу поделиться этим с другими. Итак, я упакую все это в файл .MXP, который может быть установлен с помощью Менеджера Расширений Macromedia Extension Manager на любом другом компьютере, где есть Dreamweaver MX.

Сначала мне нужно создать файл .MXI. Если у вас есть уже установленные расширения, вы можете взглянуть на .MXI-файлы для тех расширений. Они находятся в папке Dreamweaver MX/Configuration/Extensions. MXI-файл — это путеводитель вашего расширения, повествующий о его авторе, целях, и, между прочим, какие и где файлы нужно создать на машине конечного пользователя. В нашем примере нам нужен MXI-файл, содержащий инструкции по размещению созданного нами командного файла в папке Dreamweaver MX/Configuration/Commands.

MXI-файл — это просто XML-страница, с некоторыми тэгами, специфичными для Dreamweaver MX. Давайте создадим ее. Первая половина — это описание того, что появится у конечного пользователя в Менеджере Расширений во время инсталляции:

<macromedia-extension name="Insert breadcrumbs" version="1.0" type="Command">
<author name="Francois Richardson" />
<products>
    <product name="Dreamweaver" version="3" primary="true"/>
</products>
<description>
    <![CDATA[
Russian: Вставляет динамический код на PHP, который читает путь файла и создает из него строку ссылок. English: Inserts a dynamic script in PHP that reads the path to the page and turns it into breadcrumbs.
    ]]>
</description>
<ui-access>
    <![CDATA[
        Commands > Insert PHP breadcrumbs
    ]]>
</ui-access>

Большая часть этого кода объясняет сама себя. Атрибут version тэга <product> — это минимальная версия DW, требуемая для работы расширения, в данном случае это Dreamweaver 3 и выше.

Вторая часть .mxi-файла говорит Менеджеру Расширений, где искать созданные вами файлы, и где их размещать на машине конечного пользователя:

<files>
<file source="Insert PHP breadcrumbs.htm"
destination="$dreamweaver/configuration/Commands"/>
</files>

<configuration-changes>
</configuration-changes>
</macromedia-extension>

Единственное, о чем еще стоит сказать — $dreamweaver. Эта переменная содержит путь к папке, в которую установлен Dreamweaver MX на машине конечного пользователя. Теперь я могу положить .mxi-файл и мой документ "Insert PHP breadcrumbs.htm" в одну папку, и запустить Extension Manager. В Extension Manager, выбираю пункт File > Package Extension и выбираю мой .mxi-файл. Менеджер Расширений создает .mxp-файл, готовый к отсылке кому угодно, у кого есть Macromedia Extension Manager.

Создание расширений Dreamweaver MX позволяет разработчику приспосабливать DW MX под отдельные компании или особые проекты. Любой, кто знает JavaScript, (и время, чтобы изучить документацию к Dreamweaver API) может создать команду для Dreamweaver, предоставляя другим доступ к специально созданным пунктам меню Commands. Упаковка такой команды в формат расширения для DW MX делает процесс установки команды очень простым для конечного пользователя. Скачайте расширение PHP breadcrumbs с сайта производителя, используйте их в своей профессиональной деятельности.

Плодитесь и расширяйтесь!

 
16.03.2003
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.