(9-2) استخدام خصائص الـ ADF Faces Framework

في هذا الدرس سوف نستخدم نحسن صفحاتنا بإضافة بعض وظائف Ajax الإضافية .

* استخدام خاصية التحديث الجزئي للصفحات ( Partial Page Refresh ) .

* استخدام القوائم المنسدلة ( Drop Down Menus ) و مكونات العمليات ( Operation Components ) .

استخدام خاصية التحديث الجزئي للصفحات

في البداية سوف نضيف خاصية التحديث التلقائي للحقل yearlySalary المعتمد على التغير في الحقل Salary .

في حين أننا لا نريد أن يعاد تحديث الصفحة بالكامل سوف نستخدم خاصية partial page refresh التحديث الجزئي للصفحات المقدم من ADF Faces .

1- افتح الملف query.jspx في المحرر وحدد الحقل Salary واضغط عليه ، في شاشة الـ property inspector عدّل قيمة الخاصية id إلى sal .

t106

2- مازلنا في Property Inspector ، اختر Behavior ثم عدّل الخاصية AutoSubmit إلى True .

t107

3- في شاشة الـ Structure حدد YearlySalary ، بطريقة أخرى يمكنك الوصول لهذا الحقل بالضغط مرتين على التبويب query.jspx لتكبير الصفحة ثم حدد الحقل YearlySalary في محرر التصميم . حدد الخاصية PartialTriggers بعد اختيار Behavior من القائمة على اليسار ، ثم اضغط على السهم الموجود على يمين تلك الخاصية و اختر Edit . t109

4- في المربع الحواري Edit Property حدد الحقل Salary وانقلها إلى القائمة على اليمين ، ثم اضغط Ok . t110

5- اضغط Save All ، ثم Run . عند ظهور الصفحة استخدم قطاع الـ query لتحديد الموظفين التي تبدأ أسمائهم بـ %A ، ثم عدّل حقل الـ Salary لأحدهم . t111

لاحظ التغيير اللّحظي YearlySalary بمجرد ترك حقل الـ Salary .

t111b

أغلق المتصفح .

استخدام القوائم المنسدلة و مكونات العمليات

في هذا الدرس سوف نضيف قائمة منسدلة إلى الصفحة ، كما سنضيف زوج من مكونات عمليات الـ ADF Faces لإضافة عملية قائمة على Javascript ، والتي سوف تصدر بيانات الجدول إلى جدول بيانات Excel أو إلى صفحة للطباعة .

1- افتح الملف DeptEmpPage.jspx في محرر التصميم ، واضغط على المكان المخصص للقوائم menus أعلى جدول Employees . ضغطة بزر الماوس الأيمن و اختر Insert Inside Facet ثم Menu . t112

2- في الـ Property Inspector عدّل قيمة الحقل Text إلى My Options . t113

3- في الـ Property Inspector اختر القطاع Behavior وعدّل الخاصية Detachable إلى true . t114

4- في شاشة الـ Structure اضغط بزر الماوس الأيمن على menu واختر Insert inside af:menu - My Options ثم Menu Item . t115

باستخدام property inspector عدّل خاصية الـ Text إلى Export to Excel . t115b

5- في حين مازلنا مع مكون القائمة المنسدلة Export to Excel في شاشة الـ structure افتح Operations الموجودة بمكونات الـ ADF Faces في قائمة الـ Component . حدد Export Collection Action Listener ثم اسحبه إلى عنصر القائمة المنسدلة Export to Excel في شاشة Structure . t116

6- في المربع الحواري الذي سيظهر اضغط على السهم الموجود على يمين الحقلExportedId واختر Edit . t117

7- في المربع الحواري Edit Property تجول في هياكل الصفحات إلى أن تصل إلى table الموجود في PanelCollection ثم اضغط عليه ، ثم اضغط Ok . t120

8- من قائمة Type اختر excelHTML . t124

ثم Ok .

9- لنقوم بإضافة عنصر جديد إلى القائمة المنسدلة ، في شاشة Structure اضغط بزر الماوس الأيمن على المكون Export to Excel ثم اختر Insert After af:commandMenuItem - Export to Excel ثم Menu Item . t124b

10- عدّل خاصية Text إلى Printable Page . t128

11- افتح Operations الموجودة بمكونات الـ ADF Faces في قائمة الـ Component ثم اختر Show Printable Page Behavior لإضافتها إلى العنصر الجديد من عناصر القائمة المنسدلة ، يمكنك سحبه و إدراجه إلى العنصر الذي أنشأته كما فعلناها مسبقاً . t129

12- اضغط Save All لحفظ ما قمنا به ثم Run .

13- عندما تظهر الصفحة حدد القائمة المنسدلة التي أنشأناها وافصلها . t133

14- اضغط على عناصر القائمة التي أنشأناها ، على سبيل المثال Export to Excel ، تحتاج إلى أن تقبل تحميل الملف في المتصفح لكي تستطيع التعامل مع ملف الـ Excel . t133b

15- رجب Printable Page .

t133cالصفحة جاهزة للطباعة . t133d

أغلق المتصفح .

ليست هناك تعليقات:

إرسال تعليق

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