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

[herch 475]

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

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

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

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

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

tag library descriptor

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

الآن حصلنا على 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 جديد

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

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

أولا نختار ال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>

والنتيجة

إضافة 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"/>

<mytags:date lng="fr"/>

<mytags:date lng="en"/>

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

CustomTag.war.zip

تم تعديل 16 Jan 2010 بواسطه herch

[العيافـي 120]

herch

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

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

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

[cIs.Falcon 12]

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

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

[mahmoodsami 6]

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

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

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

سلامي

اخوك

محمود سامي

تم تعديل 16 Jan 2010 بواسطه mahmoodsami

[herch 475]

شكرا شكرا :wub:

[العيافـي 120]

herch

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

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

[herch 475]

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

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

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

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

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

تم تعديل 16 Jan 2010 بواسطه herch

[com.jkelany 426]

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

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