Здесь русская версия блога. (кстати, там уже статей на четыре-пять больше, чем здесь)
Здесь английская версия (избранные переведённые русские статьи) блога.

Это последний переезд до того, как я наконец соберусь купить/оформить себе полноценный хостинг. То есть, ничего не гарантирую :).

В этой статье я вкратце расскажу об общих способах при подготовке различных учебных документов в LaTeX, а конкретно – о подготовке титульной страницы, вставке векторных рисунков (схем), вставке таблиц и вставке графиков, создающихся на основе подготовленных данных, занесённых или даже вычисляемых в электронной таблице.

Процесс будет рассматриваться со стороны Ubuntu/TeX Live, хотя всё рассказанное можно будет сделать и в Windows с использованием MikTeX и на Маке с использованием MacTeX. Также я затрону дополнительные open-source пакеты (версии которых, опять же, есть для всех операционных систем), которые помогут в процессе и опишу какие действия необходимо предпринять, чтобы получившийся в результате документ выглядел максимально близко к желаемому :). Это Inkscape, Gnumeric и пакеты pgfplots и pgfplotstable для LaTex.

Если вы в первый раз используете LaTeX, рекомендую стандартный вводный документ _{(англ., PDF)} и небольшой справочник по форматированию текста _(англ.).
В качестве документации к pgfplots подойдёт официальная: pgplots _{(англ., PDF)} , pgplotstable _{(англ., PDF)}.

Установка

Устанавливаем LaTeX:

$ sudo apt-get install tex-common texlive-base texlive-base-bin texlive-common texlive-doc-base texlive-fonts-recommended texlive-lang-cyrillic texlive-latex-base texlive-latex-recommended

Создадим тестовый документ в любом редакторе (для gedit вы можете установить gedit-latex-plugin). Условимся, что наш основной документ будет называться work_0001_2010.tex, а все относящиеся к нему файлы будут использовать это название + какой-либо постфикс:

$ touch ./work_0001_2010.tex
$ gedit ./work_0001_2010.tex

Вставим представленный текст в качестве содержимого, сохраним:

\documentclass[a4paper,12pt]{article}
\usepackage[T2A]{fontenc}
\usepackage[utf8]{inputenc} % любая желаемая кодировка
\usepackage[russian,english]{babel}
\usepackage[pdftex,unicode]{hyperref}
\usepackage{indentfirst} % включить отступ у первого абзаца

Тестовый документ, подготовленный в \LaTeX
\end{document} % конец документа

Скомпилируем и посмотрим, что получилось:

$ pdflatex ./work_0001_2010.tex
$ evince ./work_0001_2010.pdf

Если всё было сделано правильно – перед нами готовый результат.

Титульная страница

Итак, генерируемая по умолчанию страница обычно не соответствует тому, что ожидают преподаватели или ученики. Я просто покажу шаблон и то, что должно из него получиться – результат больше похож на ожидания, но конечно, при желании или необходимости, вы можете изменить его как заблагорассудится.

\begin{document} % начало документа

Тестовый документ, подготовленный в \LaTeX
\end{document} % конец документа

Содержание включено для примера и оно обновится в соотвествии с главами только при следующей компиляции – это правило для LaTeX. В результате всё это должно выглядеть так:

Схемы

Есть много способов вставить изображение в LaTeX-документ, и вам подойдёт любой из них, но так как я обо всём рассказываю, то должен рассказать хотя бы об одном. Я подготавливаю схемы в Inkscape (свободный векторный редактор), экспортирую их в PDF и затем вставляю в LaTeX-документ.

Inkscape очень удобен для подготовки схем – у прямых линий (да и у фигур и кривых) можно установить с любых концов стрелки или сделать их пунктирными (Object → Fill and Stroke → Stroke Style), сектора можно делать ограничивая углы развёртки у круга, любую фигуру можно залить стандартными для таких схем кистями (хоть в полька-точечку (Object → Fill and Stroke → Fill Style → Polka dots)), кривые удобно рисовать инструментом Кривая Безье и кроме всего прочего есть «примагничивание» (правда оно почему-то включается в свойствах документа (File → Document Properties → Snap)). Практически любой график или схему из методички/учебника можно перенести в векторный вид за полчаса.

Итак, экспорт из Inkscape. Исходный файл, по принятому ранее соглашению, назовём work_0001_2010_graph01.svg

В меню File → Save as… выберем формат *.pdf:

И отметим конвертацию шрифтов в пути (в Stroke Style → Width у надписей советую ставить значения 0.1-0.3, иначе надписи в pdf-файле получаются очень толстыми):

Теперь в шапку LaTeX-документа наряду с остальными пакетами нужно добавить пакет graphicx:

\usepackage{graphicx}

А в тело документа вставить новую картинку:

\newpage

\begin{figure}
\centering
\includegraphics[width=0.9\textwidth]{work_0001_2010_graph01.pdf}
\caption{Преломление света}
\label{fig:graph01}
\end{figure}

Заново компилируем:

$ pdflatex ./work_0001_2010.tex
$ evince ./work_0001_2010.pdf

И вот результат:

Пакеты pgf

Пакет pgfplotstable помогает очень гибко настраивать/составлять таблицы и позволяет считывать таблицу из csv-файла при компиляции.

Пакет pgfplots позволяет строить практически любые цветные настраиваемые графики на основе таблиц.

Установка пакетов на Windows/MikTex описана в документации _{(англ., PDF)} , в случае Ubuntu нужно сделать следующее:

$ sudo nano /etc/apt/sources.list

В конец файла добавить (заменять версию lucid на вашу не нужно):

deb http://ppa.launchpad.net/johannes-reinhardt/ppa/ubuntu lucid main

Выполнить:

$sudo apt-get update
$sudo apt-get install pgfplots

Таблицы

Таблицы будем подготавливать в Gnumeric. Можно использовать любой табличный редактор, главное – гибкая возможность экспорта в текстовый вид.

Создадим таблицу, в первых трёх столбцах которой будут различные значения, а в четвёртом столбце – среднее по этим трём значениям и сохраним её под именем work_0001_2010_table01.gnumeric (кстати, gnumeric умеет сохранять таблицы в формате LaTeX, но мы намереваемся использовать пакет pgfplotstable, поэтому не будем этого делать):

Теперь необходимо экспортировать таблицу в текстовый файл. Важно заметить две вещи, первая: в текстовый файл импортируется только текущий лист (Sheet), вторая: для того, чтобы удобно работать со столбцами при использовании пакета pgfplotstable, необходимо в первой строке таблицы указать короткие однословные названия (алиасы) для столбцов.

Таблицу можно сохранить в CSV, но если вы используете русскую локаль в операционной системе, то дробные числа в таблице будут представлены с использованием запятой. Так что лучше сохраним файл в формате Text (configurable), а назовём его, для удобства, work_0001_2010_table01.dat

После этого вас спросят о дополнительных настройках – символ конца строки установите в соответствии с вашей операционной системой, разделитель – «пробел» и отключите кавычки.

В результате должен получиться такой файл:

a b c mid
0.09 0.07 0.072 0.0773333333333333
0.15 0.073 0.073 0.0986666666666667
0.155 0.074 0.8 0.343
0.156 0.078 0.9 0.378
0.17 0.079 0.99 0.413
0.18 0.08 0.1 0.12
0.189 0.09 0.12 0.133
0.192 0.1 0.14 0.144
0.195 0.12 0.153 0.156
0.2 0.128 0.16 0.162666666666667

Теперь можно вставить таблицу в LaTeX-документ. Добавьте в заголовок:

\usepackage{pgfplotstable}

Теперь, в теле документа, настроим вывод у пакета pgf (запятые в качестве дробных разделитей, разделитель в файлах данных по умолчанию пробел, округление до шести знаков) и загрузим файл с данными, привязав его к алиасу midvalues:

\pgfkeys{/pgf/number format/.cd,precision=6,use comma,fixed,1000 sep={}}

\pgfplotstableread{work_0001_2010_table01.dat}\midvalues

Теперь опишем саму таблицу:

\newpage

\begin{table}[h]
\centering
\caption{Средние числа}
\pgfplotstabletypeset[
    columns={a,b,c,mid}, % алиасы колонок, определённые в первой строке таблицы
    columns/a/.style={ column name=Значение $a$ }, % стиль столбца: определяем только заголовок
    columns/b/.style={ column name=Значение $b$ }, % стиль столбца: определяем только заголовок
    columns/c/.style={ column name=Значение $c$ }, % стиль столбца: определяем только заголовок
    columns/mid/.style={ column name=Среднее значение }, % стиль столбца: определяем только заголовок
    every head row/.style={ before row=\hline, after row=\hline\hline }, % одиночная линия над и двойная линия под первой строкой таблицы
    every last row/.style={ after row=\hline }, % одиночная линия под последней строкой таблицы
    every first column/.style={
        column type/.add={|}{} % вертикальная линия перед первым столбцом
    },
    every last column/.style={
        column type/.add={|}{|} % вертикальные линии с обоих сторон последнего столбца
    }
]\midvalues \\[0.5cm]
\label{tab:midvalues}
\end{table}

Снова перекомпилируем файл, и вот результат:

Графики

В завершение построим график по данной таблице.

Добавьте в заголовок документа:

\usepackage{pgfplots}
\pgfplotsset{compat=newest} % использовать новые возможности pgfplots

И, в тело документа:

\newpage

\begin{tikzpicture}
    \begin{axis}[ % начать график
        xlabel=Измерение, % метка для оси x
        ylabel=Значение, % метка для оси y
        xtick align=center, % риски оси x внутри графика
        yminorgrids, ymajorgrids, % линии для основных и второстепенных значений по оси y
        xmajorgrids, % линии для основных значений по оси x
        minor y tick num=4, % 4 второстепенных риски между каждыми основными рисками по оси y
        legend style={at={(0.74,0.74)}, anchor=south west} % позиционирование легенды относительно нижнего левого угла
    ],
        \addplot[green!40!black,mark=x] table[y=a] from \midvalues; % тёмно-зелёным отметить данные из столбца 'a' на оси таблицы midvalues
        \addlegendentry{$a$ (таб. \ref{tab:midvalues})} % добавить линию на легенду
        \addplot[red!60!black,mark=x] table[y=b] from \midvalues; % тёмно-красным отметить на оси y данные из столбца 'b' таблицы midvalues
        \addlegendentry{$b$ (таб. \ref{tab:midvalues})} % добавить линию на легенду
        \addplot[yellow!80!black,mark=x] table[y=c] from \midvalues; % тёмно-жёлтым отметить на оси y данные из столбца 'c' таблицы midvalues
        \addlegendentry{$c$ (таб. \ref{tab:midvalues})} % добавить линию на легенду
        \addplot[blue!80!black,mark=o,smooth] table[y=mid] from \midvalues; % тёмно-синей сглаженной линией отметить на оси y данные из столбца 'mid' таблицы midvalues
        \addlegendentry{Среднее (таб. \ref{tab:midvalues})} % добавить линию на легенду
    \end{axis}
