Разработка клиентского приложения в виде набора Web-страниц
Для размещения Web-страниц используется программа Web-сервер. Для доступа к информации, хранящейся на Web-сервере, используют клиентская программа - браузер (Microsoft Internet Explorer Browser). Каждая страница имеет универсальный адрес ресурса (Universal Resource Locator - URL). Когда пользователь указывает браузеру адрес URL страницы, она начинает загружаться с сервера.
Различают пассивные и активные Web-серверы. Если страницы сервера содержат только статическую информацию, то сервер называется пассивным. Если же страницы сервера ведут себя аналогично окнам обычных интерактивных приложений, вступая в диалог с пользователем, то сервер называется активным.
Рассмотрим технологию разработки активных серверных страниц JSP при использовании активного Web-сервера. Применение этой технологии предполагает размещение на Web-сервере (в качестве такого сервера выступает Apache Tomcat) текстовых файлов с расширением .jsp, содержащих теги языка HTML, и сценарии, составленные на языке Java.
Активные страницы JSP выполняют обработку данных, введенных пользователями, при помощи форм, обращаясь при необходимости к базам данных через вызов методов классов пакета SQL Java.
Когда пользователь обращается к странице JSP, Web - сервер интерпретирует расположенный в ней сценарий. При этом анализируются параметры, переданные этой странице. Далее страница модифицируется, а затем отправляется обратно пользователю.
Некоторая часть активности может происходить на стороне клиента (например, контроль ввода значений в формах). Это делается с помощью функций Java.
11.1. Взаимодействие Internet-браузера с Web-сервером
Убедиться, что Tomcat активен.
Вызов Internet Explore.
Вызов страницы http://ip адрес сервера:8080. При этом появится основная страница tomcat:
Для доступа к дереву каталога страниц следует выбрать пункт меню Tomcat Manager. Будет запрашиваться пароль Tomcat:
Имя пользователя – admin.
Пароль – admin.
Появится окно:
Для каждого Web-приложения создается папка определенной структуры.
Чтобы создать такую папку, необходимо с помощью команды
jar -cvf имя папки.war *
создать файл имя папки.war, имя этого файла вставить в диалог
и нажать кнопку Deploy.
При этом в каталоге /Program Files/Apache Tomcat/webapps появится папка с указанным именем, в которую можно добавлять свои файлы с расширениями .htm и .jsp. В этой папке будет создан каталог WEB-INF, в подпапке которой classes можно размещать собственные классы Java, а в подпапке lib – архивы .jar
11.2. Разработка html-страниц
HTML-страница – это совокупность тегов.
Комментарии в HTML вставляются в пару тегов:
<!-- текст комментария
-->
HTML понимает следующие теги:
<html> … </html> документ,
<head> … </head> заголовок страницы,
<body> … </body> тело страницы,
Внутри тега <head> может располагаться тег,
<title> … </title> название документа; он выводится в строке заголовка.
Внутри тега <body> могут располагаться теги:
<p> ….</p> Параграф (внутри него может быть гег <br> - перенос строки)
<img> рисунок.
Параметры:
src=URL файла с рисунком,
title=строка с текстом подсказки, появляющейся при наведении на ссылку на странице,
width=ширина рисунка,
height=высота рисунка.
Пример:
<img src="../images/Delete.gif" title="Удаление" WIDTH="20" HEIGHT="20">
<a> ….</a> ссылка на другую страницу.
Параметры: href задает адрес страницы, на которую следует перейти. Вслед за этим адресом могут задаваться параметры, передаваемые указанной странице, в форме:
Имя параметра=значение параметра,…
Пример
<html> <body>
<a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br>
<a href=tip.html>Как сделать такое же фото?</a>
</body> </html>
Использование фреймов. Техника использования фреймов заключается в том, что все окно броузера делится на несколько областей, в каждую из которых можно загрузить независимую страничку. Кроме этого, был введен механизм, позволяющий управлять любой страничкой из любого окна. Например, можно в одном окне организовать меню сайта, а в другом показывать его содержимое. Причем, щелчок по ссылке в окне меню открывал страничку совсем в другом окне. Такое построение сайта встречается чаще всего.
Любая страничка, содержащая фреймы, начинается с написания специальной странички-контейнера, которая сама не показывается, но содержит в себе указания для организации фреймовой структуры и ссылок на участвующие файлы. Вот как она выглядит:
index.htm - страничка контейнер:
<html>
<head>
<title>Frame page</title>
</head>
<frameset cols="160,*">
<frame src="left.htm" name="menu" scrolling=no noresize>
<frame src="right.htm" name="content" scrolling=no noresize>
</frameset>
<noframes>
<p>Ваш броузер не поддерживает фреймы, пожалуйста, обновите его.</p>
</noframes>
</html>
Напишем код для страничек, входящих в фреймовую структуру.
left.htm - страничка, содержащая меню:
<html>
<head>
<title>Menu page</title>
</head>
<body>
<a href="topic_1.htm" target="content">topic #1</a><br>
<a href="topic_2.htm" target="content">topic #2</a><br>
<a href="topic_3.htm" target="content">topic #3</a><br>
<a href="topic_4.htm" target="content">topic #4</a><br>
</body>
</html>
right.htm - страничка, в которой будут отображаться основное содержание сайта:
<html>
<head>
<title>Content page</title>
</head>
<body>
<p>Эта страничка будет грузиться по умолчанию, и на ней обычно размещают приветственный текст.</p>
</body>
</html>
Как можно заметить, страничка-контейнер отличается от обычной лишь тем, что вместо тега <body> используется тег <frameset>, в котором непосредственно и определяются фреймы. Но сам по себе он описывает лишь количество и размеры фреймов и не описывает странички, входящие во фрейм. Это можно сделать при помощи тега <frame>.
В параметре тега <frameset> определяем, что страничка будет разделена по вертикали и состоять из двух колонок (если нам нужно разделить окно по горизонтали, то тогда вместо параметра cols нужно применять параметр rows).
В принципе, колонок может быть и больше, чем две. Их количество определяется значением параметра cols (rows), которое представляет собой цифры и знаки, разделенные запятыми. Каждое значение определяет ширину колонки. Ширина, как, впрочем, и высота, может задаваться в процентах, пикселах и при помощи знака звездочки, обозначающей "все оставшееся пространство". Вот примеры определения фреймов:
<frameset cols="200,*"> - 2 колонки, одна из которых имеет фиксированную ширину в 200 пикселей.
<frameset rows="25%, 50%, 25%"> - 3 строчки, высоты которых определены в процентах от высоты окна браузера.
<frameset rows="*, 2* ,*"> - то же самое, что и предыдущая строчка, но записанная при помощи звездочек. Цифра перед звездочкой указывает количество повторов. Ширина одной звездочки определяется как среднее арифметическое между всеми звездочками в строке с учетом коэффициентов перед ними.
Как сказано выше, тег <frameset> является контейнером, и в качестве его элементов должны быть написаны строчки для каждой колонки (строки) при помощи тега <frame>. Вот пример описания:
<frame src="left.htm" name="menu" scrolling=no noresize>
Параметры:
src - URL странички, которая будет помещена во фрейм
name - имя странички, по которому к ней можно будет обращаться.
Обратите внимание на параметр name . Он является очень важным и позволяет нам манипулировать с фреймом. Как же это осуществляется? Внимательно рассмотрим файл left.htm, в котором содержится наше меню. В самом файле нет ничего необычного, а вот в написании ссылок на странички есть. Если присмотреться, то можно заметить, что добавился еще один параметр target="content" - вот именно он и отвечает за то, в каком окне будет загружаться файл по ссылке:
<a href="topic_1.htm" target="content">topic #1</a>
В качестве значения параметра указывается то самое имя, которое мы присвоили нашему фрейму. Таким образом, мы можем открыть любую ссылку из любого окна и в любом окне. Достаточно лишь знать его имя.
До сих пор в качестве элементов контейнера <frameset> мы использовали простые теги <frame>, но мы также можем использовать и контейнер <frameset>. В этом случае мы получаем так называемые вложенные фреймы. Вот пример:
<frameset rows="40,*">
<frame src="up.htm" name="logo" scrolling=no noresize>
<frameset cols="160,*">
<frame src="left.htm" name="menu" scrolling=no noresize>
<frame src="right.htm" name="content" scrolling=no noresize>
</frameset>
</frameset>
В данном случае определены три фрейма: один горизонтальный вверху (который мы можем использовать, например, как логотип) и два вертикальных (которые разделили второй горизонтальный фрейм).
В общем случае можно использовать сколько угодно фреймов (в пределах разумного, конечно).
Рамку фрейма можно убрать, указав параметр frameborder=0.
Таблицы. Тег <TABLE> … </TABLE> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD?
Тег <TR> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <TD>.
Тег <TD> предназначен для создания одной ячейки таблицы.
Параметры:
align Задает выравнивание таблицы по краю окна браузера.
<table align=left | center | right>
background задает фоновый рисунок в таблице.
<table background=URL>
bgcolor задает цвет фона таблицы.
<table bgcolor=цвет>
border задает ширину рамки таблицы (в пикселах) Ширина, равная 0, означает отсутствие рамки
<table border=число>
Значение цвета можно задавать двумя способами:
1.По его названию. Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению. Обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF.
cols — число колонок в таблице.
Параметр cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого параметра таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование параметра cols позволяет несколько ускорить отображение содержимого таблицы.
<table cols=число>
height — высота таблицы.
Устанавливает высоту таблицы.
<table height=значение>
width — ширина таблицы.
Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.
<table width=значение>
Тег TR. Тег TR служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега TH или TD.
<table> <tr>...</tr> </table>
Закрывающий тег не обязателен.
Параметры
align выравнивание текста в строке.
bgcolor цвет фона ячеек в строке.
valign — выравнивание содержимого ячейки по вертикали.
Устанавливает вертикальное выравнивание содержимого ячеек в строке. По умолчанию содержимое ячейки располагается по ее вертикали в центре.
<tr valign=top | middle | bottom | baseline>
Пример
<html> <body> <table width=100% border=0 cellpadding=4>
<tr align=right valign=top>
<td><img src=/images/book.gif width=37 height=26></td>
<td>Lorem ipsum dolor sit amet...</td>
</tr> </table>
</body> </html>
Тег HR. Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
Параметры
align определяет выравнивание линии.
color цвет линии. <hr color=цвет>
noshade рисует линию без трехмерных эффектов.
size толщина линии. <hr size=число>
width — ширина линии. <hr width=число>