6. المثال 05 – نموذج الإدخال

سنقدم مفهوم نموذج الإدخال باستخدام مثال بسيط.

6.1. مشروع NetBeans

في [1]، المشروع:

طرق العرض [Saisie.jsp] و [Confirmation.jsp]
ملف التكوين [struts.xml]
ملف الرسائل [messages.properties]
الإجراء [Confirm.java]

في [2]، صفحة الدخول

6.2. التكوين

ملف [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>
  <!-- internationalization -->
  <constant name="struts.custom.i18n.resources" value="messages" />
  <!-- default package -->
  <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>
  <!-- equity 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: تعريف الإجراء [Enter]. لا توجد فئة مرتبطة به. الاستجابة هي دائمًا العرض [/views/Enter.jsp]
الأسطر 24–26: تعريف الإجراء [Confirm]. ترتبط به فئة [actions.Confirm]. الاستجابة هي دائمًا العرض [/views/Confirmation.jsp]

6.3. إجراء [تأكيد]

ورمزه كما يلي:


package actions;
 
import com.opensymphony.xwork2.ActionSupport;
 
public class Confirmer extends ActionSupport{
 
  // model
  private String nom;
 
  // getters and setters
 
  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

تُستخدم مفاتيح الرسائل هذه في كل من طرق العرض [Entry.jsp] و[Confirmation.jsp].

6.5. طرق العرض

6.5.1. طريقة العرض [Entry.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. سيتم إرسال جميع المدخلات الموجودة داخل هذا النموذج إلى خادم الويب. ونقول إنها «مرسلة» لأن عملية HTTP المستخدمة في إرسال هذه البيانات إلى الخادم تُسمى POST. يتم إرسال البيانات في شكل سلسلة نصية: param1=value1&param2=value2&... وقد سبق أن صادفنا هذه السلسلة في القسم 3.5 من المثال 02. في كلتا الحالتين، تتم معالجة سلسلة المعلمات بنفس الطريقة بواسطة Struts 2. يتم إدخال قيم المعلمات في الإجراء المنفذ، في الحقول التي تحمل نفس أسماء المعلمات. إلى من يتم إرسال البيانات المنشورة؟ بشكل افتراضي، إلى الإجراء الذي عرض النموذج، وهو هنا الإجراء Saisir [5]. يمكنك أيضًا استخدام سمة action لتحديد إجراء آخر، وهو هنا الإجراء [Confirmer].
السطر 12: تعرض العلامة <s:textfield ...> حقل الإدخال [3]. تحدد سمة key الخاصة بها مفتاح التسمية التي سيتم عرضها على يسار حقل الإدخال. وبالتالي يتم البحث عن التسمية في ملف [messages.properties]. سمة name هي اسم المعلمة التي سيتم إرسالها. وستكون القيمة المرتبطة بهذه المعلمة هي النص الذي تم إدخاله في حقل الإدخال.
السطر 13: تعرض علامة <s:submit ...> الزر [4]. تحدد سمة key الخاصة بها مفتاح التسمية التي سيتم عرضها على الزر. وبالتالي يتم استرداد التسمية من ملف [messages.properties]. يؤدي زر الإرسال إلى إرسال النموذج إلى إجراء. ذكرنا سابقًا أن هذا كان الإجراء [Confirm] بسبب سمة action لعلامة <s:form>. تسمح لك السمة action لعلامة <s:submit> بتحديد إجراء مختلف إذا رغبت في ذلك. هنا، قمنا بتعيين الإجراء على [Confirm]. يحتوي الزر على اسم معلمة افتراضي: action:action_name، وهنا action:Confirm. القيمة المرتبطة بهذه المعلمة هي تسمية الزر. في النهاية، ستكون سلسلة المعلمة التي يتم إرسالها إلى الإجراء [Confirm] عندما ينقر المستخدم على زر [Validate] هي:

?name=xx&action:Confirm=Validate.

حيث xx هو النص الذي أدخله المستخدم في حقل الإدخال.

6.5.2. طريقة العرض [Confirmation.jsp]

من الناحية المرئية، تبدو كما يلي:

ندخل اسمًا ونرسل صفحة الإدخال. ثم نتلقى الاستجابة [1]، وهي عرض [Confirmation.jsp]. عنوان URL المعروض في [2] هو عنوان إجراء [Confirm]. في المثال أعلاه، تم إرسال السلسلة التالية:

name=bernard&action:Confirm=Validate

تسمح المعلمة action:Confirm لـ Struts 2 بتوجيه الطلب إلى الإجراء الصحيح، وهو في هذه الحالة الإجراء [Confirm]. ثم يتم إدخال قيمة المعلمة name في حقل name الخاص بالإجراء [Confirm].

فيما يلي شفرة المصدر للإجراء [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.title1 الموجودة في ملف الرسائل [1]
السطر 10: يعرض تسمية المفتاح confirm.title2 الموجودة في ملف الرسائل [3]
السطر 12: يعرض خاصية الاسم [Confirm] التي تم تنفيذها.
السطر 14: ينشئ رابطًا إلى الإجراء [Enter]. سيتم إنشاء العلامة <s:url>، التي رأيناها من قبل، من عنوان URL للمتصفح [2]. سيكون المسار هو [2] http://localhost:8084/exemple-05/actions وسيكون الإجراء هو سمة الإجراء، وفي هذه الحالة هو Enter. وبالتالي، سيكون عنوان 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]. وبالتالي يتم تنفيذ الإجراء [Submit]. دعونا نلقي نظرة على تكوينه في [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>

لا يرتبط الإجراء [Enter] بأي إجراء. لذلك، يتم عرض طريقة العرض [Entry.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، يتم عرض حقل الإدخال. يتم تهيئة محتواه باستخدام خاصية الاسم. تذكر ما تم ذكره سابقًا بشأن كيفية عمل علامة <s:property>:

تسمح لك علامة <s:property name="property"> بكتابة قيمة خاصية كائن يسمى ActionContext. يحتوي هذا الكائن على:

خصائص الفئة المرتبطة بالإجراء الذي تم تنفيذه.
سمات الطلب الحالي المشار إليها بـ <s:property name="#request['key']">
سمات جلسة عمل المستخدم، المشار إليها بـ <s:property name="#session['key']">
سمات التطبيق نفسه، المشار إليها بـ <s:property name="#application['key']">
المعلمات المرسلة من متصفح العميل، المشار إليها بـ <s:property name="#parameters['key']">
يعرض الترميز <s:property name="#attr['key']"> قيمة كائن تم البحث عنه في الصفحة، والطلب، والجلسة، والتطبيق، بهذا الترتيب.

نحن هنا في الحالة 1. لا توجد فئة مرتبطة بعملية [Enter]. وبالتالي، لا توجد خاصية name. ثم يتم عرض سلسلة فارغة في حقل الإدخال.

لعرض الاسم الذي تم إدخاله في [1] في [4]، سنستخدم جلسة عمل المستخدم.