\end{tikzpicture}

Мы указываем только значения для оси y и pgf автоматически подбирает значения на оси x, но в команде addplot также можно указать и столбец-источник для оси x: table[x=mid,y=b]

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

Я привёл лишь простейший пример, но пакет pgfplots обладает настолько широкими возможностями, что если вы заинтересованы в данной теме, то вы просто обязаны хотя бы очень подробно рассмотреть всё руководство по пакету _{(англ., PDF)}.

Заключение

Итак, LaTeX и pgfplots – удобный способ оформлять не только текстовые документы с формулами, но и целые работы со схемами, графиками и таблицами. Причём делать их просто и удобно. Желаю вам большого количества полезных и легко созданных научных работ!

X-Task: «On your Client! Get XML! Get XSL! Do XHTML! Go!»

Вступление

Статья рассматривает преобразование XML в XHTML посредством XSLT на клиенте средствами JavaScript. К примеру, у вас есть какие-либо данные в виде XML, а вам требуется по какому-либо действию клиента (по клику на ссылке), оформить их в [X]HTML и динамически вставить в страницу. Это не так сложно, но по пути, как оказалось, встречается несколько подводных камней — в основном, относительно кросс-браузерности этого подхода и малой освещённости процесса в сети. Генерация XHTML-страниц средствами браузера (прямой запрос на XML файл, содержащий информацию о стиле) — это другая тема, она намного проще, и здесь затронута не будет.

Задача будет рассмотрена на банальном примере личного сайта. Дано: Файл с контактными данными (XML), некая главная страница (XHTML) и пять браузеров: Firefox 3, Opera 9.5, IE7, Safari 3, Google Chrome. На главной странице есть ссылка, при нажатии которой контактные данные преобразуются в несортированный список (UL) и отображаются в специально выделенной области прямо на этой странице. Это реальный рабочий пример, который я сейчас использую для создания своего сайта (ещё не выложенного).

XML

Контактные данные, при их большом количестве, можно сгруппировать, поэтому XML-схема построена с учётом группировки элементов. Группа имеет краткое имя (shortname) для создания id у списка (возможно, потребуется оформить каждую группу по-особому) и, собственно, имя группы. XML-файл может содержать contact-ноды и вне групп, но в данном примере в этом нет необходимости. Все контакты имеют тип (type) для создания корректных ссылок в будущем (это мы также опустим). С остальным, вроде бы, всё понятно:

Структура довольно-таки проста, поэтому приведу сразу пример файла (любое сходство с реальными данными какого-либо индивидуума полностью случайно и приведено не намеренно):

1. <?xml version=«1.0″ encoding=«UTF-8″?>
2. <?xml-stylesheet type=«text/xsl» href=«./contacts.xsl»?>
3. <contacts
4. xmlns=«http://any-developer.name»
5. xmlns:xsi=«http://www.w3.org/2001/XMLSchema-instance»
6. xsi:schemaLocation=«http://any-developer.name ./contacts.xsd»>
7. <group shortname=«messengers»>
8. <name>Messengers</name>
9. <contact type=«skype»>
10. <id>any.developer</id>
11. </contact>
12. <contact type=«jabber»>
13. <id>any.developer@jabber.org</id>
14. <name>ulric.wilfred</name>
15. </contact>
16. <contact type=«gtalk»>
17. <id>any.developer</id>
18. </contact>
19. <contact type=«yahoo»>
20. <id>any.developer</id>
21. </contact>
22. <contact type=«icq»>
23. <id>7484939304033345544</id>
24. <name>any.developer</name>
25. </contact>
26. </group>
27. <group shortname=«email»>
28. <name>E-Mail</name>
29. <contact type=«gmail»>
30. <id>any.developer</id>
31. </contact>
32. <contact type=«yahoo-mail»>
33. <id>any.developer</id>
34. </contact>
35. </group>
36. </contacts>

XSL

Стиль генерирует XHTML-код, в виде списка UL, состоящего из негруппированных контактов и вложенных списков для групп. Поскольку результат вывода именно XHTML, требования к оформлению результата несколько строже, чем если бы это был обычный HTML. Поэтому следует обратить внимание на следующие моменты:

• Важно: В результате преобразования должен получаться файл с одной и только одной корневой нодой, иначе Safari и Google Chrome (Читай: WebKit) не смогут добавить результирующий элемент в документ. Это довольно разумно, поскольку для всех XML объектов (результат в виде XHTML из их числа) есть правило: корневой элемент должен быть только один (There can be the only one).
• Важно: В качестве xsl:output method должен быть указан либо xml либо html (однако, в последнем случае, при использовании пронстранств имён, таковые будут потеряны). Некоторые ставят это значение в xhtml и в результате получают некорректную обработку или ошибки на клиенте — пока этого метода не введено и не следует его использовать. Для этого есть media-type.
• Код генерируется без заголовков XML: omit-xml-declaration установлен в yes и xmlns не указывается, иначе в результате получится недоXHTML-файл с XML-заголовком, не содержащий html, head и body. Генерация DOCTYPE (doctype-system, doctype-public) также отключена.

1. <?xml version=«1.0″ encoding=«utf-8″?>
2. <xsl:stylesheet version=«1.0″
3. xmlns:xsl=«http://www.w3.org/1999/XSL/Transform»
4. xmlns:c=«http://any-developer.name» exclude-result-prefixes=«c»>
5. <!–    xmlns=»http://www.w3.org/1999/xhtml» –>
7. <xsl:output method=«xml»
8. encoding=«utf-8″
9. standalone=«yes»
10. indent=«yes»
11. omit-xml-declaration=«yes»
12. media-type=«text/xhtml»/>
13. <!–
14. doctype-system=»http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»
15. doctype-public=»-//W3C//DTD XHTML 1.0 Strict//EN»
16. –>
18. <xsl:template name=«contact»>
19. <li><a href=«javascript:alert(‘{@type}’)» title=«{@type}»
20. id=«contact-{@type}-sitelink»>
21. <img alt=«{@type}» src=«{@type}.ico»
22. id=«contact-{@type}-icon» class=«contact-icon» />
23. </a>
24. <xsl:if test=«c:name»>
25. <a href=«javascript:alert(‘{@type}:{c:id}’);»
26. id=«contact-{@type}-link» title=«{c:id}» alt=«{c:name}»
27. class=«contact-link»>
28. <xsl:value-of select=«c:name»/>
29. </a>
30. </xsl:if>
31. <xsl:if test=«not(c:name)»>
32. <a href=«javascript:alert(‘{@type}:{c:id}’);»
33. id=«contact-{@type}-link» title=«{c:id}» alt=«{c:id}»
34. class=«contact-link»>
35. <xsl:value-of select=«c:id»/>
36. </a>
37. </xsl:if>
38. <span class=«contact-type»>
39. (<xsl:value-of select=«@type»/>)</span>
40. </li>
41. </xsl:template>
43. <xsl:template match=«/c:contacts»>
44. <ul id=«contacts»>
45. <xsl:for-each select=«./c:contact»>
46. <xsl:call-template name=«contact» />
47. </xsl:for-each>
48. <xsl:for-each select=«./c:group»>
49. <li>
50. <xsl:if test=«c:name»>
51. <span class=«contact-group-name»>
52. <xsl:value-of select=«c:name»/></span>
53. </xsl:if>
54. <ul id=«{@shortname}»>
55. <xsl:for-each select=«./c:contact»>
56. <xsl:call-template name=«contact» />
57. </xsl:for-each>
58. </ul>
59. </li>
60. </xsl:for-each>
61. </ul>
62. </xsl:template>
64. </xsl:stylesheet>

В результате преобразования получается такой блок XHTML:

JavaScript

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

Загрузка XML-файлов

Для начала нам потребуется загрузить оба файла — XML и XSLT. По своей природе они оба — файлы XML, Internet Explorer предоставляет для этих целей ActiveX-объект XMLDOM, Firefox и Opera — фунцию createDocument, позволяющую загрузить XML-файл в созданный объект. Safari и Chrome (Читай: WebKit), однако, предоставляя эту же функцию, возвращают объект, не поддерживающий загрузку — опять же, вполне разумно, в соответствии со спецификациями W3C.

Метод 1. XMLHttpRequest

Поэтому, плюнув на всё, мы можем загружать файлы через XMLHttpRequest (синхронный или нет — по вашему выбору), используя всем известный шаблон AJAX.

Предложу вам свою версию, вы же можете использовать какую только заблагорассудится. Моя версия отличается тем, что принимает в параметры функцию, которая будет вызвана при успешном завершении вызова, позволяет делать и POST и GET запросы, позволяет передавать объекты и позволяет делать синхронный вызов (тогда она возвращает объект по его завершению).

1. /**
2. * Browser-independent [A]JAX call
3. *
4. * @param {String} locationURL an URL to call, without parameters
5. * @param {String} [parameters=null] a parameters list, in the form
6. *        ’param1=value1&param2=value2&param3=value3′
7. * @param {Function(XHMLHTTPRequest, Object)} [onComplete=null] a function that
8. *        will be called when the response (responseText or responseXML of
9. *        XHMLHTTPRequest) will be received
10. * @param {Boolean} [doSynchronous=false] make a synchronous request (onComplete
11. *        will /not/ be called)
12. * @param {Boolean} [doPost=false] make a POST request instead of GET
13. * @param {Object} [dataPackage=null] any object to transfer to the onComplete
14. *        listener
15. * @return {XHMLHTTPRequest} request object, if no exceptions occured
16. */
17. function makeRequest(locationURL, parameters, onComplete, doSynchronous, doPost, dataPackage) {
19. var http_request = false;
20. try {
21. http_request = new ActiveXObject(«Msxml2.XMLHTTP»);
22. } catch (e1) {
23. try {
24. http_request= new ActiveXObject(«Microsoft.XMLHTTP»);
25. } catch (e2) {
26. http_request = new XMLHttpRequest();
27. }
28. }
30. //if (http_request.overrideMimeType) { // optional
31. //  http_request.overrideMimeType(‘text/xml’);
32. //}
34. if (!http_request) {
35. alert(‘Cannot create XMLHTTP instance’);
36. return false;
37. }
39. if (onComplete && !doSynchronous) {
40. completeListener = function() {
41. if (http_request.readyState == 4) {
42. if (http_request.status == 200) {
43. onComplete(http_request, dataPackage)
44. }
45. }
46. };
47. http_request.onreadystatechange = completeListener;
48. }
51. //var salt = hex_md5(new Date().toString());
52. if (doPost) {
53. http_request.open(‘POST’, locationURL, !doSynchronous);
54. http_request.setRequestHeader(«Content-type», «application/x-www-form-urlencoded»);
55. http_request.setRequestHeader(«Content-length», parameters.length);
56. http_request.setRequestHeader(«Connection», «close»);
57. http_request.send(parameters);
58. } else {
59. http_request.open(‘GET’, locationURL + (parameters ? («?» + parameters) : «»), !doSynchronous);
60. //http_request.open(‘GET’, ’./proxy.php?’ + parameters +
61. // »&salt=» + salt, true);
62. http_request.send(null);
63. }
65. return http_request;
67. }

