(5-5) إنشاء صفحة باستخدام الـ Page Template

يجب علينا أولاً أن :

* نصمم الـ Basic Layout (الشكل الأساسي) الخاص بالصفحة .
* نهيء الـ page title (عنوان الصفحة) .

تصميم الـ Basic Layout الخاص بالصفحة

لإنشاء الـ basic layout للصفحة ، اتبع الخطوات التالية :

1- اضغط بزر المواس الأيمن على المشروع adffaces ثم اختر New .

tb00101

2- في الـ New Gallery وفي قائمة الـ categories اختر Web Tier | JSF ثم اختر من القائمة على اليمين العنصر JSF Page ، ثم اضغط Ok .

tb00102

3- في المربع الحواري Create JSF Page اترك قيمة الـ file name كما هي untitled1.jspx وتأمد من تحديد الخيار (Create as XML Document (*.jspx .
اختر simple من قائمة الحقل Page Template ، ثم اضغط Ok .

tb00103

4- الـ untitled1.jspx تظهر كعنصر جديد في الـ Application Navigator وتفتح في محرر التصميم .

tb00104

5- من الـ component palette وباستخدام ADF Faces | Layout library اسحب
Panel Splitter وضعه في center facet .

tb00105l

6- اسحب Panel Splitter آخر وضعه في الـ second facet في الـ panel splitter المنشأ في الخطوة السابقة .

tb00106

في الـ Structure pane افرد الـ panelSplitter ثم اختر showDetailItem .
وباستخدام الـ property inspector ، عدّل الـ Orientation إلى vertical .

tb00106b

7- اسحب Panel Accordion وضعه في first facet في الجانب الأيسر من panel splitter .

tb00107

وفي الـ Structure pane اختر showDetailItem وباستخدام الـ property inspector عدّل الـ Text إلى My Cart .

tb00107b

8- اضغط داخل الـ accordion الذي أنشأناه بزر الماوس الأيمن واختر من القائمة
Insert after Show Detail Item | Show Detail Item .

tb00108

باستخدام التبويب Common في الـ Property Inspector عدّل حقل الـ Text إلى More Info .

tb00108b

9- اسحب Panel Collection وضعه في الجانب الأيمن first facet .

tb00109

10- اسحب Panel Tabbed في الجانب الأيمن second facet .

tb00110

وفي الـ Structure pane حدد المكون af:showDetailItem الذي أنشأناه وفي الـ :
roperty Inspector
، عدّل قيمة حقل الـ Text إلى Product Details .

tb00110b

11- اضغط بزر الماوس الأيمن على التبويب Product Details ثم اختر :
Insert After Show Detail Item | Show Detail Item

tb00111

وفي الـ Structure pane حدد المكون af:showDetailItem الذي أنشأناه وفي الـ :
roperty Inspector
، عدّل قيمة حقل الـ Text إلى Rating .

tb00111b

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

tb00112

13- اضغط Save All ، لحفظ عملك .

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

tb00114

15- لتكون الصفحة في متصفحك كالتالي :

tb00115

16- حاول تحريك إطارات المكونات واختبر التبويبات .

tb00116

17- جرب الـ accordion بالضغط على علامة + الموجودة في More Info .

tb00117

18- اترك المتصفح كما هو و عد إلى الـ JDeveloper .

تهيئة الـ page title

1- اضغط على التبويب simple.jspx .

tb00201

2- في مصمم الصفحة حدد المكون title .

tb00202

3- في الت Property Inspector افرد Style وباستخدام التبويب Text وفي الحقل Color اختر اللون الذي تحبه (Aqua في هذا المثال) .

tb00203

وفي الحقل Size اختر large .

tb00203b

4- اضغط Save All .

5- عد إلى المتصفح واضغط الزر Refresh ، وستظهر التعديلات على الصفحة :

tb00206

6- اترك المتصفح كما هو و عد إلى الـ JDeveloper .

7- افتح الصفحة untitled1 في محرر التصميم .

tb00208

8- في الـ Structure pane حدد الـ pageTemplate tag وفي الـ Property Inspector عدّ الخاصية title إلى Store Front .

tb00209

9- اضغط Save All .

10- عد إلى المتصفح واضغط الزر Refresh ، وستظهر التعديلات على الصفحة :

tb00212

11- أغلق المتصفح وعد إلى الـ JDeveloper .

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

إرسال تعليق

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