Разработка гостевой книги

JavaServer Faces как фреймворк для веб-приложений, написанных на Java. Знакомство с особенностями разработки гостевой книги с использованием технологий JSF и PrimeFaces. Общая характеристика панели редактирования текста"editor", анализ возможностей.
Краткое сожержание материала:

Размещено на

"Разработка гостевой книги"

фреймворк редактирование гостевой книга

Введение

JavaServer Faces (JSF) -- это фреймворк для веб-приложений, написанный на Java. Он служит для того, чтобы облегчать разработку пользовательских интерфейсов для Java EE-приложений. В отличие от прочих MVC-фреймворков, которые управляются запросами, подход JSF основывается на использовании компонентов. Состояние компонентов пользовательского интерфейса сохраняется когда пользователь запрашивает новую страницу и затем восстанавливается, если запрос повторяется. Для отображения данных обычно используется JSP, Facelets, но JSF можно приспособить и под другие технологии, например XUL.

Технология JavaServer Faces включает:

1. Набор API для представления компонент пользовательского интерфейса (UI) и управления их состоянием, обработкой событий и валидацией вводимой информации, определения навигации, а также поддержку интернационализации (i18n) и доступности (accessibility).

2. Специальная библиотека JSP тегов для выражения интерфейса JSF на JSP странице.

Технология JSF включает в себя пакет PrimeFaces - фреймворк для создания веб-приложений. Гостевая книга -- программное обеспечение (обычно скрипт), применяющееся на веб-сайтах и позволяющее их посетителям оставлять различные пожелания, замечания, краткие заметки, адресованные владельцу или будущим посетителям. В связи с этим, гостевая книга представляет собой максимально упрощённый вариант веб-форума. Минимальный набор функционала для гостевой книги -- возможность оставлять сообщения. Современные гостевые книги обладают широкими возможностями: начиная от элементарной модерации сообщений и заканчивая полнофункциональными поисковыми системами и визуальными текстовыми редакторами сообщений. Цель: Разработать гостевую книгу с испоьзованием технологий JSF и PrimeFaces.

1.Теоретическая часть

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

Средой разработки будет IDE Netbeans. Основной язык разработки - java. Также нам понадобятся пакеты JSF и PrimeFaces. Веб-приложение будет развернуто на сервере GlassFish, который входит в пакет установки Netbeans. Для хранения необходимой информации воспользуемся СУБД MySQL и инструментом PHP MyAdmin.

2.Практическая часть

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

1. Веб-страницы - интернет страницы формата xhtml, содержащие основной html-код, код подключения элементов JSF и Primefaces, а также java-код, необходимый для подключения к исходным файлам проекта, написанным на языке java.

2. Файлы исходного кода проекта - файлы разрешения .java, содержащие основной java-код. Это так называемые «бины» - файлы для обращения к веб-страницам проекта, файлы для подключения к базе данных и файлы-классы для инициализации необходимых нам объектов.

3. База данных MySQL, содержащая необходимую нам информацию.

Все веб-страницы, написанные для данного приложения являются клиентами двух основных шаблонов - template.xhtml (рисунок 1), temp.xhtml(рисунок 2), необходимые для отображения веб-страниц незарегистрированным и зарегистрированным пользователям соответственно.

Рисунок 1 - Клиент шаблона template.xhtml

Рисунок 2 - Клиент шаблона temp.xhtml

Основным различием этих шаблонов является наличие поля редактирования текста во втором шаблоне. Данное поле является элементом «editor» (Рисунок 3) библиотеки PrimeFaces.



Рисунок 3 - Панель редактирования текста «editor»

фреймворк редактирование гостевой книга

Еще одним различием является наличие у зарегистрированных пользователей клиентской панели, на которой показана дата регистрации пользователя, а также ссылка на страницу редактирования личных данных.

Рисунок 4 - Клиентская панель

Шаблон template.xhtml разделен на три блока(div). Первый блок содержит две панель с логотипом (Рисунок 5). Второй - блок с клиентской панелью(панелью авторизации) (Рисунок 4). Третий блок содержит основной контент (Рисунок 6).



Рисунок 5 - Шапка приложения

Рисунок 6 - Основной контент

Основной контент приложения выводится на страницу с помощбю элемента «DataGrid» библиотеки primefaces(Рисунок 6).

3.Структура приложения

При запуске приложения мы попадаем на главную страницу - index.xhtml(Рисунок 14).

Рисунок 14 - Главная страница приложения

Как описывалось выше в верхней части страницы расположен логотип приложени. Основную часть страницы занимает выводимый на экран посредством элемента «DataGrid». Информация берется из таблицы messages базы данных guestbook, подключение к котрой происходит с помощью классов MySQLCon.java и SqlAction.java пакета sql нашего приложения.

Перейдя по ссылке «Регистрация» мы попадем на страницу заполнения полей, необходимых для регистрации на данном веб-приложении. Заполнив все необходимые поля, мы увидим сообщение, что регистрация прошла успешно и мы можем авторизоваться. При регистрации все данные о пользователе, полученные после заполнения полей загружаются в таблицу users базы данных guestbook. Заметим, что пароль здесь хранится не в явном виде. С помощью функции hashcode класса String мы хешируем пароль и помещяем в базу данных уже хеш нашего пароля.

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

Пройдя по ссылке «Профиль», находящейся в левой(клиентской)

Части приложения мы попадем на страницу редактирования личных данных (Имя, фамилия, email и т.д.). Внеся необходимые изменения и нажав кнопку «Сохранить изменения» соответствующие поля будут перезаписаны в таблице users базы данных guestbook.

Заключение

Нам удалось реализовать веб-приложение - гостевую книгу с использованием технологий JSF и PrimeFaces, содержащее различные элементы данных технологий. Интерфейс приложения интуитивно понятен и прост.

Приложение 1

Листинг программы

Содержимое temp.xhtml

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://xmlns.jcp.org/jsf/facelets"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:p="http://primefaces.org/ui">

<h:head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<h:outputStylesheet name="./css/default.css"/>

<h:outputStylesheet name="./css/cssLayout.css"/>

<title>GuestBook</title>

</h:head>

<h:body style="width: 900px; margin-left: 15%; margin-right: 15%; background-image: url(images/template/bkg.jpg); background-attachment: fixed" >

<div id="top" style="background-color: rgba(0,0,0,0)">

<h:form>

<p:panel>

<p:commandLink action="logindex" ajax="false" style="margin: -10px">

<p:graphicImage value="images/template/gb.png" style="border-width: 3px; border-radius: 5px; width: 875px"/>

</p:commandLink>

</p:panel>

</h:form>

</div>

<div id="left" style="width: 182px; background-color: rgba(0,0,0,0)">

<h:form id="loginForm" >

<center>

<p:panel header="Добро пожаловать!">

<p:growl id="msg" showDetail="true" life="3000" />

<h:panelGrid id="loginPanel" columns="1">

<p:panel header="Привет, #{loginBean.authUser.uname}!" style="margin-left: -8px">

<center>

<p:graphicImage value="#{loginBean.authUser.avatar}" height="105" width="...