При использовании этого метода, функция загрузки XML будет выглядеть довольно просто — например, так:

1. /**
2. * Loads any XML using synchronous XMLHttpRequest call.
3. * @param {String} fileName name of the file to be loaded
4. * @return {XMLDocument|Object}
5. */
6. function loadXML(fileName) {
7. // no parameters, no handler, but synchronous
8. var request = makeRequest(fileName, null, null, true);
9. return request.responseXML;
10. }

Метод 2. В зависимости от браузера

Однако, если вы хотите использовать именно те способы, которые (как ни забавно) рекомендуются на W3Schools, функцию loadXML придётся усложнить, потому что приведённые на W3Schoolds примеры не работают на браузерах WebKit (Читай: Safari и Chrome). Пусть это будет, так сказать, «рекомендованный вид». Подозреваю, правда, что все эти обходы скрывают под собой те же вызовы XMLHttpRequest, поэтому, если вы не сторонник неоправданных действий, пропустите этот раздел.

Итак, функция будет делать прямой синхронный вызов XMLHttpRequest (вернее, функции описанной в предыдущем разделе) только в случае вызова из Safari, в остальных же случаях прибегать к средствам конкретного браузера (Не забываем правило: Никаких прямых проверок браузера, только проверка, поддерживается ли вызываемая функция):

1. /**
2. * Loads any XML document using ActiveX (for IE) or createDocumentFunction (for
3. * other browsers)
4. * @param {String} fileName name of the file to be loaded
5. * @return {XMLDocument|Object}
6. */
7. function loadXML(fileName) { // http://www.w3schools.com/xsl/xsl_client.asp
8. var xmlFile = null;
10. if (window.ActiveXObject) { // IE
11. xmlFile = new ActiveXObject(«Microsoft.XMLDOM»);
12. } else if (document.implementation
13. && document.implementation.createDocument) { // Mozilla, Firefox, Opera, etc.
14. xmlFile = document.implementation.createDocument(«»,«»,null);
15. if (!xmlFile.load) { // Safari lacks on this method,
16. // so we make a synchronous XMLHttpRequest
17. var request = makeRequest(fileName, null, null, true);
18. return request.responseXML;
19. }
20. } else {
21. alert(‘Your browser cannot create XML DOM Documents’);
22. }
23. xmlFile.async = false;
24. try {
25. xmlFile.load(fileName);
26. } catch(e) {
27. alert(‘an error occured while loading XML file ’ + fileName);
28. }
29. return(xmlFile);
30. }

В результате, функция возвращает XML-объект по заданному имени файла. Можно приступать собственно к трансформации.

Преобразование через XSLT

Преобразованием будет заниматься ещё одна функция, которая будет принимать в качестве аргументов пути к XML-файлу и XSL-файлу. Загружать эти файлы она будет описанной выше функцией loadXML. А возвращать эта функция будет строку с XHTML-кодом, который можно будет вставить прямо в innerHTML нужного элемента.

Почему строку? Потому что метод transformFragment объекта XSLTProcessor не поддерживает рендеринг XML (xsl:output method="xml"), а поддерживает только HTML (xsl:output method="html"). В результате преобразования с xsl:output method="xml" и transformFragment генерируется корректный DocumentFragment, который, однако, при вставке в XHTML-код действует как некая XML-нода — поэтому визуально виден только, так называемый, plain text. Если вас не смущает потеря пространств имён, вы можете изменить xsl:output method на html и использовать transformFragment, добившись в результате, чтобы функция возвращала DocumentFragment.

В случае Internet Explorer используется функция transformNode XML-объекта, в остальных браузерах используется XSLTProcessor.

1. /**
2. * Applies specified XSL stylesheet to the specified XML file and returns
3. * the result as a string. ActiveX is used in IE, otherwise, XSLTProcessor
4. * is used.
5. * @param {String} xmlFileName path to the xml file to be transformed
6. * @param {String} xslFileName path to the xsl file to be applied to the xml
7. * @return {String} xsl transformation result as a text
8. */
9. function getStylingResult(xmlFileName, xslFileName) {
10. var xmlContent = loadXML(xmlFileName);
11. var xslContent = loadXML(xslFileName);
12. if (window.ActiveXObject) { // IE
13. return xmlContent.transformNode(xslContent);
14. } else if (window.XSLTProcessor) { // Mozilla, Firefox, Opera, Safari etc.
15. var xsltProcessor=new XSLTProcessor();
16. xsltProcessor.importStylesheet(xslContent);
17. // return xsltProcessor.transformToFragment(xmlContent, document);
18. // somehow, transformToFragment works incorrectly, recognizing the
19. // result of transformation as xml, not html, because
20. // xsl:output=»xhtml» is still not supported, and for xhtml
21. // xsl:output=»xml» is used
22. // (xsl:output=»html» strips namespaces)
23. // see: http://osdir.com/ml/mozilla.devel.layout.xslt/2003-10/msg00008.html
24. // also, see: https://developer.mozilla.org/en/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations
25. var resultDocument = xsltProcessor.transformToDocument(xmlContent);
26. var xmls = new XMLSerializer();
27. return xmls.serializeToString(resultDocument);
28. }
29. }

Итог

Всё, весь необходимый код готов и вы можете использовать функцию getStylingResult для преобразования XML-файлов и вставки результата в XHTML. Например, таким образом:

1. document.getElementById(‘content’).innerHTML =
2. getStylingResult(‘./contacts.xml’, ‘./contacts.xsl’);

Как итог, мы получили действительно кросс-браузерную версию обработки XML на клиенте. Спасибо за внимание.

(Подсветка кода выполнена с помощью Syntax Highlighter от Антона Шевчука)

P.S. Статья доступна также в моём блоге

Я тут взял, да викифицировал основные статьи из этого блога. Там, на этом Wikidot есть подсветка синтаксиса, так что код стало читать удобнее. И подготавливать статьи в wiki тоже несколько удобнее, чем в html. И ещё там всё настраивается, только вот места пока поменьше чем здесь, но мне много и не надо :).

Так вот, я не буду ни в коем случае забрасывать этот блог, но статьи будут появляться там раньше, а потом уже переоформляться (из вики зачёт регэкспов да и просто копи-пэйста это сделать не так сложно) сюда. Я много раз переезжал из разных мест, но тут я всё же задержался и не думаю, что стоит бросать это место — просто будет два параллельных режима и всё.

Так что, если вы видите под заголовком справа кнопку то это значит, что кликнув по ней вы увидите эту же статью, только викифицированную.

Вот так.

Задача

Установить на только что инсталлированный Ubuntu последнюю версию Trac, создать репозитории для нескольких проектов и настроить окружение соответственно. Структура проектов должна быть полностью корректной, установка максимально быстрой при минимальном количестве пакетов. Авторизация в репозитории и окружения Trac может быть общей, но позволяющей индивидуальную настройку для каждого проекта. Также, установка должна быть максимально независима от версий.

Дано

• Ubuntu 7.04 Feisty Fawn Herd
• Trac 0.11b2
• Subversion 1.4.3
• Два пользователя: user1 и user2
• Два проекта: Some Project и Another Project
• Требуется доступ в Trac и репозиторий по адресам <host>/localProjects и <host>/svn соотвественно

Решение. Пункт 1. Установка базовых дистрибутивов, доступных в пакетах.

Для начала можно установить дистрибутивы, доступные в репозиториях Ubuntu в поддерживаемых версиях – на данный момент это Apache 2.2.3, Python 2.5.1 (необходим для работы trac), Subversion 1.4.3 и g++ 4.1.2 (необходим для сборки sqlite). Установим, предварительно обновив данные о пакетах:

sudo apt-get update
sudo apt-get install python
sudo apt-get install apache2
sudo apt-get install subversion
sudo apt-get install g++

Решение. Пункт 2. Установка sqlite.

Теперь необходимо собрать sqlite (легковесная база данных, в котрой будут хранится внутренние данные trac) — версия, находящая в репозитории (3.3.13) на данный момент меньше требуемой (3.3.4). Создадим каталог для временного хранения дистрибутивов и перейдём в него:

mkdir ~/distr
cd ~/distr

Скачаем последнюю версию sqlite и установим:

wget http://www.sqlite.org/sqlite-3.5.6.tar.gz
tar xvfz ./sqlite-3.5.6.tar.gz
mv ./sqlite-3.5.6 ./sqlite # чтобы следовать букве README-руководства
mkdir ./bld # временный каталог для скомилированных файлов
cd ./bld
../sqlite/configure
make
sudo make install
cd ..
rm -r ./bld

Решение. Пункт 3. Установка trac-related пакетов через easy_install.

Для Python существует утилита, облегчающая установку python-пакетов, называемых также яйцами (они имеют расширение *.egg). Установим её:

wget http://peak.telecommunity.com/dist/ez_setup.py
sudo python ./ez_setup.py

И засчёт неё установим последние версии Pygments (0.9) (инструмент для подсветки программного кода на Python), Genshi (0.4.4) (механизм шаблонов от создателей trac) и собственно самого trac (0.11b2):

sudo easy_install Pygments
sudo easy_install Genshi
sudo easy_install Trac

Решение. Пункт 4. Создание репозиториев.

Создадим репозитории для наших проектов и сделаем первые коммиты, содержащие отправные точки для их структур. Все репозитории будут находиться в каталоге /var/svn, полностью доступном для сервера, каждый в своём подкаталоге — такой метод удобен при наличии нескольких проектов и это будет заметно в следующем пункте, на этапе настройки авторизации.

sudo mkdir /var/svn
sudo mkdir /var/svn/someProject
sudo mkdir /var/svn/anotherProject
cd /tmp
sudo rm -rfR * # удалить все обычные файлы
sudo rm -rfR .* # удалить все скрытые/системные файлы
mkdir /tmp/someProject
mkdir /tmp/someProject/trunk
mkdir /tmp/someProject/tags
mkdir /tmp/someProject/branches
mkdir /tmp/anotherProject
mkdir /tmp/anotherProject/trunk
mkdir /tmp/anotherProject/tags
mkdir /tmp/anotherProject/branches
sudo svnadmin create /var/svn/someProject
sudo svn import ./someProject file:///var/svn/someProject
    -m "Initial import"
