Skip to content

6. Voorbeeld 05 – Het invoerformulier

Aan de hand van een eenvoudig voorbeeld introduceren we het begrip invoerformulier.

6.1. Het NetBeans-project

In [1] omvat het project:

  • de weergaven [Saisie.JSP], [Confirmation.JSP]
  • het configuratiebestand [struts.xml]
  • het berichtenbestand [messages.properties]
  • de actie [Confirmer.java]

In [2], de invoerpagina

6.2. Configuration

Het bestand [struts.xml] ziet er als volgt uit:


<?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>
  <!-- internationalisering -->
  <constant name="struts.custom.i18n.resources" value="messages" />
  <!-- standaardpakket -->
  <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>
  <!-- actiepakket -->
  <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>
  • regel 20: het actiepakket van URL /actions/Action.
  • regels 21-23: definiëren de actie [Saisir]. Hieraan is geen klasse gekoppeld. De respons is altijd de weergave [/vues/Saisie.JSP]
  • regels 24-26: definiëren de actie [Confirmer]. De klasse [actions.Confirmer] is eraan gekoppeld. Het antwoord is altijd de weergave [/vues/Confirmation.JSP]

6.3. De actie [Confirmer]

De code ervan is als volgt:


package actions;

import com.opensymphony.xwork2.ActionSupport;

public class Confirmer extends ActionSupport{
  
  // sjabloon
  private String nom;
  
  // getters en setters

