في هذا الدرس سوف نستخدم نحسن صفحاتنا بإضافة بعض وظائف Ajax الإضافية .
* استخدام خاصية التحديث الجزئي للصفحات ( Partial Page Refresh ) .
* استخدام القوائم المنسدلة ( Drop Down Menus ) و مكونات العمليات ( Operation Components ) .
استخدام خاصية التحديث الجزئي للصفحات
في البداية سوف نضيف خاصية التحديث التلقائي للحقل yearlySalary المعتمد على التغير في الحقل Salary .
في حين أننا لا نريد أن يعاد تحديث الصفحة بالكامل سوف نستخدم خاصية partial page refresh التحديث الجزئي للصفحات المقدم من ADF Faces .
1- افتح الملف query.jspx في المحرر وحدد الحقل Salary واضغط عليه ، في شاشة الـ property inspector عدّل قيمة الخاصية id إلى sal .
2- مازلنا في Property Inspector ، اختر Behavior ثم عدّل الخاصية AutoSubmit إلى True .
3- في شاشة الـ Structure حدد YearlySalary ، بطريقة أخرى يمكنك الوصول لهذا الحقل بالضغط مرتين على التبويب query.jspx لتكبير الصفحة ثم حدد الحقل YearlySalary في محرر التصميم . حدد الخاصية PartialTriggers بعد اختيار Behavior من القائمة على اليسار ، ثم اضغط على السهم الموجود على يمين تلك الخاصية و اختر Edit . 
4- في المربع الحواري Edit Property حدد الحقل Salary وانقلها إلى القائمة على اليمين ، ثم اضغط Ok . 
5- اضغط Save All 
، ثم Run . عند ظهور الصفحة استخدم قطاع الـ query لتحديد الموظفين التي تبدأ أسمائهم بـ %A ، ثم عدّل حقل الـ Salary لأحدهم . 
لاحظ التغيير اللّحظي YearlySalary بمجرد ترك حقل الـ Salary .
أغلق المتصفح .
استخدام القوائم المنسدلة و مكونات العمليات
في هذا الدرس سوف نضيف قائمة منسدلة إلى الصفحة ، كما سنضيف زوج من مكونات عمليات الـ ADF Faces لإضافة عملية قائمة على Javascript ، والتي سوف تصدر بيانات الجدول إلى جدول بيانات Excel أو إلى صفحة للطباعة .
1- افتح الملف DeptEmpPage.jspx في محرر التصميم ، واضغط على المكان المخصص للقوائم menus أعلى جدول Employees . ضغطة بزر الماوس الأيمن و اختر Insert Inside Facet ثم Menu . 
2- في الـ Property Inspector عدّل قيمة الحقل Text إلى My Options . 
3- في الـ Property Inspector اختر القطاع Behavior وعدّل الخاصية Detachable إلى true . 
4- في شاشة الـ Structure اضغط بزر الماوس الأيمن على menu واختر Insert inside af:menu - My Options ثم Menu Item . 
باستخدام property inspector عدّل خاصية الـ Text إلى Export to Excel . 
5- في حين مازلنا مع مكون القائمة المنسدلة Export to Excel في شاشة الـ structure افتح Operations الموجودة بمكونات الـ ADF Faces في قائمة الـ Component . حدد Export Collection Action Listener ثم اسحبه إلى عنصر القائمة المنسدلة Export to Excel في شاشة Structure . 
6- في المربع الحواري الذي سيظهر اضغط على السهم الموجود على يمين الحقلExportedId واختر Edit . 
7- في المربع الحواري Edit Property تجول في هياكل الصفحات إلى أن تصل إلى table الموجود في PanelCollection ثم اضغط عليه ، ثم اضغط Ok . 
8- من قائمة Type اختر excelHTML . 
ثم Ok .
9- لنقوم بإضافة عنصر جديد إلى القائمة المنسدلة ، في شاشة Structure اضغط بزر الماوس الأيمن على المكون Export to Excel ثم اختر Insert After af:commandMenuItem - Export to Excel ثم Menu Item . 
10- عدّل خاصية Text إلى Printable Page . 
11- افتح Operations الموجودة بمكونات الـ ADF Faces في قائمة الـ Component ثم اختر Show Printable Page Behavior لإضافتها إلى العنصر الجديد من عناصر القائمة المنسدلة ، يمكنك سحبه و إدراجه إلى العنصر الذي أنشأته كما فعلناها مسبقاً . 
12- اضغط Save All لحفظ ما قمنا به ثم Run .
13- عندما تظهر الصفحة حدد القائمة المنسدلة التي أنشأناها وافصلها . 
14- اضغط على عناصر القائمة التي أنشأناها ، على سبيل المثال Export to Excel ، تحتاج إلى أن تقبل تحميل الملف في المتصفح لكي تستطيع التعامل مع ملف الـ Excel . 
15- رجب Printable Page .
الصفحة جاهزة للطباعة . 
أغلق المتصفح .
المشاركات
ليست هناك تعليقات:
إرسال تعليق
---- أتشرف بتعليقاتكم ----