sudo svnadmin create /var/svn/anotherProject
sudo svn import ./anotherProject file:///var/svn/anotherProject
    -m "Initinal import"
sudo chown -R www-data:www-data /var/svn

Решение. Пункт 5. Связывание apache и subversion.

Необходимо настроить доступ извне для созданных репозиториев. Для этого нужно установить модуль dav_svn для apache2 и заодно, раз мы работаем с subversion, установим связку subversion c Python, для корректной работы trac с репозиториями:

sudo apt-get install libapache2-svn
sudo apt-get install python-subversion

Теперь нужно настроить установленный модуль (при установки он автоматически включается для apache, если нет — используйте a2enmod dav_svn по завершению настройки):

sudo vi /etc/apache2/mods-available/dav_svn.conf

Ниже приведено точное содержимое конфигурационного файла. При обращении на путь <host>/svn/... модуль авторизации apache будет обращаться к файлу /etc/apache2/dav_svn.passwd за списком пользователей, а затем давать права на доступ к соответствующему проекту из файла /etc/apache2/dav_svn.authz. Обратите также внимание на использование SVNParentPath вместо SVNPath — таким образом subversion-модуль поймёт, что мы используем мультипроектную структуру и будет обрабатывать путь не как один общий репозиторий, а как несколько внутренних:

<Location /svn>
    DAV svn
    SVNParentPath /var/svn
    AuthType Basic
    AuthName "Subversion Repository"
    AuthUserFile /etc/apache2/dav_svn.passwd
    AuthzSVNAccessFile /etc/apache2/dav_svn.authz
    Require valid-user
</Location>

Создадим соответствующих пользователей в файлах авторизации. Используйте пароли попроще для проверки и не забудьте их потом поменять:

sudo htpasswd -c /etc/apache2/dav_svn.passwd user1
sudo htpasswd /etc/apache2/dav_svn.passwd user2

Создадим файл аутентификации:

sudo vi /etc/apache2/dav_svn.authz

В открытым файле опишем права доступа (на чтение — «r» и на запись — «w«) пользователей в соответствующие репозитории:

[/]
user1=r
user2=r

[/someProject]
user1=rw
user2=r

[/anotherProject]
user1=r
user2=rw

Решение. Пункт 6. Создание окружений trac.

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

sudo mkdir /var/trac
cd /var/trac

Теперь создадим для каждого из них, по очереди, окружение:

sudo trac-admin someProject initenv
sudo trac-admin anotherProject initenv

Имена проектов остаются на ваше усмотрение, тип репозиториев — по умолчанию svn (просто нажать Enter), путь к базе общий, по умолчанию (sqlite:db/trac.db, аналогично), пути к репозиториям: /var/svn/someProject и /var/svn/anotherProject соответственно.

Дадим права apache пользоваться этим каталогом.

sudo chown -R www-data:www-data /var/trac

Решение. Пункт 7. Связывание apache и trac.

Есть несколько вариантов такого связывания, мы остановимся на быстром, но надёжном способе — через mod_python (описания способов на сайте trac). Для этого модуль нужно установить (также, если он не включился после установки, по завершению настройки используйте a2enmod mod_python):

sudo apt-get install libapache2-mod-python

Настроим доступ к окружениям trac:

sudo vim /etc/apache2/sites-available/trac

Эта настройка специфична для использования mod_python (руководство на сайте trac, см. описания, если необходимы другие способы настройки). Обработчиком обращений по адресу <host>/localProjects выступит модуль, он будет рассматривать каталог /var/trac/ как корень нескольких проектов и содаст страницу с их списком (редактируемый шаблон можно найти внутри исходников trac), аналогично принципам SVNParentPath, URI передаётся в код trac. Запросы на вход будут обрабатываться по пользователям из того же passwd файла, из которого берёт их список читает subversion, а их права на действия в окружениях trac раздаются через trac-admin или в GUI-версии TracAdmin, доступной для аминистраторов окружений (будьте внимательны, пользователи создаваемые через интерфейс также добавляются в этот файл и доступны к использованию для настройки авторизации в subversion через authz-файл (по умолчанию у них нет никаких прав)) .

<Location /localProjects>
   SetHandler mod_python
   PythonInterpreter main_interpreter
   PythonHandler trac.web.modpython_frontend
   PythonOption TracEnvParentDir /var/trac
   PythonOption TracUriRoot /localProjects
</Location>

<LocationMatch /localProjects/[^/]+/login>
   AuthType Basic
   AuthName "Local Projects"
   AuthUserFile /etc/apache2/dav_svn.passwd
   Require valid-user
</LocationMatch>

Теперь заменим сайт по умолчанию для apache на сайт trac:

sudo a2dissite default
sudo a2ensite trac

Дадим пользователям права администратов в окружениях trac, в соотвествии с правами на репозиторий, теперь у них, у каждого в своём проекте, будет веб-интерфейс для полной настройки trac.

sudo trac-admin someProject permission add user1 TRAC_ADMIN
sudo trac-admin anotherProject permission add user2 TRAC_ADMIN

Решение. Заключение.

Осталось перезагрузить сервер, (принудительная перезагрузка настроек: force-reload) и проверить адреса <host>/localProjects и <host>/svn/someProject и <host>/svn/anotherProject, попробовав авторизироваться разными пользователями.

sudo /etc/init.d/apache2 restart

Если при установке появились какие-либо проблемы и ничего не помогает, попробуйте ознакомиться с предыдущей статьёй (но она несколько более сумбурна и менее структурирована) или опишите проблему(-мы) в комментариях — постараюсь реагировать быстро.

Примечание A. О добавлении проектов.

Добавление проектов в будущем требует лишь нескольких шагов — создание базовой структуры первым коммитом в какой-либо подкаталог /var/svn, опциональное добавление новых пользователей в htpasswd-файл, настройка прав доступа в authz-файле, создание окружения trac в соответствующем подкталоге /var/trac через trac initenv, опциональная выдача trac-прав новым пользователям и проверка, что apache имеет доступ к созданным каталогам.

Введение

Редактор Vim наиболее известен среди разработчиков в системах Unix — конкурент emacs, что-то вроде консольного IDE — этот редактор при должной сноровке и настройке (мне кажется, сноровке несколько меньшей и настройке более очевидной чем в emacs, но у последнего также есть мощная мультифункциональность — выбор за программистом) способен убыстрить и упростить многие процессы на этапах разработки не в ущерб таким удобствам как, например, авто-дополнение и навигация по проекту. Однако, если вы собираетесь использовать его для разработки на Python со всеми подобными удобствами — потребуются некоторые усилия: а именно, перекомпиляция…

Приведу несколько ссылок по теме:

• Vim How-To — Работа в vim. Небольшое, но грамотное, вводное руководство. (полное содержание, содержит справочник по командам)
• Набор изображений для быстрого и наглядного изучения сочетаний клавиш. (англ.)
• Настройка Vim для работы с Python — статья с подробным рассмотрением настройки и упоминанием всех необходимых дополнений
• Компилирование [g]Vim для Windows — статья, послужившая основой для написания той, которую вы читаете. (англ.)
• Альтернативная статья на ту же тему — более краткая, но о Python 2.5
• Некоторые заметки о работе c Python в редакторе Vim. (англ.)

Версии

Компиляция производилась с использованием [g]Vim 7.1, Python 2.5.2, Tcl 8.5.1, Cygwin 1.5.25-11 на Windows XP SP2, но сценарий при этом должен быть насколько возможно независим от версий.

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

Итак, подготовка. Нужно заранее установить сам язык — Python (если он не установлен) и, если вы собираетесь использовать Tcl — соответственно Tcl/Tk (с некоторого времени язык стал владением ActiveState: можно скачать бесплатный ActiveTcl). При компиляции используются динамические библиотеки соответствующих языков.

Для работы с архивами и собственно компиляции нам понадобится эмулятор Unix-утилит под Windows – это Cygwin. В нём существуют и компилятор gcc, и необходимые для компиляции файлы (есть путь с компилятором Borland, но он несколько сложнее). Файл установки работает немного непривычным образом — скачивая и файлы установки и пакеты уже после вашего выбора (если вы выберете установку из Интернет, которая в первый раз в любом случае необходима) — при этом для обновления или до/переустановки пакетов вы, возможно, будете возвращаться к инсталлятору довольно-таки часто. Тем не менее, чтобы установить минимальный набор необходимых для нашего случая вещей — нужно отметить лишь пару пунктов: после выбора способа установки (на данный момент наиболее стабильно для меня работало зеркало ftp://mirror.switch.ch (хотя буквально в эти секунды его исключили из списка официальных зеркал): если будут ошибки закачки — вас снова вернут к выбору зеркала) в списке выбора пакетов убедитесь что вы находитесь в режиме Category (переключив его, если надо, кнопкой View вверху), рядом с пунктом All, несколько раз потыкав надпись Default поменяйте её на Uninstall (чтобы не устанавливать ненужных пакетов) и выберите следующие пункты — Utils/patch, Devel/gcc-g++, Devel/make, System/man и Devel/gcc-mingw (последний, возможно, будет уже заранее выбран, значит они уже исправили одну проблему, которая отражалось на удачной компиляции :) ) — при этом у вас автоматически станут выбраны некоторые другие относительно необходимые пакеты (можно перепроверить): Shells/bash, Utils/bzip2 и Devel/mingw-runtime (последний, тем не менее, безмерно важен). Также советую установить Web/wget для того, чтобы облегчить в дальнейшем закачку патчей. Всё, можно жать установку.

Затем нужно, собственно, установить gVim. Можно заранее его настроить под Python, руководствуясь статьей, упомянутой выше — тогда при попытке подключения авто-дополнения Vim будет сообщать о необходимости перекомпиляции с ключом +python, что мы и планируем сделать.

Подготовка

Запустите cmd и убедитесь, что в переменных окружения USERNAME и USERDOMAIN содержатся ваше имя и имя вашего компьютера и домена соответственно (echo %username%@%userdomain%), а PATH содержит путь к bin-каталогу Cygwin. HOME может указывать на ваш каталог «Мои документы» (туда, где находится ваш файл настройки vim — vimrc), а VIM — на месторасположение установленного, рабочего редактора vim, желательно в формате 8.3 (напр.: C:PROGRA~1VIM). Значения переменных можно изменять в диалоге, расположенном здесь: Мой компьютер → Свойства → Дополнительно → Переменные среды.

Не менее, а даже более нам необходимы исходники, поэтому скачиваем их для соответствующей установленной версии (будьте внимательны — именно исходники для Unix, даже при компиляции под Win32) (по предыдущей ссылке также можно скачать файлы для отладки, но отлаживание в этой статье не рассматривается и в их присутствии нет необходимости). Поверх этих исходников нужно добыть дополнение для Windows (-extra) и файлы языков (-lang) соответствующей версии отсюда.

Также, если вы используете стабильный релиз и хотите заодно установить новейшие патчи — за файлами патчей обращайтесь сюда (исправьте номер версии в ссылке, если нужно). Здесь есть некоторая проблема, поскольку файлы патчей упаковываются в один только при достижении сотни (001-100, 101-200 и т.д.), поэтому если их, например, 275 — последние 75 файлов придётся закачивать руками или написав batch-скрипт с использованием telnet. Однако, у нас уже установлен cygwin, поэтому можно создать .sh-скрипт, выполняющий те же функции через wget, выглядеть это может примерно так:

#!/bin/bash
PATCHES_DOWNLOAD_PATH=ftp://ftp.vim.org/pub/vim/patches
PATCHES_VER=7.1
wget $PATCHES_DOWNLOAD_PATH/$PATCHES_VER/$PATCHES_VER.001-100.gz
wget $PATCHES_DOWNLOAD_PATH/$PATCHES_VER/$PATCHES_VER.101-200.gz

for i in `seq 201 278`;
do
	wget $PATCHES_DOWNLOAD_PATH/$PATCHES_VER/$PATCHES_VER.$i
done

Теперь займёмся расположением исходников в виде, удобном для компиляции.

Архивы с исходником, -extra и -lang нужно распаковать (по очереди, с заменой более старых файлов) в какой-либо каталог с сохранением структуры (пусть в нашем случае это будет C:/devel/vim-src/vim71), в нём должны содержаться каталоги /doc, /nsis, /src, /farsi и т.д.. В распаковке вам поможет или bzip2 из Cygwin, или встроенный архиватор файлового менеджера Total Commander или архиватор 7-zip или любой другой архиватор, поддерживающий архивы .tar.gz :).