  public String getNom() {
    return nom;
  }

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

De klasse heeft slechts één veld, namelijk dat op regel 8 met de bijbehorende get- en set-methoden.

6.4. Het berichtenbestand

De inhoud van [messages.properties] is als volgt:


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

Deze berichtcodes worden gebruikt in de twee weergaven [Saisie.JSP] en [Confirmation.JSP].

6.5. De weergaven

6.5.1. De weergave [Saisie.JSP]

Ziet er visueel als volgt uit:

De broncode is als volgt:


<%@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>
  • regel 7: geeft het sleutelbericht saisie.titre1 (Invoer) [1] weer.
  • regel 10: geeft het sleutelbericht saisie.titre2 (Invoer) [2] weer.
  • regels 11, 14: de tag <s:form> introduceert een HTML-formulier. Alle invoer binnen dit formulier wordt naar de webserver verzonden. Men zegt dat ze postées zijn, omdat de HTTP-bewerking die bij deze gegevensverzending naar de server plaatsvindt, POST heet. De verzonden gegevens worden in de vorm van een tekenreeks param1=valeur1&param2=valeur2& verzonden... We zijn deze tekenreeks al tegengekomen in paragraaf 3.5 van voorbeeld 02. In beide gevallen wordt de parameterreeks op dezelfde manier verwerkt door Struts 2. De waarden valeuri van de parameters parami worden in de uitgevoerde actie geïnjecteerd, in velden met dezelfde namen als de parameters parami. Naar wie worden de verzonden gegevens gestuurd? Standaard naar de actie die het formulier heeft weergegeven, in dit geval de actie Saisir [5]. Men kan ook het attribuut action gebruiken om een andere actie aan te geven, in dit geval de actie [Confirmer].
  • regel 12: de tag <s:textfield ...> geeft het invoerveld [3] weer. Het attribuut key geeft de sleutel aan van de tekst die links van het invoerveld moet worden weergegeven. De tekst wordt dus opgezocht in het bestand [messages.properties]. Het attribuut name is de naam van de parameter die wordt verzonden. De waarde die aan deze parameter wordt toegekend, is de tekst die in het invoerveld is ingevoerd.
  • regel 13: de tag <s:submit ...> geeft de knop [4] weer. Het bijbehorende attribuut key geeft de sleutel aan van de tekst die op de knop moet worden weergegeven. De tekst wordt dus opgezocht in het bestand [messages.properties]. Een knop van het type submit zorgt ervoor dat het formulier wordt verzonden naar een actie. We hebben hierboven al vermeld dat dit de actie [Confirmer] was vanwege het attribuut action van de tag <s:form>. Met het attribuut action van de tag <s:submit> kan eventueel een andere actie worden opgegeven. Hier hebben we de actie [Confirmer] opgegeven. De knop heeft een standaardparameternaam: action:nom_action, in dit geval action:Confirmer. De waarde die aan deze parameter is gekoppeld, is de tekst op de knop. Uiteindelijk zal de reeks parameters die naar de actie [Confirmer] wordt verzonden wanneer de gebruiker op de knop [Valider] klikt, als volgt zijn: 

?nom=xx&action:Confirmer=Valider.

waarbij xx de tekst is die de gebruiker in het invoerveld heeft ingevoerd.

6.5.2. De weergave [Confirmation.JSP]

Ziet er visueel als volgt uit:

We voeren een naam in en bevestigen de invoerpagina. We krijgen dan het antwoord [1], dat van de weergave [Confirmation.JSP]. De URL die wordt weergegeven in [2] is die van de actie [Confirmer]. In het bovenstaande voorbeeld is de volgende tekenreeks verzonden:

nom=bernard&action:Confirmer=Valider

Met de parameter action:Confirmer kan Struts 2 het verzoek naar de juiste actie leiden, in dit geval de actie [Confirmer]. De waarde van de parameter nom wordt vervolgens ingevoerd in het veld nom van de actie [Confirmer].

De broncode van de actie [Confirmation.JSP] is als volgt:


<%@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>
  • regel 7: geeft de sleutelnaam confirm.titre1 weer die is gevonden in het berichtenbestand [1]
  • regel 10: toont de sleutelnaam confirm.titre2 die is gevonden in het berichtenbestand [3]
  • regel 12: geeft de eigenschap nom weer van de actie [Confirmer] die is uitgevoerd.
  • regel 14: maakt een koppeling naar de actie [Saisir]. De tag <s:url>,, die al is aangetroffen, wordt gegenereerd op basis van de URL en [2] van de browser. Het pad is dat van [2] http://localhost:8084/exemple-05/actions en de actie is die van het attribuut action, in dit geval Saisir. De URL van de link is dus http://localhost:8084/exemple-05/actions/Saisir.action. De tekst van de link is de omschrijving die gekoppeld is aan de sleutel confirm.retour [4].

6.6. De tests

Hier zijn twee verzoeken:

In [1] voer je een naam in en klik je op ‘Bevestigen’. In [2] zie je de bevestigingspagina.

In [3] volgt men de link terug naar het formulier. In [4] het resultaat. Alles is uitgelegd, behalve de overgang van [3] naar [4]. Waarom staat de naam die we hadden ingevoerd niet in [4]?

De link in [3] is een link naar URL en [http://localhost:8084/exemple-05/actions/Saisir.action]. De actie [Saisir] wordt dus uitgevoerd. Laten we de configuratie ervan bekijken in [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>

De actie [Saisir] is niet gekoppeld aan een actie. Daarom wordt de weergave [Saisie.JSP] onmiddellijk weergegeven. Laten we de code van deze weergave eens bekijken:


<%@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>

Op regel 12 wordt het invoerveld weergegeven. De inhoud ervan wordt geïnitialiseerd met de eigenschap nom (name). Laten we even terugkomen op wat hierboven is geschreven over de werking van de tag <s:property>:

Met de tag <s:property name="eigenschap"> kan de waarde van een eigenschap van een object met de naam ActionContext worden vastgelegd. In dit object bevinden zich:

  1. de eigenschappen van de klasse die gekoppeld is aan de actie die is uitgevoerd.
  2. de attributen van de huidige verzoek, aangeduid met <s:property name="#request['clé']">
  3. de attributen van de sessie van de gebruiker, aangeduid met <s:property name="#session['clé']">
  4. de eigenschappen van de applicatie zelf, aangeduid met <s:property name="#application['clé']">
  5. de door de clientbrowser verzonden parameters, aangeduid met <s:property name="#parameters['clé']">
  6. de notatie <s:property name="#attr['clé']"> geeft de waarde weer van een object dat wordt opgezocht in de pagina, de verzoek, de sessie en de applicatie, in die volgorde.

We hebben hier te maken met geval 1. De actie [Saisir] heeft geen bijbehorende klasse. De eigenschap nom bestaat dus niet. Er wordt dan een lege tekenreeks weergegeven in het invoerveld.

Om in [4] de naam weer te geven die in [1] is ingevoerd, gebruiken we de sessie van de gebruiker.

https://stahe.github.io
Deze cursus-tutorial, geschreven door Serge Tahé, wordt aan het publiek ter beschikking gesteld volgens de voorwaarden van de Creative Commons Naamsvermelding – Geen commercieel gebruik – Gelijk delen 3.0 Ongewijzigd.