(5-2) إنشاء صفحة ويب JSF

JavaServer Faces أو JSF باختصار هي تكنولوجيا JAVA EE والتي تسهل عملية تطوير تطبيقات الويب .
في هذا الدرس سوف ننشيئ صفحة JSF والتي يمكن من خلالها تشغيل و إدارة الـ business components التي أنشأناها في الدروس السابقة .
لإنشاء الصفحة سوف نستخدم Oracle ADF Faces Rich Client Components ، هذه المكونات تسمح لك  بإنشاء تطبيقات Ajax-based rich Web UI بدون كتابة كود HTML أو JavaScript .
جزء الويب في التطبيق يتم تطويره في مشروع منفصل وسوف نسميه viewcontroller ، هذا الفصل ما بين واجهة المستخدم و الـ Model layer يجعل الـ business services أكثر قابلية للاستخدام مرة أخرى .
1- سوف نبدأ بإنشاء صفحة ويب , اضغط بزر الماوس الأيمن على المشروع ViewController واختر New .
t039 2- في شاشة New Gallery ، اختر الـ Web Tier و اختر منها JSF ثم اختر JSF page من القائمة على اليمين ثم اضغط Ok .
t040 3- في المربع الحواري Create JSF Page ، غير اسم الصفحة إلى  DeptEmpPage.jspx ، وفي الاختيار Page Template اختر من القائمة Oracle Three Column Layout ، و تأكد من أن الـ Create as XML Document تم اختياره ، ثم اضغط Ok .
t041 4- سوف يتم فتح الصفحة في شاشة التحرير و بالتالي نبدأ في التصميم ، في هذا القالب تفتح تكون الصفحة عبارة عن ثلاث أعمدة ، نحن نريد عمودين فقط و بالتالي نجذف العمود الثالث .
اضغط بزر الماوس الأيمن على العمود أقصى اليمين ثم اختر delete .
t042 5- حان الآن إضافة بعض الأدوات للصفحة .
في قائمة الأدوات افتح القائمة الفرعية Layout واسحب منها Panel Accordion وضعها في العمود الأيسر . 
t043 6- اضغط على ShowDetails1 وفي الخصائص عدّل خاصية الـ Text إلى Departments .
t044 7- اضغط بزر الماوس الأيمن على هذه الأداة ثم اختار Insert After Show Details Item – Departments  ثم اختار Show Detail Item ، بهذا الاختيار سوف يتم إضافة أداة جديدة .
t045ثم عدل خاصية الـ Text إلى More Info .
t045bis 8- من الأدوات الموجودة بقائمة Layout اسحب الأداة Panel Splitter قفي العمود الثاني .
t046 9- في شاشة الخصائث عدل الخاصية Orientation إلى Vertical .
t047 10- ثم من الأدوات الموجودة بقائمة Layout اسحب Panel Collection ثم ضعها في الـ first area و التي بالأعلى من الـ splitter t048 11- أيضاً من قائمة Layout اسحب Panel Tab و ضعها في الـ second area .
t049 12- يجب أن الصفحة متلك الصورة :
t051 اضغط Save All لحفظ ما قمت به من عمل .

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

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