« ساخت DukesBDay Managed Bean | صفحه اصلی | جرعه آخر firstcup »
ساخت صفحه greeting.jsp
January 6, 2008 03:07 PM
اين صفحه شامل پيغام خوش آمدگويي، نمايش سن فعلي Duke و دريافت تاريخ تولد کاربر است. مراحل ساخت صفحه چنين است:
ساخت يک صفحه خالي:
1. روي ماژول firstcup-war کليک راست نماييد.
2. از قسمت New گزينه JSP را انتخاب کنيد.
3. نام فايل JSP را greeting وارد کنيد.
4. Finish را کليک کنيد.
5. تگ head را به اين صورت تغيير دهيد:
ساخت يک صفحه خالي:
1. روي ماژول firstcup-war کليک راست نماييد.
2. از قسمت New گزينه JSP را انتخاب کنيد.
3. نام فايل JSP را greeting وارد کنيد.
4. Finish را کليک کنيد.
5. تگ head را به اين صورت تغيير دهيد:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firstcup Greeting Page</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firstcup Greeting Page</title>
</head>
6. تگ هاي ابتدا و انتهاي body را حذف کنيد.
7. عبارت زير را حذف کنيد:
7. عبارت زير را حذف کنيد:
<h1>JSP Page</h1>
8. فايل را ذخيره نماييد.
Declare نمودن Tag Library هاي JSF
همانگونه که مي دانيد تکنولوژي JavaServer Faces در واقع مجموعه اي از custom tag هاي jsp است که براي نمايش کامپوننت هاي واسط کاربري ، اعتبار سنجي و ساير موارد مربوطه به کار مي رود. Custom tag ها در tag library ها تعريف مي شوند. تکنولوژي JavaServer Faces در دو tag library تعريف مي شود:
• HTML Render Kit library که در آن همه کامپوننت هاي استاندارد واسط کاربري تعريف شده اند.
• Core tag library که تگ هاي مورد نياز براي مبدل ها (convertors) ، اعتبارسنج ها (Validators) و event listener ها و ساير توابع عملکردي اشياء تعريف مي شوند.
براي استفاده از اين تگ ها در صفحه بايد tag library را declare نماييد. در اين مثال بايد خطوط زير را در فايل greeting.jsp درست پس از تگ بسته شدن head قرار دهيد:
Declare نمودن Tag Library هاي JSF
همانگونه که مي دانيد تکنولوژي JavaServer Faces در واقع مجموعه اي از custom tag هاي jsp است که براي نمايش کامپوننت هاي واسط کاربري ، اعتبار سنجي و ساير موارد مربوطه به کار مي رود. Custom tag ها در tag library ها تعريف مي شوند. تکنولوژي JavaServer Faces در دو tag library تعريف مي شود:
• HTML Render Kit library که در آن همه کامپوننت هاي استاندارد واسط کاربري تعريف شده اند.
• Core tag library که تگ هاي مورد نياز براي مبدل ها (convertors) ، اعتبارسنج ها (Validators) و event listener ها و ساير توابع عملکردي اشياء تعريف مي شوند.
براي استفاده از اين تگ ها در صفحه بايد tag library را declare نماييد. در اين مثال بايد خطوط زير را در فايل greeting.jsp درست پس از تگ بسته شدن head قرار دهيد:
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
افزودن تگ هاي f:view و f:form
يک صفحه JSF بوسيله درختي از کامپوننت هاي واسط کاربري نمايش داده مي شود. هر صفحه JSP که از تکنولوژي JSF استفاده مي کند بايد داراي تگ view باشد. اين تگ در Core tag Library تعريف شده است و ريشه يا root درخت کامپوننت ها را مشخص مي نمايد. ساير تگ هاي JSF بايد درون تگ view تعريف شوند.
همچنين از آنجا که معمولا صفحات JSF شامل فرمي براي دريافت اطلاعات از کاربر است، معمولا بايد شامل تگ form نيز باشد. همه کامپوننت هاي موجود در يک فرم بايد درون تگ form قرار گيرند.
با مثال خود بحث را پي مي گيريم.
در ادامه declare نمودن tag library ها تگ هاي view و form را بدين صورت تعريف نماييد:
يک صفحه JSF بوسيله درختي از کامپوننت هاي واسط کاربري نمايش داده مي شود. هر صفحه JSP که از تکنولوژي JSF استفاده مي کند بايد داراي تگ view باشد. اين تگ در Core tag Library تعريف شده است و ريشه يا root درخت کامپوننت ها را مشخص مي نمايد. ساير تگ هاي JSF بايد درون تگ view تعريف شوند.
همچنين از آنجا که معمولا صفحات JSF شامل فرمي براي دريافت اطلاعات از کاربر است، معمولا بايد شامل تگ form نيز باشد. همه کامپوننت هاي موجود در يک فرم بايد درون تگ form قرار گيرند.
با مثال خود بحث را پي مي گيريم.
در ادامه declare نمودن tag library ها تگ هاي view و form را بدين صورت تعريف نماييد:
<f:view>
<h:form>
</h:form>
</f:view>
<h:form>
</h:form>
</f:view>
افزودن Output Label ها براي نمايش محتواي فقط خواندني
يکي از مهمترين و پر کاربرد ترين تگ هاي JSF تگ outputText است. greeting.jsp براي نمايش پيغام خوش آمدگويي، دستورالعمل ها، Lebel ها و سن Duke از آن استفاده مي کند. براي اين کار از پيغام هاي تعريف شده در resource bundle استفاده مي نمايد. همچنين تگ outputText اي که سن Duke را نشان مي دهد از متغير age موجود در DukesBDay bean استفاده مي کند.
در داخل تگ h:form اين کد ها را بنويسيد:
يکي از مهمترين و پر کاربرد ترين تگ هاي JSF تگ outputText است. greeting.jsp براي نمايش پيغام خوش آمدگويي، دستورالعمل ها، Lebel ها و سن Duke از آن استفاده مي کند. براي اين کار از پيغام هاي تعريف شده در resource bundle استفاده مي نمايد. همچنين تگ outputText اي که سن Duke را نشان مي دهد از متغير age موجود در DukesBDay bean استفاده مي کند.
در داخل تگ h:form اين کد ها را بنويسيد:
<h2><h:outputText value="#{bundle.Welcome}"/></h2>
<h:outputText value="#{bundle.DukeIs} "/>
<h:outputText value="#{dukesBDay.age}"/>
<p><h:outputText value="#{bundle.Instructions}"/>
<p><h:outputText value="#{bundle.YourBD}"/>
<h:outputText value="#{bundle.DukeIs} "/>
<h:outputText value="#{dukesBDay.age}"/>
<p><h:outputText value="#{bundle.Instructions}"/>
<p><h:outputText value="#{bundle.YourBD}"/>
افزودن يک کامپوننت input براي دريافت تاريخ تولد کاربر
يکي ديگر از تگ هاي پرکاربرد، تگ inputText است که يک فيلد متني براي دريافت ورودي از کاربر است. در اين مثال در صفحه greeting.jsp تاريخ تولد کاربر دريافت مي شود و مقدارش در متغير YourBD از DukesBDay Bean ريخته مي شود. بدين ترتيب:
پس از کدهاي نوشته شده از مراحل قبل، کدهاي زير را بنويسيد:
يکي ديگر از تگ هاي پرکاربرد، تگ inputText است که يک فيلد متني براي دريافت ورودي از کاربر است. در اين مثال در صفحه greeting.jsp تاريخ تولد کاربر دريافت مي شود و مقدارش در متغير YourBD از DukesBDay Bean ريخته مي شود. بدين ترتيب:
پس از کدهاي نوشته شده از مراحل قبل، کدهاي زير را بنويسيد:
<h:inputText id="userBirthday" value="#{dukesBDay.yourBD}">
</h:inputText>
</h:inputText>
انتساب يک convertor به کامپوننت ورودي
JSF شامل مجموعه از convertor ها و validator هاي استاندارد است که مي توان به کامپوننت نسبت داد. هدف از آنها اعتبار سنجي داده هاي ورودي و كنترل انطباق آنها با الگويي خاص است. در اينجا ما مي خواهيم نحوه ورود تاريخ توسط كاربر را مشخص نماييم و روي آن كنترل داشته باشيم.
به اين منظور چنين عمل کنيد:
1. تگ زير را در داخل تگ h:inputText اضافه نماييد:
JSF شامل مجموعه از convertor ها و validator هاي استاندارد است که مي توان به کامپوننت نسبت داد. هدف از آنها اعتبار سنجي داده هاي ورودي و كنترل انطباق آنها با الگويي خاص است. در اينجا ما مي خواهيم نحوه ورود تاريخ توسط كاربر را مشخص نماييم و روي آن كنترل داشته باشيم.
به اين منظور چنين عمل کنيد:
1. تگ زير را در داخل تگ h:inputText اضافه نماييد:
<f:convertDateTime pattern="MM/dd/yyyy"/>
2. براي نمايش الگوي ورود تاريخ به کاربر تگ زير را پس از تگ بسته شدن h:inputText قرار دهيد:
<h:outputText value="#{bundle.Pattern}"/>
3. براي اينکه در صورت بروز خطا هنگام conversion پيغامي به کاربر نشان داده شود لازم است مشخصه converterMessage را به تگ h:inputText اضافه نماييد. اين تگ بدين صورت خواهد شد:
<h:inputText id="userBirthday"
value="#{dukesBDay.yourBD}"
converterMessage="#{bundle.DateError}">
<f:convertDateTime pattern="MM/dd/yyyy"/>
</h:inputText>
value="#{dukesBDay.yourBD}"
converterMessage="#{bundle.DateError}">
<f:convertDateTime pattern="MM/dd/yyyy"/>
</h:inputText>
4. براي مشخص کردن جاي نمايش پيغام خطا به کاربر تگ زير را درست قبل از تگ بسته شدن h:form قرار دهيد. بدين صورت:
<p><h:message for="userBirthday" style="color:red"/>
افزودن دکمه براي submit
درست قبل از تگ message که در مرحله قبل ايجاد کرديد تگ زير را اضافه نماييد:
درست قبل از تگ message که در مرحله قبل ايجاد کرديد تگ زير را اضافه نماييد:
<p><h:commandButton value="#{bundle.Submit}" action="success"/>
در نهايت فايل را ذخيره نماييد.
پياده سازي greeting.jsp هم تمام شد. در مطلب بعد، آخرين جزء Application كه صفحه response.jsp است را خواهيم ساخت.
پياده سازي greeting.jsp هم تمام شد. در مطلب بعد، آخرين جزء Application كه صفحه response.jsp است را خواهيم ساخت.
نظرخواهی
ارسال شده توسط: ali در ساعت September 29, 2008 04:55 PM
