• 0
herch

نبذة عن ال Jsp Custom Tags باستخدام Netbeans

سؤال

السلام عليكم،

الJSP تتيح لنا إمكانية إضافة واستعمال وسوم مخصصة custom tags، هذه الوسوم لا تنتمي للوسوم الموجودة بالJSP، وبالتالي فنحن من يحدد تصرفها وبنيتها وكل ما يتعلق بها.

لإضافة وسم ما، يجب علينا أن نضيفه إلى tag library descriptor، وهو ملف xml يحتوي على الوسوم المخصصة التي اضفناها. هذا الملف يحتوي على المعلومات الخاصة بكل وسم: إسمه، ما هي ال attributes الخاصة به، هل لديه محتوى أم أنه وسم فارغ، ال tag handler الخاص به....

ال tag handler هي فئة نقوم بكتابتها، وكل وسم نضيفه يجب أن يكون لديه tag handler مرتبط به. هذه الفئة ترث من SimpleTagSupport، وتحتوي على الطريقة doTag() التي يتم المناداة عليها كل مرة يتم لعثور على الوسم.

post-181903-12636066686834_thumb.png

أولا ننشئ مشروع جديد، طبعا نختار web application، ونسميه مثلا customTag

post-181903-12636059743812_thumb.png

post-181903-12636060210495_thumb.png

tag library descriptor

بعد ذلك ننشئ tag library descriptor جديد. نسميه mytaglib. يجب الإشارة إلى أن كل ال tag library descriptors يجب أن تكون في المجلد WEB-INF أو أحد المجلدات بداخله، لذلك يجب التاكد من اختيار WEB-INF في الخانة Location

post-181903-12636060613261_thumb.png

post-181903-12636076949804_thumb.png

الآن حصلنا على tag library descriptor

<?xml version="1.0" encoding="UTF-8"?>
<taglib version="2.1" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd">

<tlib-version>1.0</tlib-version>
<short-name>mytaglib</short-name>
<uri>/WEB-INF/tlds/mytaglib</uri>

</taglib>

: tlib-version هو نسخة ال tag library، طبعا نحن من يحدد النسخة.

short-name : هذا العنصر اختياري، وهو فقط يعطي إسما مختصرا لل tag library، لكننا لن نحتاجه.

uri : هذا العنصر هو بمثابة المعرف identifier الخاص بهذه ال tag library، فهو الذي نستعمله في صفحات ال JSP عندما نشير لهذه ال tag lib.

الآن هذه ال tag lib تعتبر فارغة، لأن كل وسم نريد إضافته يجب يكون ممثلا بعنصر <tag>. يمكن أن نضيف هذا العنصر يدويا، لكن Netbeans سيقوم بعمل ذلك تلقائيا عندما ننشئ ال tag handler الخاص بالوسم الذي نريدإضافته.

tag handler

ال tag handler هو فئة ترث من SimpleTagSupport، وتعيد تعريف الطريقة doTag()، هذه الطريقة هي اساس ال custom tags، لأنها هي التي يتم المناداة عليها عند قراءة الوسم المخصص الذي أضفناه، وهي التي تقوم بكل العمل.

ننشئ tag handler جديد

post-181903-12636063919154_thumb.png

نسميه DateTagHandler، ونحدد الpackage الذي ينتمي إليه. يجب دائما تحديد الpackage لتفادي المشاكل.

post-181903-12636064220462_thumb.png

هذه النافذة نحدد فيها الخصائص المتعلقة بال tag library والوسم الذي نريد إضافته.

post-181903-12636064508645_thumb.png

أولا نختار الtag library المرتبط بهذا ال tag handler في الخانة "TLD File".

في الخانة "Tag Name" نحدد إسم الوسم المخصص الذي نريد إضافته.

في الإختيارات Body Content، نختار empty في المثال، لأننا لا نريد من الوسم أن يكون لديه محتوى.

