Skip to content

6. Приклад 05 — Форма введення даних

На простому прикладі ми ознайомимося з поняттям форми введення даних.

6.1. Проєкт NetBeans

У [1] проект:

  • види [Saisie.JSP], [Confirmation.JSP]
  • файл конфігурації [struts.xml]
  • файл повідомлень [messages.properties]
  • дія [Confirmer.java]

У [2] — сторінка введення даних

6.2. Configuration

Файл [struts.xml] має такий вигляд:


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
        "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
  <!-- інтернаціоналізація -->
  <constant name="struts.custom.i18n.resources" value="messages" />
  <!-- пакет за замовчуванням -->
  <package name="default" namespace="/" extends="struts-default">
    <default-action-ref name="index" />
    <action name="index">
      <result type="redirectAction">
        <param name="actionName">Saisir</param>
        <param name="namespace">/actions</param>
      </result>
    </action>
  </package>
  <!-- пакет дій -->
  <package name="actions" namespace="/actions" extends="struts-default">
    <action name="Saisir">
      <result name="success">/vues/Saisie.JSP</result>
    </action>
    <action name="Confirmer" class="actions.Confirmer">
      <result name="success">/vues/Confirmation.JSP</result>
    </action>  
  </package>
</struts>
  • рядок 20: пакет дій URL /actions/Action.
  • рядки 21–23: визначають дію [Saisir]. До неї не прив’язано жодного класу. Відповіддю завжди є представлення [/vues/Saisie.JSP]
  • рядки 24–26: визначають дію [Confirmer]. Їй прив’язано клас [actions.Confirmer]. Відповіддю завжди є представлення [/vues/Confirmation.JSP]

6.3. Дія [Confirmer]

Її код такий:


package actions;

import com.opensymphony.xwork2.ActionSupport;

public class Confirmer extends ActionSupport{
  
  // модель
  private String nom;
  
  // методи getter та setter

  public String getNom() {
    return nom;
  }

  public void setNom(String nom) {
    this.nom = nom;
  }
  
}

Клас має лише одне поле — у рядку 8 із відповідними методами get та set.

6.4. Файл повідомлень

Вміст файлу [messages.properties] такий:


saisie.texte=Formulaire de saisie
saisie.titre1=Saisie
saisie.titre2=Saisie
saisie.libelle=Tapez votre nom
saisie.valider=Valider
confirm.titre1=Confirmation
confirm.titre2=Confirmation
confirm.texte=Bonjour
confirm.retour=Retour au formulaire de saisie

Ці ключі повідомлень використовуються в обох поданнях [Saisie.JSP] та [Confirmation.JSP].

6.5. Види

6.5.1. Вигляд [Saisie.JSP]

Візуально виглядає так:

Його вихідний код такий:


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title><s:text name="saisie.titre1"/></title>
  </head>
  <body>
    <h1><s:text name="saisie.titre2"/></h1>
    <s:form action="Confirmer">
      <s:textfield key="saisie.libelle" name="nom"/>
      <s:submit key="saisie.valider" action="Confirmer"/>
    </s:form>
  </body>
</html>
  • рядок 7: відображає повідомлення про ключ saisie.titre1 (Введення) [1].
  • рядок 10: відображає повідомлення про ключ saisie.titre2 (Введення) [2].
  • рядки 11, 14: тег <s:form> вводить HTML-форму. Усі дані, введені в цю форму, будуть надіслані на веб-сервер. Кажуть, що вони є postées, оскільки операція Http, яка бере участь у цій передачі даних на сервер, називається POST. Дані надсилаються у вигляді символьного рядка param1=valeur1&param2=valeur2&... Ми вже зустрічали цей рядок у розділі 3.5 у прикладі 02. В обох випадках рядок параметрів обробляється Struts 2 однаково. Значення valeuri параметрів parami вставляються у виконувану дію в поля, що мають ті самі імена, що й параметри parami. Кому надсилаються дані, відправлені методом POST? За замовчуванням — до дії, яка відобразила форму, у даному випадку до дії Saisir [5]. Також можна використати атрибут action, щоб вказати іншу дію, у даному випадку дію [Confirmer].
  • рядок 12: тег <s:textfield ...> відображає поле введення [3]. Його атрибут key вказує на ключ назви, яку слід відобразити ліворуч від поля введення. Отже, напис шукається у файлі [messages.properties]. Атрибут name — це ім’я параметра, який буде відправлено. Значенням цього параметра стане текст, введений у поле введення.
  • рядок 13: тег <s:submit ...> відображає кнопку [4]. Її атрибут key позначає ключ назви, яку потрібно відобразити на кнопці. Отже, текст кнопки шукається у файлі [messages.properties]. Кнопка типу submit ініціює перехід форми до дії POST. Вище ми зазначали, що цією дією є [Confirmer] завдяки атрибуту action тегу <s:form>. Атрибут action тегу <s:submit> дозволяє, за необхідності, вказати іншу дію. Тут ми вказали дію [Confirmer]. Кнопка має ім’я параметра за замовчуванням: action:nom_action, у даному випадку — action:Confirmer. Значенням, пов’язаним із цим параметром, є текст кнопки. У підсумку рядок параметрів, що надсилається до дії [Confirmer], коли користувач натисне на кнопку [Valider], буде таким:

?nom=xx&action:Confirmer=Valider.

де xx — це текст, введений користувачем у поле введення.

6.5.2. Вигляд [Confirmation.JSP]

Візуально виглядає так:

Ми вводимо ім’я та підтверджуємо сторінку введення. Після цього отримуємо відповідь [1], яка відповідає вигляду [Confirmation.JSP]. URL, що відображається в [2], відповідає дії [Confirmer]. У наведеному вище прикладі було надіслано такий рядок:

nom=bernard&action:Confirmer=Valider

Параметр action:Confirmer дозволяє Struts 2 спрямувати запит до потрібної дії, в даному випадку — до дії [Confirmer]. Значення параметра nom буде вставлено у поле nom дії [Confirmer].

Вихідний код дії [Confirmation.JSP] має такий вигляд:


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title><s:text name="confirm.titre1"/></title>
  </head>
  <body>
    <h1><s:text name="confirm.titre2"/></h1>
    <s:text name="confirm.texte"/>&nbsp;
    <s:property value="nom"/> !
    <br/><br/>
    <a href="<s:url action="Saisir"/>"><s:text name="confirm.retour"/></a>
  </body>
</html>
  • рядок 7: відображає назву ключа confirm.titre1, знайденого у файлі повідомлень [1]
  • рядок 10: відображає назву ключа confirm.titre2, знайденого у файлі повідомлень [3]
  • рядок 12: відображає властивість nom дії [Confirmer], яка була виконана.
  • рядок 14: створює посилання на дію [Saisir]. Тег <s:url>,, який вже зустрічався, буде згенеровано на основі URL та [2] браузера. Шлях буде таким, як у [2] http://localhost:8084/exemple-05/actions, а дія — такою, як у атрибуті action, у даному випадку Saisir. Отже, URL посилання буде http://localhost:8084/exemple-05/actions/Saisir.action. Текстом посилання буде назва, пов’язана з ключем confirm.retour [4].

6.6. Тести

Ось два запити:

У [1] вводимо ім’я та натискаємо «Підтвердити». У [2] — сторінка підтвердження.

У [3] переходимо за посиланням назад до форми. У [4] — результат. Все було пояснено, крім переходу від [3] до [4]. Чому в [4] немає імені, яке ми ввели?

Посилання в [3] веде до URL [http://localhost:8084/exemple-05/actions/Saisir.action]. Отже, дія [Saisir] виконана. Давайте розглянемо її конфігурацію в [struts.xml]:


<package name="actions" namespace="/actions" extends="struts-default">
    <action name="Saisir">
      <result name="success">/vues/Saisie.JSP</result>
    </action>
    <action name="Confirmer" class="actions.Confirmer">
      <result name="success">/vues/Confirmation.JSP</result>
    </action>  
</package>

Дія [Saisir] не пов’язана з жодною дією. Тому одразу відображається подання [Saisie.JSP]. Розглянемо код цього подання:


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title><s:text name="saisie.titre1"/></title>
  </head>
  <body>
    <h1><s:text name="saisie.titre2"/></h1>
    <s:form>
      <s:textfield key="saisie.libelle" name="nom"/>
      <s:submit key="saisie.valider" action="Confirmer"/>
    </s:form>
  </body>
</html>

У рядку 12 відображається поле введення. Його вміст ініціалізується за допомогою властивості nom (name). Нагадаємо, що було сказано вище про роботу тегу <s:property>:

Тег <s:property name="властивість"> дозволяє записати значення властивості об’єкта з назвою ActionContext. У цьому об’єкті містяться:

  1. властивості класу, пов’язаного з виконаною дією;
  2. атрибути поточного запиту, позначені як <s:property name="#request['clé']">
  3. атрибути сеансу користувача, позначені як <s:property name="#session['clé']">
  4. атрибути самого додатка, позначені як <s:property name="#application['clé']">
  5. параметри, надіслані клієнтським браузером, позначені як <s:property name="#parameters['clé']">
  6. запис <s:property name="#attr['clé']"> відображає значення об’єкта, який шукається на сторінці, у запиті, сесії та додатку в такому порядку.

Тут ми маємо справу з випадком 1. Дія [Saisir] не має пов’язаного класу. Отже, властивість nom не існує. У полі введення відображається порожній рядок.

Щоб відобразити в [4] ім’я, яке було введено в [1], ми скористаємося сесією користувача.