(6-2) ربط الـ Data controls بـ صفحة الـ JSF

في هذا الدرس سوف نقوم بالربط ين الـ business components التي أنشأناها بواجهة المستخدم .
هذا الربط من السهولة بمكان ، حيث تتم تلك العملية عن طريق drag and drop - السحب و الانزلاق – ، خلف هذه العملية يقوم الـ ADF Model layer بهذا الربط .
1- في مستكشف التطبيق قم بفتح قائمة Data Controls ومنها أيضاً افتح AppModuleDataControl لتظهر لك الـ business services التي تم عملها مسبقاً .
t104 2- اسحب Departments1View1 وضعها في الـ Departments التي في صفحة الـ JSF التي أنشأناها ، ثم اختر من القائمة التي تظهر Forms->ADF Read-Only Form .
t055 3- في المربع الحواري Edit Form fields حدد الخيار Include Navigation Controls ثم اضغط Ok ثم Ok .
t056 4- بالعودة إلى مستكشف التطبيق و في قائمة الـ Data Controls افتح Departments1View1 لعرض الحقول التي تحتويها و أيضاً Employees1View3 .
t057 5- اسحب الـ Employees1View3 وضعها في الـ Panel Collection في صفحة الـ JSF واختر الاختيار التالي Tables->ADF Read-Only Table .
t058 6- ثم في المربع الحواري Edit Table Columns حدد الخيارات الثلاثة الموجودة Row Selection, Sorting, Filtering ، ثم اضغط Ok .
t059_Alt 7- للمرة الثانية اسحب Employees1View3 و لكن هذه المرة في التبويب أسفل الجزء الأيمن من صفحة الـ JSF واختر الخيار التالي Form->ADF Form .
t060 8- وفي المربع الحواري Edit Form Fields حدد الخيار Include Submit Button ، ثم باستخدام الماوس و زرار Shift حدد الثلاث حقول الأخيرة في القائمة CommissionPCT, ManagerId, DepartmentID ثم احذفهم بالضغط على الزرار الأحمر X ، ثم اضغط Ok .
t061 9- يجب أن تكون الصفحة كالتالي :
t062 10- اضغط على Save All ، ثم اضغط بزر الماوس الأيمن ، ثم اختر Run .
وبالتالي سوف يتم عمل compile للمشروع ثم يتم بناءه ثم باستخدام الـ WebLogic Server المتضمن يتم تشغيل المشروع , وصوف يفتح متصفح الإنترنت الخاص بك و يعرض الصفحة ، يمكنك السير مع خطوات التشغيل تلك خطوة بخطوة كما تحب .
t063 بمجرد فتح الصفحة في المتصفح بإمكانك عرض البيانات و التحرك بين الـ departments و عرض بياناتها كما انه بإمكانك تحريك الـ splitter لكي تشاهد البيانات كاملة ، وستلاحظ تغير البيانات المعروضة على يمين الصفحة تبعاً للـ department المحدد .
t064 11- حاول تغيير الحقل HireDate بتاريخ غير صحيح كـ 11/11/123 ولاحظ رسالة الخطأ التي سوف تظهر لك إذا حاولت الخروج منه .
t066 باستخدام Clock Icon بجول حقل الـ HireDate يمكنك اختيار التاريخ بدون  حدوث أي خطأ في الصيغة .
t067 12- عدّل قيمة حقل الـ Salary إلى قيمة تكسر قواعد الصلاحية لهذا الحقل كـ –9 ثم اضغط الزرار Submit لتظهر رسالة الخطأ التي حدّدتها مسبقاً أثناء التطوير .
t068 13- اختر على سبيل المثال الـ department الـ 50 ، ولاحظ أنه بإمكانك أن تنتقل بين بيانات الموظفين ، كما يمكنك الضغط على أحد الاعمدة المعروضة أمامك و ترتيبها أبجدياً أو غير ذلك .
t069 14- اضغط على رأس أي عمود و حركه و أعد ترتيبه بين الأعمدة كما تحب بكل سهولة .
t070 15- في الـ Filter field أو حقل المصفاه أعلى عمود الـ First Name اكتب %B ثم اضغط Enter لكي يتم عمل تصفيه للبيانات لإظهار الأسماء التي تبدأ بالحرف B فقط .
t071 16- يمكنك تجربة باقي الخصائص لاكتشاف مميزاتها ووظائفها .
أغلق المتصفح و عد إلى JDeveloper .
17- سوف نغير جدول الموظفين employees في صفحتنا لإضافة خاصية الاستعلام في الأعمدة . اختار Employees Table في صفحة الـ JSF و عدّل الخاصية Column Selection إلى Single .
t072 18- لإضافة رسم بياني للصفحة ، وهذا باستخدام مجموعة ADF Data Visualization الخاصة بـ JSF components .
افتح قائمة More Info ، ثم اسحب Employees1View3 و ضعها داخل More Info ، ثم اختر …Graph .
الـ Graph هو جزء من ADF Faces Data Visualization .
t073 19- في المربع الحواري Component Gallery اختر pie من القائمة على اليسار ثم اخترمرة أخرى  pie من مجموعة الـ Graph type ثم اضغط Ok .
t074 20- في المربع الحواري Create Pie Graph اختر Salary من قائمة Pie ثم اختر LastName من قائمة Slices ، ثم اضغط Ok .
t075 21- اضغط على Save All ، ثم اضط على الصفحة بزر الماوس الايمن و اختر Run ، لاحظ التعديلات التي سوف تظهر بعد الإضافة الجديدة .
عندما تفتح الـ More Info لاحظ الرسم البياني الرسوم فيها و الرسالة التي تظهر عند تمرير الماوس عليها .
t076

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

  1. أخي الكريم جزاك الله خيرا على ما تقدمه من شرح رائع
    جعله الله في ميزان حسناتك ان شاء الله

    كان عندي استفسار اخي

    فقد قمت بالخوات السابقه كلها

    وعندما حاولت ان اعمل run لم يظهر شئ ولم تفتح صفحة الويب
    برغم انه اخبرني ان compile sucess

    وعندما حاولت ان ارى الصفحة على الويب من خلال

    perivwe in web

    فتحت الصفحة لكنها خاليه

    وعندما حاولت ان ارى source file على صفحة الويب

    وجدت بها كل الحقول والاوامر لكن الصفحة لا تظهر

    هل تخبرني ما السبب

    وجزاك الله خيرا

    ردحذف
  2. نفس المشكلة ظهرت عندي ...
    مع العلم اني أستخدم الاصدار الأحدث 11.1.1.6.0 فهل لهذا علاقة بالموضوع
    مع جزيل الشكر والامتنان

    ردحذف

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