(3-6) إنشاء Master Detail Order Page

1- في الـ Application Navigator اضغط بز رالماوس الأبمن على ViewController ثم اختر New .

tq00201

2- في المربع الحواري New Gallery اضغط على التبيويب Current Project Technologies
ثم اختر Web Tier | JSF واختر JSF Page من القائمة الأخرى ، ثم اضغط Ok .

tq00202

3- ضع القيمة OrdersAndStocks في الحقل File Name ، ثم اضغط Ok .

tq00203

4- الصفحة الجديدة تم فتحها في محرر التصميم .

tq00204

5- من الـ Component Palette وباستخدام مكتبة الـ ADF Faces | Layout اسحب
Panel Tabbed وضعها في الصفحة .

tq00205x

وفي الـ Property Inspector وباستخدام التبويب Box وعند الـ Style عدّل الـ Width ليكون
100 Percent والـ Height ليكون 600 Pixel .

tq00205

6- حدد الـ showDetailItem وفي الـ Property Inspector وباستخدام التبويب Common اكتب MDOrders في الحقل text .

tq00206

7- في الـ Application Navigator افرد التبويب Data Controls ومنها الـ FODModuleDataControl .

tq00207

8- اسحب الـ OrdersView1 داخل التصميم في الصفحة ومن القائمة Create اختر
Forms | ADF Read-only Form .

tq00208

9- في المربع الحواري Edit Form Fields حدد الخيار Include Navigation Controls ، ثم حدد جميع الحقول ماعدا OrderId و OrderDate و OrderStatusCode و OrderTotal و CustomerId ، ثم اضغط الزر Delete ثم Ok .

tq00209

10- في جزء الـ Data Controls افرد الـ OrdersView1 اسحب الـ OrderItemsView2 إلى الجزء السفلي من الـ Form .

tq00210

11- ومن القائمة Create اختر Tables | ADF Read-only Table .

tq00211

12- في المربع الحواري Edit Table Columns حدد كل من الخيارين Row Selection و Sorting ، ثم حدد كل الحقول ماعدا LineItemId و Quantity و UnitPrice و ProductName ، ثم اضغط الزر Delete ثم Ok .

tq00212

13- وبالجدول الجديد الذي اخترناه في الـ Property Inspector وباستخدام التبويب Box في الـ Style ، أدخل القيم 100 Percent للـ Width و 100 Pixel للـ Height .

tq00213

حدد التبيويب Common واكتب OrdItem للحقل Id .

tq00213b

14- يجب أن تكون الصفحة كالتالي :

tq00214

15- اضغط Save All .

16- اضغط بزر الماوس الأيمن على الصفحة واختر Run .

tq00216

17- ثم يتم تحميل الصفحة في المتصفح :

tq00217

18- تجول بين السجلات بالزراير الموجودة .

tq00218

19- جرب خاصية الـ sorting الخاصة بالأعمدة .

tq00219

20- أغلق المتصفح ،
إلى هنا نكون قد أنشأنا صفحة تعمل بشكل جيد ، وسوف نضيف في الدرس القادم بعض المكونات الرسومية كـ
bart chart و gauge و gantt chart و geographic info وإنشاء Pivot Table .

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

إرسال تعليق

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