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

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