17 сентября, 2007

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

Сначала рассмотрим клиентскую часть. Для нашего приложения нужна одна html страница с формой для ввода данных (назовем ее index.html) и файл с JavaScript функцией (scripts.js), которая будет отправлять запрос и обновлять страницу. Кроме того, что бы немного улучшить дизайн мы добавим таблицу стилей (styles.css). Такой подход позволяет убрать все правила оформления в отдельный файл и не загромождать ими html страницу.

Теперь посмотрим разметку в файле index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>Проверка регулярных выражений</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="prototype.js" type="text/javascript"></script>
<script src="scripts.js" type="text/javascript"></script>
</head>
<body>
<p class="title">Тестирование регулярных выражений</p>
<form id="expForm" action="#" method="post">
<p>
<label for="regexp">Регулярное выражение</label>
<input type="text" name="regexp" id="regexp" class="txt"
value="/(d{1,3})-?([d-]+)/" />
</p>
<p>
<label for="searchText">Текст</label>
<textarea name="searchText" id="searchText" rows="10" class="txt">
525-11-65 346-1-346</textarea>
</p>
<p>
<label for="case">Учитывать регистр</label>
<input type="checkbox" name="case" id="case" checked="checked" />
</p>
<p>
<input type="button" name="search" id="search" value="Поиск"
onClick="analyseText()" class="btn" />
</p>
<p class="comment">Примечание: необходимо ввести Perl-совместимое
регулярное выражение (например, "/[abc]+$/") и текст, в котором
нужно выполнить поиск по этому выражению. Подробнее почитать о
правилах составлении регулярных выражений можно
<a href="http://www.php.net/manual/ru/ref.pcre.php">здесь</a>.</p>
</form>
<div id="results">
Для анализа текста с помощью регулярного выражения нажмите кнопку "Поиск"
</div>
<div id="footer">
<p><a href="http://www.simplecoding.org">Почитать описание</a></p>
<p><a href="http://www.simplecoding.org">Автор: Стаценко Владимир</a></p>
</div>
</body>
</html>

Как видите, все довольно просто. В первую очередь мы указываем тип документа, его кодировку, заголовок страницы и т.п. В строке 7 мы подключаем таблицу стилей, а в строках 8 и 9 – библиотеку для работы с JavaScript и нашу функцию, которая выполняет Ajax запрос. В нашем приложении мы используем одну из самых лучших JS библиотек – prototype. Использование библиотеки немного увеличивает время первоначальной загрузки страницы (т.к. будет загружаться файл prototype.js), но позволяет значительно упростить работу с Ajax (и не только с ним). Описание этой библиотеки естественно выходит далеко за рамки этой статьи, поэтому я остановлюсь только на тех компонентах, которые мы будем использовать. Подробнее узнать о prototype можно на сайте www.prototypejs.org или из многочисленных статей.

Вернемся к нашей странице. Она условно разделена на 4 части: заголовок (между тегами <p class="title"> и </p>), форма для ввода данных (<form id="expForm"…> и </form>), результаты поиска (<div id="results">) и хвостовик со ссылками (<div id="footer">).

Обратите внимание, что все поля формы содержат значения по умолчанию, отсутствует поле "submit", а параметр action="#". Т.е. сама форма данные никуда не отправляет. Отправку запроса выполняет функция analyseText() при нажатии на кнопку "Поиск" (событие onClick, строка 30).
Сама функция находится в файле scripts.js:

function analyseText() {
//читаем значения введенные в поля
var e = $('regexp').value;
var t = $('searchText').value;
var c = $('case').checked;
//формируем строку с параметрами запроса
var pars = $H({exp:e, text:t, textcase:c}).toQueryString();
//отправляем ajax запрос
new Ajax.Updater("results", "analyser.php", {method:"post", parameters:pars});
}

Теперь разберем работу функции. Использование prototype позволило сократить код до минимума. Сначала мы читаем данные, введенные в поля формы, формируем хеш-таблицу и преобразуем ее в строку с параметрами запроса (строки 3-7). Затем мы создаем объект Ajax.Updater который отправляет запрос серверу, читает результат и вставляет его между тегами <div id="results">…</div>

Первый параметр, который указывается при создании объекта это id блока в который будет вставлен результат запроса. В следующем параметре мы указываем тип запроса ("post"), а в последнем – строку с параметрами.

На таблице стилей я подробно останавливаться не буду. Дизайн нашего приложения очень простой. С помощью цвета и рамок выделены 3 основные раздела сайта (форма, блок с результатами и «хвостовик»).

body {
background-color: #EDEDED;
margin: 0;
padding: 2em 2em 2em 2em;
}
p.title {
color: #734600;
text-align: center;
font-family: Tahoma, sans-serif;
font-size: 140%;
}
#expForm {
color: #126000;
font-family: Verdana, sans-serif;
font-size: 90%;
font-weight: bold;
border: solid 1px #000;
margin: 0;
padding: 1em 1em 1em 1em;
background-color: #FCFCDB;
}
#expForm .txt {
width: 400px;
}
#expForm p {
clear: both;
}
#expForm p.comment {
font-size: 80%;
font-weight: normal;
padding: 0 1em 0 1em;
color: grey;
font-family: Verdana, sans-serif;
}
#expForm p label {
float: left;
width: 25%;
}
#expForm .btn {
margin: 0 0 0 25%;
border: solid 1px #126000;
font-size: 120%;
font-family: Tahoma, sans-serif;
color: #126000;
}
#results {
margin: 2em 0 0 0;
padding: 1em 1em 1em 1em;
border: solid 1px #000;
background-color: #DFFFD8;
font-size: 90%;
font-family: Tahoma, sans-serif;
color: #472A01;
}
.bold {
font-weight: bold;
}
#footer {
border: solid 1px #000;
background-color: #F7E7EB;
font-size: 100%;
font-family: Verdana, sans-serif;
margin: 2em 0 0 0;
padding: 0.5em 0.5em 0.5em 0.5em;
}
#footer p {
text-align: center;
font-size: 90%;
margin: 0;
padding: 0;
}
#footer p a {
text-decoration: none;
}
#footer p a:hover {
color: #ff0000;
}

Единственный момент, на который стоит обратить внимание – это расстановка элементов формы. Для того, чтобы расположить элементы формы в две колонки с фиксированной шириной мы для каждого элемента label устанавливаем директиву float: left (стр 42), которая "вырывает" элемент из потока документа и смещает его влево. При этом следующий элемент будет обтекать label справа. Директива clear: both, установленная для каждого тега <p> (стр 30), восстанавливает нормальный поток элементов в документе. Таким образом, каждый следующий параграф будет расположен под предыдущим.

Все. Клиентская часть нашего приложения закончена.
В следующий раз мы напишем серверную часть нашего приложения.

Посмотреть работающее приложение можно здесь.

Постовой

Продажа недвижимости в Москве

Понравилась статья? Подпишитесь на продолжение !