Цель работы. Познакомиться с технологией JSF (Java Server Faces).
Краткое теоретическое содержание. Java Server Faces – это современная сетевая технология, которая в отличие от web-сервисов предоставляет визуальный интерфейс серверного приложения. Создаем web-приложение на базе JSF. Назовем его JSF_LAB. Добавляем в web-приложение managed bean (управляемый компонент). С этой целью щелкаем правой кнопкой мыши на узле Пакеты исходных файлов дерева проекта и выбираем пункты Создать и Управляемый компонент JSF. Изменяем его текст следующим образом:
package com;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class mancomp {
/**
* Creates a new instance of mancomp
*/
private String input;
private String output;
public mancomp() {
};
public String getAnswer(String x) {
return "Hello from JSF "+x;
}
public void submit() {
// handle form submission
output = "You Are Welcome!!!"+input;
}
public String getInput() {
return input;
}
public void setInput(String input) {
this.input = input;
}
public String getOutput() {
return output;
}
public void setOutput(String output) {
this.output = output;
}
}
Видим, что бин дает доступ к скрытым членам с именами input, output.
В файле index.xhtml пишем:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:h="https://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h2> Current Lesson on JFACE</h2>
<h:form>
<h:graphicImage value="my.png"/>
<br>
<h:inputText value="#{mancomp.input}" />
</br>
<br>
<h:commandButton value="Submit" action="#{mancomp.submit}">
</h:commandButton>
</br>
<br>
<h:outputText value="#{mancomp.output}" />
</br>
</h:form>
</h:body>
</html>
Теперь у нас есть
· картинка:
<h:graphicImage value="my.png"/>
· входное текстовое поле:
<h:inputText value="#{mancomp.input}" />
· выходное текстовое поле:
<h:outputText value="#{mancomp.output}" />
· и кнопка:
<h:commandButton value="Submit" action="#{mancomp.submit}">
</h:commandButton>
Запустим проект на выполнение. Результат будет таким (рисунок 1)
Рисунок 1. Скриншот с окном приложения JSF
Обратимся теперь к работе с таблицей данных. Мы хотим получить приложение, отображающее таблицу с данными, как показано на скриншоте на рисунке 2
Рисунок 2. Вывод информации из персистентного класса
Нам понадобится персистентный класс Employee.java для хранения структуры базы данных. Вот его текст:
package com;
public class Employee {
private String name;
private String department;
private String address;
privatedouble wage;
private boolean canEdit;
public Employee (String name, String department,String address,double wage){
this.name = name;
this.department = department;
this.address = address;
this.wage= wage;
canEdit = false;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
public String getAddress() {
return address;
}
public void setAge(String address) {
this.address = address;
}
public double getWage() {
return wage;
}
public void setWage(double wage) {
this.wage = wage;
}
public boolean isCanEdit() {
return canEdit;
}
public void setCanEdit(boolean canEdit) {
this.canEdit = canEdit;
}
}
Теперь перепишем боб следующим образом
package com;
import javax.ejb.Stateless;
import java.util.*;
import java.io.Serializable;
@Stateless
public class EJB_LAB implements EJB_LABRemote, Serializable {
private static final long serialVersionUID = 1L;
private String fio;
private String department;
private String group;
private static final ArrayList<Employee> employees
= new ArrayList<Employee>(Arrays.asList(
new Employee("ivanov", "Marketing", "10"),
new Employee("petrov", "Marketing", "10"),
new Employee("sidorov", "Professor", "12"),
new Employee("mishin", "Smith", "12"),
new Employee("vasin", "Programmer", "14")
));
@Override
public String getEmployeeInfo(String fio) {
return null;
}
public String addEmployee() {
Employee std =
new Employee(fio,department,group);
employees.add(std);
return null;
}
public String deleteEmployee(Student em) {
employees.remove(em);
return null;
}
public String getFio() {
return fio;
}
public void setName(String fio) {
this.fio = fio;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
public String getGroup() {
return group;
}
public void setGroup(String group) {
this.group = group;
}
}
В этом классе описаны поля таблицы
private String fio;
private String department;
private String group;
и методы доступа к ним (set/get).
Смысл помещенного выше текста легко понять из описания управляемого бина (managed bean) в лекционном курсе. Данный бин содержит все необходимые методы для работы с таблицей из сайта. Текст сайта теперь имеет такой вид:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
>
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h2> Current Lesson on JFACE</h2>
<h2>Data example</h2>
<h:form>
<h:dataTable value="#{mancomp.employees}" var="employee">
<h:column>
<f:facet name="header">Name</f:facet>
#{employee.name}
</h:column>
<h:column>
<f:facet name="header">Department</f:facet>
#{employee.department}
</h:column>
<h:column>
<f:facet name="header">Address</f:facet>
#{employee.address}
</h:column>
<h:column>
<f:facet name="header">Wage</f:facet>
#{employee.wage}
</h:column>
</h:dataTable>
</h:form>
</h:body>
</html>
Таблица вставляется таким образом:
<h:dataTable value="#{mancomp.employees}" var="employee">
Данные в таблицу поставляются из коллекции
ArrayList<Employee> employees.
Каждый столбец таблицы представлен заголовком, например
<f:facet name="header">Address</f:facet>
и содержимым
<h:column>
#{employee.address}
</h:column>.
Задание
Завершите приложение работоспособной программой, в которую cледует добавить текстовые поля и кнопки для ввода новых значений в таблицу employee и удаления записей из таблицы. Если работа выполнена досрочно, то реализуйте дополнительно поиск информации по фамилии работника.
Контрольные вопросы.
1. Что такое управляемый компонент (бин), как он связывается с главным сайтом (jsp)?
2. Объясните структуру сайта index.jsp и назначение использованных в нем элементов.
3. Каким образом выполняется привязка полей класса к столбцам таблицы?