يجب علينا أولاً أن :
* نصمم الـ Basic Layout (الشكل الأساسي) الخاص بالصفحة .
* نهيء الـ page title (عنوان الصفحة) .
تصميم الـ Basic Layout الخاص بالصفحة
لإنشاء الـ basic layout للصفحة ، اتبع الخطوات التالية :
1- اضغط بزر المواس الأيمن على المشروع adffaces ثم اختر New .
2- في الـ New Gallery وفي قائمة الـ categories اختر Web Tier | JSF ثم اختر من القائمة على اليمين العنصر JSF Page ، ثم اضغط Ok .
3- في المربع الحواري Create JSF Page اترك قيمة الـ file name كما هي untitled1.jspx وتأمد من تحديد الخيار (Create as XML Document (*.jspx .
اختر simple من قائمة الحقل Page Template ، ثم اضغط Ok .
4- الـ untitled1.jspx تظهر كعنصر جديد في الـ Application Navigator وتفتح في محرر التصميم .
5- من الـ component palette وباستخدام ADF Faces | Layout library اسحب
Panel Splitter وضعه في center facet .
6- اسحب Panel Splitter آخر وضعه في الـ second facet في الـ panel splitter المنشأ في الخطوة السابقة .
في الـ Structure pane افرد الـ panelSplitter ثم اختر showDetailItem .
وباستخدام الـ property inspector ، عدّل الـ Orientation إلى vertical .
7- اسحب Panel Accordion وضعه في first facet في الجانب الأيسر من panel splitter .
وفي الـ Structure pane اختر showDetailItem وباستخدام الـ property inspector عدّل الـ Text إلى My Cart .
8- اضغط داخل الـ accordion الذي أنشأناه بزر الماوس الأيمن واختر من القائمة
Insert after Show Detail Item | Show Detail Item .
باستخدام التبويب Common في الـ Property Inspector عدّل حقل الـ Text إلى More Info .
9- اسحب Panel Collection وضعه في الجانب الأيمن first facet .
10- اسحب Panel Tabbed في الجانب الأيمن second facet .
وفي الـ Structure pane حدد المكون af:showDetailItem الذي أنشأناه وفي الـ :
roperty Inspector ، عدّل قيمة حقل الـ Text إلى Product Details .
11- اضغط بزر الماوس الأيمن على التبويب Product Details ثم اختر :
Insert After Show Detail Item | Show Detail Item
وفي الـ Structure pane حدد المكون af:showDetailItem الذي أنشأناه وفي الـ :
roperty Inspector ، عدّل قيمة حقل الـ Text إلى Rating .
12- يجب أن تكون الصفحة كالتالي :
13- اضغط Save All ، لحفظ عملك .
14- اضغط بزر الماوس الأيمن على الصفحة واختر Run من القائمة لتحميل الصفحة في المتصفح الخاص بك .
15- لتكون الصفحة في متصفحك كالتالي :
16- حاول تحريك إطارات المكونات واختبر التبويبات .
17- جرب الـ accordion بالضغط على علامة + الموجودة في More Info .
18- اترك المتصفح كما هو و عد إلى الـ JDeveloper .
تهيئة الـ page title
1- اضغط على التبويب simple.jspx .
2- في مصمم الصفحة حدد المكون title .
3- في الت Property Inspector افرد Style وباستخدام التبويب Text وفي الحقل Color اختر اللون الذي تحبه (Aqua في هذا المثال) .
وفي الحقل Size اختر large .
4- اضغط Save All .
5- عد إلى المتصفح واضغط الزر Refresh ، وستظهر التعديلات على الصفحة :
6- اترك المتصفح كما هو و عد إلى الـ JDeveloper .
7- افتح الصفحة untitled1 في محرر التصميم .
8- في الـ Structure pane حدد الـ pageTemplate tag وفي الـ Property Inspector عدّ الخاصية title إلى Store Front .
9- اضغط Save All .
10- عد إلى المتصفح واضغط الزر Refresh ، وستظهر التعديلات على الصفحة :
11- أغلق المتصفح وعد إلى الـ JDeveloper .
المشاركات
ليست هناك تعليقات:
إرسال تعليق
---- أتشرف بتعليقاتكم ----