(8-2) إنشاء Page Flow

بطبيعة الحال تطبيقات الويب تتكون من أكثر من صفحة . في هذا الدرس سوف نضيف صفحة جديدة إلى التطبيق ، وسنستخدم ADF Task Flow للتحكم في التحرك و الانتقال بين الصفحتين .
1- في مستكشف التطبيق تحت مشروع ViewController حدد adf-config والتي تكون تحت page flows ، اضغط مرتين بالماوس لكي تفتحه في المحرر .
هنا سنعرف الانتقال في تطبيقنا .

t077

2- اسحب DeptEmpPage.jspx من مستكشق التطبيق وأضفه إلى الـ adf-config diagram .

t078

3- من الـ Component Palette اسحب View داخل adf-config diagram وأعد تسميته إلى query ، سوف تكون صفحة JSF والتي سوف تنشأ في دقيقة .

t079

4- من قائمة الـ Component اختر Control Flow Case ثم اضغط على DeptEmpPage ثم اسحب إلى صفحة الـ query .
t080 وسمّ هذا الخط goQuery .
t081

5- من قائمة الـ Component اختر Control Flow Case مرة أخرى واعكس الخط هذه المرة من صفحة query إلى DeptEmpPage .
t082

6- اضغط بزر الماوس الأيسر مرتين على query لإنشاء صفحة جديدة .
باستخدام الخيار Page Template اختر Oracle Three Column Layout في المربع الحواري Create JSF page .
ثم اضغط Ok .
t083

7- افتح Data Controls في مستكشف التطبيق ، حدد EmpDetails1 وافتحها ثم منها افتح Named Criteria ، وأخيراً اختر All Queriable Attributes واسحبها إلى العمود الذي يقع وسط الصفحة الجديدة query.jspx ، من القائمة التي ستظهر اختر Query->ADF Query Panel .
t092

8- في قائمة Data Controls اختر EmpDetails1 اسحبها و اضفها أيضاً إلى العمود الواقع في منتصف الصفحة ولكن أسفل الـ query component ، ثم اختر Form->ADF Form منالقائمة التي ستظهر .
t093

في المربع الحواري الذي سيظهر Edit Forms Details ، حدد الخيارين Include Navigation Controls و Include Submit Button ، ثم اضغط Ok .
t094

9- في شاشة الـ Structure الخاصة بهذه الصقحة حدد زرار Submit اضغط بزر الماوس الأيمن واختر
Insert after af:command:Button - Submit –> Button
t176

بواسطة property inspector عدّل خاصية الـ Text الخاصة بالزرار الذي أضفناه للتوّ إلى Back ، وفي خاصية Action اختر back ، وهذا هو ما سيجل الزرار يؤدي مهمة الانتقال التي تم تهيئتها في الـ page flow .
t096

10- الآن سوف نضيف عمليات الانتقال إلى الصفحة لتسمح لك بعمل commit و rollback . في قائمة Data Controls افتح Operations لكي تحدد عمليات commit و rollback .
اسحب Commit إلى شاشة الـ structure  قبل الـ First Button واختر من القائمة التي ستظهر Operations->ADF Button .
t162 t161

11- كرر نفس الخطوات لعملية Rollback .
t163

12- إذا تم تكبير الصفحة بالضغط مترين على التبويب Query.jspx يجب أن تكون الصفحة كالتالي :
t168

13- نعورد إلى تحرير DeptEmpPage.jspx بالضغط على التبويب الخاص به .
هناك طريقة سريعة للوصول إلى الملف الذي تريد إذا هناك العديد من الملفات ، أن تكتب اسم الصفحة في سريط البحث الذي يقع على اليمين في الأعلى في الـ JDeveloper ، ثم اضغط عليه من النتائج .
t177 t087

14- من قائمة Component اختر Button ثم اسحبه و أضفه إلى جزء Departments في الصفحة الأولى بين الزرارين First و Previous .
بدلا من ذلك يمكنك إضافة الزرار كالتالي ، اضغط بزر الماوس الأيمن على زرار First ثم اختر insert after->button .
t088 باستخدام property inspector عدّل خاصية الـ Text الخاصة بالزرار إلى Query ، وخاصية Action اختر من القائمة المنسدلة goQuery .
وهذا هو ما سيجل الزرار يؤدي مهمة الانتقال التي تم تهيئتها في الـ page flow .
t088b

15- اضغط Save All لكي يتم تخزين ما قمت بعمله ، ثم بزر الماوس الأيمن اضغط على صفحة DeptEmpPage.jspx واختر Run .

16- عندما تظهر الصفحة في متصفحك اضغط على الزرار Query لكي تنتقل إلى الصفحة الجديدة .
t169a

17- في الصفحة الجديدة Query ، اضغط على العدسة بجوار حقل الـ JobID لتظهر لك شاشة البحث .
t169b

18- ابحث عن عناوين الوظائف التي تبدأ بالحرف %A .
t169 اختر العنوان Accountant ثم اضغط Ok .
الآن اضغط زرار Search في صفحة الـ Query بكي تأتي بالنتائج بالأسفل .
t169c

19- بإمكانك الآن عمل استعلامات كما تحب و بشروط أكثر تعقيداً ، وتعدّل ما تريد من بيانات و تعمل لها commit أو rollback كما تريد .
t170 أغلق المتصفح .

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

إرسال تعليق

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