وأهم شيء، يجب اختيار "Add Corresponding Tag to the Tag Library Descriptor"، حتى يقوم ال Netbeans بإضافة الوسم لل Tag Library Descriptor الذي أنشأنا سابقا.

الآن لنلق نظرة على محتوى ال Tag Library Descriptor، ستلاحظون أنه تغير. حيث تمت إضافة العنصر <tag>، الذي يحتوي بدوره على ثلاث عناصر

 <tag>
<name>date</name>
<tag-class>tags.DateTagHandler</tag-class>
<body-content>empty</body-content>
</tag>

name : وهو إسم الوسم.

tag-class : وهو ال tag handler

body-content : نوع محتوى الوسم.

الطريقة doTag()

الآن لنعد إلى ال tag handler الذي أنشأنا، أي الفئة DateTagHandler. تلاحظون أنها تحتوي على الطريقة doTag(). سنقوم الآن بكتابة الكود الذي سيتم تنفيذه كل مرة يتم العثور على الوسم date.

package tags;

import java.util.Date;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.tagext.SimpleTagSupport;

public class DateTagHandler extends SimpleTagSupport {

@Override
public void doTag() throws JspException {
JspWriter out = getJspContext().getOut();
try {
out.print(new Date());
} catch (java.io.IOException ex) {
throw new JspException("Error in DateTagHandler tag", ex);
}
}
}

داخل الطريقة doTag()، قمنا أولا باسترجاع كائن JspWriter، وهو الذي سيتيح لنا الكتابة في الصفحة JSP التي يتم تنفيذها،

ثم بعد ذلك نقوم بطباعة التاريخ.

تحديد ال Tag Library Descriptor داخل الصفحة JSP وكتابة الوسم المخصص الذي أنشأنا

في الصفحة JSP، نقوم بتحديد ال Tag Library Descriptor

<%@taglib uri="/WEB-INF/tlds/mytaglib" prefix="mytags" %>

uri : نمرر لهذه الخاصية نفس قيمة العنصر uri الموجود في ال Tag Library Descriptor

prefix : هذه الخاصية تلعب دور namespace، والهدف منها تفادي تداخل أسماء الوسوم

وننادي على الوسم الذي أنشأنا بالشكل التالي

<mytags:date/>

نكتب أولا ال prefix متبوعا بنقطتين ثم إسم الوسم.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/tlds/mytaglib" prefix="mytags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Custom tag test</h1>
<mytags:date/>
</body>
</html>

والنتيجة

post-181903-12636082344776_thumb.png

إضافة attributes إلى الوسم

الوسم الذي أنشأناه ليس لديه اي attribute. إذا كنا نريد من هذا الوسم أن يتقبل ال attributes، يجب أن نحدد ذلك في ال Tag Library Descriptor وأيضا في ال tag handler.

في ال Tag Library Descriptor، نضيف إلى العنصر <tag> عنصرا جديدا هو العنصر <attribute>. هذا العنصر يحتوي بدوره على عدة عناصر، لكننا سنستعمل فقط عنصرين، وهما:

name: يمثل إسم الattribute

required: هل هذا ال attribute إجباري أو لا، هذا العنصر ينتظر قيمة boolean

سنقوم الآن بإضافة ال attribute المسمى lng، وسيمثل اللغة التي نريد أن يكتب بها التاريخ.

وهذا هو Tag Library Descriptor بعد التعديل

<?xml version="1.0" encoding="UTF-8"?>
<taglib version="2.1" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd">
<tlib-version>1.0</tlib-version>
<short-name>mytaglib</short-name>
<uri>/WEB-INF/tlds/mytaglib</uri>

<tag>
<name>date</name>
<tag-class>tags.DateTagHandler</tag-class>
<body-content>empty</body-content>
<!--#########################-->
<attribute>
<name>lng</name>
<required>true</required>
</attribute>
<!--#########################-->
</tag>
</taglib>

