(7-3) إنشاء صفحة Master-Detail JavaServer Faces

في الخطوات القادمة سوف ننشئ صفحات JavaServer Faces باستخدام مكونات ADF Faces لصفحة Department Employees Master Detail .

1- في مخطط الـ Page Flow ، اضغط مرتين بالماوس على أيقونة browse ليظهر Create JSF JSP wizard .

t50101 2- في حقل الـ File name يجب أن يكون browse.jspx ، حدد الخيار Create as XML Document .
t50102

ثم اضغط Ok ، الآن لديك صفحة browse.jspx  خالية . في الخطوات القليلة التالية نضيف مكونات data-bound ADF Faces إلى الصفحة .
هذه المكونات تعرض القسم مع الموظفين المنتمين لهذا القسم .

3- في شاشة المكونات على يمين الشاشة لمكتبة الـ ADF Faces ، اختر قطاع layout ثم اسحب المكون Panel Stretch Layout إلى داخل الشاشة .

t50103

4- من شاشة المكونات ، اسحب مكون Panel Splitter في وسط الشاشة (الـ المؤشر يجب أن يكون على يسار علامة منتصف الشاشة ) .

t50104

5- افتح مكون الـ Data Controls وافتح القوائم التالية HRFacadeLocal ثم اسحب DepartmentsFindAll داخل شاشة first facet .

t50105

في القائمة المنبثقة التي ستظهر اختر Forms ثم ADF Read-only Form .

t50105b 

6- في شاشة  Edit Form Fields ، حدد الخيار Include Navigation Controls .
ثم اضغط Ok .
t50106

7- في قائمة الـ Data Controls افتح departmentsFindAll ثم اختر employeesList واسحبها و ضعها داخل شاشة second facet .

t50107 في القائمة المنبثقة التي ستظهر اختر Tables ثم ADF Read-only Table t50107b

8- في المربع الحواري Edit Table Columns امسح كل الأعمدة ما عدا الاعمدة التالية :

commissionPct
email
employeeId
firstName
hiredate
jobId
lastName
phoneNumber
salary

ثم حدد الخيارين التاليين Row Selection و Sorting .

image

ثم اضغط Ok .
يجب أن تكون الصفحة كالتالي :

image

9- في شاشة الـ Structure على يمين الشاشة اختر af:panelSplitter وفي شاشة الـ Property Inspector في منتصف الشاشة ، اجعل قيمة الحقل Orientation إلى vertical .

image

10- اختر af:panelStretchLayout من شاشة الـ Structure وباستخدام Property Inspector ، في الجزء الخاص بـ Style وفي Box اجعل قيمة الحقل Width إلى 600 Pixel و الـ Height إلى 400 Pixel ، لكي يظهر جدول الـ Employees في محرر المخطط .

image

11- قلّل ارتفاع مربع الـ Department .

image

12- في شاشة الـ Structure اضغط بزر الماوس الأيمن على جدول الـ employees ثم اختر Surround With من القائمة .

image

في المربع الحواري Surround With اختر Panel Collection .

image

اضغط Ok .

13- هنا نحتاج أن يتم تحديث قطاع الـ employees في هذه الصفحة عندما يتحرك المستخدم بين الـ departments المختلفة .
عدّل الـ Partial Page Rendereing trigger لكي ينطلق يضغط المستخدم أي من تلك الزراير .

اختر جدول الـ employees .

في شاشة الـ Properties Inspector ، اضغط Edit لخاصية PartialTriggers الموجودة في Behavior . ( زرار الـ Edit موجود في أقصى يمين الحقل ) .

image

14- في المربع الحواري Edit Property افتح facet (first) ثم panelFormLayout - Departments ثم facet (footer) ثم panelGroupLayout لكي تعرض أزرار التصفح .

image

15- انقل كل الأزرار إلى قائمة Selected بالزر المشير تجاه اليمين .

image

اضغط Ok ، الآن حينما يضغط المستخدم على أي من الأزرار الأربعة فإن قائمة الـ employees سوف يتم تحديثها لتعرض الـ employees المنتمين إلى الـ department المعروض .

16- من الـ Component Palette تحت الـ Common Components اختر المكون Panel Menu Bar واسحبه إلى Facet Top في شاشة تصميم الصفحة .

image

17- اختر المكون Menu ثم ضعه داخل الـ Menu Bar .

image

18- وفي الـ Property Inspector عدّل الحقل Text إلى Options .

image

19- اضغط على التبويب Behavior وعدّل الحقل Detachable إلى true .

image

20- في الـ Structure Pane ، اضغط بزر الماوس الأيمن على af:menu ثم اختر من القائمة التي ستظهر Insert Inside af:menu ثم MenuItem .

image

21- في الـ Property Inspector وتحت التبويب Common عدّل حقل الـ Text إلى Query ، ومن القائمة المنسدلة الخاصة بالحقل Action اختر query .

image

22- اضغط حفظ الكل image .

هناك تعليقان (2):

  1. لما فتحت الداتا كونترول لم اجد شيئا

    ردحذف
    الردود
    1. لما فتحت الداتا كونترول لم اجد شيئا

      حذف

---- أتشرف بتعليقاتكم ----