В подкаталог /runtime можно положить файлы .vim, каталоги /doc и /plugins из рабочей версии вашего редактора vim — тогда они будут пропатчены соответственно, если вы выбрали путь компилирования с патчами. Патчи при этом можно положить в каталог /patches.

Компиляция

Для того, чтобы установить патчи, нужно выполнить над каждым из них команду patch из набора Cygwin, предварительно распаковав архивы файлов с сотнями патчей. В этом случае я воспользовался .bat-файлом вместо .sh скрипта (номера патчей, конечно, нужно, поправить на соответствующие вашему набору):

@ECHO off
ECHO changing directory to parent...

CD ..

ECHO -------------------- %Date% -------------------- >> patching-src.log

ECHO %CD%: applying first 200 patches

patch -p0 < patches/7.1.001-100 >> patching-src.log 2>&1
patch -p0 < patches/7.1.101-200 >> patching-src.log 2>&1

ECHO %CD%: applying the last patches

FOR /L %%B IN (201,1,278) DO
    patch -p0 < patches/7.1.%%B >> patching-src.log 2>&1

ECHO Finished

PAUSE

@ECHO on

Этот файл нужно положить в каталог /patches и после корректировки выполнить (убедитесь, что вся описанная выше структура дерева исходников сформирована): в корне исходников будет создан файл patching-src.log, в котором можно проследить результаты прошедшего патчинга. Если утилита patch не была найдена, проверьте PATH на наличие пути к Cygwin. Если некоторое (небольшое) количество файлов не было найдено и пропатчено — можно сильно не беспокоится, это в основном файлы для XWindow-версии.

Теперь можно перейти непосредственно к компиляции из консоли Cygwin. Для этого необходимо удачно выполнить лишь три команды — перейти в каталог с исходниками (cygwin монтирует ваши диски в точке /cygdrive/: подставьте корректные пути к вашей установке Python и Tcl а также их корректные версии, а если вы не компилируете версию для Tcl — просто уберите соответствующие параметры) и создать файлы vim.exe (консольная версия) и gvim.exe (GUI-версия):

$ cd /cygdrive/c/devel/vim-src/vim71
$ make -B -f Make_cyg.mak GUI=no
    PYTHON=/cygdrive/c/devel/Python PYTHON_VER=25 DYNAMIC_PYTHON=yes
    TCL=/cygdrive/c/devel/Tcl TCL_VER=85 DYNAMIC_TCL=yes vim.exe
$ make -B -f Make_cyg.mak OLE=yes
    PYTHON=/cygdrive/c/devel/Python PYTHON_VER=25 DYNAMIC_PYTHON=yes
    TCL=/cygdrive/c/devel/Tcl TCL_VER=85 DYNAMIC_TCL=yes gvim.exe

На предупреждения и даже некоторые ошибки, если они относятся к Python или Tcl и если процесс продолжается, а в результате .exe-файлы созданы, можно не обращать внимания. Если всё завершилось удачно, то в каталоге /src вы найдёте оба .exe-файла. Сделайте бэкап существующих файлов в рабочем, установленном vim (например, vim.exe.bak и gvim.exe.bak) и замените их только что скомпилированными. Если вы применяли патчи, то верните обратно *.vim файлы, каталоги /doc и /plugins из каталога /runtime, предварительно сделав бэкапы и для них и заменяя старые версии. После этого запустите gVim и vim из папки рабочего vim, проверьте версию и опции компилирования там же на присутствие +python — в большинстве случаев всё должно сложиться удачно.

Возможные ошибки

В процессе компилирования мне встретилось две ошибки: cannot exec `cc1': No such file or directory и ld: cannot find -lgcc. Обе они известны авторам Cygwin, однако в моём случае в скачанных мной версиях они ещё не были решены. Первая временно решается предварительным (перед компиляцией) добавлением каталога с исполняемым файлом cc1.exe в локальный PATH cygwin:

$ PATH=$PATH:/cygdrive/c/devel/cygwin/lib/gcc/i686-pc-cygwin/3.4.4

Вторая решается так, как должна была решаться и первая — установкой Devel/gcc-mingw (её обещали автоматической при выборе gcc в будущем) при установке Cygwin. При этом важно установить пакеты одновременно, поэтому если ошибка всё равно появляется — попробуйте выбрать режим Reinstall в установщике Cygwin в том месте, где до этого вы выбирали режим Uninstall и установите Cygwin заново.

Настройка Vim для Python

(Upd.)

На основе этой статьи я создал пак (взять можно здесь) из последних версий упомянутый в ней плагинов (Project, PythonComplete, NERD_Commenter, VCSCommand, RunScript и TagList плюс, поверх — PyDiction) + минимальной настройки (в ftplugin/python.vim, практически идентичный соответствующему в статье (изменённая функция TabWrapper + другой способ подключения словаря) – только общепринятые стандарты, omni completion повешен на Tab). Содержимое требуется распаковать в каталог <путь_к_установленному_vim>vimfiles. Для плагина taglist потребуется скачать ctags отсюда, и распаковав полученный архив в некоторый каталог, добавить путь к нему в переменную окружения PATH. Затем нужно запустить vim и выполнить команду:

:helptags $VIMvimfilesdoc

После этого можно будет использовать команду :help <название_плагина> для получения документации по соответствующему плагину.

Обычное автодополнение при использовании настроек из пакета работает по Tab, дополнение по контексту (omni completion) — по Ctrl+Enter и Ctrl+Space, а дополнение по ключевым словам и модулям — по Ctrl+Tab (при большом количестве вариантов словарь загружается относительно долго, поэтому намеренно установлено не очень удобное сочетание).

Для того, чтобы вставлять предлагаемые по спецификации строки в заголовки python-файлов при создании, добавьте нижеприведённый код в файл <путь_к_установленному_vim>_vimrc (строка filename добавлена для демонстрации возможности добавления имени файла):.

function! BufNewFile_PY()
   0put = '#!/usr/bin/env python'
   1put = '#-*- coding: utf-8 -*-'
   $put = '#-*- filename: ' . expand('') . ' -*-'
   $put = ''
   $put = ''
   normal G
endfunction

autocmd BufNewFile *.py call BufNewFile_PY()

…Вот теперь можно c чрезвычайным удобством программировать на Python.

Закончил перевод основной части учебника по Python 2.5 (пока без краткого обзора по библиотекам). Перевод пока довольно-таки черновой, в некоторых местах вычитка была только на уровне стилистики и грамотности. Сам источник, к сожалению, тоже часто меняет стиль повествования. Однако, в ближайшее время (в течение трёх-четырёх дней) проведу полную вычитку и попробую продолжить дальше (учебник по Python 3.0 не сильно отличается, поэтому в него нужно будет внести только различия).

Также, благо есть повод, в разделе «Продукты» доступен «Краткий справочник по японскому языку» (также выложен на торренте), который ненароком вышел в 350 страниц толщиной и содержит больше информации, чем иногда содержат учебники.

Введение

Спешу поделиться результатами небольшого исследования, оказавшегося необходимым для текущего проекта. Рассматривается возможность связки Java и JSON, её преимущества и недостатки. Я расскажу о практической части, о теории больше поведают нижеприведённые ссылки (англ.).

• Mastering JSON — самая приятная статья по JSON, описывающая все основные принципы и дополнительные возможности
• Использование JSON для передачи данных AJAX’ом в статье от IBM
• Описание связи JSON и JavaScript на официальном сайте
• Краткое описание скрещивания JSON и Java на официальном сайте
• Java-классы на официальном сайте
• Способы сериализации Java-объектов в статье от IBM
• И ещё о сериализации JSON-объектов в строку
• JSONTools для Java

Если кратко — JSON (JavaScript Object Notation) не является ничем более сложным, чем описано в его названии. Если вы можете описать сложно-структурированный объект на JavaScript — то о клиентской стороне JSON вы знаете практически всё. Серверная часть JSON занимается тем, что принимает каким-либо способом объект, записанный в нотации JavaScript и разворачивает данные таким образом (наверное можно сказать, десериализует), чтобы они стали доступны (или хотя бы понятны :) ) остальной части кода.

Не скажу корректно о других языках, но для Java код приёма объекта вам придётся написать самим (если только я не пропустил что-то очевидное) — ну и это не так сложно, поскольку всё необходимое для разворачивания объекта доступно на сайте JSON. Ммм, я сказал только «разворачивания»? Простите, и сворачивания тоже. Засчёт приведённого кода вы можете, например, создать Java-проекцию объекта в JavaScript-нотации (далее — JSON-объект) из JavaBean‘а (с некоторыми оговорками, о которых ниже), из java.util.Map, или, собственно, из строки в этой нотации.

Я не буду приводить примеров объектов на JSON, их доступно изрядно по ссылкам выше, да и зная JavaScript, как я уже говорил — вы знаете JSON. Обращу ваше внимание на то, что с передачей JSON-объектов следует быть осторожными и всё время помнить, что недоброжелатель, знающий серверные технологии и JavaScript, если захочет — эту лазейку, наверное, найдёт в первую очередь. Вспоминайте ваши любимые методы JavaScript и Java-секьюрности — это несколько сторонняя тема, об этом я здесь рассказывать не буду. И, передача JSON-объектов — это ещё и протокол.

Описание

Итак, практика. Я выбрал путь общего Java-сервлета для принятия (или раздачи) всех JSON-объектов в приложении и менеджера, ему их подготавливающего (или от него их принимающего). Для того, чтобы было легче создавать JSON-объекты на основе Java-объектов я выбрал путь JavaBean‘ов, JSON для Java умеет на их основе (засчет геттеров) создавать JSON-объект, а нам достаточно написать код для обратного действия. Для объектов со сложной структурой наверняка понадобится эти методы переопределять, поэтому я выделил их в отдельный абстрактный класс, который должен стать отцом для всех объектов, которые будут передаваться между сервером и клиентом. В качестве бонуса, в конце статьи представлены диаграмма классов и диаграмма последовательностей этой небольшой конструкции.

Процесс

В первую очередь соберём jar-библиотеку JSON, поскольку для Java этот пакет поставляется в исходниках (описание сборки позаимствовано отсюда и вы можете спокойно пропустить эту часть, если свободно собираете jar‘ы из исходников или вам это не требуется):

1. Сохраните пакет в какой-либо каталог, который будет далее называться %DOWNLOAD_HOME%
2. Распакуйте его и убедитесь, что структура каталогов (/org/json/) не изменилась.
3. Перейдите в каталог %DOWNLOAD_HOME%/org/json/
4. Скомпилируйте классы командой javac *.java
5. Вернитесь в каталог %DOWNLOAD_HOME%
6. Командой jar -cvf json.jar orgjson*.class создайте jar-архив.
7. Добавьте библиотеку в ваш проект

Теперь приведу код интерфейса IJSONSerializable (объекта, который может быть свёрнут в JSON и развернут обратно — думаю, это довольно корректно) и абстрактного класса JSONBean, который его имплементирует.

package com.acme.json;

import org.json.JSONObject;

public interface IJSONSerializable {

    public boolean fromJSONObj(JSONObject object);

    public JSONObject toJSONObject();

}

Обратите внимание, что в стандартной версии JSON по геттерам считает за пары ключ-свойство значения некоторых недозволенных методов, например, getClass и getInstance — нижеприведённый класс этот недостаток (в случае указанных методов) обходит и, собственно, добавляет функциональность конструирования (а в данном случае правильнее — инициализации) Bean‘а из JSON-объекта. Да, здесь, иcпользуется reflection, и если вас не устраивает этот факт — вы вольны поменять концепцию :) — JSON выстраивает свой объект из Bean‘а точно таким же способом.

package com.acme.json;

import java.lang.reflect.Method;

import org.json.JSONException;
import org.json.JSONObject;

public abstract class JSONBean implements IJSONSerializable {

    public boolean fromJSONObj(JSONObject jsonObj) {
        Class beanClass = this.getClass();
        Method[] methods = beanClass.getMethods();
        for (int i = 0;  i < methods.length; i += 1) {
            try {
                Method method = methods[i];
                String name = method.getName();
                String key = "";
                if (name.startsWith("set")) {
                    key = name.substring(3);
                }
                if (key.length() > 0 &&
                        Character.isUpperCase(key.charAt(0)) &&
                        method.getParameterTypes().length == 1) {
                    if (key.length() == 1) {
                        key = key.toLowerCase();
                    } else if (!Character.isUpperCase(key.charAt(1))) {
                        key = key.substring(0, 1).toLowerCase() +
                            key.substring(1);
                    }
                    if (isAllowedKey(key))
                        method.invoke(this, jsonObj.get(key));
                }
            } catch (Exception e) {
                return false;
            }
        }
        return true;
    }

    public JSONObject toJSONObject() {
        return new JSONObject(this) {
            @Override
            public Object get(String key) throws JSONException {
                return isAllowedKey(key) ? super.get(key) : null;
            }
        };
    }

    protected static boolean isAllowedKey(String key) {
        return ((key != "class") && (key != "instance"));
    }

}

Ну, и простенький пример Bean‘а, с которым мы будем работать.

package com.acme.json.beans;

import com.acme.json.JSONBean;

public class PersonBean extends JSONBean {

    private String personFirstName = "Homer";
    private String personLastName = "Simpson";
    private int personAge = 46;

    public String getPersonFirstName() {
        return personFirstName;
    }

    public void setPersonFirstName(String personFirstName) {
        this.personFirstName = personFirstName;
    }

    public String getPersonLastName() {
        return personLastName;
    }

    public void setPersonLastName(String personLastName) {
        this.personLastName = personLastName;
    }

    public int getPersonAge() {
        return personAge;
    }

    public void setPersonAge(int personAge) {
        this.personAge = personAge;
    }

}

JSONBeanManager управляет подготовкой Bean‘ов для отправки и принятия их на основе параметров запроса. Думаю, концентрация этого кода в одном месте оправдана, поскольку вы вряд ли захотите, чтобы отвечающий за пересылку Bean‘ов код был разбросан по проекту. В худших случаях паттерны проектирования придут вам на помощь. Кстати, возможно вы захотите сделать некоторые ваши Bean‘ы Singleton‘ами, тогда здесь вы можете возвращать их единственные инстансы (не забудьте только, что в связи с этим их нужно аккуратнее готовить :) ).

package com.acme.json;

import java.util.Map;

import com.acme.json.beans.PersonBean;

public class JSONBeanManager {

    protected JSONBean prepareBeanForReceiving(Map parametersMap) {
        if (parametersMap.containsKey("source") &&
           (parametersMap.get("source") == "sampleBean")) {
            return new PersonBean();
        }
        return null;
    }

    protected JSONBean prepareBeanForSending(Map parametersMap) {
        if (parametersMap.containsKey("source") &&
           (parametersMap.get("source") == "sampleBean")) {
            return new PersonBean();
        }
        return null;
    }

    protected void onBeanReceived(JSONBean bean) { }

    protected void onBeanSent(JSONBean bean) { }

    protected void onBeanTransferError() { }	

}

Ну и наконец — сервлет. Ядро пересылки. Запрос GET на сервер отправляет клиенту Bean, отданный менеджером на основе анализа параметров запроса, а затем сконвертированный в JSON-объект, а POST — принимает и заполняет предоставленный тем же менеджером Bean полученными из JSON-объекта данными.

package com.acme.json;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONException;
import org.json.JSONObject;

public class JSONBeanServlet extends HttpServlet {

    protected static final String JSON_OBJ_PARAM = "jsonBean";

    private JSONBeanManager beanManager = null;

    public JSONBeanServlet(/*Class beanManagerClass*/) {
        super();
        this.beanManager = new JSONBeanManager();
    }

    @Override
    public void doGet(HttpServletRequest req,
            HttpServletResponse resp)
            throws java.io.IOException, ServletException {
        JSONBean activeBean =
            beanManager.prepareBeanForSending(req.getParameterMap());
        if (activeBean != null) {
            resp.setContentType("application/x-json");
            resp.getWriter().print(activeBean.toJSONObject());
            beanManager.onBeanSent(activeBean);
        } else {
            beanManager.onBeanTransferError();
            // throw new ServletException("JSONBeanServlet got
                    no bean for sending");
        }
    }	

    @Override
    protected void doPost(HttpServletRequest req,
            HttpServletResponse resp)
            throws ServletException, IOException {

        JSONBean activeBean =
            beanManager.prepareBeanForReceiving(req.getParameterMap());		

        if (activeBean != null) {
            String jsonText = req.getParameter(JSON_OBJ_PARAM);
            JSONObject jsonObj = null;
            try {
                jsonObj = new JSONObject(jsonText);
            } catch (JSONException e) {
                e.printStackTrace();
            }
            activeBean.fromJSONObj(jsonObj);

            beanManager.onBeanReceived(activeBean);

        } else {
            beanManager.onBeanTransferError();
            // throw new ServletException("JSONBeanServlet got
                    no bean for receiving");
        }

    }	

}

Для завершения описания серверной части следует напомнить о добавлении сервлета в web.xml.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
    version="2.4">

    <display-name>SomeAplication</display-name>

    . . .

    <servlet>
        <description>JSON Beans Manage Servlet</description>
        <display-name>JSON Beans Servlet</display-name>
        <servlet-name>JSON Beans Servlet</servlet-name>
        <servlet-class>
            com.acme.json.FNJSONBeanServlet
        </servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>JSON Beans Servlet</servlet-name>
        <url-pattern>/jsonBean/*</url-pattern>
    </servlet-mapping>

    . . .

</web-app>

Клиентская часть состоит, собственно из JSON-парсера-конструктора (да, всё это можно сделать через eval(), но предоставленный разработчиками код делает это, по их обещаниям, аккуратнее) и, в моём случае, класса, облегчающего работу с сервлетом. Класс использует немного модифицированную функцию makeRequest из статьи о решениях JavaScript (которую я обновлю до этой версии там сразу же после написания статьи) и обеспечивающие ООП функции Class и createMethodReference оттуда же.

var JSONManager = Class.extend({

    JSON_BEAN_SERVLET_PATH: "./jsonBean",
    JSON_BEAN_PARAM_NAME: "jsonBean",

    construct:
        function() {
            this._handlerFuncRef =
                createMethodReference(this, "_responseHandler");
        },

    requestJSONBean: function(handlerFunc, addParams) {
        makeRequest(this.JSON_BEAN_SERVLET_PATH, addParams,
                this._handlerFuncRef, handlerFunc);
    },

    sendJSONBean: function(jsonBean, addParams) {
        makeRequest(this.JSON_BEAN_SERVLET_PATH,
                this.JSON_BEAN_PARAM_NAME + "=" +
                JSON.stringify(jsonBean) + (addParams ?
                ("&" + addParams) : ""), null, true);
    },		

    _responseHandler: function(http_request, handlerFunc) {
        handlerFunc(JSON.parse(http_request.responseText));
    }

});

Ну и в завершение — пример использующего всё вышеприведённое кода:

var alexanderJSON =
    {"personFirstName":    "Alexander",
     "personLastName":     "Makedonsky",
     "personAge":             35,
    };	

var jsonManager = new JSONManager();
jsonManager.sendJSONBean(alexanderJSON, "source=SampleBean");

var homerJSON = null;
function onGotObject(http_request) {
    homerJSON = JSON.parse(http_request.responseText);
}
jsonManager.requestJSONBean(onGotObject, "source=SampleBean");

В качестве альтернативных идей – методы JSONBeanManager‘а можно сделать статическими, а JSONBean научить приготавливать самого себя к отправке (инициировать данными) – но при сложной структуре менеджера и требовании комплексной подготовки, когда Bean не может подготовить сам себя – придётся от них отказаться. Однако, поскольку выбор Bean‘а по параметрам будет общим и для передачи и для приёма — код выбора можно вынести и в отдельный метод.

Заключение

Кажется, задача ознакомления выполнена и я со спокойной совестью, надеюсь, могу идти делать другие дела (я помню про обновление функции :) ). Если совесть должна быть неспокойна – обязательно сообщайте, я стараюсь исправлять ошибки в своих статьях – и даже те, которые, изредка, сам нахожу со временем. Приятной вам разработки.

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

Для того чтобы не делать это каждый раз ручками есть несколько простых способов: например, те же скрипты (batch’и для windows и shell-скрипты для linux). Но мне показалось более простым сделать так, чтобы делал это сам собирающий ant-скрипт (сценарий?): одно нажатие клавиши и все просходит автоматически…

(версия для windows)

Поэтому я взял скрипт существующий и стал его править. Пришлось столкнуться с несколькими проблемами/хитростями ant’а на windows (опытному в ant’о-строении человеку они конечно нипочем :) ), в результате чего получился рабочий скрипт, выдержки из которого я и разберу ниже.

Вот – файл build.properties. Он содержит некоторые значения, которые возможно будут часто меняться и поэтому лучше хранить их отдельно от ant-срипта.

# имя пакета
war.name = SomeProjectPackage

# путь к JDK
java.home = "C:WorktableJavajdk1.5.0_12"
# путь к корневому каталогу сервера
server.dir = C:/Worktable/Java/apache-tomcat-5.5.25
# скрипт, использующийся для запуска сервера
server.command = catalina.bat

# путь к расположению проекта
root.dir = C:/Workspace/SomeProject
# путь к месту, куда на сервере будет выкладываться пакет
deploy.dir = ${server.dir}/webapps/

# настройки JPDA (удаленнный дебаггинг может осуществляться
# (например, средствами Eclipse) подключением к указанному порту)
jpda.transport = dt_socket
jpda.port = 56666

# путь к библиотекам проекта
lib.dir = ${root.dir}/lib/
# путь к временному месту сборки проекта
dist.dir = ${root.dir}/dist/
# путь к каталогу с веб-содержимым - страницами, скриптами и т.п.
web.dir = ${root.dir}/WebContent/

Теперь по частям рассмотрим сам скрипт. В заголовке – включаем наш файл .properties.

<?xml version="1.0" encoding="UTF-8"?>

    <project name="SomeProject" default="redeploy" basedir=".">
    <property file="build.properties"/>

    . . .

Далее идут цели сборки (build), очистки временных каталогов, использованных при сборке (clean) и цель пересборки – очищающая, а затем собирающая (rebuild). Их подробное рассмотрение не относится к цели статьи :).

    . . .

    <!-- Compiles project with all dependencies. -->

    <target name="build"
            description="--> compiles project with all dependencies">
        <mkdir dir="${dist.dir}"/>
        <mkdir dir="${dist.dir}/classes"/>
        <javac source="1.5"
            srcdir="${root.dir}/src"
            destdir="${dist.dir}/classes"
            debug="on"
            verbose="false"
            optimize="on">
            <classpath>
                <fileset dir="${lib.dir}" includes="**/*.jar"/>
            </classpath>
        </javac>
    </target>

    <!-- Cleans the build. -->

    <target name="clean"
            description="--> cleans the build">
        <delete quiet="true" dir="${dist.dir}"/>
    </target>

    <!-- Rebuild. -->

    <target name="rebuild" depends="clean,build"
            description="--> [clean, build]"/>

    . . .

А вот, собственно, наши подчиненные – цели деплойинга (выкладывания нового пакета на сервер), де-деплойинга (забирания старого пакета с сервера) и пере-деплойинга (забирания старого, а потом выкладывания нового).

При выкладывании (deploy) мы компилируем код (depends="build"), затем создаем на сервере каталог для логов, собираем пакет из скомпилированных исходников (командой jar), выкладывая его во временный каталог, а затем запускаем сервер. Для Windows сервер из ant-скрипта может быть запущен только в своем окружении, для этого приходится вызывать его командой cmd /c catalina.bat jpda start, через команду ant’а exec (аргументы должны быть разделены командами arg именно так, как представлено ниже – для того чтобы exec обернул команду catalina jpda start в кавычки, для ее целостности). Также серверу нужно передать несколько переменных окружения, что мы и делаем, используя команды env. Сервер мы запускаем в отдельном потоке (spawn="true" – иначе скрипт будет ожидать от сервера команды завершения и не будет производить дальнейших действий) и в чистом виде (не через ява-машину – vmlauncher="false"). Сервер запущен, можно выложить туда пакет и удалить временные каталоги и файлы (последовательность команд copy и двух delete).

Для выгрузки пакета с сервера (undeploy) мы останавливаем серевер по правилам, описанным выше (при остановке мы можем не указывать переменные окружения для JPDA и подолждать пока сервер остановится; но если что-то не вышло – это нормально – возможно сервер и не был запущен (failifexecutionfails="false")). Затем мы очищаем каталог на сервере, в которые он распаковывал наш пакет, удаляем сам пакет и очищаем кэш сервера.

При перевыладке (redeploy) – цели по умолчанию – старая версия пакета удаляется с сервера (undeploy), очищаются временные каталоги (clean), и пакет собирается и выкладывается на сервер (deploy).

    . . .

    <!-- Prepares deployment -->

    <target name="pre-deploy">
        <mkdir dir="${dist.dir}/war"/>
        <mkdir dir="${dist.dir}/war/WEB-INF"/>
        <mkdir dir="${dist.dir}/war/WEB-INF/classes"/>
        <mkdir dir="${dist.dir}/war/WEB-INF/lib"/>
        <copy todir="${dist.dir}/war">
            <fileset dir="${web.dir}">
                <include name="**/*.*"/>
            </fileset>
        </copy>
        <copy todir="${dist.dir}/war/WEB-INF/classes">
            <fileset dir="${dist.dir}/classes">
                <include name="**/*.*"/>
            </fileset>
        </copy>
        <copy todir="${dist.dir}/war/WEB-INF/lib" flatten="true">
            <fileset dir="${lib.dir}">
                <include name="**/*.jar"/>
            </fileset>
        </copy>
    </target>

    <!-- Deploys application on server. -->

    <target name="deploy" depends="rebuild, pre-deploy"
            description="--> deploys application on server">
        <mkdir dir="${server.dir}/logs"/>
        <jar jarfile="${war.name}.war" basedir="${dist.dir}/war"/>
        <exec dir="${server.dir}/bin" executable="cmd"
                vmlauncher="false" spawn="true">
            <env key="JAVA_HOME" value="${java.home}"/>
            <env key="JPDA_TRANSPORT" value="${jpda.transport}" />
            <env key="JPDA_ADDRESS" value="${jpda.port}" />
            <env key="CATALINA_HOME" value="${server.dir}"/>
            <arg value="/c" />
            <arg value="${server.command} jpda start"/>
        </exec>

        <copy file="${war.name}.war" todir="${deploy.dir}"/>
        <delete dir="${dist.dir}" failonerror="false" />
        <delete file="${war.name}.war" failonerror="false" />
    </target>

    <!-- Un-deploys application from server. -->

    <target name="undeploy"
            description="--> un-deploys application from server">
        <exec dir="${server.dir}/bin" executable="cmd"
                failifexecutionfails="false" vmlauncher="false">
            <env key="JAVA_HOME" value="${java.home}"/>
            <env key="CATALINA_HOME" value="${server.dir}"/>
            <arg value="/c" />
            <arg value="${server.command} stop"/>
        </exec>

        <delete quiet="true">
            <fileset dir="${deploy.dir}">
                <include name="${war.name}*"/>
            </fileset>
        </delete>

        <delete dir="${deploy.dir}/${war.name}" failonerror="false"/>
        <delete file="${deploy.dir}/${war.name}.war" failonerror="false" />
        <delete dir="${server.dir}/work/Catalina" failonerror="false" />
    </target>

    <!-- Re-deploys application on server. -->

    <target name="redeploy"
            depends="undeploy,clean,deploy"
            description="--> [undeploy,clean,deploy]">
    </target>

    </project>

</xml>

Собственно, все :)

P.S. Теперь основные мои статьи будут уходить, видимо, на realcoding.net. И, скорее всего, это будут циклы статей. Здесь, конечно же, я буду извещать вас о появлении их там.

В предыдущей статье я представил на ваше рассмотрение небольшой кусок кода, который позволяет использовать три столпа ООП в JavaScript. Все это достигается довольно хитро и я, честно признаюсь, пока не слишком хорошо знаю, как это работает (остальное – конечно – знаю :) ) – в комментах меня вывели на чистую воду :). Тем не менее я позволил себе чуточку изменить функцию extend, дабы классы имели понятие о том, что такое статические константы (на самом деле константы конечно получились условные, но это думаю можно оправдать условностью их в самом JavaScript). Здесь я рассмотрю этот вопрос поподробнее и, видимо, буду расширять статью по мере его более глубокого понимания.

Итак, исходные данные (повторюсь, заимствованы из источников на AJAXPath и на AJAXPatterns):

function Class() { };

Class.prototype.construct = function() { };

Class.extend = function(def) {

    var classDef = function() {
        if (arguments[0] !== Class) {
            this.construct.apply(this, arguments);
        }
    };

    var proto = new this(Class);
    var superClass = this.prototype;

    for (var n in def) {
        var item = def[n];
        if (item instanceof Function) item.$ = superClass;
                else classDef[n] = item;
        proto[n] = item;
    }

    classDef.prototype = proto;
    classDef.extend = this.extend;

    return classDef;
};

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

Эти три функции использовались как фундамент ООП-Drag’n'Drop фреймворка для крупного проекта на Java+Wicket. Я бы с удовольствием безвозмездно поделился бы его кодом, но по контракту этот код – собственность компании, а компания не хочет его рассекречивать. По этой причине я могу лишь дать, если нужно, наводящие мысли, наводящие на конкретные мысли :).

Впрочем, ближе к делу. Для такого кода требуется пример. Я наваял тут небольшой скрипт, эмулирующий операционную систему Windows, надеюсь он подойдет:

/* пара вспомогательных функций */

function getInstanceOf(className) {
    // возвращает объект класса по имени класса
    return eval('new ' + className + '()');
}

function pause(millis) // останавливает выполнение
    // скрипта на указанное количество миллисекунд
{
    var time = new Date();
    var curTime = null;
    do { curTime = new Date(); }
        while( curTime - time < millis);
}

/* === Абстрактная Операционная Система === */

var AbstractOS = Class.extend({

    construct: // конструктор, параметр - тип компьютера
        function(computerClassName) {
            // компьютер, на котором запускается ОС
            this._computer = getInstanceOf(computerClassName);
        },

    getComputer: function() { return this._computer; },

    reboot: // перезагрузка ОС
        function() {
            return this.getComputer().shutDown() &&
                     this.getComputer().startUp();
        },

    shutDown: // выключение ОС
        function() { return this.getComputer().shutDown(); },

    startUp: // запуск ОС
        function() { return this.getComputer().startUp(); },

    exec: // абстрактный (условно) метод запуска команды
        function(commandStr) { return false; },

    cycle: // запуск ОС, выполнение команды, отключение ОС
        function(cmdStr) {
            return this.startUp() && this.exec(cmdStr) &&
                                    this.shutDown();
        }

});

/* === Синий Экран Смерти === */

var BSOD = Class.extend({

    launch: // запуск
        function() {
            alert('You see the BSOD');
            return true;
        }

});

/* === Операционная Система MS Windows === */

var MSWindows = AbstractOS.extend({
    // наследуется от абстрактной ОС

    // сообщения - статические константы (условно)
    STARTUP_MSG: 'Windows Starting',
    EXEC_MSG: 'This program has performed an illegal operation',
    REBOOT_MSG: 'Do you really want to reboot your computer?',

    construct: // конструктор, параметр - тип компьютера
        function(computerClassName) {
            // вызов родительского конструктора
            arguments.callee.$.construct.call(this, computerClassName);
            // кэш-е синего экрана смерти (ибо он будет один)
            this._bsod = new BSOD();
        },

    getBSOD: function() { return this._bsod; },

    reboot: // перегруженная перезагрузка
        function() {
            // вывод сообщения
            alert(MSWindows.REBOOT_MSG);
            // вызов родительского метода
            return arguments.callee.$.reboot.call(this);
        },

    shutDown: // перегруженное выключение
        function() {
            // запуск СЭС и, если он удачен - вызов
            // родительского метода. возвращается результат
            // удачности
            return (this.getBSOD().launch() &&
                arguments.callee.$.shutDown.call(this));
        },

    startUp: //  перегруженная загрузка
        function() {
            // если удачно выполнился родительский метод
            if (arguments.callee.$.startUp.call(this)) {
                // выполнить необходимые операции
                pause(400);
                //setTimeout("alert('Windows Starting')", 400);
                // сообщить об удачной загрузке
                alert(MSWindows.STARTUP_MSG);
                return true;
            } else return false; // нет - так нет
        },

    exec: // перегруженное выполнение команды
        function(commandStr) {
            // если команда валидна - выдать результат
            // исполнения, иначе - выключиться
            return commandStr
                ? alert(MSWindows.EXEC_MSG)
                : this.shutDown();
        }

});

/* === Обычный Компьтер === */

var SimpleComputer = Class.extend({

    startUp: // при запуске выводит сообщение
        function() { alert('Starting Up'); return true; },

    shutDown: // при выключении выводит сообщение
        function() { alert('Shutting Down'); return true; }

});

/* проверочная функция */

function perform() {
    // инициируем ОС на обычном компьютере (инсталляция)
    var testOs = new MSWindows('SimpleComputer');
    // запускаем ОС
    testOs.startUp();
    // выполняем банальную команду
    testOs.exec('ls -laF');
    // выключаем ОС
    testOs.shutDown();
}

NB! (не забывайте – после последнего объявления метода в классе запятой ставить не нужно, иначе Ослик (IE) обидится)

Если предыдущий пример вам не понравился – я могу предложить вам довольно полезный класс, который сильно помогает, если в вашем проекте понятие элемента DOM пересекается с понятием объекта, над которым производятся манипуляции:

var ElementWrapper = Class.extend({

    construct:
        function(elementId) {
            this.elementId = elementId;
            this.element = null;
            this._initializeElement();
        },

    _initializeElement:
        function() {
            var docElm = document.getElementById(this.elementId);
            if (!docElm) {
                this.element = document.createElement('div');
                this.element.id = this.elementId;
            } else {
                this.element = docElm;
            }
            this._assignListeners();
        },

    _assignListeners:
        function() {
            . . .
        },

    . . .

    reassignTo:
        function(elementId) {
            this.elementId = elementId;
            this.element = null;
            this._initializeElement();
        }

});

От этого класса очень удобно наследовать классы, расширяющие функциональность элементов DOM. Также, теперь вы можете использовать код типа этого:

var someElement = new ElementWrapper('someElmId');

…и объект someElement будет связан с элементом (оборачивать элемент) с id ‘SomeElmId’. Доступ к нему – как к элементу DOM – можно будет получить через свойство someElement.element.

Приведенный ниже класс наследуется от ElementWrapper и позволяет обращаться с обернутым элементом как с практически полноценным (неполноценным? :) ) графическим объектом (используются некоторые функции из предыдущей статьи: getElmAttr, setElmAttr, findOffsetHeight, getPosition, getAlignedPosition):

var DEF_NS = 'def';

var DEF_LWIDTH_ATTR 	= 'localWidth';
var DEF_LHEIGHT_ATTR 	= 'localHeight';
var DEF_LTOP_ATTR 		= 'localTop';
var DEF_LLEFT_ATTR 		= 'localLeft';

var GraphicalElementWrapper = ElementWrapper.extend({

    _assignListeners:
        function() {
            // do not assign listeners if not required
        },

    setLocalWidth:
        function(localWidth) {
            setElmAttr(this.element, DEF_LWIDTH_ATTR,
                        localWidth + 'px', DEF_NS);
        },

    setLocalHeight:
        function(localHeight) {
            setElmAttr(this.element, DEF_LHEIGHT_ATTR,
                        localHeight + 'px', DEF_NS);
        },

    setLocalLeft:
        function(localLeft) {
            setElmAttr(this.element, DEF_LLEFT_ATTR,
                        localLeft + 'px', DEF_NS);
        },			

    setLocalTop:
        function(localTop) {
            setElmAttr(this.element, DEF_LTOP_ATTR,
                        localTop + 'px', DEF_NS);
        },	

    getLocalWidth:
        function() {
            return getElmAttr(this.element, DEF_LWIDTH_ATTR, DEF_NS);
        },

    getLocalHeight:
        function() {
            return getElmAttr(this.element, DEF_LHEIGHT_ATTR, DEF_NS);
        },		

    getLocalLeft:
        function() {
            return getElmAttr(this.element, DEF_LLEFT_ATTR, DEF_NS);
        },			

    getLocalTop:
        function() {
            return getElmAttr(this.element, DEF_LTOP_ATTR, DEF_NS);
        },

    getOffsetWidth:
        function() {
            return this.element.offsetWidth;
        },

    getOffsetHeight:
        function() {
            return this.element.offsetHeight ||
                     this.element.style.pixelHeight ||
                     findOffsetHeight(this.element);
        },

    show: // отобразить
        function() {
            this.element.style.display    = '';
            this.element.style.visibility = 'visible';
        },

    hide: // спрятать
        function() {
            if (this.element.style.display != 'none') {
                this.element.style.display  = 'none';
            }
        },

    blank: // "забелить"
        function() {
            if (this.element.style.display != '') {
                this.element.style.display    = '';
                this.element.style.visibility = 'hidden';
            }
        },

    makeBlock: // сделать блоком
        function() {
            if (this.element.style.display != 'block') {
                this.element.style.display  = 'block';
            }
        },			

    isPointInside: // опередляет принадлежность точки элементу
        function(curPoint) {
            return (parseInt(this.getLocalLeft()) < curPoint.x) &&
                   (parseInt(this.getLocalTop()) 0 ?
                    parseInt(this.getLocalLeft()) : 0) +
                   parseInt(this.getLocalWidth()))  > curPoint.x) &&
                   (((parseInt(this.getLocalTop())  > 0 ?
                      parseInt(this.getLocalTop())  : 0) +
                     parseInt(this.getLocalHeight())) > curPoint.y);
        },

    isElementNear: // определяет, перекрывает ли другой эл-т
            // текущий своей большей частью
        function(graphicalElement) {
            if (graphicalElement) {
                var elmCurPos = getPosition(graphicalElement.element);
                var elmHalfHeight =
                        parseInt(graphicalElement.getLocalHeight())/2;
                var elmHalfWidth =
                        parseInt(graphicalElement.getLocalWidth())/2;
                var localLeft =
                        (parseInt(this.getLocalLeft()) > 0 ?
                         parseInt(this.getLocalLeft()) : 0);
                var localTop =
                        (parseInt(this.getLocalTop()) > 0 ?
                         parseInt(this.getLocalTop()) : 0);
                var leftCorrect =
                        (elmCurPos.x > (localLeft - elmHalfWidth)) &&
                        (elmCurPos.x  (localTop - elmHalfHeight)) &&
                        (elmCurPos.y < (localTop +
                            parseInt(this.getLocalHeight()) -
                            elmHalfHeight));
                return leftCorrect && topCorrect;
            } else return false;
        },

    recalc: // пересчитывает координаты
        function() {
            var pos = getAlignedPosition(this.element);
            this.setLocalWidth(parseInt(this.getOffsetWidth()));
            this.setLocalHeight(parseInt(this.getOffsetHeight()));
            this.setLocalLeft(pos.x);
            this.setLocalTop(pos.y);
        }

});

Оба этих класса, надеюсь, помогут вам при решении задач, связанных с опознаванием элементов DOM как графических объектов (например, Drag’n'Drop (здесь я наследовал класс перетаскиваемыx нод, классы областей, их содержащих (несколько с разными свойствами, отнаследованных друг от друга) и помощник для перетаскивания – от GraphicElementWrapper, а главный контейнер – от ElementWrapper) или, например, веб-приложение, эмулирующее работу оконного (здесь, когда я этим занимался, я наследовал перетаскиваемые элементы от GraphicElementWrapper, а меню, статусбар, рабочую область – от ElementWrapper).

Как всё это работает – оказывается, непростой вопрос, но я постараюсь через некоторое время уделить внимание и ему, в этой же статье… А пока – кажется всё. Удач в JS-конструировании :).

Ссылки

про это…

• … – по-русски, от Дмитрия Котерова
• … – более поздние впечатления – по-русски, от Дмитрия Котерова и его соратников
• …на AjaxPatterns
• …на AJAXPath
• …на XML.com
• …на WebReference.com
• …на The Code Project
• …на JavaScript Kit
• …на DevArticles
• … – как на этом делать галерею
• …кратко, от Kevin Lindsey
• …кратко, от Dave Johnson
• … – ссылки от Zeroglif