الآن سنقوم بتعديل ال tag handler.

كل attribute نضيفه يجب أن يكون لديه في ال tag handler متغير باسمه وطريقة setter تغير قيمة المتغير، فمثلا فيما يتعلق بالattribute lng، سنضيف متغيرا له نفس الإسم

private String lng;

وطريقة setter تحدد قيمة ال attribute

public void setLng(String lng) {
this.lng = lng;
}

الآن لدينا الattribute. ما نريد فعله هو كتابة التاريخ حسب اللغة التي نمررها للattribute lng، لأجل ذلك سنغير الطريقة doTag() لتقوم بالتحقق من قيمة lng، وكتابة التاريخ على أساسه.

وهذا كود ال tag handler بعد التعديل

package tags;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.tagext.SimpleTagSupport;

public class DateTagHandler extends SimpleTagSupport {

private String lng;

@Override
public void doTag() throws JspException {
JspWriter out = getJspContext().getOut();
try {
Locale locale = null;
if (lng.equals("en")) {
locale = Locale.ENGLISH;
} else if (lng.equals("fr")) {
locale = Locale.FRENCH;
} else if (lng.equals("ar")) {
locale = new Locale("ar");
}
SimpleDateFormat format = new SimpleDateFormat("EEEEEEE dd MMMMMM yyyy", locale);
out.print(format.format(new Date()));
} catch (java.io.IOException ex) {
throw new JspException("Error in DateTagHandler tag", ex);
}
}

public void setLng(String lng) {
this.lng = lng;
}
}

في هذا الكود استعملنا الفئة SimpleDateFormat، لمعرفة المزيد عن هذه الفئة وكيفية تغيير شكل طباعة التاريخ، يرجى مراجعة الرابط التالي --> كيف أغير شكل طباعة التاريخ؟؟

الآن يكفي أن نحدد قيمة الattribute lng في الصفحة JSP وسيظهر لنا التاريخ بحسب اللغة

<mytags:date lng="ar"/>

post-181903-12636720377514_thumb.png

<mytags:date lng="fr"/>

post-181903-12636722419615_thumb.png

<mytags:date lng="en"/>

post-181903-12636722289207_thumb.png

المشروع مرفق على شكل ملف war

CustomTag.war.zip

تم تعديل بواسطه herch
1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

7 إجابة على هذا السؤال .

  • 0

herch

دائما تتحفنا بدروسك الرائعه .. لا يسعني الى ان اقول لك "جزاك الله خير الجزاء"

اما بالنسبة للـ Custom Tags

فهي مفيدة جدا حيث تغزل منطق البرنامج عن اكواد العرض (HTML/JSP)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

درس رائع أستاذ عصام :)

جزاك الله كل خير ،، الدرس دا من الدروس الرائعه وليست بالسهله المطلقه ،، كل الشكر :)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم ورحمة الله وبركاته

شكرا اخي وبارك الله فيك

جزاك الله عنا الخير

سلامي

اخوك

محمود سامي

تم تعديل بواسطه mahmoodsami
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شكرا شكرا :wub:

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

herch

شجعتني لارفاق تجربتي مع CustomTag

وسأترك التجربة والتقيم لك ..

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

لست مؤهلا للتقييم :lol:.

كنت هجرت ال JavaEE منذ زمن والآن أحاول تعلمه مرة أخرى.

لكن من الجيد أن الموضوع أفاد في شيء :happy:.

---------------------------------------------------------------------------

تم إضافة فقرة تتكلم عن كيفية إضافة attributes إلى الوسم. وتم إرفاق المشروع المعدل.

تم تعديل بواسطه herch
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

موضوع اكثر من رائع

سلمت يداك اخ عصام

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

من فضلك سجل دخول لتتمكن من التعليق

ستتمكن من اضافه تعليقات بعد التسجيل



سجل دخولك الان

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .