14. الإصدار 9: تنفيذ طبقة الويب باستخدام PrimeFaces

المتطلبات الأساسية: اقرأ "مقدمة إلى PrimeFaces" في [ref3].

السؤال 1: أنشئ مشروع Maven جديد من نوع [تطبيق ويب] حيث يتم إنشاء صفحات XHTML من المثال السابق باستخدام مكونات Primefaces. لا تقم بإجراء أي تغييرات على الفاصوليا.

تستخدم الصفحة الرئيسية مكونات <p:panel> و<p:inputText> و<p:selectOneMenu> و<p:message>:

إدخال غير صحيح:

محاكاة:

تستخدم قائمة عمليات المحاكاة مكونات <p:dataTable> و<p:commandLink>:

ستقوم طرق AJAX بتحديث المنطقة التي تحمل المعرف id='formulaire'، والتي تشمل الصفحة بأكملها (انظر السطر 11 أدناه):


<h:commandLink id="cmdTerminerSession" immediate="true" value="#{msg['form.menu.terminerSession']}" action="#{form.terminerSession}" rendered="#{sessionData.menuTerminerSessionIsRendered}"/>

بمجرد أن يبدأ تطبيقك في العمل، استبدل الصفحة [entete.xhtml] بالصفحة التالية:


<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
 
  <f:view locale="#{sessionData.locale}">
    ...
    <h:body style="background-image: url('${request.contextPath}/resources/images/standard.jpg');">
      <h:form id="formulaire">
        <!-- entete -->
        <ui:include src="entete.xhtml" />
        <!-- content -->
        <ui:insert name="part1" >
          Gestion des assistantes maternelles
        </ui:insert>
        <ui:insert name="part2"/>
      </h:form>
    </h:body>
  </f:view>
</html>

السطر 15: شريط قوائم PrimeFaces،
السطر 16: خيار قائمة في هذا الشريط،
السطر 17: عنصر في خيار القائمة هذا.

لا يتأثر النموذج بهذا التغيير. العرض الجديد هو كما يلي: